Merge pull request #178 from pacien/oz-overflowing-titles

viewer: items with long titles overflow

3 files changed, 11 insertions, 4 deletions

diff --git a/viewer/src/assets/scss/theme.scss b/viewer/src/assets/scss/theme.scss
index feb8543..9e9cdc8 100644
--- a/viewer/src/assets/scss/theme.scss
+++ b/viewer/src/assets/scss/theme.scss
@@ -53,6 +53,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
 
@@ -68,7 +69,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: $body-line-height * 9em;
 $proposed-category-bgcolor: $palette-700;
 
 // Layout
diff --git a/viewer/src/components/LdThumbnail.vue b/viewer/src/components/LdThumbnail.vue
index 3ef7fa8..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,7 +67,13 @@ export default class LdThumbnail extends Vue {
 .thumbnail-other {
   width: $thumbnail-other-size;
   height: $thumbnail-other-size;
+  padding-top: $body-line-height * 2em;
   text-align: center;
+  word-break: break-word;
+  overflow: hidden;
+  > div {
+    min-height: $body-line-height * 3em;
+  }
 }
 
 .preload {
diff --git a/viewer/src/main.ts b/viewer/src/main.ts
index bc005c5..1f77875 100644
--- a/viewer/src/main.ts
+++ b/viewer/src/main.ts
@@ -37,5 +37,3 @@ new Vue({
   store,
   render: h => h(MainLayout)
 }).$mount("#ldgallery")
-
-