Merge branch 'feature/header' into develop

components/footer/footer.html

@@ -1,3 +1,18 @@
 <div class="component-footer">
-    footer
+  <div class="container d-flex my-auto">
+    <ul class="menu">
+      <li class="item mr-4">
+        <a href="/iolovolio" class="label"><b>io</b>lov<b>olio.</b></a>
+      </li>
+      <li class="item">
+        <a href="/terms" class="label">Termini servizio</a>
+      </li>
+      <li class="item">
+        <a href="/privacy" class="label">Privacy</a>
+      </li>
+      <li class="item">
+        <a href="/contacts" class="label">Contatti</a>
+      </li>
+    </ul>
+  </div>
 </div>

components/footer/footer.scss

@@ -2,8 +2,33 @@
 @import "../../src/scss/mixins.scss";
 
 .component-footer {
+  //position: absolute;
+  display: flex;
   height: $footer-height;
   width: 100%;
+  bottom: 0;
   background: $gray;
   color: $white;
+
+  .menu {
+    display: flex;
+    height: 100%;
+    width: 100%;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+
+    .item {
+      display: flex;
+      color: $white;
+      margin: auto 20px auto 0;
+      font-size: $font-12;
+      letter-spacing: 2px;
+
+      .label {
+        color: $white;
+      }
+    }
+  }
+
 }

components/header/header.html

@@ -1,3 +1,46 @@
 <header class="component-header">
 
+  <div class="container header-wrapper">
+    <button class="hamburger hamburger--spin my-auto">
+      <span class="hamburger-box">
+        <span class="hamburger-inner"></span>
+      </span>
+    </button>
+
+    <div class="actions">
+      <button class="icon icon-user"></button>
+      <button class="icon icon-cart"><span class="qty">3</span></button>
+    </div>
+
+    <ul class="menu">
+      <li class="item <?php if(basename($_SERVER['PHP_SELF']) == 'iolovolio.php') { echo "active";}?>">
+        <a href="/iolovolio" class="label"><b>io</b>lov<b>olio ...</b></a>
+      </li>
+      <li class="item <?php if(basename($_SERVER['PHP_SELF']) == 'buy.php') { echo "active";}?>">
+        <a href="/buy" class="label">acquistare</a>
+      </li>
+      <li class="item <?php if(basename($_SERVER['PHP_SELF']) == 'learn.php') { echo "active";}?>">
+        <a href="/learn" class="label">imparare</a>
+      </li>
+      <li class="item disabled">
+        <span class="label">produrre (coming soon)</span>
+      </li>
+    </ul>
+
+    <ul class="sidebar-menu">
+      <li class="item <?php if(basename($_SERVER['PHP_SELF']) == 'iolovolio.php') { echo "active";}?>">
+        <a href="/iolovolio" class="label"><b>io</b>lov<b>olio ...</b></a>
+      </li>
+      <li class="item <?php if(basename($_SERVER['PHP_SELF']) == 'buy.php') { echo "active";}?>">
+        <a href="/buy" class="label">acquistare</a>
+      </li>
+      <li class="item <?php if(basename($_SERVER['PHP_SELF']) == 'learn.php') { echo "active";}?>">
+        <a href="/learn" class="label">imparare</a>
+      </li>
+      <li class="item disabled">
+        <span class="label">produrre (coming soon)</span>
+      </li>
+    </ul>
+  </div>
+
 </header>

components/header/header.js

@@ -2,4 +2,27 @@
 $(document).ready( () => {
   console.log('Load component - header')
 
+  const components = $('.component-header')
+
+  components.each( (i, e) => {
+    const component = $(e)
+    const hamburger = component.find('.hamburger')
+    const menu = component.find('.sidebar-menu')
+
+    hamburger.on('click', (e) => {
+      const hamburger = $(e.currentTarget)
+      hamburger.toggleClass('is-active')
+
+      if(hamburger.hasClass('is-active')){
+        menu.addClass('active')
+        //items.slideDown()
+        //$('html, body').css({overflow: 'hidden'})
+      } else {
+        menu.removeClass('active')
+        //items.slideUp()
+        //$('html, body').css({overflow: 'auto'})
+      }
+    })
+  })
+
 })

components/header/header.scss

@@ -2,8 +2,164 @@
 @import "../../src/scss/mixins.scss";
 
 .component-header {
-  height: $header-height;
+  position: fixed;
+  display: flex;
+  top: 0;
+  left: 0;
+  height: $header-height-mobile;
   width: 100%;
   background: $olive;
   color: $white;
+
+  .header-wrapper {
+    display: flex;
+    position: relative;
+
+    .hamburger {
+      display: flex;
+      margin-right: 20px;
+    }
+
+    .actions {
+      position: absolute;
+      right: 10px;
+      top: 50%;
+      transform: translateY(-50%);
+
+      .icon {
+        position: relative;
+        margin: 0 5px;
+        padding: 0;
+        background: none;
+        border: none;
+        color: $white;
+        font-size: $font-24;
+
+        .qty {
+          position: absolute;
+          top: -5px;
+          right: -5px;
+          height: 15px;
+          width: 15px;
+          border-radius: 50%;
+          background: $orange;
+          color: $white;
+          font-size: $font-12;
+          line-height: $font-16;
+          font-family: $font-sans;
+        }
+      }
+    }
+
+    .menu {
+      display: none;
+      list-style: none;
+      margin: 0;
+      padding: 0;
+
+      .item {
+        display: flex;
+        color: $white;
+        margin: auto 20px;
+        font-size: $font-20;
+        letter-spacing: 2px;
+
+        .label {
+          color: $white;
+        }
+
+        &.active {
+          border-bottom: 2px solid $white;
+        }
+
+        &.disabled {
+          .label {
+            color: $white-alpha;
+          }
+        }
+      }
+    }
+
+    .sidebar-menu {
+      position: fixed;
+      top: $header-height-mobile;
+      left: 0;
+      height: calc(100vh - #{$header-height-mobile});
+      background: $olive;
+      display: block;
+      list-style: none;
+      margin: 0;
+      padding: 0;
+      transform: translateX(-100%);
+      transition: transform .3s;
+
+      .item {
+        display: block;
+        color: $white;
+        margin: 20px;
+        font-size: $font-20;
+        letter-spacing: 2px;
+        padding: 20px;
+        border-bottom: 1px dotted $gray;
+
+        .label {
+          color: $white;
+        }
+
+        &.active {
+          //border-bottom: 2px solid $white;
+        }
+
+        &.disabled {
+          .label {
+            color: $white-alpha;
+          }
+        }
+      }
+
+      &.active {
+        transform: translateX(0%);
+      }
+    }
+  }
+}
+
+
+
+
+@media (min-width: map-get($grid-breakpoints, 'md')) {
+  .component-header {
+    height: $header-height;
+
+    .header-wrapper {
+      .actions {
+        position: absolute;
+        right: 0;
+
+        .icon {
+          margin: 0 5px;
+          font-size: $font-30;
+
+          .qty {
+            position: absolute;
+            top: -15px;
+            right: -15px;
+            height: 25px;
+            width: 25px;
+            font-size: $font-20;
+            line-height: $font-24;
+          }
+        }
+      }
+
+      .menu {
+        display: flex;
+      }
+
+      .sidebar-menu {
+        top: $header-height;
+        height: calc(100vh - #{$header-height});
+      }
+    }
+  }
 }

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "anes",
+  "name": "iolovolio",
   "version": "1.0.0",
   "description": "IoLoVolio",
   "main": "index.js",
@@ -26,7 +26,7 @@
     "babel-preset-env": "^1.7.0",
     "base-href-webpack-plugin": "^2.0.0",
     "bootstrap": "^4.3.1",
-    "copy-webpack-plugin": "^5.0.3",
+    "copy-webpack-plugin": "^6.0.3",
     "css-loader": "^3.5.1",
     "es6-promise-promise": "^1.0.0",
     "eslint": "^6.0.1",
@@ -36,6 +36,7 @@
     "extract-loader": "^3.1.0",
     "file-loader": "^4.0.0",
     "glob": "^7.1.4",
+    "hamburgers": "^1.1.3",
     "html-loader": "^0.5.5",
     "html-webpack-plugin": "^3.2.0",
     "http-server": "^0.12.1",

pages/.htaccess

@@ -0,0 +1,3 @@
+RewriteEngine On
+RewriteCond %{REQUEST_FILENAME} !-f
+RewriteRule ^([^\.]+)$ $1.php [NC,L]

pages/buy.ejs

@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<html lang="it">
+  <head>
+    <meta charset="UTF-8">
+    <title>IoLovOlio</title>
+    <meta name="viewport" content="width=device-width, user-scalable=no,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
+    <meta name="description" content=".">
+    <link rel="stylesheet" href="/assets/css/styles.css">
+  </head>
+  <body>
+
+    ${require('../components/header/header.html')}
+
+    <main class="main-content">
+
+        <section class="container">
+            section<br>
+            section<br>
+            section<br>
+            section<br>
+            section<br>
+            section<br>
+            section<br>
+            section<br>
+            section<br>
+            section<br>
+            section<br>
+            section<br>
+            section<br>
+            section<br>
+            section<br>
+            section<br>
+            section<br>
+            section<br>
+            section<br>
+            section<br>
+            section<br>
+            section<br>
+            section<br>
+            section<br>
+            section<br>
+            section<br>
+            section<br>
+            section<br>
+            section<br>
+            section<br>
+            section<br>
+            section<br>
+            section<br>
+            section<br>
+            section<br>
+            section<br>
+            section<br>
+            section<br>
+            section<br>
+            section<br>
+            section<br>
+            section<br>
+            section<br>
+            section<br>
+            section<br>
+            section<br>
+            section<br>
+            section<br>
+            section<br>
+            section<br>
+            section<br>
+            section<br>
+            section<br>
+            section<br>
+            section<br>
+            section<br>
+            section<br>
+            section<br>
+        </section>
+
+
+    </main>
+
+    ${require('../components/footer/footer.html')}
+
+  </body>
+</html>

pages/index.ejs

@@ -14,7 +14,7 @@
     <main class="main-content">
 
         <section class="container">
-            section
+
         </section>
 
 

pages/iolovolio.ejs

@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<html lang="it">
+  <head>
+    <meta charset="UTF-8">
+    <title>IoLovOlio</title>
+    <meta name="viewport" content="width=device-width, user-scalable=no,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
+    <meta name="description" content=".">
+    <link rel="stylesheet" href="/assets/css/styles.css">
+  </head>
+  <body>
+
+    ${require('../components/header/header.html')}
+
+    <main class="main-content">
+
+        <section class="container">
+            section<br>
+            section<br>
+            section<br>
+            section<br>
+            section<br>
+            section<br>
+            section<br>
+            section<br>
+            section<br>
+            section<br>
+            section<br>
+            section<br>
+            section<br>
+            section<br>
+            section<br>
+            section<br>
+            section<br>
+            section<br>
+            section<br>
+            section<br>
+            section<br>
+            section<br>
+            section<br>
+            section<br>
+            section<br>
+            section<br>
+            section<br>
+            section<br>
+            section<br>
+            section<br>
+            section<br>
+            section<br>
+            section<br>
+            section<br>
+            section<br>
+            section<br>
+            section<br>
+            section<br>
+            section<br>
+            section<br>
+            section<br>
+            section<br>
+            section<br>
+            section<br>
+            section<br>
+            section<br>
+            section<br>
+            section<br>
+            section<br>
+            section<br>
+            section<br>
+            section<br>
+            section<br>
+            section<br>
+            section<br>
+            section<br>
+            section<br>
+            section<br>
+        </section>
+
+
+    </main>
+
+    ${require('../components/footer/footer.html')}
+
+  </body>
+</html>

pages/learn.ejs

@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<html lang="it">
+  <head>
+    <meta charset="UTF-8">
+    <title>IoLovOlio</title>
+    <meta name="viewport" content="width=device-width, user-scalable=no,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
+    <meta name="description" content=".">
+    <link rel="stylesheet" href="/assets/css/styles.css">
+  </head>
+  <body>
+
+    ${require('../components/header/header.html')}
+
+    <main class="main-content">
+
+        <section class="container">
+            section<br>
+            section<br>
+            section<br>
+            section<br>
+            section<br>
+            section<br>
+            section<br>
+            section<br>
+            section<br>
+            section<br>
+            section<br>
+            section<br>
+            section<br>
+            section<br>
+            section<br>
+            section<br>
+            section<br>
+            section<br>
+            section<br>
+            section<br>
+            section<br>
+            section<br>
+            section<br>
+            section<br>
+            section<br>
+            section<br>
+            section<br>
+            section<br>
+            section<br>
+            section<br>
+            section<br>
+            section<br>
+            section<br>
+            section<br>
+            section<br>
+            section<br>
+            section<br>
+            section<br>
+            section<br>
+            section<br>
+            section<br>
+            section<br>
+            section<br>
+            section<br>
+            section<br>
+            section<br>
+            section<br>
+            section<br>
+            section<br>
+            section<br>
+            section<br>
+            section<br>
+            section<br>
+            section<br>
+            section<br>
+            section<br>
+            section<br>
+            section<br>
+        </section>
+
+
+    </main>
+
+    ${require('../components/footer/footer.html')}
+
+  </body>
+</html>

src/scss/fonts.scss

@@ -1,8 +1 @@
-@font-face {font-family: "Acumin Variable Concept";
-  src: url("/fonts/066ce24dae3730ed6c648b09efaea93a.eot"); /* IE9*/
-  src: url("/fonts/066ce24dae3730ed6c648b09efaea93a.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
-  url("/fonts/066ce24dae3730ed6c648b09efaea93a.woff2") format("woff2"), /* chrome、firefox */
-  url("/fonts/066ce24dae3730ed6c648b09efaea93a.woff") format("woff"), /* chrome、firefox */
-  url("/fonts/066ce24dae3730ed6c648b09efaea93a.ttf") format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
-  url("/fonts/066ce24dae3730ed6c648b09efaea93a.svg#Acumin Variable Concept") format("svg"); /* iOS 4.1- */
-}
+@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,500,700&display=swap');

src/scss/forms.scss

@@ -10,6 +10,23 @@ button {
 button {
   border: none;
   cursor: pointer;
+  outline: 0 !important;
+
+  &:active,
+  &:focus,
+  &:visited,
+  &:hover {
+    outline: 0 !important;
+  }
+
+
+  &:-moz-focusring {
+    //color: transparent;
+    text-shadow: 0 0 0 $black;
+  }
+
+  ::-moz-focus-inner {border:0;}
+
 }
 
 input,

src/scss/global.scss

@@ -26,6 +26,11 @@ button {
     outline: none;
     text-decoration: none;
   }
+
+  &::-moz-focus-inner {
+    border: 0 !important;
+  }
+
 }
 
 .font-serif {
@@ -100,7 +105,12 @@ button {
 
 .main-content {
 
-  min-height: calc(100vh - #{$header-height} - #{$footer-height} - 50px);
+  min-height: calc(100vh - #{$footer-height});
+  padding: $header-height-mobile 40px 0 40px;
+
+  @media (min-width: map-get($grid-breakpoints, 'md')) {
+    padding: $header-height 40px 0 40px;
+  }
 
   &.container-fluid {
     &.full-width {

src/scss/main.scss

@@ -3,6 +3,7 @@
 
 /* Libraries */
 @import "./node_modules/bootstrap/scss/bootstrap-grid";
+@import "./node_modules/hamburgers/_sass/hamburgers/hamburgers";
 
 /* Global setup */
 @import "../scss/fonts.scss";

src/scss/variables.scss

@@ -30,9 +30,8 @@ $container-max-widths: (
   xl: 1560px
 );
 
-
-$font-serif: 'Acumin Variable Concept';
-$font-sans: 'Acumin Variable Concept';
+$font-serif: 'Source Sans Pro';
+$font-sans: 'Source Sans Pro';
 $icon: 'icomoon';
 
 $black:       #000;
@@ -44,11 +43,24 @@ $dark-gray:   #393939;
 $olive:       #86876f;
 $orange:      #ddb279;
 
-$white-alpha: rgba(255, 255, 255, 0.8);
-$black-alpha: rgba(0, 0, 0, 0.8);
+$white-alpha: rgba(255, 255, 255, 0.5);
+$black-alpha: rgba(0, 0, 0, 0.5);
+
+//Hamburgers settings
+$hamburger-padding-x           : 0;
+$hamburger-padding-y           : 6px;
+$hamburger-layer-width         : 35px;
+$hamburger-layer-height        : 1px;
+$hamburger-layer-spacing       : 8px;
+$hamburger-layer-color         : $white;
+$hamburger-layer-border-radius : 0;
+$hamburger-hover-opacity       : 1;
+$hamburger-active-layer-color  : $white;
+$hamburger-active-hover-opacity: $white;
+
 
 $header-height: 120px;
-$header-height-mobile: 100px;
+$header-height-mobile: 50px;
 $footer-height: 30px;
 
 /* Font-size variables */

webpack.config.js

@@ -42,36 +42,43 @@ module.exports = (env) => {
       $: 'jquery',
       jQuery: 'jquery'
     }),
-    new CopyWebpackPlugin([
+    new CopyWebpackPlugin({
+      patterns: [
         {
           context: componentPath,
           from: '**/*.html',
-        to: distPath + '/components',
+          to: distPath + '/components/[path]/[name].php',
         },
-    ]),
-    new CopyWebpackPlugin([
         {
           context: imagesPath,
           from: '*.*',
           to: distPath + '/images',
-      },
-    ]),
-    new CopyWebpackPlugin([
-      {
-        context: docsPath,
-        from: '*.*',
-        to: distPath + '/docs',
-      },
-    ])
+        }
+      ]
+    })
   ]
 
   fs.readdirSync(pagesPath).forEach( (page) => {
+    if(page == '.htaccess') {
+      plugins.push(
+        new CopyWebpackPlugin({
+          patterns: [
+            {
+              context: pagesPath,
+              from: '.htaccess',
+              to: distPath
+            }
+          ]
+        })
+      )
+    } else {
       plugins.push(
         new HtmlWebpackPlugin({
           template: path.resolve(pagesPath, page),
-        filename: path.resolve(distPath, page.substr(0, page.lastIndexOf(".")) + ".html")
+          filename: path.resolve(distPath, page.substr(0, page.lastIndexOf(".")) + ".php")
         })
       )
+    }
   })