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 %}
{% 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 %}
{% block mainContent %}
@ -116,10 +116,10 @@
</div>
<div id="post-header">
<div id="post-header-wrapper" class="columns">
<div id="post-title" class="column">
<div id="post-edit-title" class="column">
<label>TITLE</label>
<textarea id="post-title-text " type="text" name="post-title-text " class="post-edit" placeholder="TITLE">
{{ title }}
<textarea id="post-title-text" type="text" name="post-title-text" class="post-edit" placeholder="TITLE">
{{- title -}}
</textarea>
<div id="layouts">
@ -143,7 +143,7 @@
<div id="post-meta" class="column">
<label>TAGS</label>
<textarea id="post-tags" type="text" name="post-tags" class="form-control" placeholder="tags [comma seperated]">
{{ tags }}
{{- tags -}}
</textarea>
<label>OPTIONS</label>
{% apply spaceless %}

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

@ -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,

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

@ -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 {