various bugfixes

Author: pbakaus

amp-pwa-reader/css/config.css

@@ -1,4 +1,4 @@
 :root {
   --header-height: 60px;
-  --animation-speed: 0.3s;
+  --animation-speed: 3s;
 }

amp-pwa-reader/css/header.css

@@ -18,11 +18,9 @@ header svg {
   margin-top: 6px;
 }
 
-label[for="nav-trigger"] {
-    /* critical positioning styles */
+.hamburger {
     position: absolute;
     z-index: 2;
-
     border: 0;
     outline: none;
     border-radius: 50%;
@@ -32,6 +30,8 @@ label[for="nav-trigger"] {
     left: 1em;
     top: auto;
     box-shadow: 0 0 0 0.0625rem rgba(0,0,0,0.08);
+    padding: 15px 15px;
+    display: inline-block;
 }
 
 /*!
@@ -42,19 +42,15 @@ label[for="nav-trigger"] {
  * @link https://github.com/jonsuh/hamburgers
  */
 .hamburger {
-  padding: 15px 15px;
-  display: inline-block;
-  cursor: pointer;
   transition-property: opacity, filter;
   transition-duration: var(--animation-speed);
   transition-timing-function: linear;
   font: inherit;
   color: inherit;
   text-transform: none;
-  background-color: transparent;
-  border: 0;
   margin: 0;
-  overflow: visible;}
+  overflow: visible;
+}
 
 .hamburger-box {
   width: 32px;
@@ -88,9 +84,9 @@ label[for="nav-trigger"] {
    * Arrow
    */
 .article-shown .hamburger .hamburger-inner::before,
-#nav-trigger:checked ~ header .hamburger .hamburger-inner::before {
+.nav-shown .hamburger .hamburger-inner::before {
   transform: translate3d(-8px, 3px, 0) rotate(-45deg) scale(0.7, 1); }
 
 .article-shown .hamburger .hamburger-inner::after,
-#nav-trigger:checked ~ header .hamburger .hamburger-inner::after {
+.nav-shown .hamburger .hamburger-inner::after {
   transform: translate3d(-8px, -3px, 0) rotate(45deg) scale(0.7, 1); }

amp-pwa-reader/css/main.css

@@ -36,6 +36,5 @@ body {
 
 main {
   line-height: 1.4;
-
 }
 

amp-pwa-reader/css/nav.css

@@ -3,7 +3,7 @@
     width: 80vw;
     height: 100vh;
     max-width: 200px;
-    position: absolute;
+    position: fixed;
     top: var(--header-height);
     left: 0;
     transform: translateX(-100%);
@@ -39,24 +39,18 @@
     background: linear-gradient(135deg, rgba(64, 117, 199, 0.1) 0%,rgba(13, 71, 161, 0.37) 100%);
 }
 
-/* Nav Trigger */
-#nav-trigger {
-    position: absolute;
-    clip: rect(0, 0, 0, 0);
-}
-
 header,
 main,
 .category,
 .navigation {
     transition: transform var(--animation-speed);
 }
 
-#nav-trigger:checked ~ .category,
-#nav-trigger:checked ~ main {
+.nav-shown .category,
+.nav-shown main {
     transform: translateX(200px);
 }
 
-#nav-trigger:checked ~ .navigation {
+.nav-shown .navigation {
     transform: translateX(0);
 }

amp-pwa-reader/index.html

@@ -19,15 +19,13 @@
 
   <div class="wrapper">
 
-    <input type="checkbox" id="nav-trigger" />
-
     <header>
 
-      <label for="nav-trigger" class="hamburger">
+      <button class="hamburger">
         <span class="hamburger-box">
           <span class="hamburger-inner"></span>
         </span>
-      </label>
+      </button>
 
       <svg width="160" height="30" viewBox="0 0 320 60" class="new-header__logo__svg inline-guardian-logo-160__svg inline-logo__svg">
       <path fill="#fff" d="M284 45h16v-3l-3-1.5v-20c1.2-.9 2.8-1.1 4.3-1.1 2.8 0 3.8.9 3.8 4.1v17l-3 1.5v3h16v-3l-3-1.5v-19c0-5.7-2.2-8.3-7.2-8.3-4.1 0-8.1 1.5-10.8 4V13h-1l-12.4 2.2v2.7l3.4 1.6v21l-3 1.5-.1 3zM245.3.4c-3 0-5.4 2.4-5.4 5.5 0 3 2.4 5.4 5.4 5.4 2.9 0 5.4-2.4 5.4-5.4-.1-3.1-2.5-5.5-5.4-5.5zM237 15.1v2.8l3 1.6v20.9l-3 1.5v3h16v-3l-3-1.5V13.1h-1l-12 2zM222.9 39c-.7.6-1.6 1.1-3.1 1.1-4 0-5.9-3.3-5.9-10.9 0-8.7 2.4-11.7 5.6-11.7 1.8 0 2.7.6 3.4 1.4V39zm0-24.5c-1.2-.9-3.2-1.4-4.9-1.4-7.4 0-14.5 4.3-14.5 16.8 0 11.9 7.1 15.7 11.8 15.7 3.8 0 6.4-1.7 7.6-3.4h.3v3.3h.9l11.9-1.4v-2.3l-3.2-1.8V.6h-.8l-12.6 2v2.8l3.4 1.6v7.5h.1zM181 18l3 1.5v20.9l-3 1.5v3h17v-3l-3.9-1.5V24.1c1.8-1.4 4-1.9 6.7-1.9.9 0 1.6.2 2.2.3v-9c-.3-.1-.7-.2-1.2-.2-3.3 0-5.9 2.1-7.7 6.2V13H193l-12 2v3zm-19.3-.8c3.9 0 5 2 5 5.9v3.5l-5.8 1.1c-5.9 1.1-10.4 3-10.4 9.3 0 5.1 3.5 8.7 8.3 8.7 3.8 0 7.4-1.7 8.7-4.4h.3c.5 3.3 3.3 4.4 6.4 4.4 2.4 0 4.8-.6 5.7-1.6v-2l-3-1.5v-18c0-6.9-5-9.4-13.1-9.4-5.3 0-8.8 1.4-11.6 2.7v7.8h4.7l2-6c.9-.5 2.4-.5 2.8-.5zm2.3 22.9c-1.9 0-4-1.1-4-4.6 0-2.4 2.4-4.6 4.8-5l2.2-.5v8.5s-1.9 1.6-3 1.6zm100.8-22.9c3.9 0 5 2 5 5.9v3.5l-5.8 1.1c-5.9 1.1-10.4 3-10.4 9.3 0 5.1 3.5 8.7 8.3 8.7 3.8 0 7.4-1.7 8.7-4.4h.3c.5 3.3 3.3 4.4 6.4 4.4 2.4 0 4.8-.6 5.7-1.6v-2l-3-1.5v-18c0-6.9-5-9.4-13.1-9.4-5.3 0-8.8 1.4-11.6 2.7v7.8h4.7l2-6c.8-.5 2.3-.5 2.8-.5zm2.2 22.9c-1.9 0-4-1.1-4-4.6 0-2.4 2.4-4.6 4.8-5l2.2-.5v8.5s-1.9 1.6-3 1.6zm-138.7 5.6c.4 0 .9 0 1.3-.1 3.5-.3 6.7-2 8.4-4.2v4.1l12-1.5v-2l-3-2V13h-1l-11.9 2.3v2.8l3.9 1.6V38c-1.1.8-2.4 1.3-4.2 1.3-2.5 0-4.8-.8-4.8-4.3V13h-1l-12 2.5v2.6l4 1.6V36c0 5.4 2.2 9.7 8.3 9.7zM96 38c-1.2 0-2.5-.8-2.5-1.9 0-.8.6-1.7 1.3-2.3 1.6.5 3 .6 5 .6 7.8 0 13.2-3.7 13.2-10.4 0-3-1.3-4.6-3.2-6.4L115 19v-6l-8.2 1.6c-1.9-.7-4.5-1.6-7-1.6-7.8 0-13.2 4.1-13.2 10.8 0 4.1 2 7.1 5 8.8l.3.2c-1.7 1.2-5.3 4-5.3 7.2 0 2.4 1.5 4.8 4.8 5.5C88 46.3 84 48 84 52c0 4.1 5.9 8 15.5 8 11.8 0 16.5-5.7 16.5-13 0-6.1-2.8-9-9.5-9H96zm7.5-14c0 5.7-1.3 6.5-3.5 6.5s-4-.8-4-6.5c0-5.8 1.8-7.5 4-7.5s3.5 2 3.5 7.5zM92 50.9c.1-1.5 1.1-3.4 3.7-3.6h8.6c2.5 0 3.7 2 3.7 3.6 0 3.2-2 4.4-8.3 4.4-5.5 0-7.8-2.2-7.7-4.4z"></path>

amp-pwa-reader/js/Article.js

@@ -133,6 +133,8 @@ class Article {
                     // add class to html element for global CSS stuff
                     document.documentElement.classList.add('article-shown');
 
+                    this.takeoverScroll();
+
                     // Set the visibility state of the AMP doc to visible
                     this.ampDoc.setVisibilityState('visible');
 
@@ -149,6 +151,8 @@ class Article {
         // remove class to html element for global CSS stuff
         document.documentElement.classList.remove('article-shown');
 
+        this.restoreScroll();
+
         // Show the card header
         this.card.elem.style.opacity = '1';
 
@@ -157,11 +161,22 @@ class Article {
 
         return new Promise((resolve, reject) => {
             this.animateOut().onfinish = () => {
+
                 this.clear();
                 resolve();
             };
         });
 
     }
 
+    takeoverScroll() {
+        this._mainScrollY = document.scrollingElement.scrollTop;
+        document.scrollingElement.scrollTop = 0;
+        this.container.style.transform = '';
+    }
+
+    restoreScroll() {
+        document.scrollingElement.scrollTop = this._mainScrollY;
+    }
+
 }

amp-pwa-reader/js/Nav.js

@@ -60,6 +60,9 @@ class Nav {
         }));
       }
 
+      // reset scroll position
+      document.scrollingElement.scrollTop = 0;
+
     });
 
   }
@@ -68,12 +71,25 @@ class Nav {
     return document.querySelector('.navigation a[data-tag="' + category + '"]');
   }
 
+  show() {
+    document.body.classList.add('nav-shown');
+  }
+
   hide() {
-    document.getElementById('nav-trigger').checked = false;
+    document.body.classList.remove('nav-shown');
+  }
+
+  toggle() {
+    return this[document.body.classList.contains('nav-shown') ? 'hide' : 'show']();
   }
 
   bind() {
 
+    document.querySelector('.hamburger').addEventListener('click', event => {
+      this.toggle();
+      event.preventDefault();
+    }), false;
+
     document.querySelector('.navigation').addEventListener('click', event => {
       event.target.nodeName === 'A' && this.navigate(event.target.dataset.tag, event.target.parentNode);
       event.preventDefault();