xarvh/fipamo
1
0
Fork 0
forked from projects/fipamo
Code Pull requests Activity

Page Editor style fixes

Browse source 
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.
This commit is contained in:
Are0h 2022-05-10 18:48:34 -07:00
parent 2501a19685
commit b2c7dae322
3 changed files with 41 additions and 41 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
brain/views/dash/page-edit.twig
View file

@ -36,7 +36,7 @@
{% endblock %} {% endblock %}
{% block stylesheets %} {% block stylesheets %}
<link rel="stylesheet" type="text/css" href="/assets/css/dash.css?=vbhj"> <link rel="stylesheet" type="text/css" href="/assets/css/dash.css?=dfettb">
{% endblock %} {% endblock %}
{% block mainContent %} {% block mainContent %}
@ -116,10 +116,10 @@
</div> </div>
<div id="post-header"> <div id="post-header">
<div id="post-header-wrapper" class="columns"> <div id="post-header-wrapper" class="columns">
<div id="post-title" class="column"> <div id="post-edit-title" class="column">
<label>TITLE</label> <label>TITLE</label>
<textarea id="post-title-text " type="text" name="post-title-text " class="post-edit" placeholder="TITLE"> <textarea id="post-title-text" type="text" name="post-title-text" class="post-edit" placeholder="TITLE">
{{ title }} {{- title -}}
</textarea> </textarea>
<div id="layouts"> <div id="layouts">
@ -143,7 +143,7 @@
<div id="post-meta" class="column"> <div id="post-meta" class="column">
<label>TAGS</label> <label>TAGS</label>
<textarea id="post-tags" type="text" name="post-tags" class="form-control" placeholder="tags [comma seperated]"> <textarea id="post-tags" type="text" name="post-tags" class="form-control" placeholder="tags [comma seperated]">
{{ tags }} {{- tags -}}
</textarea> </textarea>
<label>OPTIONS</label> <label>OPTIONS</label>
{% apply spaceless %} {% apply spaceless %}

34
public/assets/css/dash.css
View file

@ -3287,7 +3287,7 @@ select {
text-transform: uppercase; text-transform: uppercase;
float: right; 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; background: #efebe3;
font-family: helvetica, arial, sans-serif; font-family: helvetica, arial, sans-serif;
width: 97.6%; width: 97.6%;
@ -3297,14 +3297,14 @@ select {
padding: 5px; padding: 5px;
margin: 0 0 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; background: #05090b;
border-radius: 3px 0 0 3px; border-radius: 3px 0 0 3px;
display: inline-block; display: inline-block;
padding: 5.2px; padding: 5.2px;
color: #b2cce5; 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; background: #1d3040;
color: #b2cce5; color: #b2cce5;
border-radius: 3px; border-radius: 3px;
@ -3331,16 +3331,7 @@ select {
padding: 0; padding: 0;
margin: 0 0 10px; 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) { #post-edit-index #post-edit-index-wrapper #post-header #post-header-wrapper #post-meta #post-options button.post-option-btn {
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 {
width: 25%; width: 25%;
height: 45px; height: 45px;
transition: all 0.3s linear; transition: all 0.3s linear;
@ -3350,16 +3341,25 @@ select {
vertical-align: top; vertical-align: top;
text-align: center; 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; 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; 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; 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; fill: #1d3040;
} }
#post-edit-index #post-edit-index-wrapper #post-header #post-header-wrapper #post-meta #page-files-upload, #post-edit-index #post-edit-index-wrapper #post-header #post-header-wrapper #post-meta #page-files-upload,

38
src/styles/main/_posts.scss
View file

@ -244,8 +244,8 @@
float: right; float: right;
} }
#post-title { #post-edit-title {
#post-title-text { textarea#post-title-text {
background: $white; background: $white;
font-family: $basetype; font-family: $basetype;
width: 97.6%; width: 97.6%;
@ -297,21 +297,7 @@
padding: 0; padding: 0;
margin: 0 0 10px; margin: 0 0 10px;
button.option-button:nth-child(1) { button.post-option-btn {
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 {
width: 25%; width: 25%;
height: 45px; height: 45px;
transition: all 0.3s linear; transition: all 0.3s linear;
@ -322,7 +308,21 @@
text-align: center; 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; background: $primary;
svg.svg-toggle { svg.svg-toggle {
@ -330,7 +330,7 @@
} }
} }
button.btn-active[data-active='true'] { button.post-option-btn[data-active='true'] {
background: $tertiary; background: $tertiary;
svg.svg-toggle { svg.svg-toggle {