Proof-of-concept for main navigation
This commit is contained in:
Michael Mayer
parent
3c51fb3aff
commit
7120ae8737
Binary file not shown.
|
Before Width: | Height: | Size: 1.5 MiB After Width: | Height: | Size: 401 KiB |
|
|
@ -186,4 +186,12 @@ main div.page-settings {
|
|||
.photo-grid .photo .actions .action.favorite {
|
||||
display: inline;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.v-badge__badge {
|
||||
font-size: 12px;
|
||||
height: 19px;
|
||||
width: 19px;
|
||||
right: -20px;
|
||||
top: -8px;
|
||||
}
|
||||
|
|
@ -87,7 +87,7 @@
|
|||
<span class="center" v-if="photo.Location">
|
||||
<v-tooltip bottom>
|
||||
<a slot="activator" class="location" target="_blank" :href="photo.getGoogleMapsLink()">{{ photo.Location.Country }}</a>
|
||||
<span :html="photo.Location.DisplayName"></span>
|
||||
<span>{{ photo.Location.DisplayName }}</span>
|
||||
</v-tooltip>
|
||||
</span>
|
||||
<span class="right">
|
||||
|
|
|
|||
36
frontend/src/app/pages/todo.vue
Normal file
36
frontend/src/app/pages/todo.vue
Normal file
|
|
@ -0,0 +1,36 @@
|
|||
<template>
|
||||
<v-container fluid>
|
||||
<h1>TODO</h1>
|
||||
<p class="md-subheading">
|
||||
This page is not implemented yet
|
||||
</p>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'todo',
|
||||
data() {
|
||||
return {
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
h1, h2 {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
margin: 0 10px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -3,10 +3,15 @@ import Albums from 'app/pages/albums.vue';
|
|||
import Import from 'app/pages/import.vue';
|
||||
import Export from 'app/pages/export.vue';
|
||||
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: '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 },
|
||||
|
|
|
|||
|
|
@ -35,18 +35,153 @@
|
|||
</v-list-tile-action>
|
||||
</v-list-tile>
|
||||
|
||||
<v-list-tile
|
||||
v-for="item in items"
|
||||
:key="item.title"
|
||||
:to="{ name: item.route }"
|
||||
@click=""
|
||||
>
|
||||
<v-list-tile to="/photos" @click="">
|
||||
<v-list-tile-action>
|
||||
<v-icon>{{ item.icon }}</v-icon>
|
||||
<v-icon>photo_camera</v-icon>
|
||||
</v-list-tile-action>
|
||||
|
||||
<v-list-tile-content>
|
||||
<v-list-tile-title>{{ item.title }}</v-list-tile-title>
|
||||
<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-content>
|
||||
<v-list-tile-title>Places</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-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-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-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-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>Create filter</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 v-if="mini" to="/albums" @click="">
|
||||
<v-list-tile-action>
|
||||
<v-icon>folder</v-icon>
|
||||
</v-list-tile-action>
|
||||
|
||||
<v-list-tile-content>
|
||||
<v-list-tile-title>Albums</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>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>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_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-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>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>
|
||||
|
|
@ -63,7 +198,11 @@
|
|||
return {
|
||||
items: [
|
||||
{ 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' },
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user