Skip to content

Commit 255cec5

Browse files
bug fixes
1 parent 7889d7b commit 255cec5

File tree

5 files changed

+91
-127
lines changed

5 files changed

+91
-127
lines changed

.gitignore

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@
88

99
# dependencies
1010
/node_modules
11-
package-lock.json
1211

1312
# IDEs and editors
1413
/.idea

package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@
2727
"compass-mixins": "^0.12.10",
2828
"jquery": "^3.4.1",
2929
"ng2-charts": "^2.3.0",
30+
"node-sass": "^4.13.1",
3031
"rxjs": "~6.4.0",
3132
"tslib": "^1.9.0",
3233
"zone.js": "~0.9.1"

src/app/basic-ui/notifications/notifications.component.html

Lines changed: 87 additions & 124 deletions
Original file line numberDiff line numberDiff line change
@@ -10,142 +10,105 @@ <h3 class="page-title">
1010
</nav>
1111
</div>
1212
<div class="row">
13-
<div class="col-12 grid-margin">
14-
<div class="card">
15-
<div class="card-body">
16-
<h4 class="card-title">ng2-toastr styles</h4>
17-
<p class="card-description mb-0">
18-
Click on the below buttons for notifications in different styles.
19-
</p>
20-
<div class="template-demo d-flex justify-content-between flex-wrap">
21-
<button type="button" class="btn btn-success btn-fw" (click)="showSuccessToast()">Success</button>
22-
<button type="button" class="btn btn-info btn-fw" (click)="showInfoToast()">Info</button>
23-
<button type="button" class="btn btn-warning btn-fw" (click)="showWarningToast()">Warning</button>
24-
<button type="button" class="btn btn-danger btn-fw" (click)="showDangerToast()">Danger</button>
25-
</div>
13+
<div class="col-md-6 grid-margin stretch-card">
14+
<div class="card">
15+
<div class="card-body">
16+
<h4 class="card-title">Bootstrap alert</h4>
17+
<p class="card-description">Add class <code>.alert .alert-*</code></p>
18+
<div class="alert alert-success" role="alert">
19+
You successfully read this important alert message.
2620
</div>
27-
</div>
28-
</div>
29-
<div class="col-12 grid-margin">
30-
<div class="card">
31-
<div class="card-body">
32-
<h4 class="card-title">ng2-toastr positions</h4>
33-
<p class="card-description">
34-
The <code>positionClass</code> property can be used to specify the predefined positions
35-
of toasts
36-
</p>
37-
<div class="template-demo d-flex justify-content-between flex-wrap">
38-
<button type="button" class="btn btn-outline-primary btn-sm" (click)="showToastPosition('bottom-left')">Bottom-left</button>
39-
<button type="button" class="btn btn-outline-primary btn-sm" (click)="showToastPosition('bottom-right')">Bottom-right</button>
40-
<button type="button" class="btn btn-outline-primary btn-sm" (click)="showToastPosition('bottom-center')">Bottom-center</button>
41-
<button type="button" class="btn btn-outline-primary btn-sm" (click)="showToastPosition('bottom-full-width')">Bottom-full-width</button>
42-
<button type="button" class="btn btn-outline-primary btn-sm" (click)="showToastPosition('top-left')">Top-left</button>
43-
<button type="button" class="btn btn-outline-primary btn-sm" (click)="showToastPosition('top-right')">Top-right</button>
44-
<button type="button" class="btn btn-outline-primary btn-sm" (click)="showToastPosition('top-center')">Top-center</button>
45-
<button type="button" class="btn btn-outline-primary btn-sm" (click)="showToastPosition('top-full-width')">Top-full-width</button>
46-
</div>
21+
<div class="alert alert-info" role="alert">
22+
This alert needs your attention, but it's not that important.
4723
</div>
48-
</div>
49-
</div>
50-
<div class="col-md-6 grid-margin stretch-card">
51-
<div class="card">
52-
<div class="card-body">
53-
<h4 class="card-title">Bootstrap alert</h4>
54-
<p class="card-description">Add class <code>.alert .alert-*</code></p>
55-
<div class="alert alert-success" role="alert">
56-
You successfully read this important alert message.
57-
</div>
58-
<div class="alert alert-info" role="alert">
59-
This alert needs your attention, but it's not that important.
60-
</div>
61-
<div class="alert alert-warning" role="alert">
62-
Better check yourself, you're not looking too good.
63-
</div>
64-
<div class="alert alert-danger" role="alert">
65-
Change a few things up and try submitting again.
66-
</div>
67-
<div class="alert alert-primary" role="alert">
68-
This is a primary alert
69-
</div>
70-
<div class="alert alert-secondary" role="alert">
71-
This alert is not so important.
72-
</div>
24+
<div class="alert alert-warning" role="alert">
25+
Better check yourself, you're not looking too good.
26+
</div>
27+
<div class="alert alert-danger" role="alert">
28+
Change a few things up and try submitting again.
29+
</div>
30+
<div class="alert alert-primary" role="alert">
31+
This is a primary alert
7332
</div>
33+
<div class="alert alert-secondary" role="alert">
34+
This alert is not so important.
35+
</div>
7436
</div>
7537
</div>
76-
<div class="col-md-6 grid-margin stretch-card">
77-
<div class="card">
78-
<div class="card-body">
79-
<h4 class="card-title">Custom alerts</h4>
80-
<p class="card-description">
81-
Custom HTML inside alert
82-
</p>
83-
<div class="card card-inverse-secondary mb-5">
84-
<div class="card-body">
85-
<p class="mb-4">
86-
Well done! You successfully read this important alert message.
87-
</p>
88-
<button class="btn btn-secondary d-block d-sm-inline mx-auto">Ok</button>
89-
<button class="btn btn-light d-block d-sm-inline mx-auto mt-2 mt-sm-0 ml-sm-1">Cancel</button>
90-
</div>
38+
</div>
39+
<div class="col-md-6 grid-margin stretch-card">
40+
<div class="card">
41+
<div class="card-body">
42+
<h4 class="card-title">Custom alerts</h4>
43+
<p class="card-description">
44+
Custom HTML inside alert
45+
</p>
46+
<div class="card card-inverse-secondary mb-5">
47+
<div class="card-body">
48+
<p class="mb-4">
49+
Well done! You successfully read this important alert message.
50+
</p>
51+
<button class="btn btn-secondary d-block d-sm-inline mx-auto">Ok</button>
52+
<button class="btn btn-light d-block d-sm-inline mx-auto mt-2 mt-sm-0 ml-sm-1">Cancel</button>
9153
</div>
92-
<div class="card card-inverse-info">
93-
<div class="card-body">
94-
<p class="mb-4">
95-
Heads up! This alert needs your attention, but it's not super important.
96-
</p>
97-
<button class="btn btn-info d-block d-sm-inline mx-auto">Ok</button>
98-
<button class="btn btn-light d-block d-sm-inline mx-auto mt-2 mt-sm-0 ml-sm-1">Cancel</button>
99-
</div>
54+
</div>
55+
<div class="card card-inverse-info">
56+
<div class="card-body">
57+
<p class="mb-4">
58+
Heads up! This alert needs your attention, but it's not super important.
59+
</p>
60+
<button class="btn btn-info d-block d-sm-inline mx-auto">Ok</button>
61+
<button class="btn btn-light d-block d-sm-inline mx-auto mt-2 mt-sm-0 ml-sm-1">Cancel</button>
10062
</div>
10163
</div>
10264
</div>
10365
</div>
104-
<div class="col-12 grid-margin">
105-
<div class="card">
106-
<div class="card-body">
107-
<h4 class="card-title">Bootstrap alerts in fill colors</h4>
108-
<p class="card-description">
109-
Add class <code>.alert-fill-*</code> with <code>.alert</code>
110-
</p>
111-
<div class="alert alert-fill-primary" role="alert">
112-
<i class="mdi mdi-information-outline"></i>
113-
There! This is a primary alert.
114-
</div>
115-
<div class="alert alert-fill-success" role="alert">
116-
<i class="mdi mdi-information-outline"></i>
117-
Well done! You successfully read this important alert message.
118-
</div>
119-
<div class="alert alert-fill-info" role="alert">
120-
<i class="mdi mdi-information-outline"></i>
121-
Heads up! This alert needs your attention, but it's not super important.
122-
</div>
123-
<div class="alert alert-fill-warning" role="alert">
124-
<i class="mdi mdi-information-outline"></i>
125-
Warning! Better check yourself, you're not looking too good.
126-
</div>
127-
<div class="alert alert-fill-danger" role="alert">
128-
<i class="mdi mdi-information-outline"></i>
129-
Oh snap! Change a few things up and try submitting again.
130-
</div>
66+
</div>
67+
<div class="col-12 grid-margin">
68+
<div class="card">
69+
<div class="card-body">
70+
<h4 class="card-title">Bootstrap alerts in fill colors</h4>
71+
<p class="card-description">
72+
Add class <code>.alert-fill-*</code> with <code>.alert</code>
73+
</p>
74+
<div class="alert alert-fill-primary" role="alert">
75+
<i class="mdi mdi-information-outline"></i>
76+
There! This is a primary alert.
77+
</div>
78+
<div class="alert alert-fill-success" role="alert">
79+
<i class="mdi mdi-information-outline"></i>
80+
Well done! You successfully read this important alert message.
81+
</div>
82+
<div class="alert alert-fill-info" role="alert">
83+
<i class="mdi mdi-information-outline"></i>
84+
Heads up! This alert needs your attention, but it's not super important.
85+
</div>
86+
<div class="alert alert-fill-warning" role="alert">
87+
<i class="mdi mdi-information-outline"></i>
88+
Warning! Better check yourself, you're not looking too good.
89+
</div>
90+
<div class="alert alert-fill-danger" role="alert">
91+
<i class="mdi mdi-information-outline"></i>
92+
Oh snap! Change a few things up and try submitting again.
13193
</div>
13294
</div>
13395
</div>
134-
<div class="col-lg-6 stretch-card">
135-
<div class="card">
136-
<div class="card-body">
137-
<h4 class="card-title">Desktop notification</h4>
138-
<p class="card-description">Create simple desktop notifications</p>
139-
<form>
140-
<div class="form-group">
141-
<label for="title">Title</label>
142-
<input type="text" class="form-control" id="title" placeholder="Write some title here" value="Sample title" required>
143-
<label class="mt-4" for="message">Message</label>
144-
<textarea placeholder="Write some message here" id="message" class="form-control" required>Sample content</textarea>
145-
</div>
146-
<button type="submit" class="btn btn-success"> <span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Notify</button>
147-
</form>
148-
</div>
96+
</div>
97+
<div class="col-lg-6 stretch-card">
98+
<div class="card">
99+
<div class="card-body">
100+
<h4 class="card-title">Desktop notification</h4>
101+
<p class="card-description">Create simple desktop notifications</p>
102+
<form>
103+
<div class="form-group">
104+
<label for="title">Title</label>
105+
<input type="text" class="form-control" id="title" placeholder="Write some title here" value="Sample title" required>
106+
<label class="mt-4" for="message">Message</label>
107+
<textarea placeholder="Write some message here" id="message" class="form-control" required>Sample content</textarea>
108+
</div>
109+
<button type="submit" class="btn btn-success"> <span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Notify</button>
110+
</form>
149111
</div>
150112
</div>
151-
</div>
113+
</div>
114+
</div>

src/app/shared/sidebar/sidebar.component.html

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919
<i class="mdi mdi-home menu-icon"></i>
2020
</a>
2121
</li>
22-
<li class="nav-item" [ngClass]="{'active' : accordions.isActive || buttons.isActive || badges.isActive || breadcrumbs.isActive || dropdowns.isActive || modals.isActive || progressbar.isActive || pagination.isActive || tabs.isActive || typography.isActive || tooltips.isActive }">
22+
<li class="nav-item" [ngClass]="{'active' : accordions.isActive || buttons.isActive || badges.isActive || breadcrumbs.isActive || dropdowns.isActive || modals.isActive || notifications.isActive || progressbar.isActive || pagination.isActive || tabs.isActive || typography.isActive || tooltips.isActive }">
2323
<a class="nav-link" (click)="uiBasicCollapsed = !uiBasicCollapsed" [attr.aria-expanded]="uiBasicCollapsed" aria-controls="ui-basic">
2424
<span class="menu-title">Basic UI Elements</span>
2525
<i class="menu-arrow"></i>
@@ -33,6 +33,7 @@
3333
<li class="nav-item"> <a class="nav-link" routerLink="basic-ui/breadcrumbs" routerLinkActive="active" #breadcrumbs="routerLinkActive">Breadcrumbs</a></li>
3434
<li class="nav-item"> <a class="nav-link" routerLink="basic-ui/dropdowns" routerLinkActive="active" #dropdowns="routerLinkActive">Dropdowns</a></li>
3535
<li class="nav-item"> <a class="nav-link" routerLink="basic-ui/modals" routerLinkActive="active" #modals="routerLinkActive">Modals</a></li>
36+
<li class="nav-item"> <a class="nav-link" routerLink="basic-ui/notifications" routerLinkActive="active" #notifications="routerLinkActive">Notifications</a></li>
3637
<li class="nav-item"> <a class="nav-link" routerLink="basic-ui/progressbar" routerLinkActive="active" #progressbar="routerLinkActive">Progress bar</a></li>
3738
<li class="nav-item"> <a class="nav-link" routerLink="basic-ui/pagination" routerLinkActive="active" #pagination="routerLinkActive">Pagination</a></li>
3839
<li class="nav-item"> <a class="nav-link" routerLink="basic-ui/tabs" routerLinkActive="active" #tabs="routerLinkActive">Tabs</a></li>

src/assets/scss/_variables.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -285,7 +285,7 @@ $breadcrumb-item-bg: #dbe3e6;
285285

286286
////////// MODALS VARIABLES //////////
287287

288-
$modal-inner-padding: 15px;
288+
$modal-inner-padding: .937rem;
289289
$modal-dialog-margin: 10px;
290290
$modal-dialog-margin-y-sm-up: 30px;
291291
$modal-title-line-height: $line-height-base;

0 commit comments

Comments
 (0)