diff --git a/frontend/resources/public/css/screen.css b/frontend/resources/public/css/screen.css
index 7b58379..4d2bf5a 100644
--- a/frontend/resources/public/css/screen.css
+++ b/frontend/resources/public/css/screen.css
@@ -38,7 +38,7 @@ html body .loader-container .loader {
border: 5px solid #f3f3f3;
position: relative;
animation: spin 1s linear infinite;
- border-top: 5px solid #3498db;
+ border-top: 5px solid #8bd81e;
border-radius: 50%;
}
@@ -104,7 +104,8 @@ html body .scroll-button {
html body .menu-button {
width: 100%;
- font-size: 3em;
+ font-size: 1.5em;
+ font-variant: small-caps;
display: inherit;
}
@@ -175,11 +176,20 @@ html body .scroll-button {
html body .calendar .day-header {
border: 2px solid black;
text-align: center;
- font-size: 2em;
+ font-size: 1.5em;
+ font-variant: small-caps;
+}
+
+html body .calendar .day-header .day-name {
+ color: red;
+}
+
+html body .calendar .day-header .date {
+ color: purple;
}
html body .calendar .day.today {
- border: 0.4em solid red;
+ border: 0.2em solid #6cb802;
}
html body .calendar .day {
@@ -206,11 +216,11 @@ html body .calendar .day .orders .order:hover .actions {
}
html body .calendar .day .orders .order.pending {
- color: grey;
+ color: rgb(247, 176, 176);
}
html body .calendar .day .orders .order.fulfilled {
- color: red;
+ color: rgb(114, 114, 114);
}
html body .calendar .day .orders .who {
diff --git a/frontend/src/chicken_master/config.cljs b/frontend/src/chicken_master/config.cljs
index 7ab0cc6..6086945 100644
--- a/frontend/src/chicken_master/config.cljs
+++ b/frontend/src/chicken_master/config.cljs
@@ -23,7 +23,7 @@
(def default-settings {:first-day-offset (get-setting :first-day-offset 1) ; which is the first day of the week (add the offset to `day-names`)
:day-names (get-setting :day-names ["Niedz" "Pon" "Wt" "Śr" "Czw" "Pt" "Sob"]) ; how days should be displayed in the calendar view
- :date-format (get-setting :date-format "%D %m/%d") ; the format of the days (D - name, d - day, m - month)
+ :date-format (get-setting :date-format "%D %m/%d") ; the format of the days (D - name, d - day, m - month)
:show-day-add-order (get-setting :show-day-add-order true) ; Show an add order button in each day
diff --git a/frontend/src/chicken_master/css.clj b/frontend/src/chicken_master/css.clj
index 039ecc9..5faa0d3 100644
--- a/frontend/src/chicken_master/css.clj
+++ b/frontend/src/chicken_master/css.clj
@@ -21,9 +21,9 @@
[:.loader {:margin :auto
:position :relative
:top "40%"
- :border "5px solid #f3f3f3"; /* Light grey */
- :border-top "5px solid #3498db"; /* Blue */
- :border-radius "50%";
+ :border "5px solid #f3f3f3"
+ :border-top "5px solid #8bd81e"
+ :border-radius "50%"
:width "30px"
:height "30px"
:animation "spin 1s linear infinite"}]]
@@ -63,7 +63,8 @@
{:max-width "800px"}
[:.scroll-bar {:display :none}]
[:.menu-button {:width "100%"
- :font-size "3em"
+ :font-size "1.5em"
+ :font-variant "small-caps"
:display :inherit}]
[:.popup
[:.popup-content {
@@ -100,8 +101,11 @@
[:.calendar
[:.day-header {:border "2px solid black"
:text-align :center
- :font-size "2em"}]
- [:.day.today {:border "0.4em solid red"}]
+ :font-size "1.5em"
+ :font-variant "small-caps"}
+ [:.day-name {:color :red}]
+ [:.date {:color :purple}]]
+ [:.day.today {:border "0.2em solid #6cb802"}]
[:.day {:border "2px solid black"
:overflow :auto}
@@ -114,8 +118,8 @@
[:.actions {:display :none
:float :right}]
[:.order:hover [:.actions {:display :inline}]]
- [:.order.pending {:color :grey}]
- [:.order.fulfilled {:color :red}]
+ [:.order.pending {:color "rgb(247, 176, 176)"}]
+ [:.order.fulfilled {:color "rgb(114, 114, 114)"}]
[:.who {:font-size "18px"
:font-weight :bold
@@ -155,7 +159,6 @@
[:.order-date-picker {:display :inline-block :width "75%" :cursor :pointer}]
[:.product-item-edit {:margin-left "1em"}]]]
[:.customer-product-group-edit {:margin-left "1.2em" :padding "0.5em"}]
-
]]
; Chrome, Safari, Edge, Opera
diff --git a/frontend/src/chicken_master/time.cljs b/frontend/src/chicken_master/time.cljs
index 70b7c14..831079d 100644
--- a/frontend/src/chicken_master/time.cljs
+++ b/frontend/src/chicken_master/time.cljs
@@ -38,11 +38,13 @@
(defn today? "true when `d1` is today" [d1] (same-day? (js/Date.) d1))
(defn format-date [date]
- (reduce (fn [date-str [from to]] (str/replace date-str from to))
- (get @settings :date-format "%D %m/%d")
- [["%d" (.getDate date)]
- ["%m" (inc (.getMonth date))]
- ["%D" (->> date .getDay (nth (get @settings :day-names)))]]))
+ ;; Yes, this is bad. Done on the assumption that the user can shoot themselves in the foot if they want to.
+ [:div {:dangerouslySetInnerHTML
+ {:__html (reduce (fn [date-str [from to]] (str/replace date-str from to))
+ (get @settings :date-format "%D %m/%d")
+ [["%d" (.getDate date)]
+ ["%m" (inc (.getMonth date))]
+ ["%D" (->> date .getDay (nth (get @settings :day-names)))]])}}])
(defn iso-date [date] (.toIsoString ^js/goog.date.Date date true))
diff --git a/frontend/test/chicken_master/time_test.cljs b/frontend/test/chicken_master/time_test.cljs
index d12a16d..6d412db 100644
--- a/frontend/test/chicken_master/time_test.cljs
+++ b/frontend/test/chicken_master/time_test.cljs
@@ -61,13 +61,16 @@
(deftest test-format-date
(testing "don't show date"
(with-redefs [sut/settings (atom {:date-format ""})]
- (is (= (sut/format-date (new Date 2020 01 01)) ""))))
+ (is (= (sut/format-date (new Date 2020 01 01))
+ [:div {:dangerouslySetInnerHTML {:__html ""}}]))))
(testing "without name"
(with-redefs [sut/settings (atom {:date-format "%m/%d"})]
- (is (= (sut/format-date (new Date 2020 01 01)) "2/1"))))
+ (is (= (sut/format-date (new Date 2020 01 01))
+ [:div {:dangerouslySetInnerHTML {:__html "2/1"}}]))))
(testing "with name"
(with-redefs [sut/settings (atom {:date-format "%D %m/%d"
:day-names ["Niedz" "Pon" "Wt" "Śr" "Czw" "Pt" "Sob"]})]
- (is (= (sut/format-date (new Date 2020 01 01)) "Sob 2/1")))))
+ (is (= (sut/format-date (new Date 2020 01 01))
+ [:div {:dangerouslySetInnerHTML {:__html "Sob 2/1"}}])))))