app: cosmetic: Minor refactoring of header styling

Reviewed-by: James Valleroy <jvalleroy@mailbox.org>
This commit is contained in:
Sunil Mohan Adapa 2020-02-18 12:04:24 -08:00 committed by James Valleroy
parent ddc90ff511
commit 62cf6a11e0
No known key found for this signature in database
GPG Key ID: 77C0C75E7B650808
2 changed files with 38 additions and 29 deletions

View File

@ -24,11 +24,13 @@
{% endif %}
{% endblock %}
<div id='app-toggle-container' class="app-toggle-container">
{% if is_enabled %}
<button id="app-toggle-button" value="False" class="btn toggle-button toggle-button--toggled"></button>
{% else %}
<button id="app-toggle-button" value="True" class="btn toggle-button"></button>
{% endif %}
{% if is_enabled %}
<button id="app-toggle-button" value="False"
class="btn toggle-button toggle-button--toggled"></button>
{% else %}
<button id="app-toggle-button" value="True"
class="btn toggle-button"></button>
{% endif %}
</div>
</section>

View File

@ -487,12 +487,6 @@ a.menu_link_active {
width: 50%;
}
.app-toggle-container {
display: none;
flex-flow: row;
justify-content: flex-end;
}
/*
* Toggle button
*/
@ -526,17 +520,9 @@ a.menu_link_active {
transform: translateY(-50%) translateX(-100%)
}
.header-bar {
display: flex;
flex-flow: row;
justify-content: space-between;
height: 70px;
}
.header-bar .app-toggle-container, .header-bar h2 {
margin: auto 0;
}
/*
* Button toolbar
*/
.btn-toolbar {
margin-top: 10px;
margin-bottom: 10px;
@ -546,6 +532,9 @@ a.menu_link_active {
float: right;
}
/*
* App's header
*/
.app-header {
display: grid;
grid-template-columns: 0.2fr 1fr;
@ -569,13 +558,22 @@ a.menu_link_active {
grid-column: 1;
}
/* Help manual - anchor is below navbar */
*[id^='idm']:before {
display: block;
content: " ";
margin-top: -60px;
height: 60px;
visibility: hidden;
.header-bar {
display: flex;
flex-flow: row;
justify-content: space-between;
height: 70px;
}
.header-bar .app-toggle-container,
.header-bar h2 {
margin: auto 0;
}
.app-toggle-container {
display: none;
flex-flow: row;
justify-content: flex-end;
}
@media screen and (max-width: 767px) {
@ -613,6 +611,15 @@ a.menu_link_active {
}
}
/* Help manual - anchor is below navbar */
*[id^='idm']:before {
display: block;
content: " ";
margin-top: -60px;
height: 60px;
visibility: hidden;
}
/*
* Notifications
*/