@social-mail/social-mail-client 1.2.344 → 1.2.345

package/dist/public/store/Store.pack.js

@@ -19292,46 +19292,91 @@ System.register(["tslib", "@web-atoms/core/dist/core/InjectProperty", "@web-atom
         flex: 1 1 100%;
     }
 
-    & > .photos {
+    & > .product {
 
-        margin: 10px;
-        padding: 10px;
-        border-radius: 5px;
-        box-shadow: 0 0 10px 2px gray;
-
-        display: inline-grid;
-        grid-template-columns: auto 1fr;
-        grid-template-rows: 1fr;
-        overflow: hidden;
+        width: 100%;
+        display: grid;
+        grid-template-columns: 4fr 1fr;
+        grid-template-rows: auto;
 
-        min-width: 60%;
+        & > .photos {
 
-        & > .thumbnails {
             grid-row: 1;
             grid-column: 1;
-            display: flex;
-            flex-direction: column;
-            overflow: auto;
-            max-height: 500px;
-            & > img {
-                cursor: pointer;
-                margin: 5px;
-                border-radius: 10px;
-                &:hover {
-                    box-shadow: 0 0 5px 1px #0000ff7f;
+
+            margin: 10px;
+            padding: 10px;
+            border-radius: 5px;
+            box-shadow: 0 0 10px 2px gray;
+
+            display: inline-grid;
+            grid-template-columns: auto 1fr;
+            grid-template-rows: 1fr;
+            overflow: hidden;
+
+            & > .thumbnails {
+                grid-row: 1;
+                grid-column: 1;
+                display: flex;
+                flex-direction: column;
+                overflow: auto;
+                max-height: 500px;
+                & > img {
+                    cursor: pointer;
+                    margin: 5px;
+                    border-radius: 10px;
+                    &:hover {
+                        box-shadow: 0 0 5px 1px #0000ff7f;
+                    }
+                }
+            }
+            & > .preview {
+                grid-row: 1;
+                grid-column: 2;
+                height: 100%;
+                min-width: 50%;
+                & img {
+                    -webkit-user-drag: none;
                 }
             }
+
         }
-        & > .preview {
+
+        & > .offers {
             grid-row: 1;
             grid-column: 2;
-            height: 60%;
-            min-width: 50%;
-            & img {
-                -webkit-user-drag: none;
-            }
         }
+    }
 
+    @media (max-width: 800px) {
+        
+        & > .product {
+            display: flex;
+            flex-direction: column;
+            justify-content: stretch;
+            justify-items: stretch;
+            & > .photos {
+                display: grid;
+                grid-template-columns: 1fr;
+                grid-template-rows: 1fr auto;
+                & > .thumbnails {
+                    grid-row: 2;
+                    grid-column: 1;
+                    height: 25vh;
+                    display: flex;
+                    flex-direction: row;
+                    align-items: center;
+                    justify-content: start;
+                    justify-items: start;
+                    overflow: auto;
+                }
+                & > .preview {
+                    grid-row: 1;
+                    grid-column: 1;
+                    height: 50vh;
+                }
+            }
+        }
     }
 
     & img {
@@ -19375,6 +19420,8 @@ System.register(["tslib", "@web-atoms/core/dist/core/InjectProperty", "@web-atom
               class: css,
               images: Bind.oneWay(() => this.getFiles(this.model, this.selectedVarient, this.selectedSize))
             }, XNode.create("h2", null, this.model.name), XNode.create("section", {
+              class: "product"
+            }, XNode.create("section", {
               class: "photos"
             }, XNode.create(AtomRepeater, {
               selectOnClick: true,
@@ -19391,6 +19438,7 @@ System.register(["tslib", "@web-atoms/core/dist/core/InjectProperty", "@web-atom
               class: "preview",
               source: Bind.oneWay(() => signedImageUrl(this.selectedFile, 720))
             })), XNode.create("section", {
+              class: "offers",
               "data-layout": "vertical-flex"
             }, offerHtml && XNode.create("section", {
               innerHTML: offerHtml
@@ -19412,7 +19460,7 @@ System.register(["tslib", "@web-atoms/core/dist/core/InjectProperty", "@web-atom
               }, XNode.create("label", {
                 text: x.name
               }))
-            })), XNode.create("section", {
+            }))), XNode.create("section", {
               "data-flex": "stretch-full"
             }, XNode.create("section", {
               innerHTML: specHtml