From a53adf6d6999755a471006d86a9659982ab96b89 Mon Sep 17 00:00:00 2001 From: Henrique Dias Date: Tue, 4 Jul 2017 17:19:06 +0100 Subject: [PATCH] Working sidebar on mobile Former-commit-id: 4389362fe9a92d3f1b90bca7de9312373034449a [formerly 5c340376aa5df58f924f93d5aa534e5a6c48190b] [formerly 0e7e9e4f4584a7ac52dff5539c202602f86402d6 [formerly fb4af0afe0986bb06cfa6e0b2d60e91d65d91dda]] Former-commit-id: b0f2d163f6ea189b09c17e568b8a9f97bb69c0db [formerly 3c8f7a3ffcf0baf7db7f7fb82509420188424e36] Former-commit-id: 5b5b384652220684f831b5e83f48db1c046f8b2e --- _assets/src/components/Main.vue | 5 ++++- _assets/src/components/Sidebar.vue | 12 ++++++++---- _assets/src/css/mobile.css | 7 +++++-- 3 files changed, 17 insertions(+), 7 deletions(-) diff --git a/_assets/src/components/Main.vue b/_assets/src/components/Main.vue index 4f4c3172..526c46f8 100644 --- a/_assets/src/components/Main.vue +++ b/_assets/src/components/Main.vue @@ -2,7 +2,7 @@
- File Manager @@ -227,6 +227,9 @@ export default { this.loading = false }) }, + openSidebar () { + this.$store.commit('showHover', 'sidebar') + }, openSearch () { this.$store.commit('showHover', 'search') }, diff --git a/_assets/src/components/Sidebar.vue b/_assets/src/components/Sidebar.vue index 9b0318c9..fc5457a9 100644 --- a/_assets/src/components/Sidebar.vue +++ b/_assets/src/components/Sidebar.vue @@ -18,7 +18,7 @@
- @@ -48,11 +48,15 @@ export default { name: 'sidebar', data: () => { return { - plugins: [], - active: false + plugins: [] + } + }, + computed: { + ...mapState(['user']), + active () { + return this.$store.state.show === 'sidebar' } }, - computed: mapState(['user']), mounted () { if (window.plugins !== undefined || window.plugins !== null) { this.plugins = window.plugins diff --git a/_assets/src/css/mobile.css b/_assets/src/css/mobile.css index f785e427..0d231783 100644 --- a/_assets/src/css/mobile.css +++ b/_assets/src/css/mobile.css @@ -14,14 +14,17 @@ @media (max-width: 736px) { nav { top: 0; - z-index: 9999; + z-index: 99999; background: #fff; height: 100%; width: 13em; box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); - transition: .2s ease-in-out left; + transition: .1s ease left; left: -14em; } + nav.active { + left: 0; + } header .search-button, header>div:first-child>.action { display: inherit;