diff --git a/backend/src/chicken_master/css.clj b/backend/src/chicken_master/css.clj deleted file mode 100644 index cd3b364..0000000 --- a/backend/src/chicken_master/css.clj +++ /dev/null @@ -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}] -) diff --git a/frontend/README.md b/frontend/README.md index 140573e..1182f2c 100644 --- a/frontend/README.md +++ b/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 diff --git a/frontend/deps.edn b/frontend/deps.edn index 4e7b7c0..6e408e3 100644 --- a/frontend/deps.edn +++ b/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 {}} diff --git a/frontend/src/chicken_master/css.clj b/frontend/src/chicken_master/css.clj index 5faa2e9..039ecc9 100644 --- a/frontend/src/chicken_master/css.clj +++ b/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")) - ([output] (css {:output-to output} screen))) + ([command] (-main command "resources/public/css/screen.css")) + ([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"))))