Add mobile view

PHPDX · Apr 9, 2019 · aafdaad · aafdaad
1 parent fe1a72e
commit aafdaad
Show file tree

Hide file tree

Showing 11 changed files with 122 additions and 27 deletions.
diff --git a/composer.json b/composer.json
@@ -22,7 +22,7 @@
     "cache/filesystem-adapter": "^1.0",
     "erusev/parsedown": "^1.6",
     "filp/whoops": "^2.1",
-    "artesaos/seotools": "^0.11.1",
+    "artesaos/seotools": "dev-master",
     "guzzlehttp/guzzle": "^6.3",
     "spatie/schema-org": "^1.4",
     "joshtronic/php-loremipsum": "^1.0",

diff --git a/composer.lock b/composer.lock
diff --git a/public/packages/cascadiaphp/themes/cascadiaphp/elements/footer.php b/public/packages/cascadiaphp/themes/cascadiaphp/elements/footer.php
@@ -5,7 +5,7 @@
 $c = $c ?? null;
 ?>
 
-<div class="cp-footer-bottom cp-row flex flex-column">
+<div class="cp-footer-bottom cp-row flex flex-sm-column">
     <div class="cp-footer-bottom-container flex cp-column cp-padded">
         <div class="flex-1 flex flex-column">
             <div class="cp-short-container">

diff --git a/public/packages/cascadiaphp/themes/cascadiaphp/elements/footer_top.php b/public/packages/cascadiaphp/themes/cascadiaphp/elements/footer_top.php
@@ -12,7 +12,7 @@
                 <span>THE OFFICIAL</span>
                 <span>2019 PHP Conference</span>
             </div>
-            <div class="cp-footer-top-bottom-content">
+            <div class="cp-footer-top-bottom-content text-lg-right">
                 <span>OF THE PACIFIC NORTHWEST</span>
                 <span>Portland, OR</span>
             </div>

diff --git a/public/packages/cascadiaphp/themes/cascadiaphp/elements/header.php b/public/packages/cascadiaphp/themes/cascadiaphp/elements/header.php
@@ -15,9 +15,22 @@
                     <?= globalArea('Header Left', $c) ?>
                 </div>
                 <div class="cp-header-right">
-                    <?= globalArea('Header Right', $c) ?>
+                    <nav class="d-lg-flex d-none">
+                        <?= globalArea('Header Right', $c) ?>
+                    </nav>
+                    <a href="javascript:void" class="hamburger d-lg-none d-inline-block"></a>
                 </div>
             </div>
             <div class="cp-separator"></div>
         </div>
+        <div class="cp-hamburger hidden d-lg-none cp-padded">
+            <?= globalArea('Header Mobile', $c) ?>
+        </div>
 
+        <script>
+            (function() {
+                $('.hamburger').on('click', function() {
+                    $('.cp-hamburger').toggleClass('hidden')
+                })
+            }());
+        </script>
diff --git a/public/packages/cascadiaphp/themes/cascadiaphp/page_theme.php b/public/packages/cascadiaphp/themes/cascadiaphp/page_theme.php
@@ -16,7 +16,6 @@ public function registerAssets()
         $this->requireAsset('javascript', 'jquery');
     }
 
-
     /**
      * @return array
      */
@@ -35,7 +34,7 @@ public function getThemeAreaLayoutPresets()
             [
                 'handle' => 'three_columns',
                 'name' => 'Three Columns',
-                'container' => '<div class="cp-layout flex"></div>',
+                'container' => '<div class="cp-layout flex flex-column flex-lg-row"></div>',
                 'columns' => [
                     '<div class="mr3 flex-1"></div>',
                     '<div class="mr1 mx3 flex-1"></div>',

diff --git a/resources/sass/theme/components/hamburger.sass b/resources/sass/theme/components/hamburger.sass
@@ -0,0 +1,24 @@
+.hamburger
+  position: relative
+  padding-left: 1.5em
+
+  &:hover
+    &:before
+      border-color: $color-cyan
+
+.hamburger:before
+  content: ""
+  position: absolute
+  top: 0.25em
+  left: 0
+  width: 1.5em
+  height: 0.125em
+  border-top: 0.5em double
+  border-bottom: 0.166666em solid
+  padding-bottom: 0.2em
+  transition: border-color 0.25s
+  border-color: $color-white
+
+  &:hover
+    border-color: $color-cyan
+
diff --git a/resources/sass/theme/layout/footer.sass b/resources/sass/theme/layout/footer.sass
@@ -6,8 +6,6 @@
 
     .cp-footer-top-bottom-content
       margin-top: em(32)
-      float: right
-      text-align: right
 
     .cp-footer-top-oregon
       flex: 1

diff --git a/resources/sass/theme/layout/header.sass b/resources/sass/theme/layout/header.sass
@@ -1,4 +1,5 @@
 @import "../helpers/overlay"
+@import "../components/hamburger"
 @import "~bootstrap/scss/buttons"
 @import "~bootstrap/scss/mixins/buttons"
 
@@ -24,6 +25,8 @@
 
   .cp-header-left img
     margin: 30px 0
+    max-width: 100%
+    height: auto
 
   .cp-header-right
     flex: 2
@@ -32,6 +35,8 @@
       list-style-type: none
       padding: 0
       margin: 0
+      text-align: right
+
       li
         display: inline-block
         text-transform: uppercase
@@ -40,7 +45,7 @@
         &.nav-path-selected
           border-bottom: solid 1px white
 
-        &:nth-child(6)
+        &:last-child
           border-bottom: none
           a
             @include button-variant($color-orange, $color-orange)
@@ -52,10 +57,36 @@
           color: white !important
           letter-spacing: em(3)
 
-
 .cp-separator
   background-color: $color-orange
   min-height: 10px
 
+.cp-hamburger
+  @extend .shadow-inner
+  background-color: mix($color-orange, $color-gravel)
+  transition: max-height 0.5s ease-in-out
+  max-height: 100vh
+
+  a
+    color: $color-white
+
+  ul
+    list-style-type: none
+    padding: 0
+
+    li > a
+      font-size: 1.125em
+      display: block
+      background-color: transparent
+      transition: background-color 0.25s ease
+      padding: .5em 1em
+      margin: .25em -1em
+      text-align: center
+      border-radius: 1em
+
+      &:hover
+        background-color: rgba(0,0,0,.5)
 
+  &.hidden
+    max-height: 0
 
diff --git a/resources/sass/theme/layout/layout.sass b/resources/sass/theme/layout/layout.sass
@@ -17,5 +17,13 @@ html
 .cp-padded
   padding: 0 $padding
 
+@each $breakpoint in map-keys($grid-breakpoints)
+  @include media-breakpoint-up($breakpoint)
+    $infix: breakpoint-infix($breakpoint, $grid-breakpoints)
+
+    .cp-padded-#{$infix}
+      padding: 0 $padding
+
+
 .cp-content-section
   padding: em(40) 0
diff --git a/resources/sass/theme/layout/reset.sass b/resources/sass/theme/layout/reset.sass
@@ -1,13 +1,26 @@
+
+
+@import "../config"
+
+:root
+  --breakpoint-xs: 0
+  --breakpoint-sm: 576px
+  --breakpoint-md: 900px
+  --breakpoint-lg: 1200px
+  --breakpoint-xl: #{$max-width}
+
+
+$grid-breakpoints: (xs: 0, sm: 576px, md: 900px, lg: 1200px, xl: 1700px)
+
 @import "~bootstrap/scss/bootstrap-reboot"
-@import "~flex-object/lib/flex"
-@import "~flex-object/lib/sm-flex"
-@import "~flex-object/lib/md-flex"
-@import "~flex-object/lib/lg-flex"
+@import "~bootstrap/scss/utilities/display"
+@import "~bootstrap/scss/utilities/flex"
+@import "~bootstrap/scss/utilities/float"
+@import "~bootstrap/scss/utilities/text"
+
 @import "~basscss-margin/index"
 @import "~basscss-padding/index"
 
-@import "../config"
-
 $browser-context: 16
 
 // A function to convert pixel values to rem values
@@ -19,5 +32,13 @@ body
   font-family: $font-primary
   font-size: em(18)
 
+.flex
+  display: flex
+
 .flex-1
   flex: 1
+
+.flex-auto
+  flex: 1 1 auto
+  min-width: 0
+  min-height: 0