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

add header

feature/header
Carmine De Rosa 5 years ago
parent
b089ded9e6
commit
e97aac8c8b
16 changed files with 526 additions and 41 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. 1
      components/footer/footer.scss
  2. 38
      components/header/header.html
  3. 25
      components/header/header.js
  4. 98
      components/header/header.scss
  5. 5
      package.json
  6. 3
      pages/.htaccess
  7. 83
      pages/buy.ejs
  8. 59
      pages/index.ejs
  9. 83
      pages/iolovolio.ejs
  10. 83
      pages/learn.ejs
  11. 9
      src/scss/fonts.scss
  12. 17
      src/scss/forms.scss
  13. 1
      src/scss/global.scss
  14. 1
      src/scss/main.scss
  15. 24
      src/scss/variables.scss
  16. 37
      webpack.config.js

1
components/footer/footer.scss
View File

@ -2,6 +2,7 @@
@import "../../src/scss/mixins.scss"; @import "../../src/scss/mixins.scss";
.component-footer { .component-footer {
position: absolute;
height: $footer-height; height: $footer-height;
width: 100%; width: 100%;
background: $gray; background: $gray;

38
components/header/header.html
View File

@ -1,3 +1,41 @@
<header class="component-header"> <header class="component-header">
<div class="container d-flex h-100">
<div class="hamburger hamburger--spin my-auto">
<span class="hamburger-box">
<span class="hamburger-inner"></span>
</span>
</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> </header>

25
components/header/header.js
View File

@ -2,4 +2,27 @@
$(document).ready( () => { $(document).ready( () => {
console.log('Load component - header') 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'})
}
})
})
})

98
components/header/header.scss
View File

@ -2,8 +2,104 @@
@import "../../src/scss/mixins.scss"; @import "../../src/scss/mixins.scss";
.component-header { .component-header {
height: $header-height;
position: fixed;
display: flex;
top: 0;
left: 0;
height: $header-height-mobile;
width: 100%; width: 100%;
background: $olive; background: $olive;
color: $white; color: $white;
.hamburger {
display: flex;
margin-right: 20px;
}
.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;
.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;
.menu {
display: flex;
}
.sidebar-menu {
top: $header-height;
height: calc(100vh - #{$header-height});
}
}
} }

5
package.json
View File

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

3
pages/.htaccess
View File

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

83
pages/buy.ejs
View File

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

59
pages/index.ejs
View File

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

83
pages/iolovolio.ejs
View File

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

83
pages/learn.ejs
View File

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

9
src/scss/fonts.scss
View File

@ -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');

17
src/scss/forms.scss
View File

@ -10,6 +10,23 @@ button {
button { button {
border: none; border: none;
cursor: pointer; 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, input,

1
src/scss/global.scss
View File

@ -101,6 +101,7 @@ button {
.main-content { .main-content {
min-height: calc(100vh - #{$header-height} - #{$footer-height} - 50px); min-height: calc(100vh - #{$header-height} - #{$footer-height} - 50px);
padding: $header-height 40px 0 40px;
&.container-fluid { &.container-fluid {
&.full-width { &.full-width {

1
src/scss/main.scss
View File

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

24
src/scss/variables.scss
View File

@ -30,9 +30,8 @@ $container-max-widths: (
xl: 1560px xl: 1560px
); );
$font-serif: 'Acumin Variable Concept';
$font-sans: 'Acumin Variable Concept';
$font-serif: 'Source Sans Pro';
$font-sans: 'Source Sans Pro';
$icon: 'icomoon'; $icon: 'icomoon';
$black: #000; $black: #000;
@ -44,11 +43,24 @@ $dark-gray: #393939;
$olive: #86876f; $olive: #86876f;
$orange: #ddb279; $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: 120px;
$header-height-mobile: 100px;
$header-height-mobile: 50px;
$footer-height: 30px; $footer-height: 30px;
/* Font-size variables */ /* Font-size variables */

37
webpack.config.js
View File

@ -42,34 +42,27 @@ module.exports = (env) => {
$: 'jquery', $: 'jquery',
jQuery: 'jquery' jQuery: 'jquery'
}), }),
new CopyWebpackPlugin([
{
context: componentPath,
from: '**/*.html',
to: distPath + '/components',
},
]),
new CopyWebpackPlugin([
{
context: imagesPath,
from: '*.*',
to: distPath + '/images',
},
]),
new CopyWebpackPlugin([
{
context: docsPath,
from: '*.*',
to: distPath + '/docs',
},
])
new CopyWebpackPlugin({
patterns: [
{
context: componentPath,
from: '**/*.html',
to: distPath + '/components/[path]/[name].php',
},
{
context: imagesPath,
from: '*.*',
to: distPath + '/images',
}
]
})
] ]
fs.readdirSync(pagesPath).forEach( (page) => { fs.readdirSync(pagesPath).forEach( (page) => {
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(".")) + ".html")
filename: path.resolve(distPath, page.substr(0, page.lastIndexOf(".")) + ".php")
}) })
) )
}) })

Write Preview
Loading…
Cancel
Save