From 5d5fff165dfba15295bb72207437c7b704def38f Mon Sep 17 00:00:00 2001
From: Michael Mayer <michael@liquidbytes.net>
Date: Tue, 23 Jun 2020 10:22:12 +0200
Subject: [PATCH] Sharing: UX improvements and fixes #18

Signed-off-by: Michael Mayer <michael@liquidbytes.net>
---
 frontend/src/dialog/p-share-dialog.vue |  1 +
 frontend/src/pages/albums.vue          |  7 +++----
 frontend/src/share/albums.vue          | 22 ++++++++++++++++++++--
 3 files changed, 24 insertions(+), 6 deletions(-)

diff --git a/frontend/src/dialog/p-share-dialog.vue b/frontend/src/dialog/p-share-dialog.vue
index 95dc06a6b..58e729e70 100644
--- a/frontend/src/dialog/p-share-dialog.vue
+++ b/frontend/src/dialog/p-share-dialog.vue
@@ -217,6 +217,7 @@
         watch: {
             show: function (show) {
                 if (show) {
+                    this.links = [];
                     this.loading = true;
                     this.model.links().then((resp) => {
                         if (resp.count === 0) {
diff --git a/frontend/src/pages/albums.vue b/frontend/src/pages/albums.vue
index 058eca3c6..85aa8fc9e 100644
--- a/frontend/src/pages/albums.vue
+++ b/frontend/src/pages/albums.vue
@@ -176,14 +176,13 @@
                                 <v-card-text class="pl-3 pr-3 pt-0 pb-3 p-album-desc"
                                              v-else-if="album.Type === 'album'">
                                     <div v-if="album.PhotoCount === 1" class="caption">
-                                        <translate>Contains one photo. Add more by selecting them from search results.
-                                        </translate>
+                                        <translate>Contains one photo.</translate>
+                                        <translate>Add more by selecting them from search results.</translate>
                                     </div>
                                     <div v-else-if="album.PhotoCount > 0" class="caption">
                                         <translate>Contains</translate>
                                         {{album.PhotoCount}}
-                                        <translate>photos</translate>
-                                        .
+                                        <translate>photos</translate>.
                                     </div>
                                     <div v-else class="caption">
                                         <router-link :to="{name: 'photos'}" class="text-link">
diff --git a/frontend/src/share/albums.vue b/frontend/src/share/albums.vue
index b394fcef4..66308887b 100644
--- a/frontend/src/share/albums.vue
+++ b/frontend/src/share/albums.vue
@@ -96,10 +96,28 @@
                                     <h3 class="body-2 ma-0">
                                         {{ album.Title }}
                                     </h3>
-                                    <div class="caption mt-2" title="Info" v-if="album.Description">
+                                </v-card-title>
+                                <v-card-text class="pl-3 pr-3 pt-0 pb-3 p-album-desc" v-if="album.Description">
+                                    <div class="caption" title="Description">
                                         {{ album.Description }}
                                     </div>
-                                </v-card-title>
+                                </v-card-text>
+                                <v-card-text class="pl-3 pr-3 pt-0 pb-3 p-album-desc"
+                                             v-else-if="album.Type === 'album'">
+                                    <div v-if="album.PhotoCount === 1" class="caption">
+                                        <translate>Contains one photo.</translate>
+                                    </div>
+                                    <div v-else-if="album.PhotoCount > 0" class="caption">
+                                        <translate>Contains</translate>
+                                        {{album.PhotoCount}}
+                                        <translate>photos</translate>.
+                                    </div>
+                                    <div v-else class="caption">
+                                        <router-link :to="{name: 'photos'}" class="text-link">
+                                            <translate>Empty album.</translate>
+                                        </router-link>
+                                    </div>
+                                </v-card-text>
                             </v-card>
                         </v-hover>
                     </v-flex>