feat(grfn/bbbg): Add styling for flash messages
Change-Id: Ic8594217e6acceaad041dda8acf135bf7f3408e9 Reviewed-on: https://cl.tvl.fyi/c/depot/+/4585 Reviewed-by: grfn <grfn@gws.fyi> Autosubmit: grfn <grfn@gws.fyi> Tested-by: BuildkiteCI
This commit is contained in:
parent
4c23a9c1d4
commit
15a9443e36
3 changed files with 29 additions and 4 deletions
|
@ -57,6 +57,7 @@
|
||||||
[:body
|
[:body
|
||||||
[:div.content
|
[:div.content
|
||||||
(global-nav)
|
(global-nav)
|
||||||
|
#_(flash/render-flash flash/test-flash)
|
||||||
(flash/render-flash)
|
(flash/render-flash)
|
||||||
body]
|
body]
|
||||||
[:script {:src "https://cdnjs.cloudflare.com/ajax/libs/tarekraafat-autocomplete.js/10.2.6/autoComplete.js"}]
|
[:script {:src "https://cdnjs.cloudflare.com/ajax/libs/tarekraafat-autocomplete.js/10.2.6/autoComplete.js"}]
|
||||||
|
|
|
@ -1,9 +1,10 @@
|
||||||
;; -*- eval: (rainbow-mode) -*-
|
;; -*- eval: (rainbow-mode) -*-
|
||||||
(ns bbbg.styles
|
(ns bbbg.styles
|
||||||
(:require
|
(:require
|
||||||
|
[garden.color :as color]
|
||||||
[garden.compiler :refer [compile-css]]
|
[garden.compiler :refer [compile-css]]
|
||||||
[garden.def :refer [defstyles]]
|
[garden.def :refer [defstyles]]
|
||||||
[garden.selectors :refer [attr= visited hover active & descendant]]))
|
[garden.selectors :refer [& active attr= descendant hover visited]]))
|
||||||
|
|
||||||
(def black "#342e37")
|
(def black "#342e37")
|
||||||
|
|
||||||
|
@ -23,9 +24,9 @@
|
||||||
|
|
||||||
(def blue "#026fb1")
|
(def blue "#026fb1")
|
||||||
|
|
||||||
(def green "#BEEF9E")
|
(def green "#87E24B")
|
||||||
|
|
||||||
(def contextual
|
(def contextual-colors
|
||||||
{:success green
|
{:success green
|
||||||
:info blue
|
:info blue
|
||||||
:warning yellow
|
:warning yellow
|
||||||
|
@ -73,9 +74,26 @@
|
||||||
:cursor :pointer}
|
:cursor :pointer}
|
||||||
link-conditional-styles]])
|
link-conditional-styles]])
|
||||||
|
|
||||||
|
(defstyles flash
|
||||||
|
[:.flash-messages
|
||||||
|
{:width "800px"
|
||||||
|
:margin "1rem auto"}]
|
||||||
|
|
||||||
|
[:.flash-message
|
||||||
|
{:padding "1rem 1.5rem"
|
||||||
|
:border "1px solid"
|
||||||
|
:margin-bottom "1rem"}]
|
||||||
|
|
||||||
|
(for [[context color] contextual-colors]
|
||||||
|
[(& (keyword (str ".flash-" (name context))))
|
||||||
|
{:border-color color
|
||||||
|
:background-color (color/lighten color 30)
|
||||||
|
:border-radius "5px"}]))
|
||||||
|
|
||||||
(defstyles styles
|
(defstyles styles
|
||||||
global-nav
|
global-nav
|
||||||
link-form
|
link-form
|
||||||
|
flash
|
||||||
|
|
||||||
[:body
|
[:body
|
||||||
{:color black}]
|
{:color black}]
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
(ns bbbg.views.flash
|
(ns bbbg.views.flash
|
||||||
(:require [clojure.spec.alpha :as s]))
|
(:require [clojure.spec.alpha :as s]))
|
||||||
|
|
||||||
(s/def :flash/type #{:success :error :warning})
|
(s/def :flash/type #{:success :error :warning :info})
|
||||||
(s/def :flash/message string?)
|
(s/def :flash/message string?)
|
||||||
(s/def ::flash (s/keys :req [:flash/type :flash/message]))
|
(s/def ::flash (s/keys :req [:flash/type :flash/message]))
|
||||||
(s/fdef add-flash :args (s/cat :resp map? :flash ::flash) :ret map?)
|
(s/fdef add-flash :args (s/cat :resp map? :flash ::flash) :ret map?)
|
||||||
|
@ -31,3 +31,9 @@
|
||||||
[:li.flash-message
|
[:li.flash-message
|
||||||
{:class (str "flash-" (-> message :flash/type name))}
|
{:class (str "flash-" (-> message :flash/type name))}
|
||||||
(:flash/message message)])])))
|
(:flash/message message)])])))
|
||||||
|
|
||||||
|
(def test-flash
|
||||||
|
{:flash/messages
|
||||||
|
(for [type [:success :error :warning :info]]
|
||||||
|
{:flash/type type
|
||||||
|
:flash/message (str "Sample " type " message")})})
|
||||||
|
|
Loading…
Add table
Reference in a new issue