TeaSpeak/TeaWeb
TeaSpeak/TeaWeb
1
0
Fork 0
Code Issues 1 Pull requests Activity

Improved bookmark GUI resizing for small screen devices

Browse source
This commit is contained in:
WolverinDEV 2019-04-15 19:11:33 +02:00
parent e62faf04ee
commit 90ef029829
3 changed files with 52 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

45
shared/css/static/modal-bookmarks.scss
View file

@ -7,6 +7,7 @@
.bookmark-list {
flex-grow: 1;
flex-shrink: 1;
min-height: 75px;
display: flex;
flex-direction: column;
@ -56,17 +57,55 @@
flex-grow: 0;
flex-shrink: 0;
display: flex;
justify-content: space-between;
flex-direction: row;
margin-top: 5px;
text-align: right;
button {
margin-left: 5px;
}
.button-large {
display: block;
}
.button-small {
display: none;
}
}
.group_box:not(:first-of-type) {
flex-grow: 0;
flex-shrink: 0;
@media (max-width: 1000px) {
.buttons {
.button-large {
display: none;
}
.button-small {
display: block;
}
}
}
.group_box {
flex-shrink: 1;
.header {
flex-grow: 0;
flex-shrink: 0;
}
&.gb-settings {
overflow-y: auto;
}
&.gb-list {
min-height: 100px; /* 25px header + 75px body */
}
}
.bookmark-setting {

15
shared/html/templates.html
View file

@ -2880,7 +2880,7 @@
<script class="jsrender-template" id="tmpl_manage_bookmarks" type="text/html">
<div class="modal-bookmarks">
<div class="group_box">
<div class="group_box gb-list">
<div class="header">{{tr "Bookmarks" /}}</div>
<div class="content bookmark-list">
<div class="list">
@ -2891,11 +2891,14 @@
</div>
</div>
<div class="buttons">
<button class="btn btn-raised btn-secondary button-create">{{tr "Create new bookmark/directory" /}}</button>
<button class="btn btn-danger button-delete">{{tr "Delete selected bookmark/directory" /}}</button>
<button class="button-large btn btn-raised btn-secondary button-create">{{tr "Create new bookmark/directory" /}}</button>
<button class="button-large btn btn-danger button-delete">{{tr "Delete selected bookmark/directory" /}}</button>
<button class="button-small btn btn-raised btn-secondary button-create">{{tr "Create" /}}</button>
<button class="button-small btn btn-danger button-delete">{{tr "Delete" /}}</button>
</div>
<hr>
<div class="group_box">
<div class="group_box gb-settings">
<div class="header">{{tr "Bookmark settings" /}}</div>
<div class="content">
<div class="bookmark-setting bookmark-setting-bookmark">
@ -2925,6 +2928,7 @@
</div>
</div>
</div>
<!--
<div class="group_box">
<div class="header">{{tr "Connect Properties (Not yet supported)" /}}</div>
<div class="content">
@ -2942,12 +2946,13 @@
</div>
</div>
<div class="form-group">
<!-- TODO generated id because of password field (id="bookmark_server_password_{{rnd '0~13377331'/}}") -->
<!- TODO generated id because of password field (id="bookmark_server_password_{{rnd '0~13377331'/}}") ->
<label for="input-bookmark-channel-password" class="bmd-label-floating">{{tr "Default channel password" /}}</label>
<input id="input-bookmark-channel-password" class="form-control setting-channel-password" type="password" disabled>
</div>
</div>
</div>
-->
</div>
<div class="bookmark-setting bookmark-setting-directory">
<div class="form-group">

1
shared/js/ui/modal/ModalBookmarks.ts
View file

@ -43,7 +43,6 @@ namespace Modals {
header: tr("Manage bookmarks"),
body: () => {
let template = $("#tmpl_manage_bookmarks").renderTag({ });
template = $.spawn("div").append(template);
let selected_bookmark: bookmarks.Bookmark | bookmarks.DirectoryBookmark | undefined;
let update_name: () => any;