From d644887d4cb2c5d5a4d4b008a2d63dce1cb90bb1 Mon Sep 17 00:00:00 2001
From: Roger Braun <roger@rogerbraun.net>
Date: Mon, 16 Jan 2017 18:57:03 +0100
Subject: Add styleSwitcher.

---
 src/App.vue | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

(limited to 'src/App.vue')

diff --git a/src/App.vue b/src/App.vue
index 18a8ad15..5da469b5 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,8 +1,11 @@
 <template>
   <div id="app" v-bind:style="style" class="base02-background">
     <nav class='container base01-background base04'>
-      <div class='item'>
-        <a route-to='friends-timeline' href="#">Pleroma FE</a>
+      <div class='inner-nav'>
+        <div class='item'>
+          <a route-to='friends-timeline' href="#">Pleroma FE</a>
+        </div>
+        <style-switcher></style-switcher>
       </div>
     </nav>
     <div class="container" id="content">
-- 
cgit v1.2.3-70-g09d2


From c7a375068d3337144dde85fabf4b4d5a874d70a0 Mon Sep 17 00:00:00 2001
From: Roger Braun <roger@rogerbraun.net>
Date: Tue, 17 Jan 2017 17:27:39 +0100
Subject: Basic mobile panel switcher.

---
 src/App.js   |  8 ++++++++
 src/App.scss | 36 +++++++++++++++++++++++++++++++-----
 src/App.vue  |  8 ++++++--
 3 files changed, 45 insertions(+), 7 deletions(-)

(limited to 'src/App.vue')

diff --git a/src/App.js b/src/App.js
index 8f90e6be..14a41af0 100644
--- a/src/App.js
+++ b/src/App.js
@@ -11,8 +11,16 @@ export default {
     Notifications,
     StyleSwitcher
   },
+  data: () => ({
+    mobileActivePanel: 'timeline'
+  }),
   computed: {
     currentUser () { return this.$store.state.users.currentUser },
     style () { return { 'background-image': `url(${this.currentUser.background_image})` } }
+  },
+  methods: {
+    activatePanel (panelName) {
+      this.mobileActivePanel = panelName
+    }
   }
 }
diff --git a/src/App.scss b/src/App.scss
index a6a03bc0..c820779a 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -66,11 +66,6 @@ nav {
     }
 }
 
-.sidebar {
-    flex: 1;
-    flex-basis: 300px;
-}
-
 main-router {
     flex: 1;
 }
@@ -230,3 +225,34 @@ nav {
     flex: 2;
     flex-basis: 500px;
 }
+
+.sidebar {
+    flex: 1;
+    flex-basis: 300px;
+}
+
+.mobile-shown {
+    display: none;
+}
+
+.panel-switcher {
+    display: none;
+    width: 100%;
+
+    button {
+        display: block;
+        flex: 1;
+        margin: 0.5em;
+        padding: 0.5em;
+    }
+}
+
+@media all and (max-width: 959px) {
+    .mobile-hidden {
+        display: none;
+    }
+
+    .panel-switcher {
+        display: flex;
+    }
+}
diff --git a/src/App.vue b/src/App.vue
index 5da469b5..5d5463fb 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -9,12 +9,16 @@
       </div>
     </nav>
     <div class="container" id="content">
-      <div class="sidebar">
+      <div class="panel-switcher">
+        <button @click="activatePanel('sidebar')">Sidebar</button>
+        <button @click="activatePanel('timeline')">Timeline</button>
+      </div>
+      <div class="sidebar" :class="{ 'mobile-hidden': mobileActivePanel != 'sidebar' }">
         <user-panel></user-panel>
         <nav-panel></nav-panel>
         <notifications v-if="currentUser"></notifications>
       </div>
-      <div class="main">
+      <div class="main" :class="{ 'mobile-hidden': mobileActivePanel != 'timeline' }">
         <transition name="fade">
           <router-view></router-view>
         </transition>
-- 
cgit v1.2.3-70-g09d2