UX: Improve nav toolbar, scrollbar, and footer

This commit is contained in:
Michael Mayer 2022-05-20 21:31:29 +02:00
parent a37c6d4c83
commit b250a106b7
6 changed files with 59 additions and 19 deletions

View file

@ -44,6 +44,7 @@ import { config, session } from "./session";
const c = window.__CONFIG__;
const appName = c.name;
const appEdition = c.edition;
const siteTitle = c.siteTitle ? c.siteTitle : c.name;
export default [
@ -56,25 +57,25 @@ export default [
name: "about",
path: "/about",
component: About,
meta: { title: appName, auth: false },
},
{
name: "feedback",
path: "/feedback",
component: Feedback,
meta: { title: appName, auth: true },
meta: { title: appEdition, auth: false },
},
{
name: "license",
path: "/about/license",
component: License,
meta: { title: appName, auth: false },
meta: { title: appEdition, auth: false },
},
{
name: "feedback",
path: "/feedback",
component: Feedback,
meta: { title: appEdition, auth: true },
},
{
name: "help",
path: "/help*",
component: Help,
meta: { title: appName, auth: false },
meta: { title: appEdition, auth: false },
},
{
name: "login",
@ -93,13 +94,13 @@ export default [
name: "browse",
path: "/browse",
component: Photos,
meta: { title: appName, icon: true, auth: true },
meta: { title: $gettext("Browse"), icon: true, auth: true },
},
{
name: "all",
path: "/all",
component: Photos,
meta: { title: $gettext("Search"), auth: true },
meta: { title: $gettext("Browse"), auth: true },
props: { staticFilter: { quality: "0" } },
},
{

View file

@ -4,11 +4,11 @@
<v-layout wrap align-top pt-3>
<v-flex xs12 sm6 class="px-0 pb-2 body-1 text-selectable text-xs-left">
<strong><router-link to="/about" class="text-link">{{ $config.getEdition() }}</router-link></strong>
<a href="https://docs.photoprism.app/release-notes/" class="body-link" target="_blank" :title="version">{{ build }}</a>
<a href="https://docs.photoprism.app/release-notes/" class="body-link" target="_blank" :title="version">Build {{ build }}</a>
</v-flex>
<v-flex xs12 sm6 class="px-0 pb-2 body-1 text-xs-center text-sm-right">
<span class="hidden-sm-and-down">
<span class="hidden-xs-only">
<a href="https://raw.githubusercontent.com/photoprism/photoprism/develop/NOTICE"
target="_blank" class="text-link">3rd-party software packages</a>
<a href="https://photoprism.app/team/" target="_blank">© 2018-2022 PhotoPrism UG</a>

View file

@ -1,5 +1,5 @@
<template>
<div id="p-navigation">
<div id="p-navigation" :class="{'sidenav-visible': drawer}">
<template v-if="visible && $vuetify.breakpoint.smAndDown">
<v-toolbar dark fixed flat scroll-off-screen dense color="navigation darken-1" class="nav-small"
@click.stop="showNavigation()">
@ -43,8 +43,8 @@
<img :src="appIcon" :alt="appName">
</v-list-tile-avatar>
<v-list-tile-content>
<v-list-tile-title class="title">
{{ appName }}
<v-list-tile-title class="title tm">
<strong v-if="appNamePrefix">{{ appNamePrefix}}</strong>{{ appNameSuffix }}
</v-list-tile-title>
</v-list-tile-content>
<v-list-tile-action class="hidden-sm-and-down" :title="$gettext('Minimize')">
@ -543,7 +543,19 @@ export default {
}
},
data() {
const appName = this.$config.getName();
let appNamePrefix = "";
let appNameSuffix = appName;
if (appName.startsWith("Photo")) {
appNamePrefix = appName.substring(0, 5);
appNameSuffix = appName.substring(5, 24);
}
return {
appNamePrefix: appNamePrefix,
appNameSuffix: appNameSuffix,
appName: this.$config.getName(),
appEdition: this.$config.getEdition(),
appIcon: this.$config.getIcon(),

View file

@ -123,7 +123,7 @@ footer {
display: block;
}
@media only screen and (max-width: 959px) {
@media only screen and (max-width: 599px) {
#photoprism .footer a {
display: inline-block;
}
@ -146,6 +146,18 @@ footer {
line-height: 1.8em;
}
#photoprism .tm {
font-weight: 500;
}
#photoprism .tm strong {
font-weight: 600;
}
#photoprism .sidenav-visible .nav-small .v-toolbar__content {
opacity: 0.48;
}
main {
padding: 0;
margin: 0;
@ -200,6 +212,11 @@ main {
float: right;
}
#photoprism a.float-left,
#photoprism a.float-right {
display: inline-block;
}
#photoprism .p-page {
user-select: none !important;
}

View file

@ -49,9 +49,16 @@ body.firefox.dark-theme {
/* Chrome specific styles */
::-webkit-scrollbar {
height: 11px;
height: 9px;
overflow: visible;
width: 11px;
width: 9px;
}
@media only screen and (max-width: 599px) {
::-webkit-scrollbar {
height: 7px;
width: 7px;
}
}
::-webkit-scrollbar-button {
@ -64,6 +71,7 @@ body.firefox.dark-theme {
}
::-webkit-scrollbar-track {
background-color: rgba(0, 0, 0, .15);
border: solid transparent;
border-width: 0 0 0 4px;
}

View file

@ -304,6 +304,8 @@ func (c *Config) Name() string {
func (c *Config) Edition() string {
if c.options.Edition == "" {
return "PhotoPrism® Dev"
} else if strings.HasSuffix(c.options.Edition, "CE") && c.Sponsor() {
return strings.Replace(c.options.Edition, "CE", "Plus", 1)
}
return c.options.Edition