diff --git a/README.md b/README.md index 90363d5b..a4421cce 100644 --- a/README.md +++ b/README.md @@ -47,11 +47,11 @@ that they could be ignored. Probably. Maybe. If so, a modern flexbox implementation will be available on all the browsers you then care about. **So that's surprisingly soon, but not now!** -But, even when it comes to modern browsers, there will be teething issues. Based on 5 minutes of +Even when it comes to modern browsers, there will be teething issues. Based on 5 minutes of testing once a month, re-com appears to work reasonably on IE11 and Safari. On the other hand, Firefox (pre version 38) has all the speed of a snail on performance reducing drugs. Version 38 and beyond have a [fix](https://bugzilla.mozilla.org/show_bug.cgi?id=1149339) for the performance problems caused by nested flexboxes, -however we are informed by [@frozenlock](https://github.com/frozenlock) that it is still not as fast as Chrome if you are using **deeply** nested flexbox layouts +however as per issue #49 it is still not as fast as Chrome if you are using **deeply** nested flexbox layouts (much more nested than our demo app). We can also confirm that none of the components have been designed with mobile in mind, and @@ -179,10 +179,10 @@ https://github.com/Day8/re-com/tree/master/run/resources/public In particular, you'll need bootstrap (assumedly via a CDN): ```html - + ``` -And a reference to these two CSS files: +And a reference to these two CSS files (make sure `re-com.css` appears after `bootstrap.css`): ```html @@ -210,7 +210,7 @@ Although both `re-frame` and `re-com` can be used independently of each other, t ## Lein Template -See @gadfly361's [reagent-seed](https://github.com/gadfly361/reagent-seed) +See [re-frame-template](https://github.com/Day8/re-frame-template). ## The Missing Components @@ -232,13 +232,16 @@ Can we use [Fixed Data Tables for React](http://facebook.github.io/fixed-data-ta 1. Where the docs are wrong or fall short, write up something better. Because our docs take the form of an app written in ClojureScrip using re-com, you're actually exercising your knowledge of re-com as you do this. -1. See the list of missing components above. You'll have to produce the +2. See the list of missing components above. You'll have to produce the component itself, including a params spec, plus the extra page in the demo app. -1. Test re-com on new browsers and iron out any quirks. Our focus is strictly Chrome. +3. Test re-com on new browsers and iron out any quirks. Our focus is strictly Chrome. When creating new components, we have found it useful to use the CSS from existing -javascript projects (assuming their licence is compatible with MIT) and then -replace the javascript with ClojureScript. Reagent really is is very nice. +JavaScript projects (assuming their licence is compatible with MIT) and then +replace the JavaScript with ClojureScript. Reagent really is is very nice. + +Also, please refer to [CONTRIBUTING.md](https://github.com/Day8/re-com/blob/master/CONTRIBUTING.md) for further +details on creating issues and pull requests. ### License diff --git a/project.clj b/project.clj index 0909a050..38a95462 100644 --- a/project.clj +++ b/project.clj @@ -4,7 +4,7 @@ ;; --------------------------------------------------------------------------------------- -(defproject re-com "0.6.0" +(defproject re-com "0.6.1" :description "Reusable UI components for Reagent" :url "https://github.com/Day8/re-com.git" :license {:name "MIT"} diff --git a/src/re_com/dropdown.cljs b/src/re_com/dropdown.cljs index 8769ee1f..717c40e7 100644 --- a/src/re_com/dropdown.cljs +++ b/src/re_com/dropdown.cljs @@ -190,7 +190,7 @@ ;;-------------------------------------------------------------------------------------------------- (def single-dropdown-args-desc - [{:name :choices :required true :type "vector of choices | atom" :validate-fn vector? :description [:span "Each is expected to have an id, label and, optionally, a group, privided by " [:code ":id-fn"] ", " [:code ":label-fn"] " & " [:code ":group-fn"]]} + [{:name :choices :required true :type "vector of choices | atom" :validate-fn vector? :description [:span "Each is expected to have an id, label and, optionally, a group, provided by " [:code ":id-fn"] ", " [:code ":label-fn"] " & " [:code ":group-fn"]]} {:name :id-fn :required false :default :id :type "choice -> anything" :validate-fn ifn? :description [:span "given an element of " [:code ":choices"] ", returns its unique identifier (aka id)"]} {:name :label-fn :required false :default :label :type "choice -> string | hiccup" :validate-fn ifn? :description [:span "given an element of " [:code ":choices"] ", returns its displayable label"]} {:name :group-fn :required false :default :group :type "choice -> anything" :validate-fn ifn? :description [:span "given an element of " [:code ":choices"] ", returns its group identifier"]} diff --git a/src/re_com/modal_panel.cljs b/src/re_com/modal_panel.cljs index 1bb6648a..8f31491e 100644 --- a/src/re_com/modal_panel.cljs +++ b/src/re_com/modal_panel.cljs @@ -25,31 +25,30 @@ :or {wrap-nicely? true backdrop-color "black" backdrop-opacity 0.6} :as args}] {:pre [(validate-args-macro modal-panel-args-desc args "modal-panel")]} - (fn [] - [:div ;; Containing div - (merge {:class (str "rc-modal-panel display-flex " class) - :style (merge {:position "fixed" - :left "0px" - :top "0px" - :width "100%" - :height "100%" - :z-index 1020} - style)} - attr) - [:div ;; Backdrop - {:style {:position "fixed" - :width "100%" - :height "100%" - :background-color backdrop-color - :opacity backdrop-opacity - :z-index 1} - :on-click (handler-fn (when backdrop-on-click (backdrop-on-click)) - (.preventDefault event) - (.stopPropagation event))}] - [:div ;; Child container - {:style (merge {:margin "auto" - :z-index 2} - (when wrap-nicely? {:background-color "white" - :padding "16px" - :border-radius "6px"}))} - child]])) + [:div ;; Containing div + (merge {:class (str "rc-modal-panel display-flex " class) + :style (merge {:position "fixed" + :left "0px" + :top "0px" + :width "100%" + :height "100%" + :z-index 1020} + style)} + attr) + [:div ;; Backdrop + {:style {:position "fixed" + :width "100%" + :height "100%" + :background-color backdrop-color + :opacity backdrop-opacity + :z-index 1} + :on-click (handler-fn (when backdrop-on-click (backdrop-on-click)) + (.preventDefault event) + (.stopPropagation event))}] + [:div ;; Child container + {:style (merge {:margin "auto" + :z-index 2} + (when wrap-nicely? {:background-color "white" + :padding "16px" + :border-radius "6px"}))} + child]]) diff --git a/src/re_demo/alert_box.cljs b/src/re_demo/alert_box.cljs index 9bd663cd..dcaab5be 100644 --- a/src/re_demo/alert_box.cljs +++ b/src/re_demo/alert_box.cljs @@ -101,7 +101,7 @@ :body "Alert with :body but no :heading (:padding set to 6px)." :padding "6px" :closeable? true - :on-close #(reset! show-alert5 false)]]) + :on-close #(reset! show-alert6 false)]]) [alert-box :alert-type :none :class "alert-danger-modern"