Mercurial > gemma

comparison client/src/views/Login.vue @ 17:7d242100af46

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Adjusted the look and feel of the login page according to ISC We have now a light gray background. The login is in a white rounded box with black border.
author Thomas Junk <thomas.junk@intevation.de>
date Thu, 21 Jun 2018 11:19:02 +0200
parents 88d0d60924cf
children c7fe6244528c
comparison
equal deleted inserted replaced
15:05d828374256 17:7d242100af46
1 <template> 1 <template>
2 <div class="login"> 2 <div class="login border border-dark rounded bg-white">
3 <div> 3 <div>
4 <div class="logo d-flex flex-row justify-content-center"> 4 <div class="logo d-flex flex-row justify-content-center">
5 <div><img src="../assets/logo.png"></div> 5 <div><img src="../assets/logo.png"></div>
6 <div class="title"><h1>{{ appTitle }}</h1></div> 6 <div class="title"><h1>{{ appTitle }}</h1></div>
7 </div> 7 </div>
8 </div> 8 </div>
9 <div class="login-wrapper border border-light d-flex flex-row justify-content-center"> 9 <div class="login-wrapper d-flex flex-row justify-content-center">
10 <form class="loginform form-signin" @submit.prevent="login"> 10 <form class="loginform form-signin" @submit.prevent="login">
11 <div v-if="loginFailed" class="alert alert-danger" role="alert"> 11 <div v-if="loginFailed" class="alert alert-danger" role="alert">
12 <span class="loginerror">{{ loginAttemptFailed }}</span> 12 <span class="loginerror">{{ loginAttemptFailed }}</span>
13 </div> 13 </div>
14 <div class="input-group mb-3"> 14 <div class="input-group mb-3">
34 </div> 34 </div>
35 </template> 35 </template>
36 36
37 <style lang="scss"> 37 <style lang="scss">
38 $offset: 20px; 38 $offset: 20px;
39 $small-offset: 10px;
39 $iconsize: 3em; 40 $iconsize: 3em;
40 $iconLineHeight: 0.25em; 41 $iconLineHeight: 0.25em;
41 $iconwidth: 20px; 42 $iconwidth: 20px;
42 43
43 .forgottenlink { 44 .forgottenlink {
44 text-align: right; 45 text-align: right;
46 margin-top: $small-offset;
47 margin-bottom: $offset;
45 } 48 }
46 #inputPassword { 49 #inputPassword {
47 border-right: none; 50 border-right: none;
48 } 51 }
49 .input-group-text { 52 .input-group-text {
50 background-color: white !important; 53 background-color: white !important;
51 } 54 }
52 .login { 55 .login {
56 margin-left: auto;
57 margin-right: auto;
53 margin-top: 200px; 58 margin-top: 200px;
59 width: 600px;
54 } 60 }
55 .loginerror { 61 .loginerror {
56 white-space: pre; 62 white-space: pre;
57 } 63 }
58 .loginform { 64 .loginform {
59 width: 300px; 65 width: 300px;
60 } 66 }
61 .logo { 67 .logo {
62 position: relative; 68 position: relative;
63 left: -85px; 69 left: -85px;
70 margin-top: $offset;
64 margin-bottom: $offset; 71 margin-bottom: $offset;
65 } 72 }
66 .mail-icon { 73 .mail-icon {
67 line-height: $iconLineHeight; 74 line-height: $iconLineHeight;
68 font-size: $iconsize; 75 font-size: $iconsize;