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

Fixed style bug on small screen devices

Browse source
This commit is contained in:
WolverinDEV 2019-04-29 19:06:18 +02:00
parent 908ac4aaeb
commit 8c57d16ef8
4 changed files with 88 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
shared/css/static/general.scss
View file

@ -485,4 +485,10 @@ x-content {
[class*=" bmd-label"], [class^=bmd-label] {
color: rgba(0, 0, 0, .6) !important;
}
/* bootstrap materialize fix */
.form-row {
margin-left: 0!important;
margin-right: 0!important;
}

27
shared/css/static/modal-server.scss
View file

@ -1,4 +1,8 @@
.container-server-settings-general {
$required_notab_height: 950px;
.container-server-settings-general, .tab-server-settings-general {
flex-direction: column;
.container-server-settings-slots {
display: flex;
flex-direction: row;
@ -67,6 +71,27 @@
}
}
}
.tab-server-settings-general {
padding: 5px;
display: none;
}
.container-server-settings-general {
display: flex;
flex-shrink: 0;
}
@media (max-height: $required_notab_height) {
.tab-server-settings-general {
display: flex;
}
.container-server-settings-general {
display: none;
}
}
.container-server-settings-host {
padding: 5px;

54
shared/html/templates.html
View file

@ -753,7 +753,7 @@
<h5 class="modal-title">{{tr "Manager the Virtual Server" /}}</h5>
</modal-header>
<modal-body>
<div class="container-server-settings-general">
<div class="container-server-settings-general properties-general">
<div class="container-name-icon form-row">
<div class="container-name form-group">
<label>{{tr "Name:" /}}</label>
@ -764,7 +764,7 @@
<input class="form-control">
<span class="bmd-form-group button-select-icon">
<div class="icon-node">
<node key="virtualserver_icon"/>
<node key="virtualserver_icon_general"/>
</div>
</span>
</div>
@ -793,9 +793,57 @@
<textarea class="form-control virtualserver_welcomemessage">{{>virtualserver_welcomemessage}}</textarea>
</div>
<hr>
<div style="margin-bottom: 5px"></div>
</div>
<div style="margin-bottom: 5px"></div>
<x-tab>
<x-entry>
<x-tag>{{tr "General" /}}</x-tag>
<x-content>
<div class="tab-server-settings-general properties-general">
<div class="container-name-icon form-row">
<div class="container-name form-group">
<label>{{tr "Name:" /}}</label>
<input class="form-control virtualserver_name" value="{{>virtualserver_name}}"/>
</div>
<div class="container-icon form-group">
<label>{{tr "Icon:" /}}</label>
<input class="form-control">
<span class="bmd-form-group button-select-icon">
<div class="icon-node">
<node key="virtualserver_icon_tab"/>
</div>
</span>
</div>
</div>
<div class="form-group">
<label>{{tr "Phonetic Name:" /}}</label>
<input class="form-control virtualserver_name_phonetic" value="{{>virtualserver_name_phonetic}}"/>
</div>
<div class="form-group">
<label>{{tr "Password:" /}}</label>
<input class="form-control virtualserver_password" autocomplete="nope" type="password" id="field_server_password_{{rnd '0~13377331'/}}" {{if virtualserver_flag_password}} value="WolverinDEV"{{/if}}/>
</div>
<hr>
<div class="container-server-settings-slots form-row">
<div class="form-group">
<label>{{tr "Maximum Clients:" /}}</label>
<input type="number" min="0" max="1024" value="{{:virtualserver_maxclients}}" class="form-control virtualserver_maxclients">
</div>
<div class="form-group">
<label>{{tr "Reserved slots:" /}}</label>
<input type="number" min="0" max="{{*: data.virtualserver_maxclients - 1 }}" value="{{:virtualserver_reserved_slots}}" class="form-control virtualserver_reserved_slots">
</div>
</div>
<div class="form-group">
<label>{{tr "Welcome Message:" /}}</label>
<textarea class="form-control virtualserver_welcomemessage">{{>virtualserver_welcomemessage}}</textarea>
</div>
<hr>
<div style="margin-bottom: 5px"></div>
</div>
</x-content>
</x-entry>
<x-entry>
<x-tag>{{tr "Host" /}}</x-tag>
<x-content>

8
shared/js/ui/modal/ModalServerEdit.ts
View file

@ -6,7 +6,8 @@ namespace Modals {
const render_properties = {};
Object.assign(render_properties, server.properties);
render_properties["virtualserver_icon"] = server.channelTree.client.fileManager.icons.generateTag(server.properties.virtualserver_icon_id);
render_properties["virtualserver_icon_tab"] = server.channelTree.client.fileManager.icons.generateTag(server.properties.virtualserver_icon_id);
render_properties["virtualserver_icon_general"] = server.channelTree.client.fileManager.icons.generateTag(server.properties.virtualserver_icon_id);
const modal_template = $("#tmpl_server_edit").renderTag(render_properties);
const modal = modal_template.modalize((header, body, footer) => {
@ -15,7 +16,7 @@ namespace Modals {
}
});
server_applyGeneralListener(properties, server, modal.htmlTag.find(".container-server-settings-general"), modal.htmlTag.find(".button_ok"));
server_applyGeneralListener(properties, server, modal.htmlTag.find(".properties-general"), modal.htmlTag.find(".button_ok"));
server_applyTransferListener(properties, server, modal.htmlTag.find('.properties_transfer'));
server_applyHostListener(server, properties, server.properties, modal.htmlTag.find(".properties_host"), modal.htmlTag.find(".button_ok"));
server_applyMessages(properties, server, modal.htmlTag.find(".properties_messages"));
@ -92,7 +93,8 @@ namespace Modals {
Modals.spawnIconSelect(connection_handler, id => {
const icon_node = tag.find(".button-select-icon").find(".icon-node");
icon_node.empty();
icon_node.append(connection_handler.fileManager.icons.generateTag(id));
icon_node.each((_, e) => { $(e).append(connection_handler.fileManager.icons.generateTag(id)); });
//icon_node.append(connection_handler.fileManager.icons.generateTag(id));
console.log("Selected icon ID: %d", id);
properties.virtualserver_icon_id = id;