Change language on login

This commit is contained in:
Emily 2019-05-12 19:36:06 +01:00
parent ea7e9a45ac
commit 66e35cf83c
3 changed files with 77 additions and 2 deletions

View File

@ -3,7 +3,7 @@
<head> <head>
{% include 'layout/includes/boot-head.html' %} {% include 'layout/includes/boot-head.html' %}
{% if title %} {% if title %}
<title>Husstanden - {{ title }}</title> <title>Husstanden - {{ _(title) }}</title>
{% else %} {% else %}
<title>Husstanden</title> <title>Husstanden</title>
{% endif %} {% endif %}

View File

@ -72,6 +72,8 @@
<span>{{ _("english") | title }}</span> <span>{{ _("english") | title }}</span>
<div class="flex-grow-1"></div> <div class="flex-grow-1"></div>
</a> </a>
</div>
<div class="row">
<a class="col d-flex m-1" href="?lang=no"> <a class="col d-flex m-1" href="?lang=no">
<div class="lang-icon lang-no"></div> <div class="lang-icon lang-no"></div>
<div class="flex-grow-1"></div> <div class="flex-grow-1"></div>

View File

@ -18,14 +18,28 @@ html, body {
background-color: #000; background-color: #000;
overflow-x: hidden; overflow-x: hidden;
padding-top: 20px; padding-top: 20px;
display: grid;
grid-template-rows: 25% 50% 25%;
height: 100%;
} }
.sidenav > div:nth-child(1n) {
grid-row-start: 1;
grid-row-end: 2;
}
.sidenav > div:nth-child(2n) {
grid-row-start: 3;
grid-row-end: 3;
align-self: end;
}
.main { .main {
padding: 0px 10px; padding: 0px 10px;
display: grid; display: grid;
grid-template-rows: 25% auto; grid-template-rows: 25% auto;
grid-row-gap: 8px;
height: 100%; height: 100%;
} }
@ -94,6 +108,35 @@ html, body {
.toggle-form.toggled > form:nth-child(2n) { .toggle-form.toggled > form:nth-child(2n) {
display: block; display: block;
} }
.lang-icon {
background-position: left;
background-size: contain;
width: 32px;
height: 24px;
color: white;
text-align: center;
font-size: 24px;
vertical-align: middle;
display: table-cell;
}
.lang-en {
background-image: url("{{ url_for('static', filename='const/img/flags/gb.svg') }}");
}
.lang-no {
background-image: url("{{ url_for('static', filename='const/img/flags/no.svg') }}");
}
.dropdown-menu {
background-color: #6c757d;
}
.dropdown-menu a {
color: white;
}
</style> </style>
<script> <script>
function toggleform(caller) { function toggleform(caller) {
@ -114,6 +157,36 @@ function toggleform(caller) {
<h2>Husstanden<br>Login Page</h2> <h2>Husstanden<br>Login Page</h2>
<p>Login is required to use this service.</p> <p>Login is required to use this service.</p>
</div> </div>
<div class="btn-group dropup m-2">
<div>
<div class="btn btn-secondary col d-flex m-1" data-toggle="dropdown" aria-expanded="false">
<div class="lang-icon lang-{{ session.lang }}"></div>
<div class="flex-grow-1"></div>
<span>{{ _("Language") }}</span>
<div class="flex-grow-1"></div>
</div>
<ul class="dropdown-menu">
<li>
<div class="row">
<a class="col d-flex m-1" href="?lang=en">
<div class="lang-icon lang-en"></div>
<div class="flex-grow-1"></div>
<span>{{ _("english") | title }}</span>
<div class="flex-grow-1"></div>
</a>
</div>
<div class="row">
<a class="col d-flex m-1" href="?lang=no">
<div class="lang-icon lang-no"></div>
<div class="flex-grow-1"></div>
<span>{{ _("norwegian") | title }}</span>
<div class="flex-grow-1"></div>
</a>
</div>
</li>
</ul>
</div>
</div>
</div> </div>
<div class="main"> <div class="main">
<div class="col pt-4"> <div class="col pt-4">