From ab6a44cf53554ebedb701b5ba5d063cba017066b Mon Sep 17 00:00:00 2001 From: Azareal Date: Sun, 2 Sep 2018 15:43:17 +1000 Subject: [PATCH] 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. --- public/global.js | 8 +++---- templates/panel_forum_edit.html | 8 +++---- templates/panel_forum_edit_perms.html | 2 +- templates/panel_forums.html | 6 ++--- templates/panel_group_edit_perms.html | 4 ++-- themes/cosora/public/main.css | 5 +++- themes/cosora/public/panel.css | 34 ++++++++++++++++++++++----- themes/nox/public/account.css | 7 +++--- themes/nox/public/main.css | 20 +++++++++------- themes/nox/public/panel.css | 19 ++++++++++----- themes/nox/public/profile.css | 5 ++++ themes/shadow/public/main.css | 2 +- themes/tempra-simple/public/main.css | 2 +- 13 files changed, 82 insertions(+), 40 deletions(-) diff --git a/public/global.js b/public/global.js index eb66d260..c3cae288 100644 --- a/public/global.js +++ b/public/global.js @@ -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"); }); }); diff --git a/templates/panel_forum_edit.html b/templates/panel_forum_edit.html index 31b41e2f..16428fa8 100644 --- a/templates/panel_forum_edit.html +++ b/templates/panel_forum_edit.html @@ -10,7 +10,7 @@ var formVars = {'perm_preset': ['can_moderate','can_post','read_only','no_access

{{.Name}}{{lang "panel_forum_head_suffix"}}

-
+
{{lang "panel_forum_name"}}
@@ -49,7 +49,7 @@ var formVars = {'perm_preset': ['can_moderate','can_post','read_only','no_access
{{lang "panel_forum_permissions_head"}}
-
+
{{range .Groups}}
@@ -58,8 +58,8 @@ var formVars = {'perm_preset': ['can_moderate','can_post','read_only','no_access {{lang "panel_forum_edit_button"}}
- - + +
diff --git a/templates/panel_forum_edit_perms.html b/templates/panel_forum_edit_perms.html index 397f651d..1f85e898 100644 --- a/templates/panel_forum_edit_perms.html +++ b/templates/panel_forum_edit_perms.html @@ -7,7 +7,7 @@

{{.Name}}{{lang "panel_forum_head_suffix"}}

-
+
{{range .Perms}}
diff --git a/templates/panel_forums.html b/templates/panel_forums.html index 1b52317d..2e8e89c2 100644 --- a/templates/panel_forums.html +++ b/templates/panel_forums.html @@ -25,9 +25,9 @@ - + {{if gt .ID 1}}{{end}} - +
{{end}} @@ -36,7 +36,7 @@

{{lang "panel_forums_create_head"}}

-
+
{{lang "panel_forums_create_name_label"}}
diff --git a/templates/panel_group_edit_perms.html b/templates/panel_group_edit_perms.html index be13406e..93390594 100644 --- a/templates/panel_group_edit_perms.html +++ b/templates/panel_group_edit_perms.html @@ -17,7 +17,7 @@
{{if .CurrentUser.Perms.EditGroupLocalPerms}} -
+
{{range .LocalPerms}}
@@ -40,7 +40,7 @@

{{lang "panel_group_extended_permissions"}}

-
+
{{range .GlobalPerms}}
diff --git a/themes/cosora/public/main.css b/themes/cosora/public/main.css index 9bf3b49b..736df21b 100644 --- a/themes/cosora/public/main.css +++ b/themes/cosora/public/main.css @@ -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; } diff --git a/themes/cosora/public/panel.css b/themes/cosora/public/panel.css index 91a889c7..8673846e 100644 --- a/themes/cosora/public/panel.css +++ b/themes/cosora/public/panel.css @@ -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%); diff --git a/themes/nox/public/account.css b/themes/nox/public/account.css index 6d6a0c82..8bfe94a8 100644 --- a/themes/nox/public/account.css +++ b/themes/nox/public/account.css @@ -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 { diff --git a/themes/nox/public/main.css b/themes/nox/public/main.css index 36e2b829..0387af8d 100644 --- a/themes/nox/public/main.css +++ b/themes/nox/public/main.css @@ -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; diff --git a/themes/nox/public/panel.css b/themes/nox/public/panel.css index 3ffde1a7..c946199e 100644 --- a/themes/nox/public/panel.css +++ b/themes/nox/public/panel.css @@ -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; -} \ No newline at end of file +} diff --git a/themes/nox/public/profile.css b/themes/nox/public/profile.css index 21d5c285..708b9a6b 100644 --- a/themes/nox/public/profile.css +++ b/themes/nox/public/profile.css @@ -71,6 +71,11 @@ margin-top: 8px; padding: 12px; } +.input_content { + width: 100%; + height: 100px; + resize: vertical; +} .footer .widget, .sidebar { display: none; diff --git a/themes/shadow/public/main.css b/themes/shadow/public/main.css index b44e1f69..efe9e9ff 100644 --- a/themes/shadow/public/main.css +++ b/themes/shadow/public/main.css @@ -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; } diff --git a/themes/tempra-simple/public/main.css b/themes/tempra-simple/public/main.css index d50deef5..64284434 100644 --- a/themes/tempra-simple/public/main.css +++ b/themes/tempra-simple/public/main.css @@ -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; }