nodebb-theme-persona 13.2.11 → 13.2.13

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/package.json +1 -1
  2. package/scss/persona.scss +0 -1
  3. package/templates/footer.tpl +1 -4
  4. package/templates/partials/toast.tpl +16 -11
  5. package/scss/modules/alerts.scss +0 -127
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "nodebb-theme-persona",
3
- "version": "13.2.11",
3
+ "version": "13.2.13",
4
4
  "nbbpm": {
5
5
  "compatibility": "^3.3.0"
6
6
  },
package/scss/persona.scss CHANGED
@@ -26,7 +26,6 @@
26
26
  @import "modules/nprogress";
27
27
  @import "modules/usercard";
28
28
  @import "modules/taskbar";
29
- @import "modules/alerts";
30
29
  @import "modules/fab";
31
30
  @import "modules/morph";
32
31
  @import "modules/cookie-consent";
package/templates/footer.tpl CHANGED
@@ -2,10 +2,7 @@
2
2
  </main>
3
3
  {{{ if !isSpider }}}
4
4
  <div component="toaster/tray" class="alert-window">
5
- <div id="reconnect-alert" class="alert alert-dismissible alert-warning clearfix hide" component="toaster/toast">
6
- <button type="button" class="btn-close float-end" data-bs-dismiss="alert" aria-hidden="true"></button>
7
- <p>[[global:reconnecting-message, {config.siteTitle}]]</p>
8
- </div>
5
+ <!-- IMPORT partials/reconnect-alert.tpl -->
9
6
  </div>
10
7
  {{{ end }}}
11
8
  <!-- IMPORT modules/taskbar.tpl -->
package/templates/partials/toast.tpl CHANGED
@@ -1,14 +1,19 @@
1
- <div id="{alert_id}" role="alert" class="alert alert-dismissible alert-{type}" component="toaster/toast">
2
- <button type="button" class="btn-close float-end" data-bs-dismiss="alert" aria-label="close"></button>
3
- <!-- IF image -->
4
- <img src="{image}">
5
- <!-- ENDIF image -->
1
+ <div id="{alert_id}" role="alert" class="alert alert-dismissible alert-{type} fade show" component="toaster/toast">
2
+ <div class="alert-progress position-absolute top-0 start-0 bottom-0 h-100 z-0" style=" opacity:0.1;"></div>
3
+ <div class="d-flex flex-wrap gap-2 position-relative">
4
+ {{{ if image }}}
5
+ <img src="{image}" height="80" style="width: auto;" />
6
+ {{{ end }}}
7
+ <div class="d-flex flex-column gap-2">
8
+ {{{ if title }}}
9
+ <strong>{title}</strong>
10
+ {{{ end }}}
6
11
 
7
- <!-- IF title -->
8
- <strong>{title}</strong>
9
- <!-- ENDIF title -->
12
+ {{{ if message }}}
13
+ <p class="m-0">{message}</p>
14
+ {{{ end }}}
15
+ </div>
16
+ </div>
10
17
 
11
- <!-- IF message -->
12
- <p>{message}</p>
13
- <!-- ENDIF message -->
18
+ <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="close"></button>
14
19
  </div>
package/scss/modules/alerts.scss DELETED
@@ -1,127 +0,0 @@
1
- .alert-window {
2
- position: fixed;
3
- width: 300px;
4
- z-index: 10002;
5
-
6
- right: 20px;
7
- bottom: 0px;
8
-
9
- .alert {
10
- overflow: hidden;
11
- position: relative;
12
-
13
- &::before {
14
- transition: inherit;
15
- content: ' ';
16
- display: block;
17
- position: absolute;
18
- z-index: 0;
19
-
20
- opacity: 0.1;
21
- top: 0;
22
- left: 0;
23
- bottom: 0;
24
- width: 0;
25
- height: 100%;
26
- }
27
-
28
- &.alert-info {
29
- .btn-close {
30
- $btn-close-color: $info;
31
- background-image: escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$btn-close-color}'><path d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/></svg>"));
32
- }
33
-
34
- &::before {
35
- background-color: $info;
36
- }
37
- }
38
-
39
- &.alert-warning {
40
- .btn-close {
41
- $btn-close-color: $warning;
42
- background-image: escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$btn-close-color}'><path d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/></svg>"));
43
- }
44
-
45
- ::before {
46
- background-color: $warning;
47
- }
48
- }
49
-
50
- &.alert-success {
51
- .btn-close {
52
- $btn-close-color: $success;
53
- background-image: escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$btn-close-color}'><path d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/></svg>"));
54
- }
55
-
56
- ::before {
57
- background-color: $success;
58
- }
59
- }
60
-
61
- &.alert-danger {
62
- .btn-close {
63
- $btn-close-color: $danger;
64
- background-image: escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$btn-close-color}'><path d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/></svg>"));
65
- }
66
-
67
- ::before {
68
- background-color: $danger;
69
- }
70
- }
71
-
72
- &.animate {
73
- &.alert-info::before {
74
- background-color: lighten($info, 25%);
75
- }
76
-
77
- &.alert-warning::before {
78
- background-color: lighten($warning, 25%);
79
- }
80
-
81
- &.alert-success::before {
82
- background-color: lighten($success, 25%);
83
- }
84
-
85
- &.alert-danger::before {
86
- background-color: lighten($danger, 25%);
87
- }
88
-
89
- &::before {
90
- width: calc(100% + 50px);
91
- }
92
- }
93
-
94
- background-color: white;
95
- border: 0;
96
- border-left: 5px solid !important;
97
- box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.25), 0px 2px 10px 0px rgba(0, 0, 0, 0.25);
98
-
99
- strong {
100
- text-transform: uppercase;
101
- }
102
-
103
- p {
104
- padding: 10px 0px 0px;
105
- }
106
-
107
- &.alert-info {
108
- color: $info;
109
- border-color: $info;
110
- }
111
-
112
- &.alert-warning {
113
- color: $warning;
114
- border-color: $warning;
115
- }
116
-
117
- &.alert-success {
118
- color: $success;
119
- border-color: $success;
120
- }
121
-
122
- &.alert-danger {
123
- color: $danger;
124
- border-color: $danger;
125
- }
126
- }
127
- }