Revize 47c41706
Přidáno uživatelem Lukáš Moučka před téměř 4 roky(ů)
src/app/login/components/login.component.html | ||
---|---|---|
1 | 1 |
<div class="login"> |
2 | 2 |
<div class="container"> |
3 |
<div class="d-flex justify-content-center h-100">
|
|
3 |
<div class="login-form-wrapper">
|
|
4 | 4 |
<div class="card"> |
5 | 5 |
<div class="card-header"> |
6 | 6 |
<div> |
... | ... | |
26 | 26 |
<input type="password" formControlName="password" class="form-control" id="password" placeholder="Password"/> |
27 | 27 |
</div> |
28 | 28 |
<div class="form-group text-center mt-4"> |
29 |
<p-button id="loginButton" type="submit" label="Login"><i class="fas fa-sign-in-alt"></i></p-button>
|
|
29 |
<button pButton ttype="submit" label="Login" class="p-button-primary dark" id="loginButton"><i class="fas fa-sign-in-alt"></i></button>
|
|
30 | 30 |
</div> |
31 | 31 |
</form> |
32 | 32 |
</div> |
... | ... | |
34 | 34 |
</div> |
35 | 35 |
</div> |
36 | 36 |
</div> |
37 |
<div class="login-copyright"> |
|
38 |
<p>Copyright © 2021 <a href="https://www.senslog.org/" target="_blank">SensLog</a></p> |
|
39 |
</div> |
src/assets/scss/_dashboard.scss | ||
---|---|---|
42 | 42 |
} |
43 | 43 |
} |
44 | 44 |
|
45 |
hr { |
|
46 |
margin: 0; |
|
47 |
border: 1px solid #619CE2; |
|
48 |
} |
|
49 |
|
|
45 | 50 |
.p-accordion { |
46 | 51 |
.p-accordion-header { |
47 | 52 |
.p-accordion-header-link { |
... | ... | |
84 | 89 |
|
85 | 90 |
@include hover-focus() { |
86 | 91 |
cursor: pointer; |
87 |
color: #0B1226;
|
|
92 |
color: $white;
|
|
88 | 93 |
background: #619CE2; |
89 | 94 |
} |
90 | 95 |
} |
src/assets/scss/_login.scss | ||
---|---|---|
1 | 1 |
.login { |
2 |
height: 100%;
|
|
2 |
height: calc(100% - 45px);
|
|
3 | 3 |
color: $white; |
4 | 4 |
|
5 | 5 |
.container { |
... | ... | |
41 | 41 |
color: #F2F2F2; |
42 | 42 |
background: $terciary; |
43 | 43 |
} |
44 |
} |
|
44 | 45 |
|
45 |
.p-button { |
|
46 |
border-color: #F2F2F2; |
|
47 |
background: $terciary; |
|
48 |
|
|
49 |
@include hover-focus() { |
|
50 |
color: $terciary; |
|
51 |
border-color: #F2F2F2; |
|
52 |
background: #F2F2F2; |
|
53 |
} |
|
54 |
} |
|
46 |
.login-form-wrapper { |
|
47 |
display: flex; |
|
48 |
align-items: center; |
|
49 |
justify-content: center; |
|
50 |
height: 100%; |
|
55 | 51 |
} |
56 | 52 |
|
57 | 53 |
.login-logo { |
src/assets/scss/_navbar.scss | ||
---|---|---|
27 | 27 |
.container { |
28 | 28 |
padding: 0; |
29 | 29 |
height: 100%; |
30 |
|
|
31 |
@include media-breakpoint-down(md) { |
|
32 |
max-width: 100%; |
|
33 |
} |
|
30 | 34 |
} |
31 | 35 |
} |
32 | 36 |
|
... | ... | |
143 | 147 |
} |
144 | 148 |
|
145 | 149 |
.navbar-collapse { |
150 |
width: calc(100% + 20px); |
|
146 | 151 |
padding-bottom: 1px; |
147 | 152 |
justify-content: space-between; |
148 | 153 |
transition-duration: 0.2s; |
src/assets/scss/_popup-form.scss | ||
---|---|---|
1 | 1 |
.popup-form { |
2 |
&.confirm { |
|
3 |
.p-dialog .p-dialog-footer .p-button { |
|
4 |
@extend .p-button-primary; |
|
5 |
@extend .dark; |
|
6 |
@include media-breakpoint-down(sm) { |
|
7 |
margin: 5px 10px; |
|
8 |
} |
|
9 |
} |
|
10 |
} |
|
2 | 11 |
|
3 | 12 |
h3 { |
4 | 13 |
margin-top: $grid-gutter-width / 2; |
... | ... | |
11 | 20 |
} |
12 | 21 |
|
13 | 22 |
.p-dialog { |
23 |
width: 100vw; |
|
24 |
|
|
25 |
@include media-breakpoint-up(md) { |
|
26 |
width: 50vw; |
|
27 |
} |
|
28 |
|
|
14 | 29 |
.p-dialog-header, .p-dialog-content, .p-dialog-footer { |
15 | 30 |
background: $primary; |
16 | 31 |
} |
... | ... | |
23 | 38 |
.p-dialog-title { |
24 | 39 |
color: #F2F2F2; |
25 | 40 |
font-size: 28px; |
41 |
|
|
42 |
@include media-breakpoint-down(xs) { |
|
43 |
font-size: 24px; |
|
44 |
} |
|
26 | 45 |
} |
27 | 46 |
|
28 | 47 |
.p-dialog-footer { |
29 | 48 |
border-color: #F2F2F2; |
49 |
text-align: center; |
|
50 |
|
|
51 |
@include media-breakpoint-down(xs) { |
|
52 |
.p-button { |
|
53 |
margin: 5px 0; |
|
54 |
} |
|
55 |
} |
|
30 | 56 |
} |
31 | 57 |
} |
32 | 58 |
|
... | ... | |
41 | 67 |
border-color: $terciary; |
42 | 68 |
color: #F2F2F2; |
43 | 69 |
background: $terciary; |
44 |
} |
|
45 |
|
|
46 |
.p-button { |
|
47 |
border-color: #F2F2F2; |
|
48 |
background: $terciary; |
|
49 | 70 |
|
50 |
@include hover-focus() { |
|
51 |
color: $terciary; |
|
52 |
border-color: #F2F2F2; |
|
53 |
background: #F2F2F2; |
|
71 |
@include media-breakpoint-down(xs) { |
|
72 |
padding-left: 10px; |
|
73 |
padding-right: 10px; |
|
54 | 74 |
} |
55 | 75 |
} |
76 |
} |
|
56 | 77 |
|
57 |
.popup-sensors-wrapper { |
|
58 |
justify-content: center; |
|
59 |
} |
|
78 |
.popup-sensors-wrapper { |
|
79 |
justify-content: center; |
|
80 |
} |
|
81 |
|
|
82 |
.popup-sensor { |
|
83 |
margin: 0 10px; |
|
84 |
} |
|
85 |
|
|
86 |
.popup-buttons-wrapper { |
|
87 |
display: flex; |
|
88 |
justify-content: space-between; |
|
60 | 89 |
|
61 |
.popup-sensor {
|
|
62 |
margin: 0 10px;
|
|
90 |
@include media-breakpoint-down(sm) {
|
|
91 |
flex-direction: column;
|
|
63 | 92 |
} |
64 | 93 |
|
65 |
.popup-buttons-wrapper { |
|
94 |
} |
|
95 |
|
|
96 |
.popup-buttons-group { |
|
97 |
@include media-breakpoint-down(md) { |
|
66 | 98 |
display: flex; |
67 | 99 |
justify-content: space-between; |
100 |
width: 100%; |
|
101 |
|
|
102 |
&:first-child { |
|
103 |
margin-bottom: 10px; |
|
104 |
} |
|
105 |
} |
|
106 |
} |
|
107 |
|
|
108 |
.popup-buttons { |
|
109 |
display: flex; |
|
110 |
justify-content: flex-end; |
|
111 |
flex-wrap: wrap; |
|
112 |
width: 100%; |
|
113 |
|
|
114 |
@include media-breakpoint-down(xs) { |
|
115 |
justify-content: space-between; |
|
68 | 116 |
} |
69 | 117 |
} |
src/assets/scss/_themes.scss | ||
---|---|---|
4 | 4 |
background: $white; |
5 | 5 |
} |
6 | 6 |
|
7 |
.p-button { |
|
7 |
.p-button-primary {
|
|
8 | 8 |
padding-right: $grid-gutter-width; |
9 | 9 |
padding-left: $grid-gutter-width; |
10 | 10 |
color: #F2F2F2; |
... | ... | |
17 | 17 |
border-color: #2067BC; |
18 | 18 |
background: #2067BC; |
19 | 19 |
} |
20 |
|
|
21 |
@include media-breakpoint-down(xs) { |
|
22 |
padding-right: $grid-gutter-width / 2; |
|
23 |
padding-left: $grid-gutter-width / 2; |
|
24 |
} |
|
20 | 25 |
} |
21 | 26 |
|
22 | 27 |
i { |
23 | 28 |
margin-right: 5px; |
24 | 29 |
} |
30 |
|
|
31 |
&.dark { |
|
32 |
border-color: #F2F2F2; |
|
33 |
background: $terciary; |
|
34 |
|
|
35 |
&:enabled { |
|
36 |
@include hover-focus() { |
|
37 |
color: $terciary; |
|
38 |
border-color: #F2F2F2; |
|
39 |
background: #F2F2F2; |
|
40 |
} |
|
41 |
} |
|
42 |
} |
|
43 |
} |
|
44 |
|
|
45 |
footer { |
|
46 |
padding: 10px 0; |
|
47 |
border-top: 1px solid $primary; |
|
48 |
text-align: center; |
|
49 |
background: #F2F2F2; |
|
50 |
|
|
51 |
p { |
|
52 |
margin: 0; |
|
53 |
} |
|
54 |
|
|
55 |
a { |
|
56 |
color: $primary; |
|
57 |
|
|
58 |
@include hover-focus() { |
|
59 |
color: $primary; |
|
60 |
} |
|
61 |
} |
|
25 | 62 |
} |
src/index.html | ||
---|---|---|
13 | 13 |
<app-root></app-root> |
14 | 14 |
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script> |
15 | 15 |
</body> |
16 |
<footer><p>Copyright © 2021 <a href="https://www.senslog.org/" target="_blank">SensLog</a></p></footer> |
|
16 | 17 |
</html> |
Také k dispozici: Unified diff
+ Add styles for responsive