Increase font-size on register form and globally to 16px

CHANGELOG.md

@@ -1,6 +1,29 @@
 # Changelog
 
 
+## v1.4.0 (2023-02-23)
+
+### Changes
+
+* SWC-89 remove the image from the header and add bigger image to PDP gallery. [Lang]
+
+
+## v1.3.0 (2023-02-23)
+
+### Changes
+
+* SWC-89 change the theme as the customer requested. [Lang]
+
+* SWC-89 change the documentation for easy copy-paste. [Lang]
+
+
+## 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,19 @@ 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`
+   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
+   2. **Change the logo** Change the `sw-logo-desktop`, `sw-logo-tablet` & `sw-logo-mobile` logo to `@EtailConferenceTheme/src/Resources/app/storefront/src/assets/sw-logo-blue.svg` on the admin area: 
+     `Admin | Storefront | "Theme" tab | "Edit theme" button | "media" block` 
+   3. **Upload gallery images** Upload the product images in the admin area
+     `Admin | Catalogues | Products`

composer.json

@@ -2,6 +2,7 @@
   "name": "itg-theme/etail-west-plugin",
   "description": "eTail West theme plugin for presentation",
   "type": "shopware-platform-plugin",
+  "version": "1.4.0",
   "license": "MIT",
   "autoload": {
     "psr-4": {

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(e,n,t){(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"))}))}));var n,t,o=(n=document.documentElement,t=n.clientHeight,function(e,o){var i,a=[];for(e&&"resize"===e.type&&(t=n.clientHeight),i=o.elements.length;i--;)if(!a.includes(i)){var d=o.elements[i],r=d.getBoundingClientRect(),s=(r.top/t*100+r.bottom/t*100)/2,c=s>o.zone[1]&&s<100-o.zone[1];d.classList.toggle(o.markedClass,c),c&&a.push(d)}});function i(e){o(e,{elements:document.querySelectorAll("div.product-image-wrapper"),markedClass:"highlight--1",zone:[20,20]}),o(e,{elements:document.querySelectorAll("div.product-image-wrapper"),markedClass:"highlight--2",zone:[40,40]})}window.addEventListener("scroll",i),window.addEventListener("resize",i)}).call(this,t("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

@@ -6,10 +6,10 @@
 
 body {
   position: relative;
-  font-family: 'Brandon Text', sans-serif;
+  font-family: "Brandon Text", sans-serif;
 
   &.shopware-bg {
-    background: url('/bundles/etailconferencetheme/assets/bg-curvy-outbg.png') no-repeat top right;
+    background: url("/bundles/etailconferencetheme/assets/bg-curvy-outbg.png") no-repeat top right;
   }
 }
 
@@ -109,31 +109,30 @@ header {
   display: flex;
   align-items: center;
   justify-content: center;
-  min-height: 500px;
+  text-align: center;
+  margin: 1.5em 0;
 
   @media screen and (max-width: 500px) {
     min-height: 20em;
   }
 
   h1 {
-    font: bold 4em 'Brandon Text', sans-serif;
+    font: bold 4em "Brandon Text", sans-serif;
     line-height: 1em;
-    color: #000;
+    color: #1674b7;
 
-    @media screen and (max-width: 500px) {
+    @media screen and (max-width: 870px) {
-      text-align: center;
+      color: #fff;
-      color: #fff !important;
     }
   }
 
   h2 {
-    font: bold 2em 'Brandon Text', sans-serif;
+    font: bold 2em "Brandon Text", sans-serif;
     line-height: 1em;
     color: #7d7d7d;
 
-    @media screen and (max-width: 500px) {
+    @media screen and (max-width: 870px) {
-      text-align: center;
+      color: #1674b7;
-      color: #fff !important;
     }
   }
 
@@ -148,7 +147,7 @@ header {
   }
 
   img {
-    max-height: 25vw;
+    max-height: 35vw;
 
     animation-name: gently-scale;
     animation-timing-function: ease-in-out;
@@ -176,6 +175,10 @@ header {
   }
 }
 
+.gallery-slider-image {
+  width: 100%;
+}
+
 /** basket offcanvas */
 
 .offcanvas-cart {
@@ -254,7 +257,7 @@ header {
     background: #fff;
     border: 0;
 
-    box-shadow: 0 0 10px rgba(13, 85, 96, .15);
+    box-shadow: 0 0 10px rgba(13, 85, 96, 0.15);
     border-radius: 0 20px 20px 20px;
 
     .card-body {
@@ -288,22 +291,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-timing-function: cubic-bezier(0.28, 0.84, 0.42, 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-timing-function: cubic-bezier(0.28, 0.84, 0.42, 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 +336,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;
@@ -353,16 +365,16 @@ header {
     transform: scale(1, 1) translateY(0);
   }
   10% {
-    transform: scale(1.1, .9) translateY(0);
+    transform: scale(1.1, 0.9) translateY(0);
   }
   30% {
-    transform: scale(.9, 1.1) translateY(-65px);
+    transform: scale(0.9, 1.1) translateY(-20px);
   }
   50% {
-    transform: scale(1.05, .95) translateY(0);
+    transform: scale(1.05, 0.95) translateY(0);
   }
   57% {
-    transform: scale(1, 1) translateY(-7px);
+    transform: scale(1, 1) translateY(-3px);
   }
   64% {
     transform: scale(1, 1) translateY(0);
@@ -420,12 +432,11 @@ header {
 
   h1,
   h2 {
-    font-family: 'Brandon Text', sans-serif;
+    font-family: "Brandon Text", sans-serif;
     font-weight: bold;
   }
 }
 
-
 /** buttons */
 .header-minimal-back-to-shop-button {
   color: #179eff;
@@ -461,12 +472,12 @@ header {
   margin-bottom: 5em;
 
   .pagination {
-    background: #189EFF;
+    background: #189eff;
     display: flex;
     align-items: center;
     justify-content: center;
     //border: 3px solid #fff;
-    padding: .5em;
+    padding: 0.5em;
 
     overflow: hidden;
 
@@ -494,7 +505,7 @@ header {
       border: 0;
       min-width: 3em;
       min-height: 1.5em;
-      font-family: 'Brandon Text', sans-serif;
+      font-family: "Brandon Text", sans-serif;
       font-weight: bold;
       font-size: 18px;
       text-align: center;
@@ -523,15 +534,15 @@ header {
 }
 
 .footer-main {
-  background: #313131;
+  background: #50b6ff;
 }
 
 .footer-shopware {
-  background: #313131;
+  background: #50b6ff;
   padding: 3em;
 
   h1 {
-    font: bold 1.5em 'Brandon Text', sans-serif;
+    font: bold 1.5em "Brandon Text", sans-serif;
     color: #fff;
   }
 
@@ -544,3 +555,13 @@ header {
     box-shadow: inset 0 0 2px #fff;
   }
 }
+
+.register-form {
+  font-size: 16px;
+}
+
+.custom-control-label::before,
+.custom-control-label::after {
+  width: 1.2rem;
+  height: 1.2rem;
+}

src/Resources/app/storefront/src/scss/overrides.scss

@@ -5,4 +5,6 @@ This file is used to override default SCSS variables from the Shopware Storefron
 
 Because of the !default flags, theme variable overrides have to be declared beforehand.
 https://getbootstrap.com/docs/4.0/getting-started/theming/#variable-defaults
-*/
+*/
+
+$input-font-size: 16px;

src/Resources/views/storefront/base.html.twig

@@ -52,7 +52,7 @@
     {% endif %}
 
     <div id="shopware-overlay" class="shopware-overlay">
-        <img src="{{ asset('/bundles/etailconferencetheme/assets/shopare-logo-only.png') }}" alt="Shopware logo | only">
+        <img src="{{ asset('/bundles/etailconferencetheme/assets/sw-logo-only.png') }}" alt="Shopware logo | only">
     </div>
 
     {{ parent() }}
@@ -79,11 +79,7 @@
 {% endblock %}
 
 {% block base_body_classes %}
-    {{ parent() }}
+    {{parent()}} {% if activeRoute == 'frontend.home.page' %}shopware-bg{% endif %}
-
-    {% if activeRoute == 'frontend.home.page' %}
-        shopware-bg
-    {% endif %}
 {% endblock %}
 
 {% block base_breadcrumb %}{% endblock %}

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 %}

src/Resources/views/storefront/layout/header/header.html.twig

@@ -20,10 +20,10 @@
                     <h1>Shopware ecommerce platform</h1>
                     <h2>Build the exceptional</h2>
                 </div>
-                <div class="col text-center">
+{#                <div class="col text-center">#}
-                    <img src="{{ asset('bundles/etailconferencetheme/assets/shopware-phone.png') }}"
+{#                    <img src="{{ asset('bundles/etailconferencetheme/assets/shopware-phone.png') }}"#}
-                         alt="Shopware phone">
+{#                         alt="Shopware phone">#}
-                </div>
+{#                </div>#}
             </div>
         </div>
     {% endif %}