dslak
/
iolovolio
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Merge branch 'feature/plp' into develop

feature/pdp
Dslak 5 years ago
parent
d3ba028f06 3b66a50498
commit
d60f329adc
32 changed files with 353 additions and 324 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 12
      components/header/header.html
  2. 19
      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. 18
      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
View File

@ -13,13 +13,13 @@
</div> </div>
<ul class="menu"> <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> <a href="/iolovolio" class="label"><b>io</b>lov<b>olio ...</b></a>
</li> </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> <a href="/buy" class="label">acquistare</a>
</li> </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> <a href="/learn" class="label">imparare</a>
</li> </li>
<li class="item disabled"> <li class="item disabled">
@ -28,13 +28,13 @@
</ul> </ul>
<ul class="sidebar-menu"> <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> <a href="/iolovolio" class="label"><b>io</b>lov<b>olio ...</b></a>
</li> </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> <a href="/buy" class="label">acquistare</a>
</li> </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> <a href="/learn" class="label">imparare</a>
</li> </li>
<li class="item disabled"> <li class="item disabled">

19
components/header/header.js
View File

@ -2,27 +2,22 @@
$(document).ready( () => { $(document).ready( () => {
console.log('Load component - header') 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 hamburger = component.find('.hamburger')
const menu = component.find('.sidebar-menu') 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')){
ham.toggleClass('is-active')
console.log(ham, menu)
if(ham.hasClass('is-active')){
menu.addClass('active') menu.addClass('active')
//items.slideDown()
//$('html, body').css({overflow: 'hidden'})
} else { } else {
menu.removeClass('active') menu.removeClass('active')
//items.slideUp()
//$('html, body').css({overflow: 'auto'})
} }
}) })
})
}) })

2
components/header/header.scss
View File

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

22
components/home/home.html
View File

@ -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
View File

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

54
components/home/home.scss
View File

@ -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
View File

@ -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
View File

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

12
components/plp/plp.scss
View File

@ -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
View File

@ -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
View File

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

38
components/productBox/productBox.scss
View File

@ -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
View File

@ -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
View File

@ -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
View File

@ -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
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 2.5 KiB

BIN
images/drop1.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 95 KiB

After

Width:  |  Height:  |  Size: 92 KiB

BIN
images/drop2.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 16 KiB

BIN
images/prod1.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 81 KiB

BIN
images/prod2.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 57 KiB

BIN
images/prod3.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 54 KiB

BIN
images/prod4.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 107 KiB

7
pages/.htaccess
View File

@ -1,3 +1,8 @@
RewriteEngine On RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f 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
View File

@ -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
View File

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

18
pages/index.ejs
View File

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

83
pages/iolovolio.ejs
View File

@ -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
View File

@ -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
View File

@ -67,9 +67,14 @@ input[type=password],
input[type=email], input[type=email],
input[type=tel], input[type=tel],
input[type=date] { 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; box-shadow: unset;
text-transform: initial !important; text-transform: initial !important;
@ -116,8 +121,13 @@ input[type=date] {
background: transparent; background: transparent;
} }
&.input-gray {
border: 2px solid $light-gray;
background: $light-gray;
}
&:disabled { &:disabled {
border-bottom: 1px solid $gray;
border-bottom: 2px solid $gray;
& + .label-text, & + .label-text,
& + label { & + label {
color: $gray; 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 { select {
appearance: none; appearance: none;
background-image: url(/images/arrow-down.svg); background-image: url(/images/arrow-down.svg);
background-size: auto 40%; background-size: auto 40%;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: right 3px center; background-position: right 3px center;
border-bottom: 1px solid $gray;
&:disabled { &:disabled {
background-image: url(/images/arrow-down-gray.svg);
background-image: url(/images/arrow-down.svg);
} }
&:focus { &:focus {
//background-image: url(/images/arrow-up.svg); //background-image: url(/images/arrow-up.svg);
} }
@ -174,20 +154,19 @@ select {
.button { .button {
border: none;
color: $black;
color: $white;
background: transparent; background: transparent;
border-radius: 0; border-radius: 0;
height: auto; height: auto;
display: block; display: block;
padding: 10px 20px;
padding: 7px 15px;
border: 2px solid $white;
text-align: center; 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 { &.button-small {
@ -196,6 +175,12 @@ select {
padding: 5px; padding: 5px;
} }
&.button-black {
background: $dark-gray;
color: $white;
border: 2px solid $dark-gray;
}
&:disabled { &:disabled {
opacity: 0.5; opacity: 0.5;
} }

13
src/scss/global.scss
View File

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

3
src/scss/main.scss
View File

@ -13,3 +13,6 @@
@import "./components/header/header.scss"; @import "./components/header/header.scss";
@import "./components/footer/footer.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
View File

@ -75,7 +75,8 @@ module.exports = (env) => {
plugins.push( plugins.push(
new HtmlWebpackPlugin({ new HtmlWebpackPlugin({
template: path.resolve(pagesPath, page), 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'
}) })
) )
} }

Write Preview
Loading…
Cancel
Save