]> BookStack Code Mirror - website/commitdiff
projects / website / commitdiff
summary | shortlog | log | commit | commitdiff | tree
raw | inline | side by side (parent: 8558387)
Fixed menu and footer on ios devices
authorDan Brown <redacted>
Mon, 21 Mar 2016 18:23:47 +0000 (18:23 +0000)
committerDan Brown <redacted>
Mon, 21 Mar 2016 18:23:47 +0000 (18:23 +0000)
public/index.php patch | blob | history
sass/styles.scss patch | blob | history
scripts/script.js patch | blob | history

diff --git a/public/index.php b/public/index.php
index 2df9ab7d330937039b60fe5c7b127caa1dd30f05..1dd80ca3507faa460da4f9a222c8fb4b7e1ab78f 100644 (file)
--- a/public/index.php
+++ b/public/index.php
@@ -50,7 +50,7 @@
 
 </head>
 
 
 </head>
 
-<body>
+<body ontouchstart="">
 
     <script>
     // Standard Google Analytics Stuff
 
     <script>
     // Standard Google Analytics Stuff
@@ -80,7 +80,7 @@
                     </div>
                 </div>
                 <div class="col-sm-7 menu col-xs-4">
                     </div>
                 </div>
                 <div class="col-sm-7 menu col-xs-4">
-                    <button id="menu-button" class="button muted" type="button"><?php icon('menu'); ?></button>
+                    <button ontouchstart="" tabindex="1" id="menu-button" class="button muted" type="button"><?php icon('menu'); ?></button>
                     <div class="inner">
                         <a href="#features"><span class="icon"><?php icon('star'); ?></span> Features</a>
                         <a href="#demo"><span class="icon"><?php icon('touch_app'); ?></span> Demo</a>
                     <div class="inner">
                         <a href="#features"><span class="icon"><?php icon('star'); ?></span> Features</a>
                         <a href="#demo"><span class="icon"><?php icon('touch_app'); ?></span> Demo</a>
@@ -292,12 +292,12 @@
     <footer>
         <div class="container">
             <div class="row">
     <footer>
         <div class="container">
             <div class="row">
-               <div class="col-sm-3">
+               <div class="col-lg-3">
                        <p>
                            BookStack - Created By <a href="https://danb.me" title="danb.me" target="_blank">Dan Brown</a>
                        </p>
                </div>
                        <p>
                            BookStack - Created By <a href="https://danb.me" title="danb.me" target="_blank">Dan Brown</a>
                        </p>
                </div>
-               <div class="col-sm-9 menu">
+               <div class="col-md-9 menu">
                    <a href="#features"><span class="icon"><?php echo file_get_contents('icons/star.svg') ?></span> Features</a>
                    <a href="#demo"><span class="icon"><?php icon('touch_app'); ?></span> Demo</a>
                    <a href="#screenshots"><span class="icon"><?php icon('image'); ?></span> Screenshots</a>
                    <a href="#features"><span class="icon"><?php echo file_get_contents('icons/star.svg') ?></span> Features</a>
                    <a href="#demo"><span class="icon"><?php icon('touch_app'); ?></span> Demo</a>
                    <a href="#screenshots"><span class="icon"><?php icon('image'); ?></span> Screenshots</a>
diff --git a/sass/styles.scss b/sass/styles.scss
index 0eb217a4bb20fd9a3773f17254fd35c8b4205395..ccca728ca7d3737baacce63092433e2e13ce4e65 100644 (file)
--- a/sass/styles.scss
+++ b/sass/styles.scss
@@ -77,10 +77,6 @@ header #menu-button {
   padding-top: $-m;
 }
 
   padding-top: $-m;
 }
 
-header #menu-button:focus + .inner {
-  display: block;
-}
-
 @include smaller-than($xl) {
   body header {
     padding-top: $-xxl*1.2;
 @include smaller-than($xl) {
   body header {
     padding-top: $-xxl*1.2;
@@ -99,7 +95,6 @@ header #menu-button:focus + .inner {
   header .menu .inner {
     display: none;
     right: $-m;
   header .menu .inner {
     display: none;
     right: $-m;
-    overflow: hidden;
     position: fixed;
     border-radius: 3px;
     width: 240px;
     position: fixed;
     border-radius: 3px;
     width: 240px;
@@ -107,7 +102,7 @@ header #menu-button:focus + .inner {
     z-index: 55;
     padding: 0;
     box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.25);
     z-index: 55;
     padding: 0;
     box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.25);
-    &:focus, &:active {
+    &.showing {
       display: block;
     }
     a {
       display: block;
     }
     a {
@@ -120,6 +115,18 @@ header #menu-button:focus + .inner {
     a .icon svg {
       fill: #444;
     }
     a .icon svg {
       fill: #444;
     }
+    &:after {
+      width: 16px;
+      height: 16px;
+      content: '';
+      display: block;
+      background-color: #FFF;
+      transform: rotate(45deg);
+      position: absolute;
+      top: -6px;
+      border-radius: 2px;
+      right: 22px;
+    }
   }
   footer .menu {
     display: none;
   }
   footer .menu {
     display: none;
diff --git a/scripts/script.js b/scripts/script.js
index 65fa5115ba36126bcecac4ea49c75165eae2c102..3ed37a2c514402fd555c03d9494884ac81c57beb 100644 (file)
--- a/scripts/script.js
+++ b/scripts/script.js
@@ -1,4 +1,27 @@
 
 
+// Mobile menu
+
+var menuButton = document.getElementById('menu-button');
+var menuDropDown = document.querySelector('header div.inner');
+
+menuButton.onclick = function(event) {
+    var menuClass = menuDropDown.className;
+    var visible = menuClass.indexOf('showing') !== -1;
+    if (visible) {
+        menuDropDown.className = menuClass.replace('showing', '');
+    } else {
+        menuDropDown.className += ' showing';
+    }
+    event.stopPropagation();
+};
+
+document.body.onclick = function(event) {
+    menuDropDown.className = menuDropDown.className.replace('showing', '');
+    event.stopPropagation();
+};
+
+// PhotoSwipe
+
 var initPhotoSwipeFromDOM = function(gallerySelector) {
 
     // parse slide data (url, title, size ...) from DOM elements 
 var initPhotoSwipeFromDOM = function(gallerySelector) {
 
     // parse slide data (url, title, size ...) from DOM elements 
The source for the BookStack website, docs and blog.