Fixed menu and footer on ios devices

author Dan Brown <redacted>

Mon, 21 Mar 2016 18:23:47 +0000 (18:23 +0000)

committer Dan Brown <redacted>

Mon, 21 Mar 2016 18:23:47 +0000 (18:23 +0000)
author Dan Brown <redacted>
Mon, 21 Mar 2016 18:23:47 +0000 (18:23 +0000)
committer Dan Brown <redacted>
Mon, 21 Mar 2016 18:23:47 +0000 (18:23 +0000)
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>
  
-<body>
+<body ontouchstart="">
  
      <script>
      // Standard Google Analytics Stuff
@@ -80,7 +80,7 @@
                      </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>
@@ -292,12 +292,12 @@
      <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>
-               <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>
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;
  }
  
-header #menu-button:focus + .inner {
-  display: block;
-}
-
  @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;
-    overflow: hidden;
      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);
-    &:focus, &:active {
+    &.showing {
        display: block;
      }
      a {
@@ -120,6 +115,18 @@ header #menu-button:focus + .inner {
      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;
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
author	Dan Brown <redacted>
	Mon, 21 Mar 2016 18:23:47 +0000 (18:23 +0000)
committer	Dan 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