web: Also use new layout in checkout-se de and fr versions.
authorMarcus Brinkmann <marcus.brinkmann@ruhr-uni-bochum.de>
Wed, 31 May 2017 14:47:58 +0000 (16:47 +0200)
committerMarcus Brinkmann <marcus.brinkmann@ruhr-uni-bochum.de>
Wed, 31 May 2017 14:47:58 +0000 (16:47 +0200)
web/donate/checkout-se.de.org
web/donate/checkout-se.fr.org

index 1f56c35..8cf1249 100644 (file)
   padding-bottom: 0 !important;
   min-height: 0 !important;
 }
+.qrcode > svg {
+  max-width: 100%;
+  height: auto;
+}
     </style>
 
     <!-- Fixed navbar -->
 
     <div class="camp-gutter container">
       <div class="row">
-        <div class="col-md-7 col-md-offset-2">
+        <div class="col-xs-12 col-md-8 col-md-offset-2">
+
+      <div class="row">
+       <div class="col-xs-12">
           <h2>Übersicht</h2>
           <p>
            Mit SEPA-Überweisungen kann man Geld zwischen den 34
            Mitgliedsstaaten der EU sowie sechs angegliederten Staaten
            transferieren.
           </p>
+       </div>
+      </div>
+
+      <div class="row">
+        <div class="col-xs-12 col-sm-9">
           <form class="form-horizontal">
             <div class="form-group">
-              <label class="col-sm-3 control-label">Name</label>
-              <div class="col-sm-9">
+              <label class="col-xs-12 col-sm-3 control-label">Name</label>
+              <div class="col-xs-12 col-sm-9">
                 <p class="form-control-static"><!--NAME--></p>
               </div>
             </div>
             <div class="form-group">
-              <label class="col-sm-3 control-label">E-Mail</label>
-              <div class="col-sm-9">
+              <label class="col-xs-12 col-sm-3 control-label">E-Mail</label>
+              <div class="col-xs-12 col-sm-9">
                 <p class="form-control-static"><!--MAIL--></p>
               </div>
             </div>
             <div class="form-group">
-              <label class="col-sm-3 control-label">Nachricht</label>
-              <div class="col-sm-9">
+              <label class="col-xs-12 col-sm-3 control-label">Nachricht</label>
+              <div class="col-xs-12 col-sm-9">
                 <p class="form-control-static"><!--MESSAGE_FMT--></p>
               </div>
             </div>
           </form>
+       </div>
+      </div>
 
+      <div class="row">
+       <div class="col-xs-12">
           <p>
            Bitte überweisen Sie Ihre Spende auf dieses Konto:
           </p>
 
           <form class="form-horizontal">
             <div class="form-group">
-              <label class="col-sm-3 control-label">Kontoinhaber</label>
-              <div class="col-sm-9">
+              <label class="col-xs-12 col-sm-3 control-label">Kontoinhaber</label>
+              <div class="col-xs-12 col-sm-9">
                 <p class="form-control-static">g10 Code GmbH</p>
               </div>
             </div>
             <div class="form-group">
-              <label class="col-sm-3 control-label">IBAN</label>
-              <div class="col-sm-9">
+              <label class="col-xs-12 col-sm-3 control-label">IBAN</label>
+              <div class="col-xs-12 col-sm-9">
                 <p class="form-control-static">DE76 3015 0200 0002 1086 03</p>
               </div>
             </div>
             <div class="form-group">
-              <label class="col-sm-3 control-label">BIC</label>
-              <div class="col-sm-9">
+              <label class="col-xs-12 col-sm-3 control-label">BIC</label>
+              <div class="col-xs-12 col-sm-9">
                 <p class="form-control-static">WELADED1KSD</p>
               </div>
             </div>
             <div class="form-group">
-              <label class="col-sm-3 control-label">Zweck</label>
-              <div class="col-sm-9">
+              <label class="col-xs-12 col-sm-3 control-label">Zweck</label>
+              <div class="col-xs-12 col-sm-9">
                 <p class="form-control-static"><!--SEPA_REF--></p>
               </div>
             </div>
             <div class="form-group">
-              <label class="col-sm-3 control-label">Betrag</label>
-              <div class="col-sm-9">
+              <label class="col-xs-12 col-sm-3 control-label">Betrag</label>
+              <div class="col-xs-12 col-sm-9">
                 <p class="form-control-static"><!--AMOUNT--> EUR</p>
               </div>
             </div>
           </form>
-          <!--SEPA_QR-->
+       </div>
+
+        <div class="col-xs-12 col-sm-3">
+          <div class="qrcode text-center">
+            <!--SEPA_QR-->
+         </div>
+       </div>
+      </div>
+
+      <div class="row">
+       <div class="col-xs-12">
           <p>
            Bitte achten Sie darauf, dass die unter Verwendungszweck
            angegebene Referenznummer stimmt. Diese wird benötigt um
       </div>
 
       <div class="row">
-        <div class="col-sm-5 col-md-offset-2">
+        <div class="col-xs-12">
           <p>
             <a class="btn btn-default btn-sm" href="/donate/index.de.html">Fortsetzen</a>
           </p>
+       </div>
+      </div>
+
         </div>
       </div>
     </div>
index a5606c1..295f8da 100644 (file)
   padding-bottom: 0 !important;
   min-height: 0 !important;
 }
+.qrcode > svg {
+  max-width: 100%;
+  height: auto;
+}
     </style>
 
     <!-- Fixed navbar -->
 
     <div class="camp-gutter container">
       <div class="row">
-        <div class="col-md-7 col-md-offset-2">
+        <div class="col-xs-12 col-md-8 col-md-offset-2">
+
+      <div class="row">
+       <div class="col-xs-12">
           <h2>Règlement</h2>
           <p>
           Les virements dans l'espace unique de paiement en euros (SEPA) sont
           valides depuis 34 pays de l'Union européenne et États associés.
           </p>
+       </div>
+      </div>
+
+      <div class="row">
+        <div class="col-xs-12 col-sm-9">
           <form class="form-horizontal">
             <div class="form-group">
-              <label class="col-sm-3 control-label">Nom</label>
-              <div class="col-sm-9">
+              <label class="col-xs-12 col-sm-3 control-label">Nom</label>
+              <div class="col-xs-12 col-sm-9">
                 <p class="form-control-static"><!--NAME--></p>
               </div>
             </div>
             <div class="form-group">
-              <label class="col-sm-3 control-label">Courriel</label>
-              <div class="col-sm-9">
+              <label class="col-xs-12 col-sm-3 control-label">Courriel</label>
+              <div class="col-xs-12 col-sm-9">
                 <p class="form-control-static"><!--MAIL--></p>
               </div>
             </div>
             <div class="form-group">
-              <label class="col-sm-3 control-label">Message</label>
-              <div class="col-sm-9">
+              <label class="col-xs-12 col-sm-3 control-label">Message</label>
+              <div class="col-xs-12 col-sm-9">
                 <p class="form-control-static"><!--MESSAGE_FMT--></p>
               </div>
             </div>
           </form>
+       </div>
+      </div>
 
+      <div class="row">
+       <div class="col-xs-12">
           <p>
           Veuillez transférer votre montant choisi au compte bancaire suivant :
           </p>
 
           <form class="form-horizontal">
             <div class="form-group">
-              <label class="col-sm-3 control-label">Titulaire du compte</label>
-              <div class="col-sm-9">
+              <label class="col-xs-12 col-sm-3 control-label">Titulaire du compte</label>
+              <div class="col-xs-12 col-sm-9">
                 <p class="form-control-static">g10 Code GmbH</p>
               </div>
             </div>
             <div class="form-group">
-              <label class="col-sm-3 control-label">IBAN</label>
-              <div class="col-sm-9">
+              <label class="col-xs-12 col-sm-3 control-label">IBAN</label>
+              <div class="col-xs-12 col-sm-9">
                 <p class="form-control-static">DE76 3015 0200 0002 1086 03</p>
               </div>
             </div>
             <div class="form-group">
-              <label class="col-sm-3 control-label">BIC</label>
-              <div class="col-sm-9">
+              <label class="col-xs-12 col-sm-3 control-label">BIC</label>
+              <div class="col-xs-12 col-sm-9">
                 <p class="form-control-static">WELADED1KSD</p>
               </div>
             </div>
             <div class="form-group">
-              <label class="col-sm-3 control-label">Référence</label>
-              <div class="col-sm-9">
+              <label class="col-xs-12 col-sm-3 control-label">Référence</label>
+              <div class="col-xs-12 col-sm-9">
                 <p class="form-control-static"><!--SEPA_REF--></p>
               </div>
             </div>
             <div class="form-group">
-              <label class="col-sm-3 control-label">Montant</label>
-              <div class="col-sm-9">
+              <label class="col-xs-12 col-sm-3 control-label">Montant</label>
+              <div class="col-xs-12 col-sm-9">
                 <p class="form-control-static"><!--AMOUNT--> EUR</p>
               </div>
             </div>
           </form>
-          <!--SEPA_QR-->
+       </div>
+
+        <div class="col-xs-12 col-sm-3">
+          <div class="qrcode text-center">
+            <!--SEPA_QR-->
+         </div>
+       </div>
+      </div>
+
+      <div class="row">
+       <div class="col-xs-12">
           <p>
             Veuillez vous assurer de la présence du numéro de référence, afin que
             nous puissions associer le montant reçu à votre donation et ainsi vous
       </div>
 
       <div class="row">
-        <div class="col-sm-5 col-md-offset-2">
+        <div class="col-xs-12">
           <p>
             <a class="btn btn-default btn-sm" href="/">Continue</a>
           </p>
+       </div>
+      </div>
+
         </div>
       </div>
     </div>