Skip to content

Commit 8202cd6

Browse files
drewbarontinidrewbarontini
committed
Add basic styling/closing for flash messages
Refs: #48
1 parent da24fec commit 8202cd6

7 files changed

Lines changed: 136 additions & 4 deletions

File tree

‎client/javascripts/components/services/expel.js‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
// *************************************
2+
//
3+
// Expel
4+
// -> Pest control
5+
//
6+
// *************************************
7+
//
8+
// @param $toggle { jQuery object }
9+
// @param elementNode { string }
10+
//
11+
// *************************************
12+
13+
JS.Services.expel = function(options) {
14+
var settings = $.extend({
15+
$toggle : $('.js-expel-toggle'),
16+
elementNode : '.js-expel',
17+
}, options);
18+
19+
settings.$toggle.on('click', function(event) {
20+
event.preventDefault();
21+
$(this).closest(settings.elementNode).remove();
22+
});
23+
};
24+
25+
// -------------------------------------
26+
// Usage
27+
// -------------------------------------
28+
//
29+
// JS.Services.expel();
30+
//

‎client/stylesheets/application.sass‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@
3636
// Structures
3737
// -------------------------------------
3838
39+
@import 'structures/alert'
3940
@import 'structures/checklist'
4041
@import 'structures/console'
4142
@import 'structures/course'

‎client/stylesheets/structures/_alert.sass‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
// *************************************
2+
//
3+
// Alert
4+
// -> Warning message
5+
//
6+
// -------------------------------------
7+
// Template (Haml)
8+
// -------------------------------------
9+
//
10+
// .alert[error|success|warning]
11+
//
12+
// .alert-msg
13+
//
14+
// .alert-msg-close
15+
//
16+
// *************************************
17+
18+
.alert
19+
margin-bottom: $b-space
20+
21+
// -------------------------------------
22+
// Modifiers
23+
// -------------------------------------
24+
25+
// ----- Types ----- //
26+
27+
.alert--error,
28+
.alert--error .alert-msg-close
29+
color: $c-error
30+
31+
.alert--success,
32+
.alert--success .alert-msg-close
33+
color: $c-success
34+
35+
.alert--warning,
36+
.alert--warning .alert-msg-close
37+
color: $c-warning
38+
39+
// -------------------------------------
40+
// Scaffolding
41+
// -------------------------------------
42+
43+
// ----- Message ----- //
44+
45+
.alert-msg
46+
margin-bottom: 0
47+
48+
// Close
49+
50+
.alert-msg-close
51+
border-bottom: $b-border
52+
font-weight: bold
53+
54+
+state
55+
color: $c-text

‎public/javascripts/application.js‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,37 @@ jQuery(function($) {
5252

5353
});
5454

55+
// *************************************
56+
//
57+
// Expel
58+
// -> Pest control
59+
//
60+
// *************************************
61+
//
62+
// @param $toggle { jQuery object }
63+
// @param elementNode { string }
64+
//
65+
// *************************************
66+
67+
JS.Services.expel = function(options) {
68+
var settings = $.extend({
69+
$toggle : $('.js-expel-toggle'),
70+
elementNode : '.js-expel',
71+
}, options);
72+
73+
settings.$toggle.on('click', function(event) {
74+
event.preventDefault();
75+
$(this).closest(settings.elementNode).remove();
76+
});
77+
};
78+
79+
// -------------------------------------
80+
// Usage
81+
// -------------------------------------
82+
//
83+
// JS.Services.expel();
84+
//
85+
5586
// *************************************
5687
//
5788
// Console

‎views/flow/index.jade‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,8 @@ extends /views/layouts/layout
55

66
block content
77

8-
for message in flash
9-
a.alert(class='alert-' + message.type)
10-
p= message.message
8+
include /views/partials/_flash
9+
1110
//
1211
h1.h.h--1 Latest News
1312
p= `Today ${new Date()}`

‎views/news/index.jade‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,12 @@ block content
77

88
section.row.has-sector
99
.cell
10-
1110
.g
1211
.g-b.g-b--m--3of5.sector.sector--a
1312
.well.well--l.well--m--xl
1413

14+
include /views/partials/_flash
15+
1516
.bdrbl.mbl.pbl
1617
h1.h.h--2 News from the Community
1718

@@ -68,3 +69,12 @@ block content
6869
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
6970
vivamus vitae risus vitae lorem iaculis placerat. aliquam sit
7071
amet felis. etiam congue. donec risus risus, pretium...
72+
73+
block inline_javascript
74+
script.
75+
jQuery(function($) {
76+
JS.Services.expel({
77+
$toggle : $('.js-alert-close'),
78+
elementNode : '.js-alert'
79+
});
80+
});

‎views/partials/_flash.jade‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
for message in flash
2+
.alert.js-alert(class='alert--' + message.type)
3+
p.alert-msg
4+
span= message.message
5+
|
6+
a.alert-msg-close.js-alert-close(href='#') Dismiss!

0 commit comments

Comments
 (0)