fix header elements

.env_prod

@@ -2,8 +2,8 @@ API_URL=https://www.iolovolio.com/api
 SITE_URL=https://www.iolovolio.com
 
 PP_ACCOUNT=villamarchesacilento@gmail.com
-PP_CLIENTID=AbqqKkBugS-TH7qFIhxn-EQL9Z-VduKbPuOVnQimhvAQlbJ95qMJC85-vlfgIUEnRsRfcIfZm4BhrKYG
-PP_SECRET=EHHzrA2Boa3kX1ARa7Ipd1SD5Ip8uPYXqecO_aGCMhTQqW1Uz43lL1TEs7lQzMt3BIIBEphqO6_FOQyw
+PP_CLIENTID=AWu2qtnudDseQPQgzP8WjoWYgJ35RwVs5xGgnJaSUEy3GZBivJTDwpF1Iac48Ym9awFb_Q3hl30q0oX1
+PP_SECRET=EG4ocqai50hgZJ-033h2SVTnrc2QgBeeMg5Eclvrbb3Zw204wGEPmhfeag167tOMPAOpzwP5Cm8bFDmy
 
 PP_CANCEL=https://www.iolovolio.com/checkout
 PP_RETURN=https://www.iolovolio.com/thankyou

components/checkout/checkout.js

@@ -143,7 +143,7 @@ $(document).ready( () => {
 
     const placeOrder = (profile, isNewUser) => {
 
-      const inputs = component.find('.input')
+      const inputs = component.find('.input, .radio')
       inputs.attr('disabled', true)
       place.hide(0)
       window.Spinner('show')
@@ -177,39 +177,20 @@ $(document).ready( () => {
             return actions.order.create({
               intent: 'CAPTURE',
               application_context: {
-                brand_name: 'IoLovOlio',
+                brand_name: 'Iolovolio',
                 locale: 'it-IT',
                 shipping_preference: 'NO_SHIPPING'
               },
-              purchase_units: [{ amount: { currency_code: 'EUR', value: 1 }}]//cart
+              purchase_units: cart
             })
           },
           onApprove: (data, actions) => {
             return actions.order.capture().then( (details) => {
-              console.log('Transaction completed by ', details)
+              console.log('Transaction completed by ', details, `${ENV.PP_RETURN}?token=${data.orderID}`)
+              window.location = `${ENV.PP_RETURN}?token=${data.orderID}`
             })
           }
         }).render('#paypal-button-container')
-
-
-
-
-/*
-        Apis.checkout(cart, token, uid).then( (data) => {
-          const capture = data.links.find(item => item.rel == 'capture')
-          const approve = data.links.find(item => item.rel == 'approve')
-          sessionStorage.setItem('order', JSON.stringify({
-            profile: profile,
-            cartItems: cartItems,
-            token: data.id,
-            uid: uid,
-            amount: amount
-          }))
-          window.location = approve.href
-        }).catch( (error) => {
-          console.error(error)
-          window.Spinner('hide')
-        })*/
       }
 
       Apis.getCart().then( (data) => {

components/header/header.html

@@ -10,9 +10,7 @@
       <a href="/carrello" class="cart-cta icon-buy">
         <span class="counter"><?= count($_SESSION['CART']);?></span>
         <span class="label">Carrello</span>
-      </a>
-
-      <a href="/account" class="account-cta icon-user">
+      </a><a href="/account" class="account-cta icon-user">
         <span class="label">
           <?php
             if($_SESSION['AUTH']) {

components/header/header.scss

@@ -21,7 +21,7 @@
       top: 32px;
       left: 50%;
       height: 100%;
-      max-height: 50px;
+      max-height: 40px;
       margin: auto 0;
       transition: max-height .4s, top .3s;
       transform: translateX(-50%);
@@ -30,9 +30,9 @@
 
     .ctas {
       position: absolute;
-      top: 28px;
-      left: 20px;
-      font-size: $font-34;
+      top: 30px;
+      left: 10px;
+      font-size: $font-30;
       padding: 0 !important;
       color: $black;
       transition: top .3s;
@@ -46,11 +46,11 @@
 
         .counter {
           position: absolute;
-          left: 10px;
-          top: 14px;
+          left: 8px;
+          top: 13px;
           width: 22px;
           text-align: center;
-          @include font-style($font-sans, 'semibold', $font-14);
+          @include font-style($font-sans, 'semibold', $font-12);
         }
 
         .label {
@@ -68,7 +68,7 @@
     .hamburger {
       position: absolute;
       top: 32px;
-      right: 20px;
+      right: 10px;
       transition: top .3s;
     }
 
@@ -137,7 +137,7 @@
     .header-wrapper {
       min-height: $header-height-mobile-sticky;
       .logo {
-        max-height: 50px;
+        max-height: 35px;
         top: 18px;
       }
 
@@ -179,14 +179,26 @@
       }
 
       .ctas {
+        font-size: $font-34;
+        left: 20px;
         .cart-cta,
         .account-cta {
           .label {
             display: block;
           }
+          .counter {
+            font-size: $font-14;
+            left: 10px;
+            top: 14px;
+          }
+
         }
       }
 
+      .hamburger {
+        right: 20px;
+      }
+
       .menu-container {
         .menu-label {
           //display: block;
@@ -197,6 +209,10 @@
     &.sticky {
       .header-wrapper {
         min-height: $header-height-sticky;
+        .logo {
+          max-height: 50px;
+          top: 18px;
+        }
       }
     }
   }

pages/index.ejs

@@ -81,7 +81,7 @@
       if($getQ[0] == 'checkout' || $getQ[0] == 'account') {
     ?>
       <script src="https://www.google.com/recaptcha/api.js?render=${ENV.RECAPTCHA_SITE_KEY}"></script>
-      <script src="https://www.paypal.com/sdk/js?client-id=${ENV.PP_CLIENTID}&components=buttons&currency=EUR"></script>
+      <script src="https://www.paypal.com/sdk/js?client-id=${ENV.PP_CLIENTID}&components=buttons&currency=EUR&locale=it_IT"></script>
     <?php
       }
     ?>

src/fonts/icomoon.svg

@@ -15,5 +15,5 @@
 <glyph unicode="&#xe905;" glyph-name="angle-right" d="M253.965 26.513l47.292-47.292 468.778 468.778-468.778 468.778-47.292-47.292 421.487-421.487z" />
 <glyph unicode="&#xe906;" glyph-name="angle-left" d="M770.035 869.487l-47.292 47.292-468.778-468.778 468.778-468.778 47.292 47.292-421.487 421.487z" />
 <glyph unicode="&#xe907;" glyph-name="close" d="M811.532 805.42l57.959-57.973-657.024-656.865-57.959 57.973zM869.43 148.479l-57.973-57.959-656.865 657.024 57.973 57.959z" />
-<glyph unicode="&#xe908;" glyph-name="user" d="M511.999 782.445c94.616 0 172.93-78.305 172.93-172.93s-78.307-172.93-172.93-172.93c-94.616 0-172.93 78.304-172.93 172.93s78.304 172.93 172.93 172.93zM511.999 864.011c-140.299 0-254.496-114.197-254.496-254.496s114.197-254.496 254.496-254.496c140.3 0 254.497 114.197 254.497 254.496s-114.197 254.496-254.497 254.496zM512.003 306.085c94.616 0 205.553-22.841 231.652-189.241h-463.307c29.361 166.4 137.038 189.241 231.653 189.241zM512.003 394.183c-179.45 0-323.009-88.098-323.009-362.164h646.029c0 274.072-143.559 362.164-323.008 362.164z" />
+<glyph unicode="&#xe908;" glyph-name="user" d="M511.999 789.38c98.41 0 179.865-81.445 179.865-179.865s-81.447-179.865-179.865-179.865c-98.41 0-179.865 81.444-179.865 179.865s81.444 179.865 179.865 179.865zM511.999 864.011c-140.299 0-254.496-114.197-254.496-254.496s114.197-254.496 254.496-254.496c140.3 0 254.497 114.197 254.497 254.496s-114.197 254.496-254.497 254.496zM512.002 337.547c117.39 0 255.030-33.386 287.411-276.607h-574.827c36.428 243.221 154.135 276.607 287.413 276.607zM512.002 406.657c-203.703 0-366.665-100.005-366.665-411.112h733.343c0 311.114-162.962 411.112-366.664 411.112z" />
 </font></defs></svg>

src/fonts/selection.json

@@ -1 +1 @@
-{"IcoMoonType":"selection","icons":[{"icon":{"paths":["M511.999 177.555c94.616 0 172.93 78.305 172.93 172.93s-78.307 172.93-172.93 172.93c-94.616 0-172.93-78.304-172.93-172.93s78.304-172.93 172.93-172.93zM511.999 95.989c-140.299 0-254.496 114.197-254.496 254.496s114.197 254.496 254.496 254.496c140.3 0 254.497-114.197 254.497-254.496s-114.197-254.496-254.497-254.496z","M512.003 653.915c94.616 0 205.553 22.841 231.652 189.241h-463.307c29.361-166.4 137.038-189.241 231.653-189.241zM512.003 565.817c-179.45 0-323.009 88.098-323.009 362.164h646.029c0-274.072-143.559-362.164-323.008-362.164z"],"attrs":[{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["user"]},"attrs":[{},{}],"properties":{"order":471,"id":8,"name":"user","prevSize":32,"code":59656},"setIdx":0,"setId":0,"iconIdx":0},{"icon":{"paths":["M498.102 56.824c-115.187 0-211.767 96.565-211.767 215.468h-167.207v78.016h0.363v538.852h-0.363v78.016h784.003v-7.693h1.742v-687.408h-78.016v0.218h-113.213c0-118.903-100.353-215.468-215.541-215.468zM498.102 131.139c78.030 0 141.226 63.124 141.226 141.154h-278.679c0-78.030 59.422-141.154 137.453-141.154zM197.579 350.308h88.756v55.736h74.314v-55.736h278.679v55.736h74.314v-55.736h113.213v538.852h-629.278z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"tags":["buy"],"grid":0},"attrs":[{}],"properties":{"order":117,"id":0,"name":"buy","prevSize":32,"code":59648},"setIdx":0,"setId":0,"iconIdx":1},{"icon":{"paths":["M976.53 470.996v81.976h-929.060v-81.976z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"tags":["minus"],"grid":0},"attrs":[{}],"properties":{"order":118,"id":1,"name":"minus","prevSize":32,"code":59649},"setIdx":0,"setId":0,"iconIdx":2},{"icon":{"paths":["M471.011 47.47h81.976v929.060h-81.976z","M976.53 470.996v81.976h-929.060v-81.976z"],"attrs":[{},{}],"isMulticolor":false,"isMulticolor2":false,"tags":["plus"],"grid":0},"attrs":[{},{}],"properties":{"order":147,"id":2,"name":"plus","prevSize":32,"code":59650},"setIdx":0,"setId":0,"iconIdx":3},{"icon":{"paths":["M811.532 154.58l57.959 57.973-657.024 656.865-57.959-57.973z","M869.43 811.521l-57.973 57.959-656.865-657.024 57.973-57.959z"],"attrs":[{},{}],"isMulticolor":false,"isMulticolor2":false,"tags":["close"],"grid":0},"attrs":[{},{}],"properties":{"order":148,"id":3,"prevSize":32,"code":59655,"name":"close"},"setIdx":0,"setId":0,"iconIdx":4},{"icon":{"paths":["M90.513 253.965l-47.292 47.292 468.778 468.778 468.778-468.778-47.292-47.292-421.487 421.487z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"tags":["angle-down"],"grid":0},"attrs":[{}],"properties":{"order":119,"id":4,"name":"angle-down","prevSize":32,"code":59651},"setIdx":0,"setId":0,"iconIdx":5},{"icon":{"paths":["M933.487 770.035l47.292-47.292-468.778-468.778-468.778 468.778 47.292 47.292 421.487-421.487z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"tags":["angle-top"],"grid":0},"attrs":[{}],"properties":{"order":122,"id":5,"prevSize":32,"code":59652,"name":"angle-top"},"setIdx":0,"setId":0,"iconIdx":6},{"icon":{"paths":["M253.965 933.487l47.292 47.292 468.778-468.778-468.778-468.778-47.292 47.292 421.487 421.487z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"tags":["angle-right"],"grid":0},"attrs":[{}],"properties":{"order":120,"id":6,"prevSize":32,"code":59653,"name":"angle-right"},"setIdx":0,"setId":0,"iconIdx":7},{"icon":{"paths":["M770.035 90.513l-47.292-47.292-468.778 468.778 468.778 468.778 47.292-47.292-421.487-421.487z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"tags":["angle-left"],"grid":0},"attrs":[{}],"properties":{"order":121,"id":7,"prevSize":32,"code":59654,"name":"angle-left"},"setIdx":0,"setId":0,"iconIdx":8}],"height":1024,"metadata":{"name":"icomoon"},"preferences":{"showGlyphs":true,"showQuickUse":false,"showQuickUse2":true,"showSVGs":true,"fontPref":{"prefix":"icon-","metadata":{"fontFamily":"icomoon"},"metrics":{"emSize":1024,"baseline":6.25,"whitespace":50},"embed":false,"autoHost":true},"imagePref":{"prefix":"icon-","png":true,"useClassSelector":true,"color":0,"bgColor":16777215,"classSelector":".icon"},"historySize":50,"showCodes":true,"gridSize":16,"quickUsageToken":{"UntitledProject":"ZjQ5ODNjZDkzZGRhNGRlZDg3YmQ2Njc5YTQyNWU2Y2QjMSMxNTY0MDUxMDkxIyMj"},"showGrid":false}}
+{"IcoMoonType":"selection","icons":[{"icon":{"paths":["M511.999 170.62c98.41 0 179.865 81.445 179.865 179.865s-81.447 179.865-179.865 179.865c-98.41 0-179.865-81.444-179.865-179.865s81.444-179.865 179.865-179.865zM511.999 95.989c-140.299 0-254.496 114.197-254.496 254.496s114.197 254.496 254.496 254.496c140.3 0 254.497-114.197 254.497-254.496s-114.197-254.496-254.497-254.496z","M512.002 622.453c117.39 0 255.030 33.386 287.411 276.607h-574.827c36.428-243.221 154.135-276.607 287.413-276.607zM512.002 553.343c-203.703 0-366.665 100.005-366.665 411.112h733.343c0-311.114-162.962-411.112-366.664-411.112z"],"attrs":[{},{}],"tags":["user"],"grid":0,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":471,"id":0,"name":"user","prevSize":32,"code":59656},"setIdx":0,"setId":0,"iconIdx":0},{"icon":{"paths":["M498.102 56.824c-115.187 0-211.767 96.565-211.767 215.468h-167.207v78.016h0.363v538.852h-0.363v78.016h784.003v-7.693h1.742v-687.408h-78.016v0.218h-113.213c0-118.903-100.353-215.468-215.541-215.468zM498.102 131.139c78.030 0 141.226 63.124 141.226 141.154h-278.679c0-78.030 59.422-141.154 137.453-141.154zM197.579 350.308h88.756v55.736h74.314v-55.736h278.679v55.736h74.314v-55.736h113.213v538.852h-629.278z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"tags":["buy"],"grid":0},"attrs":[{}],"properties":{"order":117,"id":1,"name":"buy","prevSize":32,"code":59648},"setIdx":0,"setId":0,"iconIdx":1},{"icon":{"paths":["M976.53 470.996v81.976h-929.060v-81.976z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"tags":["minus"],"grid":0},"attrs":[{}],"properties":{"order":118,"id":2,"name":"minus","prevSize":32,"code":59649},"setIdx":0,"setId":0,"iconIdx":2},{"icon":{"paths":["M471.011 47.47h81.976v929.060h-81.976z","M976.53 470.996v81.976h-929.060v-81.976z"],"attrs":[{},{}],"isMulticolor":false,"isMulticolor2":false,"tags":["plus"],"grid":0},"attrs":[{},{}],"properties":{"order":147,"id":3,"name":"plus","prevSize":32,"code":59650},"setIdx":0,"setId":0,"iconIdx":3},{"icon":{"paths":["M811.532 154.58l57.959 57.973-657.024 656.865-57.959-57.973z","M869.43 811.521l-57.973 57.959-656.865-657.024 57.973-57.959z"],"attrs":[{},{}],"isMulticolor":false,"isMulticolor2":false,"tags":["close"],"grid":0},"attrs":[{},{}],"properties":{"order":148,"id":4,"prevSize":32,"code":59655,"name":"close"},"setIdx":0,"setId":0,"iconIdx":4},{"icon":{"paths":["M90.513 253.965l-47.292 47.292 468.778 468.778 468.778-468.778-47.292-47.292-421.487 421.487z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"tags":["angle-down"],"grid":0},"attrs":[{}],"properties":{"order":119,"id":5,"name":"angle-down","prevSize":32,"code":59651},"setIdx":0,"setId":0,"iconIdx":5},{"icon":{"paths":["M933.487 770.035l47.292-47.292-468.778-468.778-468.778 468.778 47.292 47.292 421.487-421.487z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"tags":["angle-top"],"grid":0},"attrs":[{}],"properties":{"order":122,"id":6,"prevSize":32,"code":59652,"name":"angle-top"},"setIdx":0,"setId":0,"iconIdx":6},{"icon":{"paths":["M253.965 933.487l47.292 47.292 468.778-468.778-468.778-468.778-47.292 47.292 421.487 421.487z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"tags":["angle-right"],"grid":0},"attrs":[{}],"properties":{"order":120,"id":7,"prevSize":32,"code":59653,"name":"angle-right"},"setIdx":0,"setId":0,"iconIdx":7},{"icon":{"paths":["M770.035 90.513l-47.292-47.292-468.778 468.778 468.778 468.778 47.292-47.292-421.487-421.487z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"tags":["angle-left"],"grid":0},"attrs":[{}],"properties":{"order":121,"id":8,"prevSize":32,"code":59654,"name":"angle-left"},"setIdx":0,"setId":0,"iconIdx":8}],"height":1024,"metadata":{"name":"icomoon"},"preferences":{"showGlyphs":true,"showQuickUse":false,"showQuickUse2":true,"showSVGs":true,"fontPref":{"prefix":"icon-","metadata":{"fontFamily":"icomoon"},"metrics":{"emSize":1024,"baseline":6.25,"whitespace":50},"embed":false,"autoHost":true},"imagePref":{"prefix":"icon-","png":true,"useClassSelector":true,"color":0,"bgColor":16777215,"classSelector":".icon"},"historySize":50,"showCodes":true,"gridSize":16,"quickUsageToken":{"UntitledProject":"ZjQ5ODNjZDkzZGRhNGRlZDg3YmQ2Njc5YTQyNWU2Y2QjMSMxNTY0MDUxMDkxIyMj"},"showGrid":false}}

src/scss/variables.scss

@@ -51,10 +51,11 @@ $black-alpha: rgba(0, 0, 0, 0.2);
 
 //Hamburgers settings
 $hamburger-padding-x           : 0;
-$hamburger-padding-y           : 6px;
-$hamburger-layer-width         : 30px;
+$hamburger-padding-y           : 5px;
+$hamburger-layer-width         : 25px;
 $hamburger-layer-height        : 3px;
-$hamburger-layer-spacing       : 8px;
+$hamburger-layer-spacing       : 6px;
+
 $hamburger-layer-color         : $olive-dark;
 $hamburger-layer-border-radius : 0;
 $hamburger-hover-opacity       : 1;