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
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 1
      components/footer/footer.scss
  2. 38
      components/header/header.html
  3. 23
      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. 21
      webpack.config.js

1
components/footer/footer.scss
View File

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

38
components/header/header.html
View File

@ -1,3 +1,41 @@
<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>

23
components/header/header.js
View File

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

98
components/header/header.scss
View File

@ -2,8 +2,104 @@
@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;
.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",
"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",

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

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 {
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,

1
src/scss/global.scss
View File

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

1
src/scss/main.scss
View File

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

24
src/scss/variables.scss
View File

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

21
webpack.config.js
View File

@ -42,34 +42,27 @@ 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) => {
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")
})
)
})

Write Preview
Loading…
Cancel
Save