responsive

src/agratek/api/merchant/views/templates/pay.pt

@@ -39,8 +39,8 @@ td, th {
 
 </div>
 <div metal:fill-slot="scripts">
-  <div class="panel-body col-md-12">
-    <div class="col-md-6 col-md-offset-3 col-xs-12 well">
+  <div style="padding: 0px; padding-top: 5px; padding-bottom: 5px;" class="panel-body col-md-12">
+    <div style="padding: 0px; padding-top: 5px; padding-bottom: 5px;" class="col-md-6 col-md-offset-3 col-xs-12 well">
         <!-- Proses Template Form -->
         <form method="post" 
               accept-charset="utf-8" 
@@ -64,7 +64,7 @@ td, th {
           </div>
           <!-- END Tampilan untuk general error -->
 
-          <div class="col-md-12">
+          <div style=" padding: 5px; " class="col-md-12">
             <div tal:define="fieldItem form['biller_name']" class="col-md-12" id="item-${fieldItem.oid}" style="margin-bottom: 5px;">
                 <label for="${fieldItem.oid}" class="control-label col-md-4" id="req-${fieldItem.oid}">
                         ${fieldItem.title}</label>
@@ -89,22 +89,35 @@ td, th {
                     <p id="error-${fieldItem.oid}" class="help-block" tal:condition="fieldItem.error" tal:repeat="error fieldItem.error.messages()">${error}</p>
                 </div>
             </div>
-            <div class="col-md-12" style="margin-bottom: 5px;">
-              <table style="width:100%">
+
+            <div class="col-md-12 panel-heading">
+                <h3 class="panel-title">Produk :</h3>
+            </div>
+            <div style="padding: 0px; padding-bottom: 5px; width: 100%; height: 350px; overflow-y: scroll;" class="col-md-12 panel panel-default">
+
+              <div tal:repeat="prod produks" class="col-md-12" style="text-align: center; margin-bottom: 5px; margin-top: 5px;">
+                <table  align="center" style="width:100%">
+
                   <tr>
-                  <th>Produk</th>
-                  <th>Detail</th>
-                  <th>Amount</th>
-                  <th>Gambar</th>
-                </tr>
-                <tr tal:repeat="prod produks">
+                    <td bgcolor="#cce6ff">Nama</td>
                     <td>${prod['goods_name']}</td>
+                  </tr>
+                  <tr>
+                    <td bgcolor="#cce6ff">Detail</td>
                     <td>${prod['goods_detail']}</td>
-                  <td style="text-align: right;">${prod['goods_amt']}</td>
+                  </tr>
+                  <tr>
+                    <td bgcolor="#cce6ff">Amount</td>
+                    <td style="text-align: left;">${prod['goods_amt']}</td>
+                  </tr>
+                  <tr>
+                    <td bgcolor="#cce6ff">Gambar</td>
                     <td>${prod['img_url']}</td>
                   </tr>
                 </table> 
               </div>
+            </div>
+
 
             <!-- Looping Semua Field-->
             <div tal:define="fieldItem form['pay_method']" class="col-md-12" id="item-${fieldItem.oid}" style="margin-bottom: 5px;">