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

ui overall part 4: responsive touch up

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

22
brain/views/dash/_frame.twig
View file

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

2
brain/views/dash/settings.twig
View file

@ -11,7 +11,7 @@
{% endblock %} {% endblock %}
{% block stylesheets %} {% 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 %} {% endblock %}
{% block mainContent %} {% block mainContent %}

2
brain/views/dash/start.twig
View file

@ -5,7 +5,7 @@
{% endblock %} {% endblock %}
{% block stylesheets %} {% 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 %} {% endblock %}
{% block mainContent %} {% block mainContent %}

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

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

2
src/styles/main/_navigation.sass
View file

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

9
src/styles/main/_posts.sass
View file

@ -2,11 +2,9 @@
width: 100% width: 100%
max-width: 900px max-width: 900px
margin: 0 auto margin: 0 auto
#post-index-wrapper #post-index-wrapper
//padding: 0.75rem //padding: 0.75rem
overflow: hidden overflow: hidden
#post-index-header #post-index-header
margin: 10px 0 0 0 margin: 10px 0 0 0
#post-index-header-left #post-index-header-left
@ -343,6 +341,13 @@
@media only screen and (max-width: 480px) @media only screen and (max-width: 480px)
#post-index #post-index
#post-index-wrapper #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 #post-index-menu
a a
font-size: 0.95em font-size: 0.95em

13
src/styles/main/_settings.sass
View file

@ -6,7 +6,7 @@
margin-left: -20% margin-left: -20%
#buttons #buttons
width: 155px width: 155px
margin: 30px auto margin: 28px auto
text-align: center text-align: center
background: $white background: $white
padding: 2px padding: 2px
@ -189,3 +189,14 @@
div[data-enabled='false'] div[data-enabled='false']
display: none 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

5
src/styles/main/_structure.sass
View file

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