Gr1/husstanden
5
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Login scroll helper for mobile

Browse Source
This commit is contained in:
Emily 2019-05-22 10:51:00 +01:00
parent c29ec24bdd
commit d7eafec0a2
1 changed files with 26 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
templates/login.html
View File

@ -6,6 +6,7 @@
<style> <style>
html, body { html, body {
height: 100%; height: 100%;
scroll-behavior: smooth;
} }
.main-head{ .main-head{
@ -22,35 +23,44 @@ html, body {
display: grid; display: grid;
grid-template-rows: 25% 50% 25%; grid-template-rows: 25% 50% 25%;
height: 100%; height: 100%;
overflow: hidden;
} }
.sidenav > div:nth-child(1n) { .sidenav > div:nth-child(1n) {
grid-row-start: 1; grid-row-start: 1;
grid-row-end: 2;
} }
.sidenav > div:nth-child(2n) { .sidenav > div:nth-child(2n) {
grid-row-start: 3; grid-row-start: 2;
grid-row-end: 3; align-self: center;
}
.sidenav > div:nth-child(3n) {
grid-row-start: 3;
align-self: end; 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;
height: 100%; height: 100%;
} }
.main > .col:nth-child(1n) { #main > .col:nth-child(1n) {
grid-row-start: 1; grid-row-start: 1;
} }
.main > .col:nth-child(2n) { #main > .col:nth-child(2n) {
grid-row-start: 2; grid-row-start: 2;
} }
#focus-login {
text-decoration: none;
color: #fff;
}
@media screen and (max-height: 450px) { @media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;} .sidenav {padding-top: 15px;}
} }
@ -66,21 +76,24 @@ html, body {
} }
@media screen and (min-width: 768px){ @media screen and (min-width: 768px){
.main{ #main{
margin-left: 40%; margin-left: 40%;
} }
.sidenav{ .sidenav {
width: 40%; width: 40%;
position: fixed; position: fixed;
z-index: 1; z-index: 1;
top: 0; top: 0;
left: 0; left: 0;
} }
#focus-login {
display: none;
}
} }
.login-main-text{ .login-main-text{
margin-top: 20%;
padding: 60px; padding: 60px;
color: #fff; color: #fff;
} }
@ -157,6 +170,9 @@ 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="text-center mx-auto">
<a href="#main" class="display-1" id="focus-login">Login</a>
</div>
<div class="btn-group dropup m-2"> <div class="btn-group dropup m-2">
<div> <div>
<div class="btn btn-secondary col d-flex m-1" data-toggle="dropdown" aria-expanded="false"> <div class="btn btn-secondary col d-flex m-1" data-toggle="dropdown" aria-expanded="false">
@ -188,7 +204,7 @@ function toggleform(caller) {
</div> </div>
</div> </div>
</div> </div>
<div class="main"> <div id="main">
<div class="col pt-4"> <div class="col pt-4">
{% with messages = get_flashed_messages(with_categories = true) %} {% with messages = get_flashed_messages(with_categories = true) %}
{% if messages %} {% if messages %}