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
|
||||
[:div.content
|
||||
(global-nav)
|
||||
#_(flash/render-flash flash/test-flash)
|
||||
(flash/render-flash)
|
||||
body]
|
||||
[:script {:src "https://cdnjs.cloudflare.com/ajax/libs/tarekraafat-autocomplete.js/10.2.6/autoComplete.js"}]
|
||||
|
|
|
@ -1,9 +1,10 @@
|
|||
;; -*- eval: (rainbow-mode) -*-
|
||||
(ns bbbg.styles
|
||||
(:require
|
||||
[garden.color :as color]
|
||||
[garden.compiler :refer [compile-css]]
|
||||
[garden.def :refer [defstyles]]
|
||||
[garden.selectors :refer [attr= visited hover active & descendant]]))
|
||||
[garden.selectors :refer [& active attr= descendant hover visited]]))
|
||||
|
||||
(def black "#342e37")
|
||||
|
||||
|
@ -23,9 +24,9 @@
|
|||
|
||||
(def blue "#026fb1")
|
||||
|
||||
(def green "#BEEF9E")
|
||||
(def green "#87E24B")
|
||||
|
||||
(def contextual
|
||||
(def contextual-colors
|
||||
{:success green
|
||||
:info blue
|
||||
:warning yellow
|
||||
|
@ -73,9 +74,26 @@
|
|||
:cursor :pointer}
|
||||
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
|
||||
global-nav
|
||||
link-form
|
||||
flash
|
||||
|
||||
[:body
|
||||
{:color black}]
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
(ns bbbg.views.flash
|
||||
(: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 (s/keys :req [:flash/type :flash/message]))
|
||||
(s/fdef add-flash :args (s/cat :resp map? :flash ::flash) :ret map?)
|
||||
|
@ -31,3 +31,9 @@
|
|||
[:li.flash-message
|
||||
{:class (str "flash-" (-> message :flash/type name))}
|
||||
(:flash/message message)])])))
|
||||
|
||||
(def test-flash
|
||||
{:flash/messages
|
||||
(for [type [:success :error :warning :info]]
|
||||
{:flash/type type
|
||||
:flash/message (str "Sample " type " message")})})
|
||||
|
|
Loading…
Reference in a new issue