biobulkbende/biobulkbende.org
0
0
Fork 0
mirror of https://github.com/biobulkbende/biobulkbende.org.git synced 2024-12-25 12:45:23 +00:00
Code Issues Projects Releases Wiki Activity

js automation and mobile menu

Browse Source
This commit is contained in:
Tancre 2020-09-18 22:01:59 +02:00
parent 7bb27cb2ed
commit ffe3634bcf
14 changed files with 3829 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
app/assets/js/App.js Normal file
View File

@ -0,0 +1,3 @@
import MobileMenu from './modules/MobileMenu';
var mobileMenu = new MobileMenu();

1
app/assets/js/Vendor.js Normal file
View File

@ -0,0 +1 @@
import '../temp/modernizr';

26
app/assets/js/modules/MobileMenu.js Normal file
View File

@ -0,0 +1,26 @@
import $ from 'jquery';
class MobileMenu{
constructor(){
this.siteHeader = $(".site-header");
this.menuIcon = $(".site-header__menu-icon");
this.menuContent = $(".site-header__menu-content");
this.siteHeaderLogo= $(".site-header__logo");
this.events();
}
events(){
this.menuIcon.click(this.toggleTheMenu.bind(this));
}
toggleTheMenu(){
this.menuContent.toggleClass("site-header__menu-content--is-visible");
this.siteHeader.toggleClass("site-header--is-expanded");
this.menuIcon.toggleClass("site-header__menu-icon--close-x");
this.siteHeaderLogo.toggleClass("site-header__logo--orange-bg");
}
}
export default MobileMenu;

5
app/assets/scss/modules/_large-hero.scss
View File

@ -34,13 +34,14 @@
} }
&__subtitle { &__subtitle {
font-family: "CocogooseNormal"; // font-family: "CocogooseNormal";
font-weight: 400;
color: white; color: white;
font-size: 1.5rem; font-size: 1.5rem;
margin: 0; margin: 0;
@include atSmall(){ @include atSmall(){
font-size: 2.9rem; font-size: 2.4rem;
} }
} }

89
app/assets/scss/modules/_site-header.scss
View File

@ -4,6 +4,11 @@
z-index: 2; z-index: 2;
transition: background-color .3s ease-out; transition: background-color .3s ease-out;
&--is-expanded {
background-color: orange;
padding-bottom: 18px;
}
@include atMedium(){ @include atMedium(){
position: fixed; position: fixed;
background-color: rgba(#000, 0.4); background-color: rgba(#000, 0.4);
@ -16,6 +21,73 @@
} }
} }
&__menu-icon{
width: 20px;
height: 19px;
position: absolute;
z-index: 10;
top: 10px;
right: 10px;
&::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 20px;
height: 3px;
background: #FFF;
transform-origin: 0 0;
transition: transform .3s ease-out;
}
&__middle {
position: absolute;
top: 8px;
left: 0;
width: 20px;
height: 3px;
background: #FFF;
transition: all .3s ease-out;
transform-origin: 0 50%;
}
&::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 20px;
height: 3px;
background: #FFF;
transform-origin: 0 100%;
transition: transform .3s ease-out;
}
@include atMedium {
display: none;
}
}
&__menu-icon--close-x {
&::before {
transform: rotate(45deg) scaleX(1.25);
}
.site-header__menu-icon__middle{
transform: scaleX(0);
opacity: 0;
}
&::after {
transform: rotate(-45deg) scaleX(1.25) translateY(1px);
}
}
&__menu-content{ &__menu-content{
opacity: 0; opacity: 0;
transform: scale(1.2); transform: scale(1.2);
@ -25,6 +97,12 @@
padding-top: 90px; padding-top: 90px;
text-align: center; text-align: center;
&--is-visible{
transform: scale(1);
opacity: 1;
z-index: 1;
}
@include atMedium(){ @include atMedium(){
opacity: 1; opacity: 1;
z-index: 1; z-index: 1;
@ -35,17 +113,26 @@
&__logo{ &__logo{
position: absolute; position: absolute;
top: 3px; top: 0px;
padding: 5px 15px;
left: 50%; left: 50%;
transform-origin: 50% 0%; transform-origin: 50% 0%;
transform: translateX(-50%) scale(.8); transform: translateX(-50%) scale(.8);
transition: transform .3s ease-out; transition: transform .3s ease-out;
background-color: rgba(black, 0.5);
&--orange-bg {
background-color: orange;
}
@include atMedium(){ @include atMedium(){
padding: 0;
top: 3px;
position: relative; position: relative;
float: left; float: left;
left: auto; left: auto;
transform: translateX(0); transform: translateX(0);
background-color: rgba(black, 0);
} }
} }

18
app/index.html
View File

@ -8,6 +8,10 @@
<meta name="description" content="Bio Bulk Bende is an autonomous organic food cooperative ."> <meta name="description" content="Bio Bulk Bende is an autonomous organic food cooperative .">
<link href='https://fonts.googleapis.com/css?family=Roboto:400,100,300,500,700' rel='stylesheet' type='text/css'> <link href='https://fonts.googleapis.com/css?family=Roboto:400,100,300,500,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="./temp/styles/style.css"> <link rel="stylesheet" type="text/css" href="./temp/styles/style.css">
<!-- build:js assets/scripts/Vendor.js -->
<script type="text/javascript" src="./temp/scripts/Vendor.js"></script>
<!-- endbuild -->
</head> </head>
<body> <body>
@ -18,11 +22,17 @@
<img src="./assets/media/images/bbb_logo_white.png" alt="BBB logo"> <img src="./assets/media/images/bbb_logo_white.png" alt="BBB logo">
</div> </div>
<div class="site-header__menu-icon">
<div class="site-header__menu-icon__middle"></div>
</div>
<div class="site-header__menu-content"> <div class="site-header__menu-content">
<div class="site-header__btn-container"> <div class="site-header__btn-container">
<a href="#" class="btn">Join us!</a> <a href="#" class="btn ">Place your Order</a>
</div> </div>
<nav class="primary-nav primary-nav--pull-right"> <nav class="primary-nav primary-nav--pull-right">
<ul> <ul>
<li><a href="#about-us">About us</a></li> <li><a href="#about-us">About us</a></li>
@ -42,7 +52,7 @@
<div class="large-hero__text-content"> <div class="large-hero__text-content">
<h1 class="large-hero__title">bio bulke bende</h1> <h1 class="large-hero__title">bio bulke bende</h1>
<h2 class="large-hero__subtitle">Organic autonomous foodcoop.</h2> <h2 class="large-hero__subtitle">The organic autonomous foodcoop of Rotterdam</h2>
<p class="large-hero__description">Good quality, delicious food from local suppliers and farmers. Located in Almondestraat 157, <b>bio bulk bende</b> is the first food co-op in Rotterdam. </p> <p class="large-hero__description">Good quality, delicious food from local suppliers and farmers. Located in Almondestraat 157, <b>bio bulk bende</b> is the first food co-op in Rotterdam. </p>
<p><a href="#" class="btn btn--large">Join us!</a></p> <p><a href="#" class="btn btn--large">Join us!</a></p>
</div> </div>
@ -77,6 +87,8 @@
</footer> </footer>
<!-- MODAL --> <!-- MODAL -->
<!-- build:js assets/scripts/App.js -->
<script type="text/javascript" src="./temp/scripts/App.js"></script>
<!-- endbuild -->
</body> </body>
</html> </html>

25
app/temp/scripts/App.js Normal file
View File

File diff suppressed because one or more lines are too long

1
app/temp/scripts/Vendor.js Normal file
View File

@ -0,0 +1 @@
!function(e){var n={};function t(o){if(n[o])return n[o].exports;var r=n[o]={i:o,l:!1,exports:{}};return e[o].call(r.exports,r,r.exports,t),r.l=!0,r.exports}t.m=e,t.c=n,t.d=function(e,n,o){t.o(e,n)||Object.defineProperty(e,n,{enumerable:!0,get:o})},t.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},t.t=function(e,n){if(1&n&&(e=t(e)),8&n)return e;if(4&n&&"object"==typeof e&&e&&e.__esModule)return e;var o=Object.create(null);if(t.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:e}),2&n&&"string"!=typeof e)for(var r in e)t.d(o,r,function(n){return e[n]}.bind(null,r));return o},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,n){return Object.prototype.hasOwnProperty.call(e,n)},t.p="",t(t.s=1)}([,function(e,n,t){"use strict";t.r(n);t(2)},function(e,n){!function(e,n,t,o){var r=[],s={_version:"3.11.3",_config:{classPrefix:"",enableClasses:!0,enableJSClass:!0,usePrefixes:!0},_q:[],on:function(e,n){var t=this;setTimeout((function(){n(t[e])}),0)},addTest:function(e,n,t){r.push({name:e,fn:n,options:t})},addAsyncTest:function(e){r.push({name:null,fn:e})}},a=function(){};a.prototype=s,a=new a;var i=[];var l=t.documentElement,f="svg"===l.nodeName.toLowerCase();!function(){var e,n,t,o,s,l;for(var f in r)if(r.hasOwnProperty(f)){if(e=[],(n=r[f]).name&&(e.push(n.name.toLowerCase()),n.options&&n.options.aliases&&n.options.aliases.length))for(t=0;t<n.options.aliases.length;t++)e.push(n.options.aliases[t].toLowerCase());for(o=typeof n.fn==="function"?n.fn():n.fn,s=0;s<e.length;s++)1===(l=e[s].split(".")).length?a[l[0]]=o:(a[l[0]]&&(!a[l[0]]||a[l[0]]instanceof Boolean)||(a[l[0]]=new Boolean(a[l[0]])),a[l[0]][l[1]]=o),i.push((o?"":"no-")+l.join("-"))}}(),function(e){var n=l.className,t=a._config.classPrefix||"";if(f&&(n=n.baseVal),a._config.enableJSClass){var o=new RegExp("(^|\\s)"+t+"no-js(\\s|$)");n=n.replace(o,"$1"+t+"js$2")}a._config.enableClasses&&(e.length>0&&(n+=" "+t+e.join(" "+t)),f?l.className.baseVal=n:l.className=n)}(i),delete s.addTest,delete s.addAsyncTest;for(var u=0;u<a._q.length;u++)a._q[u]();e.Modernizr=a}(window,window,document)}]);

70
app/temp/styles/style.css
View File

@ -333,6 +333,9 @@ img {
width: 100%; width: 100%;
z-index: 2; z-index: 2;
transition: background-color .3s ease-out; } transition: background-color .3s ease-out; }
.site-header--is-expanded {
background-color: orange;
padding-bottom: 18px; }
@media (min-width: 800px) { @media (min-width: 800px) {
.site-header { .site-header {
position: fixed; position: fixed;
@ -341,6 +344,52 @@ img {
.site-header__btn-container { .site-header__btn-container {
padding: 32px 0px 32px 0px; padding: 32px 0px 32px 0px;
float: right; } } float: right; } }
.site-header__menu-icon {
width: 20px;
height: 19px;
position: absolute;
z-index: 10;
top: 10px;
right: 10px; }
.site-header__menu-icon::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 20px;
height: 3px;
background: #FFF;
transform-origin: 0 0;
transition: transform .3s ease-out; }
.site-header__menu-icon__middle {
position: absolute;
top: 8px;
left: 0;
width: 20px;
height: 3px;
background: #FFF;
transition: all .3s ease-out;
transform-origin: 0 50%; }
.site-header__menu-icon::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 20px;
height: 3px;
background: #FFF;
transform-origin: 0 100%;
transition: transform .3s ease-out; }
@media (min-width: 800px) {
.site-header__menu-icon {
display: none; } }
.site-header__menu-icon--close-x::before {
transform: rotate(45deg) scaleX(1.25); }
.site-header__menu-icon--close-x .site-header__menu-icon__middle {
transform: scaleX(0);
opacity: 0; }
.site-header__menu-icon--close-x::after {
transform: rotate(-45deg) scaleX(1.25) translateY(1px); }
.site-header__menu-content { .site-header__menu-content {
opacity: 0; opacity: 0;
transform: scale(1.2); transform: scale(1.2);
@ -349,6 +398,10 @@ img {
z-index: -10; z-index: -10;
padding-top: 90px; padding-top: 90px;
text-align: center; } text-align: center; }
.site-header__menu-content--is-visible {
transform: scale(1);
opacity: 1;
z-index: 1; }
@media (min-width: 800px) { @media (min-width: 800px) {
.site-header__menu-content { .site-header__menu-content {
opacity: 1; opacity: 1;
@ -357,17 +410,24 @@ img {
transform: scale(1); } } transform: scale(1); } }
.site-header__logo { .site-header__logo {
position: absolute; position: absolute;
top: 3px; top: 0px;
padding: 5px 15px;
left: 50%; left: 50%;
transform-origin: 50% 0%; transform-origin: 50% 0%;
transform: translateX(-50%) scale(0.8); transform: translateX(-50%) scale(0.8);
transition: transform .3s ease-out; } transition: transform .3s ease-out;
background-color: rgba(0, 0, 0, 0.5); }
.site-header__logo--orange-bg {
background-color: orange; }
@media (min-width: 800px) { @media (min-width: 800px) {
.site-header__logo { .site-header__logo {
padding: 0;
top: 3px;
position: relative; position: relative;
float: left; float: left;
left: auto; left: auto;
transform: translateX(0); } } transform: translateX(0);
background-color: rgba(0, 0, 0, 0); } }
.primary-nav { .primary-nav {
padding-top: 10px; } padding-top: 10px; }
@ -450,13 +510,13 @@ img {
.large-hero__title { .large-hero__title {
font-size: 4.8rem; } } font-size: 4.8rem; } }
.large-hero__subtitle { .large-hero__subtitle {
font-family: "CocogooseNormal"; font-weight: 400;
color: white; color: white;
font-size: 1.5rem; font-size: 1.5rem;
margin: 0; } margin: 0; }
@media (min-width: 530px) { @media (min-width: 530px) {
.large-hero__subtitle { .large-hero__subtitle {
font-size: 2.9rem; } } font-size: 2.4rem; } }
.large-hero__description { .large-hero__description {
color: #FFF; color: #FFF;
font-weight: 00; font-weight: 00;

2
app/temp/styles/style.css.map
View File

File diff suppressed because one or more lines are too long

6
gulpfile.js
View File

@ -4,6 +4,10 @@ const autoprefixer = require('autoprefixer'),
postcss = require('gulp-postcss'), postcss = require('gulp-postcss'),
sass = require('gulp-sass'), sass = require('gulp-sass'),
sourcemaps = require('gulp-sourcemaps'), sourcemaps = require('gulp-sourcemaps'),
del = require('del'),
webpack = require('webpack-stream'),
webpackConfig = require('./webpack.config.js'),
modernizr = require('gulp-modernizr'),
browserSync = require('browser-sync').create(); browserSync = require('browser-sync').create();
@ -59,7 +63,7 @@ const watch = function() {
} }
}); });
gulp.watch("./app/assets/scss/**/*.scss", {usePolling : true}, gulp.series(scssTask)).on('change', browserSync.reload); gulp.watch("./app/assets/scss/**/*.scss", {usePolling : true}, gulp.series(scssTask)).on('change', browserSync.reload);
gulp.watch("./app/assets/js/**/*.js").on('change', browserSync.reload); gulp.watch("./app/assets/js/**/*.js", {usePolling : true}, gulp.series(cleanScripts, modernizrTask, scriptsTask, endCleanModernizr));
// gulp.watch("./app/assets/images", {usePolling : true}, gulp.series(imagesTask)); // gulp.watch("./app/assets/images", {usePolling : true}, gulp.series(imagesTask));
gulp.watch("./app/*.html").on('change', browserSync.reload); gulp.watch("./app/*.html").on('change', browserSync.reload);
}; };

3559
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

11
package.json
View File

@ -9,11 +9,20 @@
"author": "", "author": "",
"license": "ISC", "license": "ISC",
"devDependencies": { "devDependencies": {
"@babel/core": "^7.11.6",
"@babel/preset-env": "^7.11.5",
"autoprefixer": "^9.8.6", "autoprefixer": "^9.8.6",
"babel-loader": "^8.1.0",
"browser-sync": "^2.26.12", "browser-sync": "^2.26.12",
"del": "^5.1.0",
"gulp": "^4.0.2", "gulp": "^4.0.2",
"gulp-modernizr": "^4.0.1",
"gulp-postcss": "^8.0.0", "gulp-postcss": "^8.0.0",
"gulp-sass": "^4.1.0", "gulp-sass": "^4.1.0",
"gulp-sourcemaps": "^2.6.5" "gulp-sourcemaps": "^2.6.5",
"webpack-stream": "^6.1.0"
},
"dependencies": {
"jquery": "^3.5.1"
} }
} }

26
webpack.config.js Normal file
View File

@ -0,0 +1,26 @@
const path = require('path');
module.exports = {
mode: "production",
entry: {
App: "./app/assets/js/App.js",
Vendor: "./app/assets/js/Vendor.js"
},
output: {
path: path.resolve(__dirname, "dist/scripts"),
filename: "[name].js"
},
module: {
rules: [
{
test: /\.(js)$/,
exclude: /node_modules/,
use: ['babel-loader']
}
]
},
resolve: {
extensions: ['*', '.js']
}
}