From 43c6017397eed72ab7233c5fe0f83e144878e59e Mon Sep 17 00:00:00 2001
From: Marcus Noble <github@marcusnoble.co.uk>
Date: Wed, 18 Nov 2020 19:45:39 +0000
Subject: [PATCH] Show feed list on mobile

---
 views/index.html       | 12 ++++++++++--
 views/static/style.css | 34 ++++++++++++++++++++++++++++++----
 2 files changed, 40 insertions(+), 6 deletions(-)
diff --git a/views/index.html b/views/index.html
index 652de48..2e6fdd1 100644
--- a/views/index.html
+++ b/views/index.html
@@ -30,12 +30,17 @@
     <link rel="stylesheet" href="/static/style.css">
   </head>
   <body class="hack">
-    <div class="container">
+    <div id="app" class="container">
+      <header>
+        <button class="feed-toggle" v-on:click="toggleFeeds">
+          <svg width="24" height="24" viewbox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M24 16a3.5 3.5 0 110-7 3.5 3.5 0 010 7z" fill="#212121"/><path d="M24 27.5a3.5 3.5 0 110-7 3.5 3.5 0 010 7z" fill="#212121"/><path d="M20.5 35.5a3.5 3.5 0 107 0 3.5 3.5 0 00-7 0z" fill="#212121"/></svg>
+        </button>
       <h1 class="title">
         Gopherss
       </h1>
+      </header>
 
-      <div id="app">
+      <div>
         <div class="menu">
           <button title="Show Read" v-on:click="toggleShowRead()">
             <svg width="30" height="30" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 9a4 4 0 110 8 4 4 0 010-8zm0-3.5a10 10 0 019.7 7.6.8.8 0 01-1.5.3 8.5 8.5 0 00-16.4 0 .8.8 0 01-1.5-.3A10 10 0 0112 5.5z" :style="{'fill': showRead ? '#ff2e88' : '' }" fill-rule="nonzero"/></svg>
@@ -334,6 +339,9 @@
               }
 
               return "https://s2.googleusercontent.com/s2/favicons?domain_url=" + (feed.HomepageURL || feed.FeedURL);
+            },
+            toggleFeeds() {
+              document.querySelector('.feeds').classList.toggle('show-mobile');
             }
           },
           created() {
diff --git a/views/static/style.css b/views/static/style.css
index 61dcf4f..4d6b40d 100644
--- a/views/static/style.css
+++ b/views/static/style.css
@@ -25,6 +25,14 @@ body {
   position: relative;
 }
 
+header {
+  display: flex;
+}
+
+header h1 {
+  width: -moz-available;
+}
+
 .item-heading .item-title {
 
   margin-bottom: 0;
@@ -82,17 +90,17 @@ body {
   text-align: right;
 }
 
-.menu button {
+button {
   background: none;
   border: none;
   cursor: pointer;
 }
 
-.menu button:disabled {
+button:disabled {
   cursor: not-allowed;
 }
 
-.menu button:not(:disabled):hover svg path {
+button:not(:disabled):hover svg path {
   fill: #ff2e88;
 }
 
@@ -111,13 +119,31 @@ body {
   box-shadow: 1px 2px 3px #333
 }
 
+@media only screen and (min-width: 701px) {
+  .feed-toggle {
+    display: none;
+  }
+}
+
 @media only screen and (max-width: 700px) {
-  .feeds{ display: none !important; }
+  .feeds{
+    position: initial;
+    width: 100%;
+    height: 0px;
+    margin: 0;
+    overflow: hidden;
+    transition: all 2s;
+  }
   .container {
     max-width: 100em;
   }
 }
 
+.feeds.show-mobile {
+  height: 50vh;
+  overflow-y: scroll;
+}
+
 .dark {
   background: #333;
 }
