ui overall part 4: responsive touch up

This commit is contained in:
Ro 2021-05-25 11:04:30 -07:00
parent 0765ea4555
commit 20fc9c64a1
8 changed files with 67 additions and 19 deletions

View file

@ -29,16 +29,18 @@
{% if status %}
<header id="header">
<div id="wrapper">
<div id="left">
<a href="/dashboard"><img id="the-logo" src="/assets/images/global/the-logo.svg"/></a>
</div>
<div id="right">
{% if status %}
{% apply spaceless %}
{{ include("dash/partials/navigation.twig") }}
{% endapply %}
{% endif %}
</div>
{% apply spaceless %}
<div id="left">
<a href="/dashboard"><img id="the-logo" src="/assets/images/global/the-logo.svg"/></a>
</div>
<div id="right">
{% if status %}
{% apply spaceless %}
{{ include("dash/partials/navigation.twig") }}
{% endapply %}
{% endif %}
</div>
{% endapply %}
</div>
</header>

View file

@ -11,7 +11,7 @@
{% endblock %}
{% block stylesheets %}
<link rel="stylesheet" type="text/css" href="/assets/css/dash.css?=asdfdf">
<link rel="stylesheet" type="text/css" href="/assets/css/dash.css?=dfdvcvb">
{% endblock %}
{% block mainContent %}

View file

@ -5,7 +5,7 @@
{% endblock %}
{% block stylesheets %}
<link rel="stylesheet" type="text/css" href="/assets/css/dash.css?=dfddfdfdfd">
<link rel="stylesheet" type="text/css" href="/assets/css/dash.css?=adsfdfdf">
{% endblock %}
{% block mainContent %}

View file

@ -2087,6 +2087,11 @@ svg.icons {
color: #EFEBE3;
}
@media only screen and (max-width: 901px) {
.main-container {
padding: 10px;
}
}
@media only screen and (max-width: 800px) {
.main-container section header #wrapper #left, .main-container section header #wrapper #right {
display: inline-block;
@ -2390,7 +2395,7 @@ svg.icons {
}
#settings-actions #buttons {
width: 155px;
margin: 30px auto;
margin: 28px auto;
text-align: center;
background: #EFEBE3;
padding: 2px;
@ -2581,6 +2586,18 @@ svg.icons {
visibility: hidden;
}
@media only screen and (max-width: 480px) {
#settings-actions {
margin-left: -42%;
}
#settings-actions #buttons {
width: 150px;
background: none;
}
#settings-actions #buttons button {
margin: 0 5px 0 5px;
}
}
#error-index {
width: 100%;
max-width: 900px;
@ -2658,7 +2675,7 @@ svg.icons {
font-size: 1em;
}
#nav-index #nav-index-wrapper #nav-pages .nav-item label {
width: 47%;
width: 40%;
vertical-align: top;
margin-top: 0px;
line-height: 1em;
@ -3106,6 +3123,14 @@ select {
}
}
@media only screen and (max-width: 480px) {
#post-index #post-index-wrapper #post-index-header #post-index-header-left {
font-size: 1.35em;
width: 30%;
}
#post-index #post-index-wrapper #post-index-header #post-index-header-right {
width: 70%;
vertical-align: top;
}
#post-index #post-index-wrapper #post-index-menu a {
font-size: 0.95em;
}

View file

@ -51,7 +51,7 @@
font-size: 1em
label
width: 47%
width: 40%
vertical-align: top
margin-top: 0px
line-height: 1em

View file

@ -2,11 +2,9 @@
width: 100%
max-width: 900px
margin: 0 auto
#post-index-wrapper
//padding: 0.75rem
overflow: hidden
#post-index-header
margin: 10px 0 0 0
#post-index-header-left
@ -343,6 +341,13 @@
@media only screen and (max-width: 480px)
#post-index
#post-index-wrapper
#post-index-header
#post-index-header-left
font-size: 1.35em
width: 30%
#post-index-header-right
width: 70%
vertical-align: top
#post-index-menu
a
font-size: 0.95em

View file

@ -6,7 +6,7 @@
margin-left: -20%
#buttons
width: 155px
margin: 30px auto
margin: 28px auto
text-align: center
background: $white
padding: 2px
@ -188,4 +188,15 @@
div[data-enabled='false']
display: none
visibility: hidden
visibility: hidden
// responsive
@media only screen and (max-width: 480px)
#settings-actions
margin-left: -42%
#buttons
width: 150px
background: none
button
margin: 0 5px 0 5px

View file

@ -160,7 +160,12 @@ svg.icons
background-color: $highlight
color: $white
//Responsive
@media only screen and (max-width: 901px)
.main-container
padding: 10px
@media only screen and (max-width: 800px)
.main-container
section