css watcher

backend/src/chicken_master/css.clj

@@ -1,161 +0,0 @@
-(ns chicken-master.css
-  (:require [garden.def :refer [defstyles]]
-            [garden.stylesheet :refer [at-media at-keyframes]]))
-
-(defstyles screen
-  (at-keyframes "spin"
-                [:0% {:transform "rotate(0deg)"}]
-                [:100% {:transform "rotate(360deg)"}])
-
-  [:html {:height "100%"}
-   [:body {:height "100%"}
-    [:.hidden {:display :none}]
-    [:.loader-container {:position :absolute
-                         :width "100%"
-                         :height "100%"
-                         :z-index 1000
-                         :background-color "rgba(0,0,0,0.4)"
-                         }
-     [:.loader {:margin :auto
-                :position :relative
-                :top "40%"
-                :border "5px solid #f3f3f3"; /* Light grey */
-                :border-top "5px solid #3498db"; /* Blue */
-                :border-radius "50%";
-                :width "30px"
-                :height "30px"
-                :animation "spin 1s linear infinite"}]]
-
-    [:.full-height {:height "100%"}]
-
-    [:.scroll-bar {:position :absolute
-                   :right "10px"
-                   :width "50px"}
-     [:#scroll-down {:position :fixed
-                     :right "0"
-                     :bottom "0"}]]
-
-    [:.popup {:position :fixed
-              :height "100%"
-              :width "100%"
-              :overflow :auto
-              :z-index 1
-              :background-color "rgba(0,0,0,0.4)"}
-     [:.popup-content {
-             :background-color "#fefefe"
-             :margin "15% auto"
-             :padding "20px"
-             :border "1px solid #888"
-             :width "15%"
-             }
-      [:.input-item
-       [:label {:min-width "60px"
-                :display :inline-block}]]
-      [:..popup-form-buttons {:margin "10px"}
-       [:* {:margin "20px"}]]]]
-
-    [:.scroll-button {:display :none}]
-    (at-media
-     {:max-width "800px"}
-     [:.scroll-bar {:display :none}]
-     [:.menu-button {:width "100%"
-                     :font-size "3em"
-                     :display :inherit}]
-     [:.popup
-      [:.popup-content {
-              :background-color "#fefefe"
-              :margin "3% auto"
-              :padding "20px"
-              :border "1px solid #888"
-              :width "60%"}
-       [:.product-items-edit {:margin-top "1.5em"}
-        [:.product-item-edit
-         [:label {:display :none}]]]]]
-     [:.calendar
-      [:.day {:min-height "12em"}]
-      ])
-    (at-media
-     {:min-width "800px"}
-     [:.popup
-      [:.popup-content {
-              :background-color "#fefefe"
-              :margin "15% auto"
-              :padding "20px"
-              :border "1px solid #888"
-              :width "15%"
-              }]]
-     [:.calendar {:display :grid
-                  :grid-template-columns "25% 25% 25% 25%"
-                  :grid-template-rows "50% 50%"}])
-    (at-media {:min-width "1200px"}
-              [:.calendar
-               {:display :grid
-                :grid-template-columns "14% 14% 14% 14% 14% 14% 14%"
-                :grid-template-rows "50% 50%"}])
-    [:.calendar
-     [:.day-header {:border "2px solid black"
-                    :text-align :center
-                    :font-size "2em"}]
-     [:.day.today {:border "0.4em solid red"}]
-     [:.day {:border "2px solid black"
-             :overflow :auto}
-
-      ; If each day has a header, then hide the rest of the border
-      [:.day-header {:border "none"
-                     :border-bottom "2px solid black"}]
-
-      [:.orders {:padding-left "25px"}
-
-       [:.actions {:display :none
-                   :float :right}]
-       [:.order:hover [:.actions {:display :inline}]]
-       [:.order.pending {:color :grey}]
-       [:.order.fulfilled {:color :red}]
-
-       [:.who {:font-size "18px"
-               :font-weight :bold
-               :white-space :nowrap
-               :overflow :hidden
-               :text-overflow :ellipsis}]]
-      [[:.products :.products-sum] {:padding-left "25px"}
-       [:.product {:margin-bottom "5px"}
-        [:.product-name {:width "5em"
-                         :display :inline-block
-                         :text-overflow :ellipsis
-                         :white-space :nowrap
-                         :overflow :hidden
-                         :margin-right "10px"}]
-        [:.product-amount {:width "40px"
-                           :max-height "5px"}]
-
-        ]]
-      [:.summary {:margin-top "10px"}]]]
-
-
-    [:.stock-modal
-     [:.add-product {:float :right}]
-     [:.stock-product {:margin "1em 0"}
-      [:.product-name {:display :inline-block
-                       :width "6em"}]
-      [:.stock-product-amount {:display :inline-block}
-       [:.input-item {:display :inline}
-        [:input {:width "40px"}]
-        [:label {:display :none}]]
-       ]]
-     ]
-
-    [:.customers-modal
-     [:details {:padding "0.5em"}]
-     [:details.customer-order {:margin-left "1em" :padding "0.5em"}
-      [:.order-date-picker {:display :inline-block :width "75%" :cursor :pointer}]
-      [:.product-item-edit {:margin-left "1em"}]]]
-
-    ]]
-
-  ; Chrome, Safari, Edge, Opera
-  ["input::-webkit-outer-spin-button" {:-webkit-appearance :none :margin 0}]
-  ["input::-webkit-inner-spin-button"{:-webkit-appearance :none :margin 0}]
-
-  ; Firefox
-  ["input[type=number]" {:-moz-appearance :textfield}]
-)

frontend/README.md

@@ -12,7 +12,8 @@ The app will be available at http://localhost:8280/
 
 ## Stylesheets
 
-Run `clojure -A:garden -m chicken-master.css` to generate the css files.
+Run `clojure -A:garden -m chicken-master.css compile` to generate the css files once.
+Run `clojure -A:garden -m chicken-master.css watch` to generate the css files on any change.
 
 ## Testing
 

frontend/deps.edn

@@ -9,7 +9,8 @@
         :extra-paths ["test"]}
 
   :garden
-   {:extra-deps {garden/garden {:mvn/version "1.3.10"}}}
+  {:extra-deps {clojure-watch/clojure-watch {:mvn/version "0.1.14"}
+                garden/garden {:mvn/version "1.3.10"}}}
 
   :test     {:extra-paths ["test"]
              :extra-deps  {}}

frontend/src/chicken_master/css.clj

@@ -1,7 +1,8 @@
 (ns chicken-master.css
   (:require [garden.def :refer [defstyles]]
             [garden.core :refer [css]]
-            [garden.stylesheet :refer [at-media at-keyframes]]))
+            [garden.stylesheet :refer [at-media at-keyframes]]
+            [clojure-watch.core :refer [start-watch]]))
 
 (defstyles screen
   (at-keyframes "spin"
@@ -165,6 +166,19 @@
   ["input[type=number]" {:-moz-appearance :textfield}]
 )
 
+
+
+
 (defn -main
-  ([] (-main "resources/public/css/screen.css"))
+  ([command] (-main command "resources/public/css/screen.css"))
-  ([output] (css {:output-to output} screen)))
+  ([command output]
+   (condp = command
+     "compile" (css {:output-to output} screen)
+     "watch" (start-watch [{:path "src/chicken_master"
+                            :event-types [:modify]
+                            :bootstrap (fn [path] (println "Starting to watch " path))
+                            :callback (fn [_ filename]
+                                        (when (#{"src/chicken_master/css.clj"} filename)
+                                          (css {:output-to output} screen)))
+                            :options {:recursive true}}])
+     (println "Unsuported command - use either compile or watch"))))