a
/
gosora
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
public/global.js
View File

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

8
templates/panel_forum_edit.html
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="colstack_item colstack_head">
<div class="rowitem"><h1>{{.Name}}{{lang "panel_forum_head_suffix"}}</h1></div> <div class="rowitem"><h1>{{.Name}}{{lang "panel_forum_head_suffix"}}</h1></div>
</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"> <form action="/panel/forums/edit/submit/{{.ID}}?session={{.CurrentUser.Session}}" method="post">
<div class="formrow"> <div class="formrow">
<div class="formitem formlabel"><a>{{lang "panel_forum_name"}}</a></div> <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="colstack_item colstack_head">
<div class="rowitem"><a>{{lang "panel_forum_permissions_head"}}</a></div> <div class="rowitem"><a>{{lang "panel_forum_permissions_head"}}</a></div>
</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}} {{range .Groups}}
<div class="formrow"> <div class="formrow">
<div class="formitem editable_parent"> <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> <span class="edit_fields hide_on_edit rowsmall">{{lang "panel_forum_edit_button"}}</span>
<div class="panel_floater"> <div class="panel_floater">
<span data-field="perm_preset" data-type="list" data-value="{{.Preset}}" class="editable_block perm_preset perm_preset_{{.Preset}}"></span> <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 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" 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/{{$.ID}}-{{.Group.ID}}"><button class='panel_tag' type='submit'>{{lang "panel_forum_full_edit_button"}}</button></a>
</div> </div>
</div> </div>
</div> </div>

2
templates/panel_forum_edit_perms.html
View File

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

6
templates/panel_forums.html
View File

@ -25,9 +25,9 @@
</span> </span>
<span class="panel_buttons"> <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_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}} {{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> </span>
</div> </div>
{{end}} {{end}}
@ -36,7 +36,7 @@
<div class="colstack_item colstack_head"> <div class="colstack_item colstack_head">
<div class="rowitem"><h1>{{lang "panel_forums_create_head"}}</h1></div> <div class="rowitem"><h1>{{lang "panel_forums_create_head"}}</h1></div>
</div> </div>
<div class="colstack_item"> <div class="colstack_item the_form">
<form action="/panel/forums/create/?session={{.CurrentUser.Session}}" method="post"> <form action="/panel/forums/create/?session={{.CurrentUser.Session}}" method="post">
<div class="formrow"> <div class="formrow">
<div class="formitem formlabel"><a>{{lang "panel_forums_create_name_label"}}</a></div> <div class="formitem formlabel"><a>{{lang "panel_forums_create_name_label"}}</a></div>

4
templates/panel_group_edit_perms.html
View File

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

5
themes/cosora/public/main.css
View File

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

34
themes/cosora/public/panel.css
View File

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

7
themes/nox/public/account.css
View File

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

20
themes/nox/public/main.css
View File

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

19
themes/nox/public/panel.css
View File

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

5
themes/nox/public/profile.css
View File

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

2
themes/shadow/public/main.css
View File

@ -208,7 +208,7 @@ a {
float: left; float: left;
width: calc(70% - 24px); 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; display: none;
} }

2
themes/tempra-simple/public/main.css
View File

@ -736,7 +736,7 @@ button.username {
.mention { .mention {
font-weight: bold; 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; display: none;
} }