From b2c7dae3221c409f4e8b6d35847f65c5b4326e0f Mon Sep 17 00:00:00 2001 From: Are0h Date: Tue, 10 May 2022 18:48:34 -0700 Subject: [PATCH] Page Editor style fixes The page editor UI was looking very shaky, so I went in there and cleaned it up. The nesting is a bit intense, so I'm gonna think about better ways of laying that out that aren't so convoluted. --- brain/views/dash/page-edit.twig | 10 ++++----- public/assets/css/dash.css | 34 ++++++++++++++--------------- src/styles/main/_posts.scss | 38 ++++++++++++++++----------------- 3 files changed, 41 insertions(+), 41 deletions(-) diff --git a/brain/views/dash/page-edit.twig b/brain/views/dash/page-edit.twig index 213df76..b6e11f7 100644 --- a/brain/views/dash/page-edit.twig +++ b/brain/views/dash/page-edit.twig @@ -36,7 +36,7 @@ {% endblock %} {% block stylesheets %} - + {% endblock %} {% block mainContent %} @@ -116,10 +116,10 @@
-
+
-
@@ -143,7 +143,7 @@
{% apply spaceless %} diff --git a/public/assets/css/dash.css b/public/assets/css/dash.css index 18d0e92..7809304 100644 --- a/public/assets/css/dash.css +++ b/public/assets/css/dash.css @@ -3287,7 +3287,7 @@ select { text-transform: uppercase; float: right; } -#post-edit-index #post-edit-index-wrapper #post-header #post-header-wrapper #post-title #post-title-text { +#post-edit-index #post-edit-index-wrapper #post-header #post-header-wrapper #post-edit-title textarea#post-title-text { background: #efebe3; font-family: helvetica, arial, sans-serif; width: 97.6%; @@ -3297,14 +3297,14 @@ select { padding: 5px; margin: 0 0 5px; } -#post-edit-index #post-edit-index-wrapper #post-header #post-header-wrapper #post-title #calendar-icon { +#post-edit-index #post-edit-index-wrapper #post-header #post-header-wrapper #post-edit-title #calendar-icon { background: #05090b; border-radius: 3px 0 0 3px; display: inline-block; padding: 5.2px; color: #b2cce5; } -#post-edit-index #post-edit-index-wrapper #post-header #post-header-wrapper #post-title #layouts select { +#post-edit-index #post-edit-index-wrapper #post-header #post-header-wrapper #post-edit-title #layouts select { background: #1d3040; color: #b2cce5; border-radius: 3px; @@ -3331,16 +3331,7 @@ select { padding: 0; margin: 0 0 10px; } -#post-edit-index #post-edit-index-wrapper #post-header #post-header-wrapper #post-meta #post-options button.option-button:nth-child(1) { - border-radius: 3px 0 0 3px; -} -#post-edit-index #post-edit-index-wrapper #post-header #post-header-wrapper #post-meta #post-options button.option-button:nth-child(4) { - border-radius: 0 3px 3px 0; -} -#post-edit-index #post-edit-index-wrapper #post-header #post-header-wrapper #post-meta #post-options a button.button-link { - border-radius: 0 3px 3px 0 !important; -} -#post-edit-index #post-edit-index-wrapper #post-header #post-header-wrapper #post-meta #post-options button.option-btn { +#post-edit-index #post-edit-index-wrapper #post-header #post-header-wrapper #post-meta #post-options button.post-option-btn { width: 25%; height: 45px; transition: all 0.3s linear; @@ -3350,16 +3341,25 @@ select { vertical-align: top; text-align: center; } -#post-edit-index #post-edit-index-wrapper #post-header #post-header-wrapper #post-meta #post-options button.btn-active[data-active=false] { +#post-edit-index #post-edit-index-wrapper #post-header #post-header-wrapper #post-meta #post-options button.post-option-btn:nth-child(1) { + border-radius: 3px 0 0 3px; +} +#post-edit-index #post-edit-index-wrapper #post-header #post-header-wrapper #post-meta #post-options button.post-option-btn:nth-child(4) { + border-radius: 0 3px 3px 0; +} +#post-edit-index #post-edit-index-wrapper #post-header #post-header-wrapper #post-meta #post-options a button.button-link { + border-radius: 0 3px 3px 0 !important; +} +#post-edit-index #post-edit-index-wrapper #post-header #post-header-wrapper #post-meta #post-options button.post-option-btn[data-active=false] { background: #1d3040; } -#post-edit-index #post-edit-index-wrapper #post-header #post-header-wrapper #post-meta #post-options button.btn-active[data-active=false] svg.svg-toggle { +#post-edit-index #post-edit-index-wrapper #post-header #post-header-wrapper #post-meta #post-options button.post-option-btn[data-active=false] svg.svg-toggle { fill: #b2cce5; } -#post-edit-index #post-edit-index-wrapper #post-header #post-header-wrapper #post-meta #post-options button.btn-active[data-active=true] { +#post-edit-index #post-edit-index-wrapper #post-header #post-header-wrapper #post-meta #post-options button.post-option-btn[data-active=true] { background: #f5ab35; } -#post-edit-index #post-edit-index-wrapper #post-header #post-header-wrapper #post-meta #post-options button.btn-active[data-active=true] svg.svg-toggle { +#post-edit-index #post-edit-index-wrapper #post-header #post-header-wrapper #post-meta #post-options button.post-option-btn[data-active=true] svg.svg-toggle { fill: #1d3040; } #post-edit-index #post-edit-index-wrapper #post-header #post-header-wrapper #post-meta #page-files-upload, diff --git a/src/styles/main/_posts.scss b/src/styles/main/_posts.scss index 0d2e3db..b663d6e 100644 --- a/src/styles/main/_posts.scss +++ b/src/styles/main/_posts.scss @@ -244,8 +244,8 @@ float: right; } - #post-title { - #post-title-text { + #post-edit-title { + textarea#post-title-text { background: $white; font-family: $basetype; width: 97.6%; @@ -297,21 +297,7 @@ padding: 0; margin: 0 0 10px; - button.option-button:nth-child(1) { - border-radius: 3px 0 0 3px; - } - - button.option-button:nth-child(4) { - border-radius: 0 3px 3px 0; - } - - a { - button.button-link { - border-radius: 0 3px 3px 0 !important; - } - } - - button.option-btn { + button.post-option-btn { width: 25%; height: 45px; transition: all 0.3s linear; @@ -322,7 +308,21 @@ text-align: center; } - button.btn-active[data-active='false'] { + button.post-option-btn:nth-child(1) { + border-radius: 3px 0 0 3px; + } + + button.post-option-btn:nth-child(4) { + border-radius: 0 3px 3px 0; + } + + a { + button.button-link { + border-radius: 0 3px 3px 0 !important; + } + } + + button.post-option-btn[data-active='false'] { background: $primary; svg.svg-toggle { @@ -330,7 +330,7 @@ } } - button.btn-active[data-active='true'] { + button.post-option-btn[data-active='true'] { background: $tertiary; svg.svg-toggle {