Browse Source

Merge branch 'feature/plp' into develop

feature/pdp
Dslak 5 years ago
parent
commit
d60f329adc
  1. 12
      components/header/header.html
  2. 31
      components/header/header.js
  3. 2
      components/header/header.scss
  4. 22
      components/home/home.html
  5. 5
      components/home/home.js
  6. 54
      components/home/home.scss
  7. 53
      components/plp/plp.html
  8. 5
      components/plp/plp.js
  9. 12
      components/plp/plp.scss
  10. 8
      components/productBox/productBox.html
  11. 5
      components/productBox/productBox.js
  12. 38
      components/productBox/productBox.scss
  13. 8
      components/productBox/productBox2.html
  14. 8
      components/productBox/productBox3.html
  15. 8
      components/productBox/productBox4.html
  16. 34
      images/arrow-down.svg
  17. BIN
      images/drop1.png
  18. BIN
      images/drop2.png
  19. BIN
      images/prod1.png
  20. BIN
      images/prod2.png
  21. BIN
      images/prod3.png
  22. BIN
      images/prod4.png
  23. 7
      pages/.htaccess
  24. 80
      pages/buy.ejs
  25. 5
      pages/home.ejs
  26. 20
      pages/index.ejs
  27. 83
      pages/iolovolio.ejs
  28. 83
      pages/learn.ejs
  29. 75
      src/scss/forms.scss
  30. 13
      src/scss/global.scss
  31. 3
      src/scss/main.scss
  32. 3
      webpack.config.js

12
components/header/header.html

@ -13,13 +13,13 @@
</div>
<ul class="menu">
<li class="item <?php if(basename($_SERVER['PHP_SELF']) == 'iolovolio.php') { echo "active";}?>">
<li class="item <?php if(!$_GET['q'] || $_GET['q'] == 'iolovolio') { 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";}?>">
<li class="item <?php if($_GET['q'] == 'buy') { echo "active";}?>">
<a href="/buy" class="label">acquistare</a>
</li>
<li class="item <?php if(basename($_SERVER['PHP_SELF']) == 'learn.php') { echo "active";}?>">
<li class="item <?php if($_GET['q'] == 'learn') { echo "active";}?>">
<a href="/learn" class="label">imparare</a>
</li>
<li class="item disabled">
@ -28,13 +28,13 @@
</ul>
<ul class="sidebar-menu">
<li class="item <?php if(basename($_SERVER['PHP_SELF']) == 'iolovolio.php') { echo "active";}?>">
<li class="item <?php if(!$_GET['q'] || $_GET['q'] == 'iolovolio') { 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";}?>">
<li class="item <?php if($_GET['q'] == 'buy') { echo "active";}?>">
<a href="/buy" class="label">acquistare</a>
</li>
<li class="item <?php if(basename($_SERVER['PHP_SELF']) == 'learn.php') { echo "active";}?>">
<li class="item <?php if($_GET['q'] == 'learn') { echo "active";}?>">
<a href="/learn" class="label">imparare</a>
</li>
<li class="item disabled">

31
components/header/header.js

@ -2,27 +2,22 @@
$(document).ready( () => {
console.log('Load component - header')
const components = $('.component-header')
const component = $('.component-header')
components.each( (i, e) => {
const component = $(e)
const hamburger = component.find('.hamburger')
const menu = component.find('.sidebar-menu')
const hamburger = component.find('.hamburger')
const menu = component.find('.sidebar-menu')
hamburger.on('click', (e) => {
const hamburger = $(e.currentTarget)
hamburger.toggleClass('is-active')
hamburger.off('.click').on('click.click', (e) => {
const ham = $(e.currentTarget)
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'})
}
})
ham.toggleClass('is-active')
console.log(ham, menu)
if(ham.hasClass('is-active')){
menu.addClass('active')
} else {
menu.removeClass('active')
}
})
})

2
components/header/header.scss

@ -10,6 +10,7 @@
width: 100%;
background: $olive;
color: $white;
z-index: 200;
.header-wrapper {
display: flex;
@ -163,3 +164,4 @@
}
}
}

22
components/home/home.html

@ -0,0 +1,22 @@
<div class="component-home">
<div class="container my-auto">
<div class="row">
<div class="col-12 col-sm-6 col-md-4 order-1 order-md-0">
<img class="drop" src="/images/drop1.png">
<span class="title"><b>io</b>lov<b>olio</b> acquistare</span>
<span class="subtitle"></span>
<button class="button button-big w-100 text-uppercase">Vai allo shop</button>
</div>
<div class="col-12 col-md-4 order-0 order-md-1">
<img class="logo" src="/images/logo.png">
</div>
<div class="col-12 col-sm-6 col-md-4 order-2 order-md-2">
<img class="drop" src="/images/drop2.png">
<span class="title"><b>io</b>lov<b>olio</b> produrre</span>
<span class="subtitle">Avvisami quando l'opzione sarà attiva</span>
<input type="text" class="input input-big" placeholder="latuamail@mail.com">
<span class="privacy">*Autorizzo il trattamento dei miei dati personali ai sensi del Dlgs 196 del 30 giugno 2003 e dell'art. 13 GDPR (Regolamento UE 2016/679)</span>
</div>
</div>
</div>
</div>

5
components/home/home.js

@ -0,0 +1,5 @@
/*
$(document).ready( () => {
console.log('Load component - home')
})*/

54
components/home/home.scss

@ -0,0 +1,54 @@
@import "../../src/scss/variables.scss";
@import "../../src/scss/mixins.scss";
.component-home {
display: flex;
background: $olive;
min-height: calc(100vh - #{$footer-height});
padding: $header-height-mobile 40px 0 40px;
.drop {
width: 100%;
padding: 40px 70px 10px 70px;
}
.title {
display: block;
color: $white;
font-size: $font-28;
text-align: center;
}
.subtitle {
display: block;
min-height: 30px;
color: $white;
font-size: $font-18;
text-align: center;
}
.privacy {
display: block;
color: $white;
font-size: $font-12;
text-align: left;
padding-bottom: 50px;
}
.logo {
width: 100%;
}
}
@media (min-width: map-get($grid-breakpoints, 'md')) {
.component-home {
padding: $header-height 40px 0 40px;
.logo {
width: calc(100% + 100px);
position: absolute;
left: 50%;
transform: translateX(-50%);
}
}
}

53
components/plp/plp.html

@ -0,0 +1,53 @@
<div class="component-plp">
<div class="container">
<div class="row">
<div class="col-12 col-md-10">
<div class="row">
<div class="col-12 pb-1">
<input type="text" class="input-gray" placeholder="Cerca...">
</div>
<div class="col-12 pb-4">
<select class="select">
<option value="">Filtra</option>
<option value="1">Opzione 1</option>
<option value="2">Opzione 2</option>
<option value="3">Opzione 3</option>
<option value="4">Opzione 4</option>
</select>
</div>
<div class="col-12 col-sm-6 col-md-3">
${require('../productBox/productBox.html')}
</div>
<div class="col-12 col-sm-6 col-md-3">
${require('../productBox/productBox2.html')}
</div>
<div class="col-12 col-sm-6 col-md-3">
${require('../productBox/productBox3.html')}
</div>
<div class="col-12 col-sm-6 col-md-3">
${require('../productBox/productBox4.html')}
</div>
<div class="col-12 col-sm-6 col-md-3">
${require('../productBox/productBox.html')}
</div>
<div class="col-12 col-sm-6 col-md-3">
${require('../productBox/productBox.html')}
</div>
<div class="col-12 col-sm-6 col-md-3">
${require('../productBox/productBox.html')}
</div>
<div class="col-12 col-sm-6 col-md-3">
${require('../productBox/productBox.html')}
</div>
</div>
</div>
<div class="col-12 col-md-2 banner">
banner
</div>
</div>
</div>
</div>

5
components/plp/plp.js

@ -0,0 +1,5 @@
$(document).ready( () => {
console.log('Load component - plp')
})

12
components/plp/plp.scss

@ -0,0 +1,12 @@
@import "../../src/scss/variables.scss";
@import "../../src/scss/mixins.scss";
.component-plp {
padding: 40px 0;
.banner {
background: $light-gray;
text-align: center;
}
}

8
components/productBox/productBox.html

@ -0,0 +1,8 @@
<div class="component-productBox">
<img class="image" src="/images/prod1.png">
<div class="d-flex">
<span class="title">Nome prodotto </span>
<span class="price">17,90 €</span>
</div>
<button class="button button-black add-to-cart">Aggiungi al carrello</button>
</div>

5
components/productBox/productBox.js

@ -0,0 +1,5 @@
$(document).ready( () => {
console.log('Load component - productBox')
})

38
components/productBox/productBox.scss

@ -0,0 +1,38 @@
@import "../../src/scss/variables.scss";
@import "../../src/scss/mixins.scss";
.component-productBox {
position: relative;
padding-bottom: 80px;
height: 100%;
.image {
width: 100%;
padding-bottom: 10px;
}
.title {
display: inline-block;
width: calc(100% - 70px);
padding-right: 5px;
font-size: $font-16;
font-weight: 600;
line-height: $font-16;
}
.price {
display: inline-block;
width: 70px;
font-size: $font-16;
font-weight: light;
text-align: right;
white-space: no-wrap;
}
.add-to-cart{
position: absolute;
bottom: 20px;
width: 100%;
}
}

8
components/productBox/productBox2.html

@ -0,0 +1,8 @@
<div class="component-productBox">
<img class="image" src="/images/prod2.png">
<div class="d-flex">
<span class="title">Nome prodotto Nome prodotto Nome prodotto </span>
<span class="price">170,90 €</span>
</div>
<button class="button button-black add-to-cart">Aggiungi al carrello</button>
</div>

8
components/productBox/productBox3.html

@ -0,0 +1,8 @@
<div class="component-productBox">
<img class="image" src="/images/prod3.png">
<div class="d-flex">
<span class="title">Nome prodotto</span>
<span class="price">7,90 €</span>
</div>
<button class="button button-black add-to-cart">Aggiungi al carrello</button>
</div>

8
components/productBox/productBox4.html

@ -0,0 +1,8 @@
<div class="component-productBox">
<img class="image" src="/images/prod4.png">
<div class="d-flex">
<span class="title">Nome prodotto</span>
<span class="price">8,90 €</span>
</div>
<button class="button button-black add-to-cart">Aggiungi al carrello</button>
</div>

34
images/arrow-down.svg

@ -0,0 +1,34 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
id="svg2244"
version="1.1"
viewBox="0 0 90 90"
height="90mm"
width="90mm">
<defs
id="defs2238" />
<metadata
id="metadata2241">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
id="layer1">
<path
id="path2932"
d="M 7.9511719 20.333984 A 3.5 3.5 0 0 0 5.6542969 21.199219 A 3.5 3.5 0 0 0 5.3242188 26.138672 L 42.365234 68.470703 A 3.50035 3.50035 0 0 0 47.634766 68.470703 L 84.675781 26.138672 A 3.5 3.5 0 0 0 84.345703 21.199219 A 3.5 3.5 0 0 0 79.408203 21.529297 L 45 60.849609 L 10.591797 21.529297 A 3.5 3.5 0 0 0 7.9511719 20.333984 z "
style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-variant-east-asian:normal;font-feature-settings:normal;font-variation-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;shape-margin:0;inline-size:0;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;filter-blend-mode:normal;filter-gaussianBlur-deviation:0;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate;stop-color:#000000;stop-opacity:1;opacity:1" />
</g>
</svg>

After

Width:  |  Height:  |  Size: 2.5 KiB

BIN
images/drop1.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 95 KiB

After

Width:  |  Height:  |  Size: 92 KiB

BIN
images/drop2.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 16 KiB

BIN
images/prod1.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 81 KiB

BIN
images/prod2.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 57 KiB

BIN
images/prod3.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 54 KiB

BIN
images/prod4.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 107 KiB

7
pages/.htaccess

@ -1,3 +1,8 @@
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^([^\.]+)$ $1.php [NC,L]
RewriteRule ^([^\.]+)$ index.php?q=$1 [NC,L]
#
# Rewritebase /
# RewriteCond %{REQUEST_FILENAME} !-f
# RewriteCond %{REQUEST_FILENAME} !-d
# RewriteRule ^(.*)$ index.php?q=$1 [L,QSA]

80
pages/buy.ejs

@ -1,83 +1,5 @@
<!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')}
${require('../components/plp/plp.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>

5
pages/home.ejs

@ -0,0 +1,5 @@
${require('../components/home/home.html')}

20
pages/index.ejs

@ -11,14 +11,20 @@
${require('../components/header/header.html')}
<main class="main-content">
<section class="container">
</section>
</main>
<?php
if(!$_GET['q'] || $_GET['q'] == 'home' || $_GET['q'] == 'iolovolio') {
@include 'home.php';
} else {
?>
<main class="main-content">
<?php
@include $_GET['q'].'.php';
?>
</main>
<?php
}
?>
${require('../components/footer/footer.html')}

83
pages/iolovolio.ejs

@ -1,83 +0,0 @@
<!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>

83
pages/learn.ejs

@ -1,83 +0,0 @@
<!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>

75
src/scss/forms.scss

@ -67,9 +67,14 @@ input[type=password],
input[type=email],
input[type=tel],
input[type=date] {
border: none;
border-bottom: 1px solid $black;
height: 30px;
color: $dark-gray;
background: $white;
border-radius: 0;
height: auto;
display: block;
padding: 10px 10px;
border: 2px solid $white;
@include font-style( $font-sans, 'regular', $font-18);
box-shadow: unset;
text-transform: initial !important;
@ -116,8 +121,13 @@ input[type=date] {
background: transparent;
}
&.input-gray {
border: 2px solid $light-gray;
background: $light-gray;
}
&:disabled {
border-bottom: 1px solid $gray;
border-bottom: 2px solid $gray;
& + .label-text,
& + label {
color: $gray;
@ -125,48 +135,18 @@ input[type=date] {
}
}
fieldset,
.fieldset {
position: relative;
padding-bottom: 35px;
.label-text {
color: $gray;
&.required {
&:after {
content: '*';
}
}
}
&.has-error {
.label-text {
color: $red;
text-transform: uppercase;
font-size: $font-10;
}
.error-message {
color: $red;
display: block !important;
text-transform: uppercase;
font-size: $font-10;
}
input {
border-bottom: 1px solid $red;
}
}
}
select {
appearance: none;
background-image: url(/images/arrow-down.svg);
background-size: auto 40%;
background-repeat: no-repeat;
background-position: right 3px center;
border-bottom: 1px solid $gray;
&:disabled {
background-image: url(/images/arrow-down-gray.svg);
background-image: url(/images/arrow-down.svg);
}
&:focus {
//background-image: url(/images/arrow-up.svg);
}
@ -174,20 +154,19 @@ select {
.button {
border: none;
color: $black;
color: $white;
background: transparent;
border-radius: 0;
height: auto;
display: block;
padding: 10px 20px;
padding: 7px 15px;
border: 2px solid $white;
text-align: center;
@include font-style( $font-sans, 'regular', $font-18);
text-transform: uppercase;
@include font-style( $font-sans, 'regular', $font-14);
&.button-blue {
background: $blue;
color: $white;
&.button-big {
padding: 10px 20px;
font-size: $font-18;
}
&.button-small {
@ -196,6 +175,12 @@ select {
padding: 5px;
}
&.button-black {
background: $dark-gray;
color: $white;
border: 2px solid $dark-gray;
}
&:disabled {
opacity: 0.5;
}

13
src/scss/global.scss

@ -2,6 +2,7 @@
body {
font-family: $font-sans;
font-weight: 400;
letter-spacing: 1px;
margin: 0;
color: $black;
overflow-x: hidden;
@ -16,6 +17,8 @@ ul {
a,
input,
select,
option,
button {
text-decoration: none;
outline: none;
@ -90,6 +93,14 @@ button {
text-transform: uppercase;
}
.w-100 {
width: 100% !important;
}
.h-100 {
height: 100% !important;
}
.middle {
@include middle();
}
@ -106,7 +117,7 @@ button {
.main-content {
min-height: calc(100vh - #{$footer-height});
padding: $header-height-mobile 40px 0 40px;
padding: $header-height-mobile 10px 0 10px;
@media (min-width: map-get($grid-breakpoints, 'md')) {
padding: $header-height 40px 0 40px;

3
src/scss/main.scss

@ -13,3 +13,6 @@
@import "./components/header/header.scss";
@import "./components/footer/footer.scss";
@import "./components/home/home.scss";
@import "./components/plp/plp.scss";
@import "./components/productBox/productBox.scss";

3
webpack.config.js

@ -75,7 +75,8 @@ module.exports = (env) => {
plugins.push(
new HtmlWebpackPlugin({
template: path.resolve(pagesPath, page),
filename: path.resolve(distPath, page.substr(0, page.lastIndexOf(".")) + ".php")
filename: path.resolve(distPath, page.substr(0, page.lastIndexOf(".")) + ".php"),
inject: page == 'index.ejs'
})
)
}

Loading…
Cancel
Save