From 59803c448bd0d55683983983226ef1e945bce1b0 Mon Sep 17 00:00:00 2001 From: Alex Chernega Date: Tue, 2 Feb 2021 21:54:54 +0000 Subject: [PATCH] Update FolderTagPreview.vue This implementation provides the following UI improvement: * Multi-line text beside folder icon Signed-off-by: Alex Chernega --- src/components/FolderTagPreview.vue | 12 +++++------- 1 file changed, 5 insertions(+), 7 deletions(-) diff --git a/src/components/FolderTagPreview.vue b/src/components/FolderTagPreview.vue index faef43304..9bf6baaaa 100644 --- a/src/components/FolderTagPreview.vue +++ b/src/components/FolderTagPreview.vue @@ -181,8 +181,6 @@ export default { } } -$name-height: 1rem; - .folder-name { position: absolute; z-index: 3; @@ -195,20 +193,20 @@ $name-height: 1rem; opacity: 1; &__icon { height: 40%; - margin-top: calc(30% - #{$name-height} / 2); // center name+icon + margin-top: 30%; // center name+icon background-size: 40%; } &__name { overflow: hidden; - height: $name-height; + height: 30%; // 30% (icon margin-top) + 40% (icon) + 30% (name) = 100% padding: 0 10px; text-align: center; - white-space: nowrap; + white-space: normal; text-overflow: ellipsis; color: var(--color-main-background); text-shadow: 0 0 8px var(--color-main-text); - font-size: $name-height; - line-height: $name-height; + font-size: 1rem; + line-height: 1rem; } }