Skip to content

Commit

Permalink
Update FolderTagPreview.vue
Browse files Browse the repository at this point in the history
This implementation provides the following UI improvement:

* Multi-line text beside folder icon
  • Loading branch information
DeJQit committed Feb 2, 2021
1 parent 54caff1 commit df56e4b
Showing 1 changed file with 3 additions and 5 deletions.
8 changes: 3 additions & 5 deletions src/components/FolderTagPreview.vue
Original file line number Diff line number Diff line change
Expand Up @@ -181,8 +181,6 @@ export default {
}
}
$name-height: 1rem;
.folder-name {
position: absolute;
z-index: 3;
Expand All @@ -195,15 +193,15 @@ $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);
Expand Down

0 comments on commit df56e4b

Please sign in to comment.