chg: usr: SWC-89 change the theme as the customer requested

CHANGELOG.md

@@ -1,6 +1,13 @@
 # Changelog
 
 
+## v1.2.0 (2023-02-21)
+
+### Changes
+
+* SVC-89 pixel cosmetics on checkout page. [Lang]
+
+
 ## v1.1.0 (2023-02-21)
 
 ### Changes

README.md

@@ -11,10 +11,14 @@ This plugin was made for the eTail conference to show a Shopware w/ special them
 2. Install and activate the plugin
    ```bash
    $ bin/console plugin:refresh
-   $ bin/console plugin:install --activate EtailConferenceTheme
-   $ bin/console theme:change
-      > EtailConferenceTheme
    ```
+   ```bash
+   $ bin/console plugin:install --activate EtailConferenceTheme
+   ```
+   ```bash
+   $ bin/console theme:change
+   ```
+   > EtailConferenceTheme
 3. On administration area some setting you have to set
    1. **Disable reviews** (The docs are [here](https://docs.shopware.com/en/shopware-6-en/catalogues/reviews#disable-reviews).) - `Admin | Settings | Shop | Products | Show reviews`
       > False

src/Resources/app/storefront/dist/storefront/js/etail-conference-theme.js

@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([["etail-conference-theme"],{AZcZ:function(e,n,o){(function(e){e((function(){setTimeout((function(){e(".shopware-overlay").addClass("fade-out"),e(".header-main, .footer-main, .content-main").removeClass("d-none"),setTimeout((function(){e(".shopware-overlay").addClass("d-none")}),500)}),500),e(".card.product-box").each((function(){e(this).find(".btn").append(e(this).find(".product-price"))}))})),window.addEventListener("beforeunload",(function(n){e(".shopware-overlay").removeClass("d-none").removeClass("fade-out")}))}).call(this,o("UoTJ"))}},[["AZcZ","runtime","vendor-node"]]]);
+(window.webpackJsonp=window.webpackJsonp||[]).push([["etail-conference-theme"],{AZcZ:function(n,e,o){(function(n){n((function(){setTimeout((function(){n(".shopware-overlay").addClass("fade-out"),n(".header-main, .footer-main, .content-main").removeClass("d-none"),setTimeout((function(){n(".shopware-overlay").addClass("d-none")}),500)}),500),n(".card.product-box").each((function(){n(this).find(".btn").append(n(this).find(".product-price"))}))}))}).call(this,o("UoTJ"))}},[["AZcZ","runtime","vendor-node"]]]);

src/Resources/app/storefront/src/main.js

@@ -16,3 +16,53 @@ $(function () {
       );
   });
 });
+
+/** Run animation on product list only when they are in the middle of screen */
+var getElementsInArea = (function (docElm) {
+  var viewportHeight = docElm.clientHeight;
+
+  return function (e, opts) {
+    var found = [], i;
+
+    if (e && e.type === 'resize') {
+      viewportHeight = docElm.clientHeight;
+    }
+
+    for (i = opts.elements.length; i--;) {
+      if (found.includes(i)) {
+        continue;
+      }
+
+      var elm = opts.elements[ i ],
+        pos = elm.getBoundingClientRect(),
+        topPerc = pos.top / viewportHeight * 100,
+        bottomPerc = pos.bottom / viewportHeight * 100,
+        middle = (topPerc + bottomPerc) / 2,
+        inViewport = middle > opts.zone[ 1 ] &&
+          middle < (100 - opts.zone[ 1 ]);
+
+      elm.classList.toggle(opts.markedClass, inViewport);
+
+      if (inViewport) {
+        found.push(elm);
+      }
+    }
+  };
+})(document.documentElement);
+
+window.addEventListener('scroll', f)
+window.addEventListener('resize', f)
+
+function f(e) {
+  getElementsInArea(e, {
+    elements: document.querySelectorAll('div.product-image-wrapper'),
+    markedClass: 'highlight--1',
+    zone: [20, 20]
+  });
+
+  getElementsInArea(e, {
+    elements: document.querySelectorAll('div.product-image-wrapper'),
+    markedClass: 'highlight--2',
+    zone: [40, 40]
+  });
+}

src/Resources/app/storefront/src/scss/base.scss

@@ -109,7 +109,8 @@ header {
   display: flex;
   align-items: center;
   justify-content: center;
-  min-height: 500px;
+  text-align: right;
+  margin: 1.5em 0;
 
   @media screen and (max-width: 500px) {
     min-height: 20em;
@@ -118,11 +119,10 @@ header {
   h1 {
     font: bold 4em 'Brandon Text', sans-serif;
     line-height: 1em;
-    color: #000;
+    color: #1674b7;
 
-    @media screen and (max-width: 500px) {
-      text-align: center;
-      color: #fff !important;
+    @media screen and (max-width: 870px) {
+      color: #fff;
     }
   }
 
@@ -131,9 +131,8 @@ header {
     line-height: 1em;
     color: #7d7d7d;
 
-    @media screen and (max-width: 500px) {
-      text-align: center;
-      color: #fff !important;
+    @media screen and (max-width: 870px) {
+      color: #1674b7;
     }
   }
 
@@ -148,7 +147,7 @@ header {
   }
 
   img {
-    max-height: 25vw;
+    max-height: 35vw;
 
     animation-name: gently-scale;
     animation-timing-function: ease-in-out;
@@ -288,22 +287,30 @@ header {
         z-index: -1;
 
         border-radius: 50%;
-        box-shadow: 0 3.125rem 1.5rem rgba(0, 0, 0, 0.24);
         animation-name: bounce-shadow;
         animation-timing-function: cubic-bezier(0.280, 0.840, 0.420, 1);
         animation-duration: 3s;
-        animation-iteration-count: infinite;
+        animation-play-state: paused;
+        box-shadow: 0 3.125rem 1.5rem rgba(0, 0, 0, 0.24);
       }
 
       .product-image-link {
         animation-name: bounce;
         animation-timing-function: cubic-bezier(0.280, 0.840, 0.420, 1);
         animation-duration: 3s;
-        animation-iteration-count: infinite;
+        animation-play-state: paused;
         transform-origin: bottom;
       }
     }
 
+    .product-image-wrapper.highlight--1,
+    .product-image-wrapper.highlight--2 {
+      &:after,
+      .product-image-link {
+        animation-play-state: running;
+      }
+    }
+
     .product-name {
       text-transform: uppercase;
       color: #000;
@@ -325,6 +332,7 @@ header {
         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#3478d1', endColorstr='#308bf4', GradientType=1);
         display: flex;
         justify-content: space-between;
+        align-items: center;
         border: 0;
         font-weight: 600;
         white-space: nowrap;
@@ -356,13 +364,13 @@ header {
     transform: scale(1.1, .9) translateY(0);
   }
   30% {
-    transform: scale(.9, 1.1) translateY(-65px);
+    transform: scale(.9, 1.1) translateY(-20px);
   }
   50% {
     transform: scale(1.05, .95) translateY(0);
   }
   57% {
-    transform: scale(1, 1) translateY(-7px);
+    transform: scale(1, 1) translateY(-3px);
   }
   64% {
     transform: scale(1, 1) translateY(0);
@@ -523,11 +531,11 @@ header {
 }
 
 .footer-main {
-  background: #313131;
+  background: #50b6ff;
 }
 
 .footer-shopware {
-  background: #313131;
+  background: #50b6ff;
   padding: 3em;
 
   h1 {

src/Resources/views/storefront/component/product/card/box-standard.html.twig

@@ -0,0 +1,3 @@
+{% extends '@Storefront/storefront/component/product/card/box-standard.html.twig' %}
+
+{% block component_product_box_description %}{% endblock %}