Projekt

Obecné

Profil

« Předchozí | Další » 

Revize 47c41706

Přidáno uživatelem Lukáš Moučka před téměř 4 roky(ů)

Re #8970 - Kódování responzivity Popup formulářů
+ Add styles for responsive
  • Modify HTML DOM

Zobrazit rozdíly:

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&nbsp;&copy;&nbsp;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&nbsp;&copy;&nbsp;2021 <a href="https://www.senslog.org/" target="_blank">SensLog</a></p></footer>
16 17
</html>

Také k dispozici: Unified diff