UX: Improve nav toolbar, scrollbar, and footer

frontend/src/app/routes.js

@@ -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" } },
   },
   {

frontend/src/component/footer.vue

@@ -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>

frontend/src/component/navigation.vue

@@ -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(),

frontend/src/css/app.css

@@ -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;
 }

frontend/src/css/scrollbar.css

@@ -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;
 }

internal/config/config.go

@@ -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