github
/
filebrowser
mirror of https://github.com/filebrowser/filebrowser
1
0
Fork 0
Code Issues Releases Wiki Activity

Working sidebar on mobile 

Former-commit-id: 4389362fe9a92d3f1b90bca7de9312373034449a [formerly 5c340376aa5df58f924f93d5aa534e5a6c48190b] [formerly 0e7e9e4f4584a7ac52dff5539c202602f86402d6 [formerly fb4af0afe0]]
Former-commit-id: b0f2d163f6ea189b09c17e568b8a9f97bb69c0db [formerly 3c8f7a3ffcf0baf7db7f7fb82509420188424e36]
Former-commit-id: 5b5b384652220684f831b5e83f48db1c046f8b2e
pull/726/head
Henrique Dias 2017-07-04 17:19:06 +01:00
parent 231e1e1147
commit a53adf6d69
3 changed files with 17 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
_assets/src/components/Main.vue
View File

@ -2,7 +2,7 @@
<div :class="{ multiple, loading }"> <div :class="{ multiple, loading }">
<header> <header>
<div> <div>
<button aria-label="Toggle sidebar" title="Toggle sidebar" class="action"> <button @click="openSidebar" aria-label="Toggle sidebar" title="Toggle sidebar" class="action">
<i class="material-icons">menu</i> <i class="material-icons">menu</i>
</button> </button>
<img src="../assets/logo.svg" alt="File Manager"> <img src="../assets/logo.svg" alt="File Manager">
@ -227,6 +227,9 @@ export default {
this.loading = false this.loading = false
}) })
}, },
openSidebar () {
this.$store.commit('showHover', 'sidebar')
},
openSearch () { openSearch () {
this.$store.commit('showHover', 'search') this.$store.commit('showHover', 'search')
}, },

12
_assets/src/components/Sidebar.vue
View File

@ -18,7 +18,7 @@
</div> </div>
<div v-for="plugin in plugins"> <div v-for="plugin in plugins">
<button v-for="action in plugin.sidebar" @click="action.click" :aria-label="action.name" :title="action.name" class="action"> <button v-for="action in plugin.sidebar" @click="action.click" :aria-label="action.name" :title="action.name" :key="action.name" class="action">
<i class="material-icons">{{ action.icon }}</i> <i class="material-icons">{{ action.icon }}</i>
<span>{{ action.name }}</span> <span>{{ action.name }}</span>
</button> </button>
@ -48,11 +48,15 @@ export default {
name: 'sidebar', name: 'sidebar',
data: () => { data: () => {
return { return {
plugins: [], plugins: []
active: false }
},
computed: {
...mapState(['user']),
active () {
return this.$store.state.show === 'sidebar'
} }
}, },
computed: mapState(['user']),
mounted () { mounted () {
if (window.plugins !== undefined || window.plugins !== null) { if (window.plugins !== undefined || window.plugins !== null) {
this.plugins = window.plugins this.plugins = window.plugins

7
_assets/src/css/mobile.css
View File

@ -14,14 +14,17 @@
@media (max-width: 736px) { @media (max-width: 736px) {
nav { nav {
top: 0; top: 0;
z-index: 9999; z-index: 99999;
background: #fff; background: #fff;
height: 100%; height: 100%;
width: 13em; width: 13em;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
transition: .2s ease-in-out left; transition: .1s ease left;
left: -14em; left: -14em;
} }
nav.active {
left: 0;
}
header .search-button, header .search-button,
header>div:first-child>.action { header>div:first-child>.action {
display: inherit; display: inherit;