Mercurial > gemma

comparison client/src/views/Login.vue @ 24:10ebbf197523

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Rework layout of login page Modernize layout Place logo below login button Add shadows
author Thomas Junk <thomas.junk@intevation.de>
date Thu, 21 Jun 2018 17:30:26 +0200
parents d53de4169d11
children a728610b3812
comparison
equal deleted inserted replaced
23:c1ef0be0ae3d 24:10ebbf197523
1 <template> 1 <template>
2 <div class="login border border-dark rounded bg-white"> 2 <div class="login 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>
24 <input type="password" v-model="password" id="inputPassword" class="form-control" :placeholder="passwordLabel" required> 24 <input type="password" v-model="password" id="inputPassword" class="form-control" :placeholder="passwordLabel" required>
25 <div class="input-group-append"> 25 <div class="input-group-append">
26 <span class="input-group-text" id="basic-addon2"><i class="fa fa-eye"></i></span> 26 <span class="input-group-text" id="basic-addon2"><i class="fa fa-eye"></i></span>
27 </div> 27 </div>
28 </div> 28 </div>
29 <button class="btn btn-lg btn-success btn-block" :disabled="submitted" type="submit">{{ loginButtonLabel }}</button> 29 <button class="btn btn-lg btn-primary btn-block" :disabled="submitted" type="submit">{{ loginButtonLabel }}</button>
30 <div class="forgottenlink"><a href="#">{{ passPhraseForgotten }}</a></div> 30 <div class="forgottenlink"><a href="#">{{ passPhraseForgotten }}</a></div>
31 <div class="secondary-logo"><img :src="secondaryLogo"></div>
31 </form> 32 </form>
32 <div class="secondary-logo"><img :src="secondaryLogo"></div>
33 </div> 33 </div>
34 </div> 34 </div>
35 </template> 35 </template>
36 36
37 <style lang="scss"> 37 <style lang="scss">
47 } 47 }
48 .input-group-text { 48 .input-group-text {
49 background-color: white !important; 49 background-color: white !important;
50 } 50 }
51 .login { 51 .login {
52 margin-left: auto; 52 height: 480px;
53 margin-right: auto; 53 width: 375px;
54 margin-top: 200px; 54 @extend %fully-centered;
55 width: 600px; 55 padding-top: $offset;
56 padding-bottom: $offset;
57 box-shadow: $basic-shadow;
56 } 58 }
57 .loginerror { 59 .loginerror {
58 white-space: pre; 60 white-space: pre;
59 } 61 }
60 .loginform { 62 .loginform {
61 width: 300px; 63 width: 300px;
62 } 64 }
63 .logo { 65 .logo {
64 position: relative;
65 left: -85px;
66 margin-top: $offset; 66 margin-top: $offset;
67 margin-bottom: $offset; 67 margin-bottom: $offset;
68 } 68 }
69 .mail-icon { 69 .mail-icon {
70 width: $iconwidth; 70 width: $iconwidth;
73 position: relative; 73 position: relative;
74 top: 10px; 74 top: 10px;
75 font-size: $iconsize; 75 font-size: $iconsize;
76 line-height: $iconLineHeight; 76 line-height: $iconLineHeight;
77 width: $iconwidth; 77 width: $iconwidth;
78 }
79 .secondary-logo {
80 position: relative;
81 top: -$offset;
82 margin-left: $offset;
83 } 78 }
84 .title { 79 .title {
85 margin-left: $offset; 80 margin-left: $offset;
86 } 81 }
87 </style> 82 </style>