responsive payment/card info

src/api/templates/card.html

@@ -16,7 +16,8 @@
         margin:0px;
         
     }
-    .frame {
+ 
+    /*.frame {
         font-size:16px;
         font-weight:lighter;
         width:800px;
@@ -38,6 +39,9 @@
         padding:32px;
         
     }
+    .product-info .visual {
+        background-color: #f3f3f3; padding:32px; width:256px;
+    }
     .product-info .description {
         padding:4px;
         
@@ -55,7 +59,7 @@
         
        
     }
-    .card-info .amount {text-align:right;}
+    
     
     .payment-amount .menu {display:none; position:absolute; z-index:9; background-color:#ffffff; padding:4px;}
     .menu .item {padding:4px}
@@ -64,7 +68,9 @@
     .email { width:100%;}
     .fname { width:100% }
     .lname {width:100%}
-    
+    */
+    .card-info .amount {text-align:right;}
+    .payment-amount .menu {display:none; position:absolute; z-index:9; background-color:#ffffff; padding:4px;}
     input {
         height:48px;
         border:2px solid transparent;
@@ -79,6 +85,7 @@
         /*border-left: 2px solid #ff6500 ;*/
         border-left: 2px solid #4682B4;
     }
+    
     .error {
         border-color: maroon;
     }
@@ -111,6 +118,74 @@
         font-weight:bold ;
         color:#4682B4 ;
     } */
+    @media only screen and (max-device-width: 960px){   
+        body {font-size:14px; font-family:sans-serif; font-weight:lighter; line-height: 20px;}
+        .pane {display:grid; justify-items:center; align-items:center; height:auto;}
+        .frame {
+            display:block;
+            
+            gap:2px;
+            padding:4px;
+            
+        }
+        .product-info {display:grid; grid-template-columns: 105px auto; gap:4px; 
+            align-items:center;
+            margin-bottom:2px;
+
+        }
+        
+        .visual{
+            background-color:#f3f3f3;
+            border:1px solid #CAD5E0;
+            display:grid;
+            align-items: center;
+            justify-items: left;
+
+            
+        }
+        
+        .visual img {width:100px}     
+        .card input {width:100%;}  
+        .pay-frame {margin-top:10px;}
+        
+        
+
+    }
+
+    @media only screen and (min-device-width: 1024px){      
+        body {font-size:16px; font-family:sans-serif; font-weight:lighter; line-height: 28px;}
+        .pane {display:grid; justify-items:center; align-items:center; height:98%;}
+        .frame {
+            width:800px;
+            display:grid;
+            grid-template-columns: 40% auto; gap:2px;
+            
+            
+        }  
+        .visual { vertical-align:middle;
+            display:grid;
+            justify-items: center;
+            align-items:center;
+            
+
+        }
+        .visual img {width:110px;}
+        .product-info{
+            display:grid;
+            grid-template-rows: 70% auto; gap:2px;
+            border-right:1px solid #CAD5E0;
+            padding:4px;
+        }     
+        .card {padding:4px;;}
+        .card input {width:100%; }
+        .pay-frame {margin-top:30px;}
+    }
+    @media only screen and (min-device-width: 1080px){        
+        .-frame {width:800px}
+    }
+    @media only screen and (min-device-width: 1920px){   
+    }
+
 </style>
 <script>
     sessionStorage.store_context = "{{context|safe}}"
@@ -277,30 +352,35 @@
         },1700)
     })
 </script>
-<div style="display:grid; justify-items:center; align-items:center; height:99%;">
+<div class="pane" style="">
+    <div class="caption" align="center">{{product.name}}</div>
     <div class="frame">
-        <div class="product-info">
-            <div class="caption">{{product.name}}</div>
-            <div align="center">
-                 <div class="border-round border" style="background-color: #f3f3f3; padding:32px; width:256px;">
+        <div class="product-info" >
+            
+            
+            <div class="border-round visual" >
                 <img src="{{product.images[0]}}">
             </div>
         
-            </div>
+    
         <div class="description">
             {{product.metadata.about}}
         </div>
         </div>
-        <div class="card" style="vertical-align:middle; padding:4px;">
+        <div class="card" style="vertical-align:middle;">
             
-            <div style="margin:4px;">
+            <div style="margin-top:2px">
                 <input type="text" placeholder="Email@domain.com" class="email" data-pattern="^[-!#-'*+\/-9=?^-~]+(?:\.[-!#-'*+\/-9=?^-~]+)*@[-!#-'*+\/-9=?^-~]+(?:\.[-!#-'*+\/-9=?^-~]+)+$" onkeyup="checkout.validate(event)"/>
             </div>
-            <div style="margin:4px; display:grid; grid-template-columns:50% auto; gap:2px;">
+            <div style="display:grid; grid-template-columns:50% 50%; gap:2px; margin-top:2px;">
+                <div>
                     <input type="text" placeholder="First Name" class="fname" data-pattern="^[a-z,A-Z,-]{2,}$" onkeyup="checkout.validate(event)"/>
+                </div>
+                <div>
                     <input type="text" placeholder="Last Name" class="lname"  data-pattern="^[a-z,A-Z,-]{2,}$" onkeyup="checkout.validate(event)"/>
                 </div>
-            <div class="card-info">
+            </div>
+            <div class="card-info" style="margin-top:2px">
                 
                 
                    
@@ -344,7 +424,7 @@
             </div>
             
 
-            <div style="padding:4px; margin-top:48px">
+            <div class="pay-frame">
                 <div class="active " align="center" style=" background-color:#f3f3f3; color:#4682b4; display:grid; ;align-items:center; height:48px; padding:4px;"
                     onclick="checkout.proceed()"
                 >