Permalink
Browse files

adds flash example

  • Loading branch information...
slagyr committed Jan 15, 2014
1 parent 8abfde4 commit 76613c2f5c5236e795cc517520978d6661dde545
View
@@ -56,18 +56,82 @@ label {
color: white;
}
+/* --------------------------------------
+* Flash Styles
+* -------------------------------------- */
+
+.flash-container {
+ position: fixed;
+ top: 0;
+ margin: auto;
+ width: 100%;
+ text-align: center;
+}
+
+.flash-errors, .flash-notices, .flash-successes {
+ position: relative;
+ -moz-border-bottom-left-radius: 5px;
+ -webkit-border-bottom-left-radius: 5px;
+ border-bottom-left-radius: 5px;
+ -moz-border-bottom-right-radius: 5px;
+ -webkit-border-bottom-right-radius: 5px;
+ border-bottom-right-radius: 5px;
+ border: 1px solid;
+ border-top: 0;
+ font-size: 1em;
+ font-weight: normal;
+ margin: auto auto 5px;
+ padding: 1em;
+ text-align: center;
+ max-width: 50%;
+}
+
+.flash-errors {
+ background: #ff6555;
+ color: #a64237;
+ border-color: #a64237;
+}
+
+.flash-notices {
+ background-color: #ce9853;
+ color: #9c5c2b;
+ border-color: #9c5c2b;
+}
+
+.flash-successes {
+ background-color: #67f091;
+ color: #49a966;
+ border-color: #49a966;
+}
+
+.flash-close {
+ position: absolute;
+ right: 0;
+ top: 0;
+ margin: 5px;
+}
+
+a.flash-close:hover {
+ color: white;
+ cursor: pointer;
+}
+
+p.flash-error, p.flash-notice, p.flash-success {
+ margin: 0;
+}
+
/* --------------------------------------
* Forms Styles
* -------------------------------------- */
p.field-errors {
- margin: 0;
- padding: 0;
- color: #E03725;
+ margin: 0;
+ padding: 0;
+ color: #E03725;
}
.field-error {
- border: 1px solid #E03725;
+ border: 1px solid #E03725;
}
/* --------------------------------------
@@ -113,18 +177,18 @@ p.field-errors {
}
.modal-header button {
- float: right;
- font-size: 1.2em;
- font-weight: 600;
- background: transparent;
- padding: 0;
- margin: 0;
- -moz-appearance: none;
- -webkit-appearance: none;
- appearance: none;
- border: none;
- cursor: pointer;
- color: #333;
+ float: right;
+ font-size: 1.2em;
+ font-weight: 600;
+ background: transparent;
+ padding: 0;
+ margin: 0;
+ -moz-appearance: none;
+ -webkit-appearance: none;
+ appearance: none;
+ border: none;
+ cursor: pointer;
+ color: #333;
}
.modal-header h3 {
View
@@ -3,7 +3,7 @@
:license {:name "Eclipse Public License"
:url "http://www.eclipse.org/legal/epl-v10.html"}
- :dependencies [[com.8thlight/filament "1.1.4"]
+ :dependencies [[com.8thlight/filament "1.2.0"]
[com.8thlight/hiccup "1.1.1"]
[org.clojure/clojure "1.5.1"]]
@@ -1,9 +1,11 @@
(ns example.main
(:require [example.autocomplete-demo :refer [demo-autocomplete]]
+ [example.flash-demo :refer [demo-flash]]
[example.forms-demo :refer [demo-forms]]
[example.modal-demo :refer [demo-modal]]))
(defn ^:export init []
(demo-autocomplete)
+ (demo-flash)
(demo-forms)
(demo-modal))
@@ -72,4 +72,11 @@
(should= nil (dom/by-id "flash-errors"))
(should= nil (dom/by-id "flash-notices"))
(should= nil (dom/by-id "flash-successes")))
+
+
+ (it "css classes"
+ (should-contain "flash-container" (dom/classes (flash/flash-container-node)))
+ (should-contain "flash-errors" (dom/classes (flash/errors-node)))
+ (should-contain "flash-notices" (dom/classes (flash/notices-node)))
+ (should-contain "flash-successes" (dom/classes (flash/successes-node))))
)
@@ -10,15 +10,15 @@
[]
(or
(dom/by-id "flash-container")
- (let [container (dom/single-node (h/html [:div#flash-container]))]
+ (let [container (dom/single-node (h/html [:div#flash-container.flash-container]))]
(dom/append! (.-body js/document) container)
container)))
(defn- flash-section [section]
(let [name (str "flash-" section)]
(or
(dom/by-id name)
- (let [section-node (dom/single-node (h/html [:div {:id name} [:a.flash-close "X"]]))]
+ (let [section-node (dom/single-node (h/html [:div {:id name :class name} [:a.flash-close "X"]]))]
(util/override-click! (first (dom/children section-node)) #(dom/destroy! section-node))
(dom/append! (flash-container-node) section-node)
section-node))))
@@ -39,8 +39,8 @@
"Adds an error flash to the DOM.
CSS:
- #flash-container - a div added to the body element so consider using absolute/fixed positioning
- #flash-errors - a div inside the flash-container that will hold all the error flashes
+ .flash-container - a div added to the body element so consider using absolute/fixed positioning
+ .flash-errors - a div inside the flash-container that will hold all the error flashes
a.flash-close - the first node in a flash section. Contains the text \"X\". Clicking it will close the section.
p.flash-error - one is added to the flash-errors div for each message"
[message]
@@ -50,8 +50,8 @@
"Adds an notice flash to the DOM.
CSS:
- #flash-container - a div added to the body element so consider using absolute/fixed positioning
- #flash-notices - a div inside the flash-container that will hold all the notice flashes
+ .flash-container - a div added to the body element so consider using absolute/fixed positioning
+ .flash-notices - a div inside the flash-container that will hold all the notice flashes
a.flash-close - the first node in a flash section. Contains the text \"X\". Clicking it will close the section.
p.flash-notice - one is added to the flash-notices div for each message"
[message]
@@ -61,8 +61,8 @@
"Adds an success flash to the DOM.
CSS:
- #flash-container - a div added to the body element so consider using absolute/fixed positioning
- #flash-successes - a div inside the flash-container that will hold all the success flashes
+ .flash-container - a div added to the body element so consider using absolute/fixed positioning
+ .flash-successes - a div inside the flash-container that will hold all the success flashes
a.flash-close - the first node in a flash section. Contains the text \"X\". Clicking it will close the section.
p.flash-success - one is added to the flash-successes div for each message"
[message]

0 comments on commit 76613c2

Please sign in to comment.