From b8aa15d5546bf7f3c6b6bb6e09ed861692775c4e Mon Sep 17 00:00:00 2001
From: Nazar Kanaev <nkanaev@live.com>
Date: Sat, 3 Oct 2020 12:57:18 +0100
Subject: [PATCH] tablet & mobile layouts

---
 assets/graphicarts/chevron-left.svg |  1 +
 assets/index.html                   | 14 ++++--
 assets/stylesheets/app.css          | 68 +++++++++++++++++++++++++++++
 3 files changed, 79 insertions(+), 4 deletions(-)
 create mode 100644 assets/graphicarts/chevron-left.svg
diff --git a/assets/graphicarts/chevron-left.svg b/assets/graphicarts/chevron-left.svg
new file mode 100644
index 0000000..747d46d
--- /dev/null
+++ b/assets/graphicarts/chevron-left.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-left"><polyline points="15 18 9 12 15 6"></polyline></svg>
\ No newline at end of file
diff --git a/assets/index.html b/assets/index.html
index 09bf53f..4b7c456 100644
--- a/assets/index.html
+++ b/assets/index.html
@@ -6,11 +6,12 @@
     <link rel="stylesheet" href="./static/stylesheets/bootstrap.min.css">
     <link rel="stylesheet" href="./static/stylesheets/app.css">
     <link rel="icon shortcut" href="./static/graphicarts/anchor.png">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 </head>
 <body class="theme-light">
-    <div class="d-flex" id="app" v-cloak>
+    <div id="app" class="d-flex" :class="{'feed-selected': feedSelected !== null, 'item-selected': itemSelected !== null}" v-cloak>
         <!-- feed list -->
-        <div class="vh-100 position-relative d-flex flex-column border-right flex-shrink-0" :style="{width: feedListWidth+'px'}">
+        <div id="col-feed-list" class="vh-100 position-relative d-flex flex-column border-right flex-shrink-0" :style="{width: feedListWidth+'px'}">
             <drag :width="feedListWidth" @resize="resizeFeedList"></drag>
             <div class="p-2 toolbar d-flex align-items-center">
                 <div class="icon mx-2">{% inline "anchor.svg" %}</div>
@@ -134,9 +135,14 @@
             </div>
         </div>
         <!-- item list -->
-        <div class="vh-100 position-relative d-flex flex-column border-right flex-shrink-0"  :style="{width: itemListWidth+'px'}">
+        <div id="col-item-list" class="vh-100 position-relative d-flex flex-column border-right flex-shrink-0" :style="{width: itemListWidth+'px'}">
             <drag :width="itemListWidth" @resize="resizeItemList"></drag>
             <div class="px-2 toolbar d-flex align-items-center">
+                <button class="toolbar-item mr-2 d-block d-md-none"
+                        @click="feedSelected = null"
+                        v-b-tooltip.hover.bottom="'Show Feeds'">
+                    <span class="icon">{% inline "chevron-left.svg" %}</span>
+                </button>
                 <div class="input-icon flex-grow-1">
                     <span class="icon">{% inline "search.svg" %}</span>
                     <input class="d-block toolbar-search" type="" v-model="itemSearch">
@@ -170,7 +176,7 @@
             </div>
         </div>
         <!-- item show -->
-        <div class="vh-100 d-flex flex-column w-100" style="min-width: 0;">
+        <div id="col-item" class="vh-100 d-flex flex-column w-100" style="min-width: 0;">
             <div class="toolbar px-2 d-flex align-items-center" v-if="itemSelected">
                 <button class="toolbar-item"
                         @click="toggleItemStarred(itemSelectedDetails)"
diff --git a/assets/stylesheets/app.css b/assets/stylesheets/app.css
index ed7f86f..8c94791 100644
--- a/assets/stylesheets/app.css
+++ b/assets/stylesheets/app.css
@@ -510,3 +510,71 @@ a,
   opacity: 0;
   margin: 0 !important;
 }
+
+/* responsive layout
+
+   tablet:
+     none selected: show feed list & item list
+     feed selected: show feed list & item list
+     item selected: show item
+   mobile:
+     none selected: show feed list
+     feed selected: show item list
+     item selected: show item
+*/
+
+@media (min-width: 768px) and (max-width: 991.98px) {
+  #app #col-feed-list {
+    width: 35% !important;
+  }
+  #app #col-item-list {
+    width: 65% !important;
+    border-right-width: 0 !important;
+  }
+  #app #col-item {
+    display: none !important;
+  }
+
+  #app.item-selected #col-feed-list {
+    display: none !important;
+  }
+  #app.item-selected #col-item-list {
+    display: none !important;
+  }
+  #app.item-selected #col-item {
+    display: flex !important;
+  }
+}
+
+@media (max-width: 767.98px) {
+  #app #col-feed-list {
+    width: 100% !important;
+    border-right-width: 0 !important;
+  }
+  #app #col-item-list {
+    width: 100% !important;
+    display: none !important;
+    border-right-width: 0 !important;
+  }
+  #app #col-item {
+    width: 100% !important;
+    display: none !important;
+  }
+
+  #app.feed-selected #col-feed-list {
+    display: none !important;
+  }
+  #app.feed-selected #col-item-list {
+    display: flex !important;
+  }
+
+  #app.item-selected #col-feed-list {
+    display: none !important;
+  }
+  #app.item-selected #col-item-list {
+    display: none !important;
+  }
+  #app.item-selected #col-item {
+    display: flex !important;
+  }
+}
