replace placeholder control panel with fixed bottom bar and About modal

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

frontend/resources/public/site.css

@@ -2,6 +2,7 @@ body {
   font-family: 'Helvetica Neue', Verdana, Helvetica, Arial, sans-serif;
   max-width: 600px;
   margin: 0;
+  padding-bottom: 44px;
   -webkit-font-smoothing: antialiased;
   font-size: 1.125em;
   color: #333;
@@ -75,96 +76,79 @@ td input:not(:focus) {
 }
 
 
-#controls {
-    --controls-width: 75px;
-    --controls-padding: 5px;
-    --controls-opener-width: 15px;
-}
-#controls > div, #controls > button {
+/* ── Control bar ── */
+#control-bar {
     position: fixed;
-    overflow: hidden;
-}
-/* TODO: design square logo for microtables */
-#main-logo {
-    background-color: lightblue;
-    z-index: 999;
-    left: 0;
     bottom: 0;
-    padding: var(--controls-padding);
-    height: var(--controls-width);
-    width: var(--controls-width);
-    font-size: xxx-large;
-    font-weight: bold;
-    text-align: center;
-    border: 1px solid black;
-}
-#main-logo > img {
-    width: 100%;
-    height:100%;
-}
-#left-controls-button, #bottom-controls-button {
-    border: 1px solid black;
-    border-radius: 2px;
-    text-align: center;
-    font-weight: bold;
-    font-size: xx-large;
-    background-color: white;
-    cursor: pointer;
-    user-select: none;
-}
-#left-controls-button {
     left: 0;
-    width: calc(var(--controls-width) + 2 * var(--controls-padding) - 1px);
-    height: var(--controls-opener-width);
+    right: 0;
+    height: 44px;
+    display: flex;
+    align-items: center;
+    background: #f5f5f5;
+    border-top: 1px solid #ccc;
     z-index: 999;
-    bottom: calc(var(--controls-width) + 2 * var(--controls-padding));
-    line-height: 3px;
-    text-align: right;
 }
-#bottom-controls-button {
-    bottom: 0;
-    height: calc(var(--controls-width) + 2 * var(--controls-padding) - 1px);
-    width: var(--controls-opener-width);
-    z-index: 999;
-    left: calc(var(--controls-width) + 2 * var(--controls-padding));
+
+#bar-logo {
+    height: 44px;
+    width: 44px;
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-right: 1px solid #ccc;
 }
-#controls-left {
-    background-color: pink;
-    z-index: 998;
-    top: 0;
-    left: calc(-1 * var(--controls-width) - 2 * var(--controls-padding));
-    padding: 5px;
-    height: calc(100vh - var(--controls-padding));
-    width: var(--controls-width);
-    border-right: 1px solid black;
+#bar-logo img {
+    width: 100%;
+    height: 100%;
 }
-/*TODO: link left controls with position of the whole table*/
-#controls-left.open {
-    left: 0;
+
+.bar-btn {
+    height: 100%;
+    padding: 0 16px;
+    border: none;
+    border-right: 1px solid #ccc;
+    background: none;
+    cursor: pointer;
+    font-size: 0.9em;
+    color: #333;
 }
-#controls-bottom {
-    background-color: lightblue;
-    z-index: 998;
-    left: 0;
-    bottom: calc(-1 * var(--controls-width) - 2 * var(--controls-padding));
-    height: var(--controls-width);
-    padding: var(--controls-padding);
-    padding-left: calc(var(--controls-width) + 3 * var(--controls-padding) + var(--controls-opener-width));
-    width: calc(100vw - var(--controls-width) - 4 * var(--controls-padding) - var(--controls-opener-width));
-    border-top: 1px solid black;
-}
-#controls-bottom.open {
-    bottom: 0;
+.bar-btn:hover {
+    background: #e8e8e8;
 }
 
-
-.control-group {
-    float: left;
-    margin: 5px;
-    background-color: lightgreen;
+/* ── About modal ── */
+#about-modal-overlay {
+    position: fixed;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.45);
+    z-index: 1000;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 16px;
+}
+#about-modal {
+    background: white;
+    border-radius: 8px;
+    padding: 24px;
+    max-width: 480px;
+    width: 100%;
+    max-height: 80vh;
+    overflow-y: auto;
+    box-shadow: 0 4px 24px rgba(0,0,0,0.2);
+}
+#about-modal button {
+    margin-top: 12px;
+    padding: 8px 20px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    background: #f5f5f5;
+    cursor: pointer;
 }
-.control-label {
-    font-size: x-small;
+#about-modal button:hover {
+    background: #e0e0e0;
 }
 
 

frontend/src/cljs/microtables_frontend/views/control_panel.cljs

@@ -3,62 +3,21 @@
    [microtables-frontend.events :as events]
    [re-frame.core :as re-frame]))
 
-(defn- extend-range
-  []
-  [:div {:class "control-group"}
-   [:div {:class "control-label"}
-    "Extend Range"]
-   [:button "-cols"]
-   [:input]
-   [:button]])
-
-(defn- controls []
-  [:div
-   ;[extend-range]
-   ;extend range (number field, then shrink/left/up and expand/right/down buttons on either side)
-   ;fill range (single tap, single column/row fill? number field and button?)
-   ;move range (designate new "top-left corner" cell for range, figure out overwriting destination cells)
-   ;empty range (delete contents, re-evaluate)
-   ;delete range (figure out how to move cells over)
-   ;copy range (figure out clipboard)
-   [:div
-    {:class "control-group"}
-    #_[:a ;TODO: consider making the "About" info an overlay rather than a link
-       {:href "/about.html"
-        :target "_blank"}
-       "About"]
-    "This is a demo version only, and still in development. Nothing gets saved for the moment."
-    [:br]
-    "Try adding values (plain numbers) or formulae (ex: \"=B2 + sum(A1:A6)\") into the cells."
-    [:br]
-    "Created by "
-    [:a
-     {:href "https://betweentwocommits.com/about"
-      :target "_blank"}
-     "Brandon Wong"]]])
+(defn- about-modal []
+  [:div#about-modal-overlay
+   {:on-click #(re-frame/dispatch [::events/set-controls-state nil])}
+   [:div#about-modal
+    {:on-click #(.stopPropagation %)}
+    [:p "This is a demo version only, and still in development. Nothing gets saved for the moment."]
+    [:p "Try adding values (plain numbers) or formulae (ex: \"=B2 + sum(A1:A6)\") into the cells."]
+    [:p "Created by "
+     [:a {:href "https://betweentwocommits.com/about" :target "_blank"} "Brandon Wong"]]
+    [:button {:on-click #(re-frame/dispatch [::events/set-controls-state nil])} "Close"]]])
 
 (defn control-panel [state]
-  [:div
-   {:id "controls"}
-   [:div
-    ;TODO: link left controls with position of the whole table
-    {:id "controls-left"
-     :class (if (= state :left) "open" "")}
-    [controls]]
-   [:div
-    {:id "controls-bottom"
-     :class (if (= state :bottom) "open" "")}
-    [controls]]
-   ;←↑→↓
-   [:div
-    {:id "left-controls-button"
-     :on-click #(re-frame/dispatch [::events/set-controls-state (if (= state :left) nil :left)])}
-    (if (= state :left) "←" "→")]
-   [:div
-    {:id "bottom-controls-button"
-     :on-click #(re-frame/dispatch [::events/set-controls-state (if (= state :bottom) nil :bottom)])}
-    (if (= state :bottom) "↓" "↑")]
-   [:div
-    {:id "main-logo"
-     :title "Microtables"}
-    [:img {:src "logo.svg"}]]])
+  [:div#control-bar
+   [:div#bar-logo [:img {:src "logo.svg" :alt "Microtables"}]]
+   [:button.bar-btn
+    {:on-click #(re-frame/dispatch [::events/set-controls-state :about])}
+    "About"]
+   (when (= state :about) [about-modal])])