Added responsive features

OFFLINE-GmbH · Dec 8, 2016 · 5ea8c88 · 5ea8c88
1 parent 80ee63f
commit 5ea8c88
Show file tree

Hide file tree

Showing 17 changed files with 102 additions and 4 deletions.
diff --git a/assets/app.js b/assets/app.js
diff --git a/assets/main.css b/assets/main.css
diff --git a/assets/main.css.map b/assets/main.css.map
diff --git a/layouts/default.htm b/layouts/default.htm
@@ -17,6 +17,8 @@
 </head>
 <body>
 
+{% partial 'slideNav' %}
+
 <div class="site-wrapper">
 
     {% partial 'topbar' %}

diff --git a/partials/hamburger.htm b/partials/hamburger.htm
@@ -0,0 +1,3 @@
+<div class="hamburger">
+    <img src="{{ 'assets/hamburger.svg' | theme }}" alt=""/>
+</div>
diff --git a/partials/navigation.htm b/partials/navigation.htm
@@ -1,5 +1,6 @@
 <div class="wrapper nav-wrapper">
     <nav class="nav-main">
+        {% partial 'hamburger' %}
         {% component 'mainMenu' %}
     </nav>
     {% partial 'searchbox' %}

diff --git a/partials/slideNav.htm b/partials/slideNav.htm
@@ -0,0 +1,3 @@
+<div class="slide-nav">
+    {% component 'mainMenu' %}
+</div>
diff --git a/resources/js/app.js b/resources/js/app.js
@@ -2,6 +2,8 @@ var attachFastClick = require('fastclick');
 
 $(function () {
     global.$body = $('body');
+    global.$hamburger = $('.hamburger');
+    global.$siteWrapper = $('.site-wrapper');
 
     setTimeout(() => {
         // Snipcart needs a few moments to populate the
@@ -10,5 +12,7 @@ $(function () {
         $('.deferred-item').addClass('deferred-item--visible');
     }, 1000);
 
+    require('./modules/slideNav.js');
+
     attachFastClick(document.body);
 });
diff --git a/resources/js/modules/slideNav.js b/resources/js/modules/slideNav.js
@@ -0,0 +1,7 @@
+$('<div class="slide-nav-overlay">').on('click', e => {
+    global.$body.removeClass('slide-nav-is-open');
+}).appendTo(global.$siteWrapper);
+
+global.$hamburger.on('click', e => {
+    global.$body.addClass('slide-nav-is-open');
+});
diff --git a/resources/styl/components/_footer.styl b/resources/styl/components/_footer.styl
@@ -11,13 +11,16 @@
         .category
             lost-column 1/4
             margin 0
+            +below('m')
+                lost-column 1/2
+            +below('s')
+                lost-column 1/1
             .category-link
                 color #fff
 
         .sub-categories .category-link
             color #aaa
 
-
 .copyright
     background #252525
     text-align center

diff --git a/resources/styl/components/_hamburger.styl b/resources/styl/components/_hamburger.styl
@@ -0,0 +1,5 @@
+.hamburger
+    margin-top .6em
+    margin-left .5em
+    +above('m')
+        display none
diff --git a/resources/styl/components/_header.styl b/resources/styl/components/_header.styl
@@ -7,8 +7,15 @@
     &__right
         lost-column 1/3
 
+        +below('m')
+            lost-column 1/2
+            lost-move 1/2
+
     &__center
         text-align center
+        +below('m')
+            text-align left
+            lost-move -1/2
 
         a
             color inherit
@@ -17,8 +24,19 @@
         img
             max-width 100%
 
+
+    &__left
+        +below('m')
+            display none
+
 .website-heading
     font-size 1.9em
     padding .7em 0
     margin 0
     color secondary-color
+    +below('s')
+        font-size 1.4em
+        margin-top 0.25em
+    +below('xs')
+        line-height 1.4
+
diff --git a/resources/styl/components/_navigation.styl b/resources/styl/components/_navigation.styl
@@ -6,6 +6,10 @@
 .nav-main
     position relative
     lost-column 6/8 2
+    +below('s')
+        lost-column 2/8 2
+        .nav-items
+            display none
 
     .nav-item
         display inline-block
@@ -72,6 +76,8 @@
         position relative
         &:last-child
             padding-right 0
+        +below('s')
+            font-size .6em
 
     .nav-icon
         display block

diff --git a/resources/styl/components/_searchbox.styl b/resources/styl/components/_searchbox.styl
@@ -3,6 +3,8 @@
     text-align right
     margin-top .4em
     position relative
+    +below('s')
+        lost-column 6/8 2
 
     &__input
         border-radius 2px

diff --git a/resources/styl/components/_slide-nav.styl b/resources/styl/components/_slide-nav.styl
@@ -0,0 +1,35 @@
+.slide-nav
+    position fixed
+    left 0
+    width 280px
+    height 100%
+    overflow-y auto
+    background #fafafa
+    transform translate3d(-100%, 0, 0)
+
+.slide-nav-overlay
+    opacity 0
+    background rgba(255, 255, 255, .6)
+    pointer-events none
+    position absolute
+    width 100%
+    height 100%
+    top 0
+    left 0
+
+.slide-nav,
+.site-wrapper,
+.slide-nav-overlay
+    transition .2s ease-out
+    transiton-property transform, opacity
+
+.slide-nav-is-open
+    overflow hidden
+    .site-wrapper
+        transform translate3d(280px, 0, 0)
+    .slide-nav
+        transform translate3d(0, 0, 0)
+    .slide-nav-overlay
+        opacity 1
+        pointer-events all
+
diff --git a/resources/styl/components/_topbar.styl b/resources/styl/components/_topbar.styl
@@ -15,9 +15,16 @@
     &__center,
     &__right
         lost-column 1/3
+        +below('m')
+            display none
 
     &__center
         text-align center
 
     &__right
         text-align right
+        +below('m')
+            lost-column 1/1
+            display block
+        +below('s')
+            text-align center
diff --git a/resources/styl/main.styl b/resources/styl/main.styl
@@ -23,6 +23,8 @@
 @import 'components/_footer'
 @import 'components/_buttons'
 @import 'components/_navigation'
+@import 'components/_hamburger'
+@import 'components/_slide-nav'
 @import 'components/_table'
 @import 'components/_forms'
 @import 'components/_pagination'