commit: c7a375068d3337144dde85fabf4b4d5a874d70a0
parent: 4213d84b4da2c8b2ba705f7733e9b65cdc8fa53f
Author: Roger Braun <roger@rogerbraun.net>
Date: Tue, 17 Jan 2017 17:27:39 +0100
Basic mobile panel switcher.
Diffstat:
3 files changed, 45 insertions(+), 7 deletions(-)
diff --git 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
@@ -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
@@ -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>