Merge branch 'upd' into 'master'

Updated to newest version with non-contribution page

See merge request monero-project/ccs-front!26

_layouts/fr.html

@@ -13,36 +13,6 @@ layout: base
       </div>
    </div>
 </div>
-      
-       <!-- FULL WIDTH BLOCK -->                   
-                   <!--div class="row center-xs">
-                       <div class="tab col-xs-12">
-                            <input id="tab-one" type="checkbox" name="tabs" class="accordion">
-                            <label for="tab-one" class="accordion">Contribute</label>
-                            <div class="tab-content">
-                                <div class="row start-xs">
-                                    <div class="col-xs-12">
-                                        <p>In order to contribute to the cause of <strong>{{page.title}}</strong> all you have to do is the following:</p>
-                                        <p>Have a valid Monero address. If you don't have one, you can read on getting started!</p>
-                                        <p>Send the amount of XMR that you wish to contribute to the address: <strong>{{page.address}}</strong></p>
-                                        <p>Make sure that you enter a payment ID of <strong>{{page.paymentid}}</strong> in order for us to be able to assign your contribution to this specific project!</p>
-					<p><div id="qrcode"></div></p>
-					<script src="{{ base.url | prepend: site.url }}/js/qrcode.min.js"></script>
-					<script type="text/javascript">
-						var qr_description = encodeURIComponent("{{page.title}}");
-						new QRCode(document.getElementById("qrcode"), {
-							text: "monero:{{page.address}}?tx_payment_id={{page.paymentid}}&tx_description="+qr_description,
-						        width: 150,
-							    height: 150,
-						        colorDark : "#000000",
-						        colorLight : "#ffffff",
-						        correctLevel : QRCode.CorrectLevel.M
-						});
-					</script>
-                                    </div>
-                                </div>
-                            </div--!>
-    <!-- END FULL WIDTH BLOCK -->
     
                 <section class="container full">
                 <div class="info-block">
@@ -60,7 +30,22 @@ layout: base
                             <div class="progress-bar">
                                 <span class="fund-progress" style="width: {{proposal.percentage}}%"></span>
                             </div>
-                           <p><a href="{{proposal.donate-url}}" class="btn btn-primary">Contribute</a></p>
+                           <div class="contribute-dropdown">
+                                <div class="tab">
+                                    <input id="tab-con" type="checkbox" name="tabs" class="accordion">
+                                    <label for="tab-con" class="accordion btn">Contribute</label>
+                                    <div class="tab-content">
+                                        <div class="instructions">
+                                            <p>1. Choose the amount of XMR you wish to contribute to this proposal.</p>
+                                            <p>2. Scan the QR code or tap to open in your Monero wallet app</p>
+                                            <p><a href="monero:{{ proposal.donate-address }}" class="qr"><img src="{{ proposal.donate-qr-code }}"></a></p>
+                                            <p>or copy the following XMR address:</p>
+                                            <p class="string">{{ proposal.donate-address }}</p>
+                                            <p>3. Send! Thank you! You are amazing!</p>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
                            
                         </div>
                     </div>

css/custom.css

@@ -3402,6 +3402,101 @@ p.author-list, p.date-list, p.progress-number-goal, p.bar-work-status {
     max-width: 15rem;
 }
 
+/*Contribute Dropdown*/
+
+.tab {
+    position: relative;
+    width: 100%;
+    color: #4c4c4c;
+    overflow: hidden;
+}
+
+label.accordion {
+    position: relative;
+    display: block;
+    padding: 1.3rem 2rem 1.3rem 0;
+    font-weight: bold;
+    line-height: 1.7;
+    cursor: pointer;
+    margin-right: 0.5rem;
+}
+
+.tab-content {
+    overflow:hidden;
+    height:0;
+    padding: 0;
+    -webkit-transition: all .5s ease;
+    -moz-transition: all .5s ease;
+    transition: all .5s ease;
+    padding: 0 1rem;
+}
+input.accordion:checked ~ .tab-content {
+    height:auto;
+    padding: 1rem;
+}
+
+input.accordion {
+    position: absolute;
+    display: none;
+    z-index: -1;
+}
+
+.contribute-dropdown {
+    text-align: center;
+}
+
+.contribute-dropdown .btn {
+    margin: 1rem auto;
+    -moz-box-shadow: 0 1px 2px 0 rgba(0,0,0,.07), 0 1px 5px 0 rgba(0,0,0,.1);
+    -webkit-box-shadow: 0 1px 2px 0 rgba(0,0,0,.07), 0 1px 5px 0 rgba(0,0,0,.1);
+    box-shadow: 0 1px 2px 0 rgba(0,0,0,.07), 0 1px 5px 0 rgba(0,0,0,.1);
+    background-color: #b74848;
+    color: #ffffff;
+}
+
+input.accordion:checked ~ .btn {
+    background-color: #d26e2b;
+}
+
+.instructions a.qr {
+    border: none;
+    border-radius: 10px;
+    display: inline-block;
+    -moz-box-shadow: 0 0 5px rgba(50,50,93,.4);
+    -webkit-box-shadow: 0 0 5px rgba(50,50,93,.4);
+    box-shadow: 0 0 5px rgba(50,50,93,.4);
+    margin-bottom: 1rem;
+    margin-top: 1rem;
+    text-decoration: none;
+}
+
+.instructions .qr img {
+    border-radius: 10px;
+    vertical-align: middle;
+    max-width: 15rem;
+}
+
+.instructions p.string {
+    background-color: #edeff2;
+    padding: 1.5rem;
+    margin-top: 1rem;
+    margin-bottom: 1rem;
+    font-weight: 700;
+    -webkit-touch-callout: all;
+    -webkit-user-select: all;
+    -khtml-user-select: all;
+    -moz-user-select: all;
+    -ms-user-select: all;
+    user-select: all;
+    border-radius: 2px;
+    max-width: 40rem;
+    margin-left: auto;
+    margin-right: auto;
+    -moz-box-shadow: 0 0 5px rgba(50,50,93,.4);
+    -webkit-box-shadow: 0 0 5px rgba(50,50,93,.4);
+    box-shadow: 0 0 5px rgba(50,50,93,.4);
+}
+
 @media (max-width: 600px) {
 
 .ffs-con .panel {
@@ -3785,6 +3880,3 @@ p.if-issues {
 }
 
 
-
-
-