aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorZero~Informatique2020-04-03 05:43:07 +0200
committerZero~Informatique2020-04-03 05:43:07 +0200
commitcaf68fd92912f9ffc2291ba823cc194c1cc1c61a (patch)
treea8308f9822f4f2c624af56a84abcee76a964ca45
parent332b208d3fdc91d29181c8f42ef5ff9b1fd1f09a (diff)
downloadldgallery-caf68fd92912f9ffc2291ba823cc194c1cc1c61a.tar.gz
viewer: items with long titles overflow
GitHub: Resolves #137
-rw-r--r--viewer/src/assets/scss/theme.scss2
-rw-r--r--viewer/src/components/LdThumbnail.vue4
-rw-r--r--viewer/src/main.ts4
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;
65$input-tag-delete-background-color: $palette-700; 65$input-tag-delete-background-color: $palette-700;
66$breadcrumb-margins: 12px; 66$breadcrumb-margins: 12px;
67$breadcrumb-overflow-mask-size: $breadcrumb-margins + 60px; 67$breadcrumb-overflow-mask-size: $breadcrumb-margins + 60px;
68$thumbnail-other-size: 120px; 68$thumbnail-other-size: 10em;
69 69
70// Layout 70// Layout
71 71
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 @@
29 /> 29 />
30 <div v-else class="thumbnail-other flex-column flex-center"> 30 <div v-else class="thumbnail-other flex-column flex-center">
31 <fa-icon :icon="getIcon()" size="4x" /> 31 <fa-icon :icon="getIcon()" size="4x" />
32 {{item.title}} 32 {{item.title | underscore-to-space}}
33 </div> 33 </div>
34 </div> 34 </div>
35</template> 35</template>
@@ -66,6 +66,8 @@ export default class LdThumbnail extends Vue {
66 width: $thumbnail-other-size; 66 width: $thumbnail-other-size;
67 height: $thumbnail-other-size; 67 height: $thumbnail-other-size;
68 text-align: center; 68 text-align: center;
69 word-break: break-all;
70 overflow: hidden;
69} 71}
70 72
71.preload { 73.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");
31import(/* webpackChunkName: "ui" */ "@/plugins/fontawesome"); 31import(/* webpackChunkName: "ui" */ "@/plugins/fontawesome");
32const MainLayout = () => import(/* webpackChunkName: "ui" */ "@/views/MainLayout.vue"); 32const MainLayout = () => import(/* webpackChunkName: "ui" */ "@/views/MainLayout.vue");
33 33
34Vue.filter("underscore-to-space", (input: string) => input.replace(/_/g, ' '));
35
34new Vue({ 36new Vue({
35 router, 37 router,
36 i18n, 38 i18n,
37 store, 39 store,
38 render: h => h(MainLayout) 40 render: h => h(MainLayout)
39}).$mount("#ldgallery") 41}).$mount("#ldgallery")
40
41