Improved bookmark experience

Signed-off-by: WolverinDEV <git@teaspeak.de>

shared/css/static/mixin.scss

@@ -143,3 +143,9 @@
 		background-color: #555;
 	}
 }
+
+@mixin text-dotdotdot() {
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}

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-grow: 1;
-					flex-shrink: 100;
+					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;
+								@include text-dotdotdot();
-								overflow: hidden;
-								text-overflow: ellipsis;
 							}
 						}
 
@@ -465,3 +476,13 @@
 		}
 	}
 }
+
+
+@media all and (max-width: 50em) {
+	.modal-body.modal-bookmarks {
+		.container-image {
+			margin: 0!important;
+			max-width: 0!important;
+		}
+	}
+}

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;

shared/html/templates.html

@@ -4331,13 +4331,13 @@
         <script class="jsrender-template" id="tmpl_manage_bookmarks" type="text/html">
             <div>
                 <div class="left">
-                    <div class="title">{{tr "Your bookmarks" /}}</div>
+                    <div class="title" title="{{tr 'Your bookmarks' /}}">{{tr "Your bookmarks" /}}</div>
                     <div class="container-bookmarks">
                     </div>
                     <div class="buttons">
-                        <button class="btn btn-danger button-delete">{{tr "Delete" /}}</button>
+                        <button class="btn btn-danger button-delete" title="{{tr 'Delete' /}}">{{tr "Delete" /}}</button>
-                        <button class="btn btn-purple button-add-folder">{{tr "Add Folder" /}}</button>
+                        <button class="btn btn-purple button-add-folder" title="{{tr 'Add Folder' /}}">{{tr "Add Folder" /}}</button>
-                        <button class="btn btn-success button-add-bookmark">{{tr "Add Bookmark" /}}</button>
+                        <button class="btn btn-success button-add-bookmark" title="{{tr 'Add Bookmark' /}}">{{tr "Add Bookmark" /}}</button>
                     </div>
                 </div>
                 <div class="container-seperator vertical" seperator-id="seperator-bookmarks"></div>

shared/js/ui/modal/ModalBookmarks.ts

@@ -141,7 +141,7 @@ namespace Modals {
                         }
 
                         container.append(
-                            $.spawn("div").addClass("name").text(entry.display_name)
+                            $.spawn("div").addClass("name").attr("title", entry.display_name).text(entry.display_name)
                         );
 
                         container.appendTo(container_bookmarks);
@@ -354,7 +354,7 @@ namespace Modals {
                 return template.children();
             },
             footer: undefined,
-            width: 750
+            width: "40em"
         });
 
         modal.htmlTag.dividerfy().find(".modal-body").addClass("modal-bookmarks");