From caf68fd92912f9ffc2291ba823cc194c1cc1c61a Mon Sep 17 00:00:00 2001
From: Zero~Informatique
Date: Fri, 3 Apr 2020 05:43:07 +0200
Subject: viewer: items with long titles overflow

GitHub: Resolves #137
---
 viewer/src/assets/scss/theme.scss     | 2 +-
 viewer/src/components/LdThumbnail.vue | 4 +++-
 viewer/src/main.ts                    | 4 ++--
 3 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/viewer/src/assets/scss/theme.scss b/viewer/src/assets/scss/theme.scss
index 26cb355..bbf4843 100644
--- a/viewer/src/assets/scss/theme.scss
+++ b/viewer/src/assets/scss/theme.scss
@@ -65,7 +65,7 @@ $loader-color: $palette-800;
 $input-tag-delete-background-color: $palette-700;
 $breadcrumb-margins: 12px;
 $breadcrumb-overflow-mask-size: $breadcrumb-margins + 60px;
-$thumbnail-other-size: 120px;
+$thumbnail-other-size: 10em;
 
 // Layout
 
diff --git a/viewer/src/components/LdThumbnail.vue b/viewer/src/components/LdThumbnail.vue
index 3ef7fa8..5166834 100644
--- a/viewer/src/components/LdThumbnail.vue
+++ b/viewer/src/components/LdThumbnail.vue
@@ -29,7 +29,7 @@
     />
     <div v-else class="thumbnail-other flex-column flex-center">
       <fa-icon :icon="getIcon()" size="4x" />
-      {{item.title}}
+      {{item.title | underscore-to-space}}
     </div>
   </div>
 </template>
@@ -66,6 +66,8 @@ export default class LdThumbnail extends Vue {
   width: $thumbnail-other-size;
   height: $thumbnail-other-size;
   text-align: center;
+  word-break: break-all;
+  overflow: hidden;
 }
 
 .preload {
diff --git a/viewer/src/main.ts b/viewer/src/main.ts
index bc005c5..f849525 100644
--- a/viewer/src/main.ts
+++ b/viewer/src/main.ts
@@ -31,11 +31,11 @@ import(/* webpackChunkName: "ui" */ "@/plugins/dragscroll");
 import(/* webpackChunkName: "ui" */ "@/plugins/fontawesome");
 const MainLayout = () => import(/* webpackChunkName: "ui" */ "@/views/MainLayout.vue");
 
+Vue.filter("underscore-to-space", (input: string) => input.replace(/_/g, ' '));
+
 new Vue({
   router,
   i18n,
   store,
   render: h => h(MainLayout)
 }).$mount("#ldgallery")
-
-
-- 
cgit v1.2.3


From 44ada3fc6f092b9ee15de2f4ebbc269d4b354f64 Mon Sep 17 00:00:00 2001
From: Zero~Informatique
Date: Sat, 4 Apr 2020 00:41:35 +0200
Subject: viewer: items with long titles overflow

code review changes

GitHub: Resolves #137
---
 viewer/src/components/LdThumbnail.vue | 5 +++--
 viewer/src/main.ts                    | 2 --
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/viewer/src/components/LdThumbnail.vue b/viewer/src/components/LdThumbnail.vue
index 5166834..9805873 100644
--- a/viewer/src/components/LdThumbnail.vue
+++ b/viewer/src/components/LdThumbnail.vue
@@ -29,7 +29,7 @@
     />
     <div v-else class="thumbnail-other flex-column flex-center">
       <fa-icon :icon="getIcon()" size="4x" />
-      {{item.title | underscore-to-space}}
+      {{item.title}}
     </div>
   </div>
 </template>
@@ -65,8 +65,9 @@ export default class LdThumbnail extends Vue {
 .thumbnail-other {
   width: $thumbnail-other-size;
   height: $thumbnail-other-size;
+  padding-top: 1em;
   text-align: center;
-  word-break: break-all;
+  word-break: break-word;
   overflow: hidden;
 }
 
diff --git a/viewer/src/main.ts b/viewer/src/main.ts
index f849525..1f77875 100644
--- a/viewer/src/main.ts
+++ b/viewer/src/main.ts
@@ -31,8 +31,6 @@ import(/* webpackChunkName: "ui" */ "@/plugins/dragscroll");
 import(/* webpackChunkName: "ui" */ "@/plugins/fontawesome");
 const MainLayout = () => import(/* webpackChunkName: "ui" */ "@/views/MainLayout.vue");
 
-Vue.filter("underscore-to-space", (input: string) => input.replace(/_/g, ' '));
-
 new Vue({
   router,
   i18n,
-- 
cgit v1.2.3


From f391a682dbd725c1d8aba9c571472bd390bb6a8d Mon Sep 17 00:00:00 2001
From: Zero~Informatique
Date: Sat, 4 Apr 2020 03:33:25 +0200
Subject: viewer: items with long titles overflow

fixed line-height issue on filenames and icon heights

GitHub: Resolves #137
---
 viewer/src/assets/scss/theme.scss     | 3 ++-
 viewer/src/components/LdThumbnail.vue | 9 +++++++--
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/viewer/src/assets/scss/theme.scss b/viewer/src/assets/scss/theme.scss
index bbf4843..0028688 100644
--- a/viewer/src/assets/scss/theme.scss
+++ b/viewer/src/assets/scss/theme.scss
@@ -51,6 +51,7 @@ $button-border-color: $palette-500;
 $button-focus-color: $button-color;
 $button-focus-border-color: $link;
 $button-focus-box-shadow-size: 0;
+$body-line-height: 1.5;
 
 // Custom components
 
@@ -65,7 +66,7 @@ $loader-color: $palette-800;
 $input-tag-delete-background-color: $palette-700;
 $breadcrumb-margins: 12px;
 $breadcrumb-overflow-mask-size: $breadcrumb-margins + 60px;
-$thumbnail-other-size: 10em;
+$thumbnail-other-size: $body-line-height * 9em;
 
 // Layout
 
diff --git a/viewer/src/components/LdThumbnail.vue b/viewer/src/components/LdThumbnail.vue
index 9805873..f8343eb 100644
--- a/viewer/src/components/LdThumbnail.vue
+++ b/viewer/src/components/LdThumbnail.vue
@@ -28,7 +28,9 @@
       @load="loading=false"
     />
     <div v-else class="thumbnail-other flex-column flex-center">
-      <fa-icon :icon="getIcon()" size="4x" />
+      <div>
+        <fa-icon :icon="getIcon()" size="4x" />
+      </div>
       {{item.title}}
     </div>
   </div>
@@ -65,10 +67,13 @@ export default class LdThumbnail extends Vue {
 .thumbnail-other {
   width: $thumbnail-other-size;
   height: $thumbnail-other-size;
-  padding-top: 1em;
+  padding-top: $body-line-height * 2em;
   text-align: center;
   word-break: break-word;
   overflow: hidden;
+  > div {
+    min-height: $body-line-height * 3em;
+  }
 }
 
 .preload {
-- 
cgit v1.2.3