Responsive navigation and toolbar for small / mobile devices
This commit is contained in:
Michael Mayer
parent
5ca33411a4
commit
83f70b6588
2 changed files with 180 additions and 184 deletions
|
|
@ -6,17 +6,17 @@ import Settings from 'app/pages/settings.vue';
|
|||
import Todo from 'app/pages/todo.vue';
|
||||
|
||||
export default [
|
||||
{ name: 'home', path: '/', redirect: '/photos' },
|
||||
{ name: 'photos', path: '/photos', component: Photos },
|
||||
{ name: 'filters', path: '/filters', component: Todo },
|
||||
{ name: 'calendar', path: '/calendar', component: Todo },
|
||||
{ name: 'tags', path: '/tags', component: Todo },
|
||||
{ name: 'bookmarks', path: '/bookmarks', component: Todo },
|
||||
{ name: 'favorites', path: '/favorites', component: Todo },
|
||||
{ name: 'places', path: '/places', component: Todo },
|
||||
{ name: 'albums', path: '/albums', component: Albums },
|
||||
{ name: 'import', path: '/import', component: Import },
|
||||
{ name: 'export', path: '/export', component: Export },
|
||||
{ name: 'settings', path: '/settings', component: Settings },
|
||||
{ name: 'Home', path: '/', redirect: '/photos' },
|
||||
{ name: 'Photos', path: '/photos', component: Photos },
|
||||
{ name: 'Filters', path: '/filters', component: Todo },
|
||||
{ name: 'Calendar', path: '/calendar', component: Todo },
|
||||
{ name: 'Tags', path: '/tags', component: Todo },
|
||||
{ name: 'Bookmarks', path: '/bookmarks', component: Todo },
|
||||
{ name: 'Favorites', path: '/favorites', component: Todo },
|
||||
{ name: 'Places', path: '/places', component: Todo },
|
||||
{ name: 'Albums', path: '/albums', component: Albums },
|
||||
{ name: 'Import', path: '/import', component: Import },
|
||||
{ name: 'Export', path: '/export', component: Export },
|
||||
{ name: 'Settings', path: '/settings', component: Settings },
|
||||
{ path: '*', redirect: '/photos' },
|
||||
];
|
||||
|
|
|
|||
|
|
@ -1,229 +1,225 @@
|
|||
<template>
|
||||
<v-navigation-drawer
|
||||
v-model="drawer"
|
||||
:mini-variant="mini"
|
||||
fixed
|
||||
dark
|
||||
app
|
||||
width="270"
|
||||
permanent
|
||||
>
|
||||
<v-toolbar flat>
|
||||
<v-list>
|
||||
<v-list-tile>
|
||||
<v-list-tile-avatar>
|
||||
<img src="/assets/img/logo.png">
|
||||
</v-list-tile-avatar>
|
||||
<v-list-tile-content>
|
||||
<v-list-tile-title class="title">
|
||||
PhotoPrism
|
||||
</v-list-tile-title>
|
||||
</v-list-tile-content>
|
||||
<div id="app-navigation">
|
||||
<v-toolbar dense dark color="grey darken-1" class="hidden-lg-and-up" @click.stop="showNavigation()">
|
||||
<v-toolbar-side-icon></v-toolbar-side-icon>
|
||||
|
||||
<v-toolbar-title>{{ $router.currentRoute.name }}</v-toolbar-title>
|
||||
|
||||
<v-spacer></v-spacer>
|
||||
</v-toolbar>
|
||||
<v-navigation-drawer
|
||||
v-model="drawer"
|
||||
:mini-variant="mini"
|
||||
fixed
|
||||
dark
|
||||
app
|
||||
width="270"
|
||||
>
|
||||
<v-toolbar flat>
|
||||
<v-list>
|
||||
<v-list-tile>
|
||||
<v-list-tile-avatar>
|
||||
<img src="/assets/img/logo.png">
|
||||
</v-list-tile-avatar>
|
||||
<v-list-tile-content>
|
||||
<v-list-tile-title class="title">
|
||||
PhotoPrism
|
||||
</v-list-tile-title>
|
||||
</v-list-tile-content>
|
||||
<v-list-tile-action class="hidden-md-and-down">
|
||||
<v-btn icon @click.stop="mini = !mini">
|
||||
<v-icon>chevron_left</v-icon>
|
||||
</v-btn>
|
||||
</v-list-tile-action>
|
||||
</v-list-tile>
|
||||
</v-list>
|
||||
</v-toolbar>
|
||||
|
||||
<v-list class="pt-3">
|
||||
<v-list-tile v-if="mini" @click.stop="mini = !mini">
|
||||
<v-list-tile-action>
|
||||
<v-btn icon @click.stop="mini = !mini">
|
||||
<v-icon>chevron_left</v-icon>
|
||||
</v-btn>
|
||||
<v-icon>chevron_right</v-icon>
|
||||
</v-list-tile-action>
|
||||
</v-list-tile>
|
||||
</v-list>
|
||||
</v-toolbar>
|
||||
|
||||
<v-list class="pt-3">
|
||||
<v-list-tile v-if="mini" @click.stop="mini = !mini">
|
||||
<v-list-tile-action>
|
||||
<v-icon>chevron_right</v-icon>
|
||||
</v-list-tile-action>
|
||||
</v-list-tile>
|
||||
<v-list-tile to="/photos" @click="">
|
||||
<v-list-tile-action>
|
||||
<v-icon>photo</v-icon>
|
||||
</v-list-tile-action>
|
||||
|
||||
<v-list-tile to="/photos" @click="">
|
||||
<v-list-tile-action>
|
||||
<v-icon>photo</v-icon>
|
||||
</v-list-tile-action>
|
||||
<v-list-tile-content>
|
||||
<v-list-tile-title>Photos</v-list-tile-title>
|
||||
</v-list-tile-content>
|
||||
</v-list-tile>
|
||||
|
||||
<v-list-tile-content>
|
||||
<v-list-tile-title>Photos</v-list-tile-title>
|
||||
</v-list-tile-content>
|
||||
</v-list-tile>
|
||||
<v-list-tile to="/places" @click="">
|
||||
<v-list-tile-action>
|
||||
<v-icon>place</v-icon>
|
||||
</v-list-tile-action>
|
||||
|
||||
<v-list-tile to="/places" @click="">
|
||||
<v-list-tile-action>
|
||||
<v-icon>place</v-icon>
|
||||
</v-list-tile-action>
|
||||
<v-list-tile-content>
|
||||
<v-list-tile-title>Places</v-list-tile-title>
|
||||
</v-list-tile-content>
|
||||
</v-list-tile>
|
||||
|
||||
<v-list-tile-content>
|
||||
<v-list-tile-title>Places</v-list-tile-title>
|
||||
</v-list-tile-content>
|
||||
</v-list-tile>
|
||||
<v-list-tile to="/calendar" @click="">
|
||||
<v-list-tile-action>
|
||||
<v-icon>date_range</v-icon>
|
||||
</v-list-tile-action>
|
||||
|
||||
<v-list-tile to="/calendar" @click="">
|
||||
<v-list-tile-action>
|
||||
<v-icon>date_range</v-icon>
|
||||
</v-list-tile-action>
|
||||
<v-list-tile-content>
|
||||
<v-list-tile-title>Calendar</v-list-tile-title>
|
||||
</v-list-tile-content>
|
||||
</v-list-tile>
|
||||
|
||||
<v-list-tile-content>
|
||||
<v-list-tile-title>Calendar</v-list-tile-title>
|
||||
</v-list-tile-content>
|
||||
</v-list-tile>
|
||||
<v-list-tile to="/tags" @click="">
|
||||
<v-list-tile-action>
|
||||
<v-icon>label</v-icon>
|
||||
</v-list-tile-action>
|
||||
|
||||
<v-list-tile to="/tags" @click="">
|
||||
<v-list-tile-action>
|
||||
<v-icon>label</v-icon>
|
||||
</v-list-tile-action>
|
||||
<v-list-tile-content>
|
||||
<v-list-tile-title>Tags</v-list-tile-title>
|
||||
</v-list-tile-content>
|
||||
</v-list-tile>
|
||||
|
||||
<v-list-tile-content>
|
||||
<v-list-tile-title>Tags</v-list-tile-title>
|
||||
</v-list-tile-content>
|
||||
</v-list-tile>
|
||||
<v-list-tile to="/favorites" @click="">
|
||||
<v-list-tile-action>
|
||||
<v-icon>favorite</v-icon>
|
||||
</v-list-tile-action>
|
||||
|
||||
<v-list-tile to="/favorites" @click="">
|
||||
<v-list-tile-action>
|
||||
<v-icon>favorite</v-icon>
|
||||
</v-list-tile-action>
|
||||
<v-list-tile-content>
|
||||
<v-list-tile-title>Favorites</v-list-tile-title>
|
||||
</v-list-tile-content>
|
||||
</v-list-tile>
|
||||
|
||||
<v-list-tile-content>
|
||||
<v-list-tile-title>Favorites</v-list-tile-title>
|
||||
</v-list-tile-content>
|
||||
</v-list-tile>
|
||||
<v-list-tile to="/bookmarks" @click="">
|
||||
<v-list-tile-action>
|
||||
<v-icon>bookmark</v-icon>
|
||||
</v-list-tile-action>
|
||||
|
||||
<v-list-tile to="/bookmarks" @click="">
|
||||
<v-list-tile-action>
|
||||
<v-icon>bookmark</v-icon>
|
||||
</v-list-tile-action>
|
||||
<v-list-tile-content>
|
||||
<v-list-tile-title>Bookmarks</v-list-tile-title>
|
||||
</v-list-tile-content>
|
||||
</v-list-tile>
|
||||
|
||||
<v-list-tile-content>
|
||||
<v-list-tile-title>Bookmarks</v-list-tile-title>
|
||||
</v-list-tile-content>
|
||||
</v-list-tile>
|
||||
<v-list-tile v-if="mini" to="/filters" @click="">
|
||||
<v-list-tile-action>
|
||||
<v-icon>search</v-icon>
|
||||
</v-list-tile-action>
|
||||
|
||||
<v-list-tile v-if="mini" to="/filters" @click="">
|
||||
<v-list-tile-action>
|
||||
<v-icon>search</v-icon>
|
||||
</v-list-tile-action>
|
||||
|
||||
<v-list-tile-content>
|
||||
<v-list-tile-title>Filters</v-list-tile-title>
|
||||
</v-list-tile-content>
|
||||
</v-list-tile>
|
||||
|
||||
<v-list-group v-if="!mini" prepend-icon="search" no-action>
|
||||
<v-list-tile slot="activator" to="/filters" @click="">
|
||||
<v-list-tile-content>
|
||||
<v-list-tile-title>Filters</v-list-tile-title>
|
||||
</v-list-tile-content>
|
||||
</v-list-tile>
|
||||
|
||||
<v-list-tile @click="">
|
||||
<v-list-tile-content>
|
||||
<v-list-tile-title>Canon EOS 6D</v-list-tile-title>
|
||||
</v-list-tile-content>
|
||||
</v-list-tile>
|
||||
<v-list-group v-if="!mini" prepend-icon="search" no-action>
|
||||
<v-list-tile slot="activator" to="/filters" @click="">
|
||||
<v-list-tile-content>
|
||||
<v-list-tile-title>Filters</v-list-tile-title>
|
||||
</v-list-tile-content>
|
||||
</v-list-tile>
|
||||
|
||||
<v-list-tile @click="">
|
||||
<v-list-tile-content>
|
||||
<v-list-tile-title>iPhone</v-list-tile-title>
|
||||
</v-list-tile-content>
|
||||
</v-list-tile>
|
||||
<v-list-tile @click="">
|
||||
<v-list-tile-content>
|
||||
<v-list-tile-title>Canon EOS 6D</v-list-tile-title>
|
||||
</v-list-tile-content>
|
||||
</v-list-tile>
|
||||
|
||||
</v-list-group>
|
||||
<v-list-tile @click="">
|
||||
<v-list-tile-content>
|
||||
<v-list-tile-title>iPhone</v-list-tile-title>
|
||||
</v-list-tile-content>
|
||||
</v-list-tile>
|
||||
|
||||
<v-list-tile v-if="mini" to="/albums" @click="">
|
||||
<v-list-tile-action>
|
||||
<v-icon>folder</v-icon>
|
||||
</v-list-tile-action>
|
||||
</v-list-group>
|
||||
|
||||
<v-list-tile-content>
|
||||
<v-list-tile-title>Albums</v-list-tile-title>
|
||||
</v-list-tile-content>
|
||||
</v-list-tile>
|
||||
<v-list-tile v-if="mini" to="/albums" @click="">
|
||||
<v-list-tile-action>
|
||||
<v-icon>folder</v-icon>
|
||||
</v-list-tile-action>
|
||||
|
||||
<v-list-group v-if="!mini" prepend-icon="folder" no-action>
|
||||
<v-list-tile slot="activator" to="/albums" @click="">
|
||||
<v-list-tile-content>
|
||||
<v-list-tile-title>Albums</v-list-tile-title>
|
||||
</v-list-tile-content>
|
||||
</v-list-tile>
|
||||
|
||||
<v-list-tile @click="">
|
||||
<v-list-tile-content>
|
||||
<v-list-tile-title>South Africa</v-list-tile-title>
|
||||
</v-list-tile-content>
|
||||
</v-list-tile>
|
||||
<v-list-group v-if="!mini" prepend-icon="folder" no-action>
|
||||
<v-list-tile slot="activator" to="/albums" @click="">
|
||||
<v-list-tile-content>
|
||||
<v-list-tile-title>Albums</v-list-tile-title>
|
||||
</v-list-tile-content>
|
||||
</v-list-tile>
|
||||
|
||||
<v-list-tile @click="">
|
||||
<v-list-tile-content>
|
||||
<v-list-tile-title>Cats & Dogs</v-list-tile-title>
|
||||
</v-list-tile-content>
|
||||
</v-list-tile>
|
||||
<v-list-tile @click="">
|
||||
<v-list-tile-content>
|
||||
<v-list-tile-title>South Africa</v-list-tile-title>
|
||||
</v-list-tile-content>
|
||||
</v-list-tile>
|
||||
|
||||
<v-list-tile @click="">
|
||||
<v-list-tile-content>
|
||||
<v-list-tile-title>Create album</v-list-tile-title>
|
||||
</v-list-tile-content>
|
||||
<v-list-tile @click="">
|
||||
<v-list-tile-content>
|
||||
<v-list-tile-title>Cats & Dogs</v-list-tile-title>
|
||||
</v-list-tile-content>
|
||||
</v-list-tile>
|
||||
|
||||
<v-list-tile @click="">
|
||||
<v-list-tile-content>
|
||||
<v-list-tile-title>Create album</v-list-tile-title>
|
||||
</v-list-tile-content>
|
||||
|
||||
<v-list-tile-action>
|
||||
<v-icon>add</v-icon>
|
||||
</v-list-tile-action>
|
||||
</v-list-tile>
|
||||
</v-list-group>
|
||||
|
||||
<v-list-tile to="/import" @click="">
|
||||
<v-list-tile-action>
|
||||
<v-icon>add</v-icon>
|
||||
<v-icon>add_circle</v-icon>
|
||||
</v-list-tile-action>
|
||||
|
||||
<v-list-tile-content>
|
||||
<v-list-tile-title>Import</v-list-tile-title>
|
||||
</v-list-tile-content>
|
||||
</v-list-tile>
|
||||
</v-list-group>
|
||||
|
||||
<v-list-tile to="/import" @click="">
|
||||
<v-list-tile-action>
|
||||
<v-icon>add_circle</v-icon>
|
||||
</v-list-tile-action>
|
||||
<v-list-tile to="/export" @click="">
|
||||
<v-list-tile-action>
|
||||
<v-icon>save</v-icon>
|
||||
</v-list-tile-action>
|
||||
|
||||
<v-list-tile-content>
|
||||
<v-list-tile-title>Import</v-list-tile-title>
|
||||
</v-list-tile-content>
|
||||
</v-list-tile>
|
||||
<v-list-tile-content>
|
||||
<v-list-tile-title>Export</v-list-tile-title>
|
||||
</v-list-tile-content>
|
||||
</v-list-tile>
|
||||
|
||||
<v-list-tile to="/export" @click="">
|
||||
<v-list-tile-action>
|
||||
<v-icon>save</v-icon>
|
||||
</v-list-tile-action>
|
||||
<v-list-tile to="/settings" @click="">
|
||||
<v-list-tile-action>
|
||||
<v-icon>settings</v-icon>
|
||||
</v-list-tile-action>
|
||||
|
||||
<v-list-tile-content>
|
||||
<v-list-tile-title>Export</v-list-tile-title>
|
||||
</v-list-tile-content>
|
||||
</v-list-tile>
|
||||
|
||||
<v-list-tile to="/settings" @click="">
|
||||
<v-list-tile-action>
|
||||
<v-icon>settings</v-icon>
|
||||
</v-list-tile-action>
|
||||
|
||||
<v-list-tile-content>
|
||||
<v-list-tile-title>Settings</v-list-tile-title>
|
||||
</v-list-tile-content>
|
||||
</v-list-tile>
|
||||
</v-list>
|
||||
|
||||
</v-navigation-drawer>
|
||||
<v-list-tile-content>
|
||||
<v-list-tile-title>Settings</v-list-tile-title>
|
||||
</v-list-tile-content>
|
||||
</v-list-tile>
|
||||
</v-list>
|
||||
</v-navigation-drawer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
const query = this.$route.query;
|
||||
const q = query.hasOwnProperty('q') ? query['q'] : '';
|
||||
|
||||
return {
|
||||
results: [
|
||||
{ title: 'Photos', route: 'photos', icon: 'photo_library' },
|
||||
{ title: 'Filters', route: 'filters', icon: 'search' },
|
||||
{ title: 'Albums', route: 'albums', icon: 'folder' },
|
||||
{ title: 'Favorites', route: 'favorites', icon: 'favorite' },
|
||||
{ title: 'Bookmarks', route: 'bookmarks', icon: 'bookmark' },
|
||||
{ title: 'Places', route: 'places', icon: 'place' },
|
||||
{ title: 'Import', route: 'import', icon: 'add_circle' },
|
||||
{ title: 'Export', route: 'export', icon: 'save' },
|
||||
{ title: 'Settings', route: 'settings', icon: 'settings' },
|
||||
],
|
||||
drawer: null,
|
||||
mini: false,
|
||||
q: q,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
showNavigation: function () {
|
||||
this.drawer = true;
|
||||
this.mini = false;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Reference in a new issue