Update docs

day8 · Nov 1, 2023 · 2ac1445 · 2ac1445
1 parent 2c1f4f2
commit 2ac1445
Show file tree

Hide file tree

Showing 5 changed files with 1,189 additions and 1,176 deletions.
diff --git a/Flows/index.html b/Flows/index.html
@@ -1718,16 +1718,21 @@ <h2 id="a-basic-example">A Basic Example<a class="headerlink" href="#a-basic-exa
 (rf/reg-event-db :inc-h  (fn [db _] (update-in db [:kitchen :length] inc)))
 (rf/reg-event-db :init   (fn [db _] {:kitchen {:width 20 :length 20}}))
 
+(def clickable
+  {:cursor "pointer" :border "2px solid grey" :user-select "none"})
+
 (defn dimension-fields []
   [:form
    [:h4 "Kitchen Calculator"]
-   "width: "
+   "width:"
    @(rf/subscribe [:width])
-   [:a {:on-click #(rf/dispatch [:inc-w])} "+"]
+   [:span {:style clickable
+           :on-click #(rf/dispatch [:inc-w])} "+"]
    [:br]
-   "length: "
+   "length:"
    @(rf/subscribe [:length])
-   [:a {:on-click #(rf/dispatch [:inc-h])} "+"]])
+   [:span {:style clickable
+           :on-click #(rf/dispatch [:inc-h])} "+"]])
 </div>
 
 <p>Now the interesting part, we use <code>reg-flow</code>: </p>
@@ -1760,7 +1765,7 @@ <h2 id="a-basic-example">A Basic Example<a class="headerlink" href="#a-basic-exa
 (defn room-calculator []
   [:div
    [dimension-fields]
-   " Area: "
+   " Area:"
    @(rf/subscribe [::kitchen-area])])  ;;  <--- subscribing
 
 (rf/dispatch-sync [:init])
@@ -1868,17 +1873,21 @@ <h2 id="living-and-dying">Living and Dying<a class="headerlink" href="#living-an
 <div class="cm-doc">
 (def tabs [:room-calculator :item-counter])
 
+(def clickable-tab (into clickable {:padding "0.5rem"}))
+(def active-tab (into clickable-tab {:color "green"}))
+
 (defn tab [id]
-  [:a {:style {:padding "1rem"
-               :color (when (= id @current-tab) "lightgreen")}
-       :on-click #(rf/dispatch [:change-tab id])}
+  [:span {:style (if (= id @current-tab)
+                   active-tab clickable-tab)
+          :on-click #(rf/dispatch [:change-tab id])}
    (name id)])
 
 (defn tab-picker []
   (into [:div] (for [id tabs] [tab id])))
 
 (defn debug-app-db []
-  [:code {:style {:font-size 12}}
+  [:pre
+   {:style {:font-size 12 :margin "1rem" :white-space "pre-wrap"}}
    (str @re-frame.db/app-db)])
 
 (defn item-counter [] [:<>])
@@ -2035,7 +2044,7 @@ <h2 id="redefining-and-undefining">Redefining and Undefining<a class="headerlink
 (rf/reg-sub ::items :-> (comp reverse ::items))
 
 (defn item [id]
-  [:div "Item " id])
+  [:div "Item" id])
 
 (defn items []
   (into [:div] (map item) @(rf/subscribe [::items])))
@@ -2052,10 +2061,12 @@ <h2 id="redefining-and-undefining">Redefining and Undefining<a class="headerlink
   (let [id (atom 0)]
     (fn []
       [:div 
-       [:a {:on-click #(do (rf/dispatch [::add-item (inc @id)])
-                           (swap! id inc))} "Add"] " " 
-       [:a {:on-click #(do (rf/dispatch [::delete-item @id])
-                           (swap! id dec))} "Delete"] " "])))
+       [:span {:style clickable
+               :on-click #(do (rf/dispatch [::add-item (inc @id)])
+                              (swap! id inc))} "Add"] " " 
+       [:span {:style clickable
+               :on-click #(do (rf/dispatch [::delete-item @id])
+                              (swap! id dec))} "Delete"] " "])))
 
 (defonce item-counter-basic-root
   (rdc/create-root (js/document.getElementById "item-counter-basic")))
@@ -2151,10 +2162,12 @@ <h2 id="redefining-and-undefining">Redefining and Undefining<a class="headerlink
 (defn requirement-picker []
   [:<>
    "Max items: "
-   [:input {:style {:background "lightgrey"}
-            :type "number"
-            :on-change #(rf/dispatch [:change-requirements
-                                      {:max-items (-> % .-target .-value)}])}]])
+   [:input
+    {:style {:background "lightgrey"}
+     :type "number"
+     :on-change #(rf/dispatch
+                  [:change-requirements
+                   {:max-items (-> % .-target .-value)}])}]])
 </div>
 
 <p>And a corresponding event, which triggers our <code>:reg-flow</code> effect.</p>