nik/FreedomBox
1
0
Fork 0
mirror of https://github.com/freedombox/FreedomBox.git synced 2026-05-20 10:34:30 +00:00
Code Issues Packages Projects Releases Wiki Activity

app: cosmetic: Minor refactoring of header styling

Browse Source 
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
plinth/templates/header.html
View File

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

55
static/themes/default/css/plinth.css
View File

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