From 812f8e35f6bdc6d0c141feb4e60d994e49563ab7 Mon Sep 17 00:00:00 2001 From: WolverinDEV Date: Fri, 20 Dec 2019 22:04:21 +0100 Subject: [PATCH] Improved bookmark experience Signed-off-by: WolverinDEV --- shared/css/static/mixin.scss | 6 +++++ shared/css/static/modal-bookmarks.scss | 33 +++++++++++++++++++++----- shared/css/static/modal.scss | 2 +- shared/html/templates.html | 8 +++---- shared/js/ui/modal/ModalBookmarks.ts | 4 ++-- 5 files changed, 40 insertions(+), 13 deletions(-) diff --git a/shared/css/static/mixin.scss b/shared/css/static/mixin.scss index 55bd184e..fe05daae 100644 --- a/shared/css/static/mixin.scss +++ b/shared/css/static/mixin.scss @@ -142,4 +142,10 @@ //-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3); background-color: #555; } +} + +@mixin text-dotdotdot() { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; } \ No newline at end of file diff --git a/shared/css/static/modal-bookmarks.scss b/shared/css/static/modal-bookmarks.scss index 0d804a18..b03bd955 100644 --- a/shared/css/static/modal-bookmarks.scss +++ b/shared/css/static/modal-bookmarks.scss @@ -44,6 +44,8 @@ height: 45em; width: 80em; + @include user-select(none); + .container-tooltip { flex-shrink: 0; flex-grow: 0; @@ -97,6 +99,8 @@ font-size: 1.5em; color: #557edc; text-transform: uppercase; + + @include text-dotdotdot(); } .container-bookmarks { @@ -140,6 +144,8 @@ min-width: 5em; align-self: center; + + @include text-dotdotdot(); } &:hover { @@ -251,11 +257,15 @@ .container-name { font-size: 2em; color: #fcfcfc; + + @include text-dotdotdot(); } .container-address { font-size: 1.5em; color: #fcfcfc; + + @include text-dotdotdot(); } } @@ -270,6 +280,9 @@ flex-direction: column; justify-content: flex-start; + overflow-y: auto; + @include chat-scrollbar-vertical(); + .group { padding: .5em; @@ -330,8 +343,8 @@ } .container-image { - flex-grow: 0; - flex-shrink: 100; + flex-grow: 1; + flex-shrink: 1; max-width: 15em; max-height: 9em; /* minus one padding */ @@ -394,7 +407,7 @@ overflow: hidden; text-overflow: ellipsis; - .server-region { + &.server-region { > div { display: inline-block; } @@ -433,9 +446,7 @@ max-width: 100%; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; + @include text-dotdotdot(); } } @@ -464,4 +475,14 @@ } } } +} + + +@media all and (max-width: 50em) { + .modal-body.modal-bookmarks { + .container-image { + margin: 0!important; + max-width: 0!important; + } + } } \ No newline at end of file diff --git a/shared/css/static/modal.scss b/shared/css/static/modal.scss index 28aae930..ba67abd9 100644 --- a/shared/css/static/modal.scss +++ b/shared/css/static/modal.scss @@ -135,7 +135,7 @@ max-width: 100%; min-width: 20em; /* may adjust if needed */ - max-height: calc(100vh - 7em); + max-height: calc(100vh - 8em); min-height: 5em; overflow-y: auto; diff --git a/shared/html/templates.html b/shared/html/templates.html index 345a6929..e4f1751d 100644 --- a/shared/html/templates.html +++ b/shared/html/templates.html @@ -4331,13 +4331,13 @@