Revamped Cosora's Control Panel Menu.

Fixed a bunch of forms which didn't have backgrounds in Nox's Control Panel.
Fixed a bunch of double background buttons in Nox's Control Panel.
You can no longer resize textareas horizontally on Nox.
Fixed the profile comment input width on Nox.
Fixed buttons appearing when they shouldn't in Nox's Control Panel.
Improved the permissions styling in Nox's Control Panel.
Fixed the styling on action posts for Nox.
Fixed the padding on the powered by message on Nox.
Added styling for .account_soon and .dash_security, I'm not quite happy with it and I might change more things up there.
Tweaked a bit of permissions preset padding on Cosora.
The edit_fields handler now uses CSS classes rather than inline CSS for hiding and showing elements.

Experimented with position: sticky in Cosora.
Experimented with the Control Panel Menu styling on Nox.
This commit is contained in:
Azareal 2018-09-02 15:43:17 +10:00
parent 6ecbc18831
commit ab6a44cf53
13 changed files with 82 additions and 40 deletions

View File

@ -431,8 +431,8 @@ function mainInit(){
//console.log("clicked .edit_fields");
var blockParent = $(this).closest('.editable_parent');
//console.log(blockParent);
blockParent.find('.hide_on_edit').hide();
blockParent.find('.show_on_edit').show();
blockParent.find('.hide_on_edit').addClass("edit_opened");
blockParent.find('.show_on_edit').addClass("edit_opened");
blockParent.find('.editable_block').show();
blockParent.find('.editable_block').each(function(){
var fieldName = this.getAttribute("data-field");
@ -491,8 +491,8 @@ function mainInit(){
//console.log("Form Action:", formAction);
//console.log(outData);
$.ajax({ url: formAction + "?session=" + me.User.Session, type:"POST", dataType:"json", data: outData, error: ajaxError });
blockParent.find('.hide_on_edit').show();
blockParent.find('.show_on_edit').hide();
blockParent.find('.hide_on_edit').removeClass("edit_opened");
blockParent.find('.show_on_edit').removeClass("edit_opened");
});
});

View File

@ -10,7 +10,7 @@ var formVars = {'perm_preset': ['can_moderate','can_post','read_only','no_access
<div class="colstack_item colstack_head">
<div class="rowitem"><h1>{{.Name}}{{lang "panel_forum_head_suffix"}}</h1></div>
</div>
<div id="panel_forum" class="colstack_item">
<div id="panel_forum" class="colstack_item the_form">
<form action="/panel/forums/edit/submit/{{.ID}}?session={{.CurrentUser.Session}}" method="post">
<div class="formrow">
<div class="formitem formlabel"><a>{{lang "panel_forum_name"}}</a></div>
@ -49,7 +49,7 @@ var formVars = {'perm_preset': ['can_moderate','can_post','read_only','no_access
<div class="colstack_item colstack_head">
<div class="rowitem"><a>{{lang "panel_forum_permissions_head"}}</a></div>
</div>
<div id="forum_quick_perms" class="colstack_item rowlist formlist">
<div id="forum_quick_perms" class="colstack_item rowlist formlist the_form">
{{range .Groups}}
<div class="formrow">
<div class="formitem editable_parent">
@ -58,8 +58,8 @@ var formVars = {'perm_preset': ['can_moderate','can_post','read_only','no_access
<span class="edit_fields hide_on_edit rowsmall">{{lang "panel_forum_edit_button"}}</span>
<div class="panel_floater">
<span data-field="perm_preset" data-type="list" data-value="{{.Preset}}" class="editable_block perm_preset perm_preset_{{.Preset}}"></span>
<a class="panel_right_button" href="/panel/forums/edit/perms/submit/{{$.ID}}"><button class='panel_tag submit_edit show_on_edit' type='submit'>{{lang "panel_forum_short_update_button"}}</button></a>
<a class="panel_right_button" href="/panel/forums/edit/perms/{{$.ID}}-{{.Group.ID}}"><button class='panel_tag show_on_edit' type='submit'>{{lang "panel_forum_full_edit_button"}}</button></a>
<a class="panel_right_button has_inner_button show_on_edit" href="/panel/forums/edit/perms/submit/{{$.ID}}"><button class='panel_tag submit_edit' type='submit'>{{lang "panel_forum_short_update_button"}}</button></a>
<a class="panel_right_button has_inner_button show_on_edit" href="/panel/forums/edit/perms/{{$.ID}}-{{.Group.ID}}"><button class='panel_tag' type='submit'>{{lang "panel_forum_full_edit_button"}}</button></a>
</div>
</div>
</div>

View File

@ -7,7 +7,7 @@
<div class="rowitem"><h1>{{.Name}}{{lang "panel_forum_head_suffix"}}</h1></div>
</div>
<form action="/panel/forums/edit/perms/adv/submit/{{.ForumID}}-{{.GroupID}}?session={{.CurrentUser.Session}}" method="post">
<div class="colstack_item rowlist formlist panel_forum_perms">
<div class="colstack_item rowlist formlist the_form panel_forum_perms">
{{range .Perms}}
<div class="formrow">
<div class="formitem">

View File

@ -25,9 +25,9 @@
</span>
<span class="panel_buttons">
<a class="panel_tag edit_fields hide_on_edit panel_right_button edit_button" title="{{lang "panel_forums_edit_button_tooltip"}}" aria-label="{{lang "panel_forums_edit_button_aria"}}"></a>
<a class="panel_right_button" href="/panel/forums/edit/submit/{{.ID}}"><button class='panel_tag submit_edit show_on_edit' type='submit'>{{lang "panel_forums_update_button"}}</button></a>
<a class="panel_right_button has_inner_button show_on_edit" href="/panel/forums/edit/submit/{{.ID}}"><button class='panel_tag submit_edit' type='submit'>{{lang "panel_forums_update_button"}}</button></a>
{{if gt .ID 1}}<a href="/panel/forums/delete/{{.ID}}?session={{$.CurrentUser.Session}}" class="panel_tag panel_right_button hide_on_edit delete_button" title="{{lang "panel_forums_delete_button_tooltip"}}" aria-label="{{lang "panel_forums_delete_button_aria"}}"></a>{{end}}
<a href="/panel/forums/edit/{{.ID}}" class="panel_tag panel_right_button show_on_edit"><button>{{lang "panel_forums_full_edit_button"}}</button></a>
<a href="/panel/forums/edit/{{.ID}}" class="panel_tag panel_right_button has_inner_button show_on_edit"><button>{{lang "panel_forums_full_edit_button"}}</button></a>
</span>
</div>
{{end}}
@ -36,7 +36,7 @@
<div class="colstack_item colstack_head">
<div class="rowitem"><h1>{{lang "panel_forums_create_head"}}</h1></div>
</div>
<div class="colstack_item">
<div class="colstack_item the_form">
<form action="/panel/forums/create/?session={{.CurrentUser.Session}}" method="post">
<div class="formrow">
<div class="formitem formlabel"><a>{{lang "panel_forums_create_name_label"}}</a></div>

View File

@ -17,7 +17,7 @@
</div>
<form action="/panel/groups/edit/perms/submit/{{.ID}}?session={{.CurrentUser.Session}}" method="post">
{{if .CurrentUser.Perms.EditGroupLocalPerms}}
<div class="colstack_item rowlist formlist panel_group_perms">
<div class="colstack_item rowlist formlist the_form panel_group_perms">
{{range .LocalPerms}}
<div class="formrow">
<div class="formitem">
@ -40,7 +40,7 @@
<div class="colstack_item colstack_head">
<div class="rowitem"><h1>{{lang "panel_group_extended_permissions"}}</h1></div>
</div>
<div class="colstack_item rowlist formlist panel_group_perms">
<div class="colstack_item rowlist formlist the_form panel_group_perms">
{{range .GlobalPerms}}
<div class="formrow">
<div class="formitem">

View File

@ -206,6 +206,9 @@ ul {
padding-top: 0px;
}
.rowblock, .rowitem, .colstack_head, .colstack_item {
position: sticky;
}
.rowblock, .colstack_head {
margin-bottom: 12px;
border: 1px solid var(--header-border-color);
@ -527,7 +530,7 @@ input[type=checkbox]:checked + label .sel {
.pollinput:not(:only-child):not(:first-child) {
margin-bottom: 5px;
}
.auto_hide, .show_on_edit {
.auto_hide, .show_on_edit:not(.edit_opened), .hide_on_edit.edit_opened {
display: none;
}

View File

@ -13,24 +13,43 @@
}
.colstack_left {
background-color: hsl(0,0%,90%);
width: 250px !important;
background-color: white;
margin-top: -18.5px;
margin-left: -0.5px;
border-top: 1px solid var(--element-border-color);
border-right: 1px solid var(--element-border-color);
}
.colstack_left .colstack_head {
margin-top: -1px;
margin-bottom: 0px;
margin-left: 0px;
margin-top: 6px;
margin-bottom: 8px;
margin-left: 16px;
padding-bottom: 12px;
padding-top: 12px;
border-bottom: 1.5px solid var(--element-border-color);
padding-left: 8px;
border-bottom: 1px solid var(--element-border-color);
border-left: none;
border-right: none;
border-top: none;
width: fit-content;
}
.colstack_left .rowmenu {
padding-left: 18px !important;
}
.colstack_left .rowmenu .passive {
border: none;
font-size: 15px;
padding: 8px;
padding-top: 6px;
padding-bottom: 8px;
}
.colstack_left .rowmenu .passive:first-child {
border-top: none;
}
.colstack_left .rowmenu .passive:last-child {
border-bottom: 0.5px solid var(--element-border-color) !important;
border-bottom: 1px solid var(--element-border-color) !important;
width: 150px;
padding-bottom: 16px;
}
.submenu {
margin-left: 12px;
@ -178,6 +197,9 @@
margin-left: 3px;
margin-top: 1px;
}
#forum_quick_perms .perm_preset {
margin-right: 6px;
}
.perm_preset_no_access:before {
content: "{{index .Phrases "panel_perms_no_access" }}";
color: hsl(0,100%,20%);

View File

@ -8,7 +8,7 @@
}
.rowmenu {
margin-left: 12px;
margin-left: 16px;
}
.colstack_left {
width: 25%;
@ -25,14 +25,14 @@
margin-top: 8px;
}
.colstack_left .colstack_head a {
color: rgb(231, 231, 231);
color: rgb(210, 210, 210);
}
.rowmenu {
margin-bottom: 2px;
font-size: 17px;
}
.rowmenu a {
color: rgb(170, 170, 170);
color: rgb(180, 180, 180);
}
.colstack_right {
@ -96,6 +96,7 @@ button, .formbutton {
.account_soon, .dash_security {
font-size: 14px;
color: rgb(270, 170, 170);
}
#account_dashboard .colstack_right .coldyn_block {

View File

@ -257,6 +257,7 @@ h2 {
.quick_create_form .topic_content_row textarea {
width: 100%;
height: 60px;
resize: vertical;
}
.quick_create_form .quick_button_row .formitem {
display: flex;
@ -268,6 +269,7 @@ h2 {
.quick_create_form #input_content {
width: 100%;
height: 100px;
resize: vertical;
}
.more_topic_block_initial {
@ -276,12 +278,9 @@ h2 {
.more_topic_block_active {
display: block;
}
.hide_ajax_topic {
.hide_ajax_topic, .auto_hide, .show_on_edit:not(.edit_opened), .hide_on_edit.edit_opened {
display: none !important;
}
.auto_hide, .show_on_edit {
display: none;
}
.topic_list_title_block {
display: flex;
@ -420,7 +419,7 @@ h2 {
display: block;
}
input, select, button, .formbutton, .panel_right_button, textarea {
input, select, button, .formbutton, .panel_right_button:not(.has_inner_button), textarea {
border-radius: 3px;
background: rgb(90,90,90);
color: rgb(200,200,200);
@ -447,7 +446,7 @@ input, select {
margin-left: 3px;
margin-bottom: 4px;
}
button, .formbutton, .panel_right_button {
button, .formbutton, .panel_right_button:not(.has_inner_button) {
background: rgb(110,110,210);
color: rgb(250,250,250);
font-family: "Segoe UI";
@ -467,6 +466,10 @@ button, .formbutton, .panel_right_button {
.form_button_row {
margin-top: 10px;
}
.formitem a {
margin-bottom: 5px;
display: block;
}
.login_mfa_token_row .formlabel {
display: none;
@ -609,7 +612,7 @@ button, .formbutton, .panel_right_button {
flex-direction: column;
color: #bbbbbb;
}
.post_item .user_content {
.action_item .content_container, .post_item .user_content {
background-color: #444444;
border-radius: 3px;
padding: 16px;
@ -770,9 +773,10 @@ input[type=checkbox]:checked + label .sel {
}
#poweredByHolder {
display: flex;
padding: 12px;
padding-top: 12px;
padding-left: 16px;
padding-right: 16px;
padding-bottom: 8px;
}
#poweredBy {
margin-right: auto;

View File

@ -11,7 +11,7 @@
background-color: #393939;
}
.rowmenu {
margin-left: 12px;
margin-left: 16px;
}
.submenu a:before {
content: "-";
@ -33,14 +33,14 @@
margin-top: 8px;
}
.colstack_left .colstack_head a {
color: rgb(231, 231, 231);
color: rgb(210, 210, 210);
}
.rowmenu {
margin-bottom: 2px;
font-size: 17px;
}
.rowmenu a {
color: rgb(170, 170, 170);
color: rgb(180, 180, 180);
}
.menu_stats {
margin-left: 4px;
@ -122,7 +122,7 @@ button, .formbutton {
/*background: rgb(110,110,210);
color: rgb(250,250,250);*/
}
button, .formbutton, .panel_right_button, #panel_users .profile_url {
button, .formbutton, .panel_right_button:not(.has_inner_button), #panel_users .profile_url {
background: rgb(100,100,200);
}
#panel_users .panel_tag:not(.panel_right_button) {
@ -131,7 +131,7 @@ button, .formbutton, .panel_right_button, #panel_users .profile_url {
/*.formlabel {
font-size: 17px;
}*/
.panel_right_button, #panel_users .panel_tag:not(.panel_right_button), #panel_users .profile_url {
.panel_right_button:not(.has_inner_button), #panel_users .panel_tag:not(.panel_right_button), #panel_users .profile_url {
margin-left: 2px;
padding: 5px;
padding-left: 6px;
@ -207,6 +207,13 @@ button, .formbutton, .panel_right_button, #panel_users .profile_url {
margin-right: auto;
}
.has_inner_button button {
margin-right: 8px;
}
#forum_quick_perms .formitem, #forum_quick_perms .panel_floater {
display: flex;
}
.panel_plugin_meta {
display: flex;
flex-direction: column;
@ -234,4 +241,4 @@ button, .formbutton, .panel_right_button, #panel_users .profile_url {
.pageitem {
background-color: #555555;
}
}

View File

@ -71,6 +71,11 @@
margin-top: 8px;
padding: 12px;
}
.input_content {
width: 100%;
height: 100px;
resize: vertical;
}
.footer .widget, .sidebar {
display: none;

View File

@ -208,7 +208,7 @@ a {
float: left;
width: calc(70% - 24px);
}
.colstack_left:empty, .colstack_right:empty, .show_on_edit {
.colstack_left:empty, .colstack_right:empty, .show_on_edit:not(.edit_opened), .hide_on_edit.edit_opened {
display: none;
}

View File

@ -736,7 +736,7 @@ button.username {
.mention {
font-weight: bold;
}
.show_on_edit, .auto_hide, .hide_on_big, .show_on_mobile {
.show_on_edit:not(.edit_opened), .hide_on_edit.edit_opened, .auto_hide, .hide_on_big, .show_on_mobile {
display: none;
}