Fixed UI bug related to channel edit for small screen devices
This commit is contained in:
WolverinDEV
parent
97fde7d4af
commit
1720897f82
3 changed files with 75 additions and 20 deletions
|
|
@ -1,4 +1,6 @@
|
||||||
.container-channel-edit-general {
|
$required_notab_height: 800px;
|
||||||
|
|
||||||
|
.container-channel-edit-general, .tab-channel-edit-general {
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
|
|
||||||
.container-name-icon {
|
.container-name-icon {
|
||||||
|
|
@ -49,6 +51,35 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.tab-tag-channel-edit-general {
|
||||||
|
display: none!important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-channel-edit-general {
|
||||||
|
padding: 5px;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container-channel-edit-general {
|
||||||
|
display: flex;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-height: $required_notab_height) {
|
||||||
|
.tab-tag-channel-edit-general {
|
||||||
|
display: inline-block!important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-channel-edit-general {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container-channel-edit-general {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
.container-channel-settings-standard {
|
.container-channel-settings-standard {
|
||||||
min-height: 300px;
|
min-height: 300px;
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -387,7 +387,7 @@
|
||||||
<input class="form-control">
|
<input class="form-control">
|
||||||
<span class="bmd-form-group button-select-icon">
|
<span class="bmd-form-group button-select-icon">
|
||||||
<div class="icon-node">
|
<div class="icon-node">
|
||||||
<node key="channel_icon"/>
|
<node key="channel_icon_general"/>
|
||||||
</div>
|
</div>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -408,25 +408,48 @@
|
||||||
<label class="bmd-label-static">{{tr "Description:" /}}</label>
|
<label class="bmd-label-static">{{tr "Description:" /}}</label>
|
||||||
<textarea class="form-control channel_description" style="min-height: 30px; max-height: 500px; resize: vertical;">{{>channel_description}}</textarea>
|
<textarea class="form-control channel_description" style="min-height: 30px; max-height: 500px; resize: vertical;">{{>channel_description}}</textarea>
|
||||||
</div>
|
</div>
|
||||||
<!--
|
<div style="margin-bottom: 5px"></div>
|
||||||
<div class="properties">
|
|
||||||
<a class="key">{{tr "Name:"/}}</a>
|
|
||||||
<input class="value channel_name" value="{{>channel_name}}"/>
|
|
||||||
|
|
||||||
<a class="key">{{tr "Password:"/}}</a>
|
|
||||||
|
|
||||||
<input class="value channel_password" type="password" id="field_channel_password_{{rnd '0~13377331'/}}" {{if channel_flag_password}} value="WolverinDEV"{{/if}}/>
|
|
||||||
|
|
||||||
<a class="key">{{tr "Topic:"/}}</a>
|
|
||||||
<input class="value channel_topic" value="{{>channel_topic}}"/>
|
|
||||||
|
|
||||||
<a class="key">{{tr "Description:"/}}</a>
|
|
||||||
<textarea class="value channel_description" style="height: 150px; resize: none">{{>channel_description}}</textarea>
|
|
||||||
</div>
|
|
||||||
-->
|
|
||||||
</div>
|
</div>
|
||||||
<div style="margin-bottom: 5px"></div>
|
|
||||||
<x-tab>
|
<x-tab>
|
||||||
|
<x-entry>
|
||||||
|
<x-tag x-entry-class="tab-tag-channel-edit-general">{{tr "General" /}}</x-tag>
|
||||||
|
<x-content>
|
||||||
|
<div class="align_column general_properties tab-channel-edit-general">
|
||||||
|
<div class="container-name-icon form-row">
|
||||||
|
<div class="container-name form-group">
|
||||||
|
<label>{{tr "Name:" /}}</label>
|
||||||
|
<input class="form-control channel_name" value="{{>channel_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="channel_icon_tab"/>
|
||||||
|
</div>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="bmd-label-floating">{{tr "Channel password" /}}</label>
|
||||||
|
|
||||||
|
<!-- Use a random id to trick the default browser password manager. (I think something like a default password is really useless and -->
|
||||||
|
<!-- Just display a random value here-->
|
||||||
|
<input class="form-control channel_password" type="password" id="field_channel_password_{{rnd '0~13377331'/}}" {{if channel_flag_password}} value="WolverinDEV"{{/if}}/>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="bmd-label-static">{{tr "Topic:" /}}</label>
|
||||||
|
<input class="form-control channel_topic" value="{{>channel_topic}}"/>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="bmd-label-static">{{tr "Description:" /}}</label>
|
||||||
|
<textarea class="form-control channel_description" style="min-height: 30px; max-height: 500px; resize: vertical;">{{>channel_description}}</textarea>
|
||||||
|
</div>
|
||||||
|
<div style="margin-bottom: 5px"></div>
|
||||||
|
</div>
|
||||||
|
</x-content>
|
||||||
|
</x-entry>
|
||||||
<x-entry>
|
<x-entry>
|
||||||
<x-tag>{{tr "Standard" /}}</x-tag>
|
<x-tag>{{tr "Standard" /}}</x-tag>
|
||||||
<x-content>
|
<x-content>
|
||||||
|
|
|
||||||
|
|
@ -11,7 +11,8 @@ namespace Modals {
|
||||||
channel_flag_maxfamilyclients_unlimited: true,
|
channel_flag_maxfamilyclients_unlimited: true,
|
||||||
channel_flag_maxclients_unlimited: true,
|
channel_flag_maxclients_unlimited: true,
|
||||||
});
|
});
|
||||||
render_properties["channel_icon"] = connection.fileManager.icons.generateTag(channel ? channel.properties.channel_icon_id : 0);
|
render_properties["channel_icon_tab"] = connection.fileManager.icons.generateTag(channel ? channel.properties.channel_icon_id : 0);
|
||||||
|
render_properties["channel_icon_general"] = connection.fileManager.icons.generateTag(channel ? channel.properties.channel_icon_id : 0);
|
||||||
|
|
||||||
let template = $("#tmpl_channel_edit").renderTag(render_properties);
|
let template = $("#tmpl_channel_edit").renderTag(render_properties);
|
||||||
return template.tabify();
|
return template.tabify();
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue