feat: better problems modal (#73)

* feat: better problems modal * add persistent close button * show next problem button when tests pass * show return button when tests fail * feat: re-add close and cta to modal * fix: align center settings checkboxes, add spacing --------- Co-authored-by: Haris Muhammad <[email protected]>
oxalorg · Sep 1, 2023 · 05785a9 · 05785a9
1 parent 4ef4d33
commit 05785a9
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 7 deletions.
diff --git a/src/app/editor_settings.cljs b/src/app/editor_settings.cljs
@@ -17,7 +17,7 @@
      [:h4 "Editor settings"]
      ^{:key "settings"}
      [:div
-      [:div {:style {:display "flex"}}
+      [:div {:style {:display "flex" :align-items "center" :gap 6}}
        [:input {:type "checkbox"
                 :id "checkbox-editor-is-extended-mode"
                 :checked (= :extended @editor-extension-mode)

diff --git a/src/app/modal.cljs b/src/app/modal.cljs
@@ -1,4 +1,5 @@
-(ns app.modal)
+(ns app.modal
+  (:require [goog.string :refer [unescapeEntities]]))
 
 (def modal-style {:position "fixed",
                   :width "700px"
@@ -11,11 +12,23 @@
                   :boxShadow "0 0 0 100vw rgba(0, 0, 0, 0.5)",
                   :zIndex "9999"})
 
+(defn close-button [on-close]
+  [:button {:aria-label "Close Dialog"
+            :style {:font-size "2.5rem"
+                    :padding "unset"
+                    :background "unset"
+                    :border "unset"
+                    :color "#000"
+                    :margin-top "1rem"
+                    :margin-bottom "-3rem"}
+            :on-click on-close}
+   (unescapeEntities "&times")])
+
 (defn box [{:keys [is-open on-close]} & children]
   (when @is-open
     [:div {:style modal-style}
-     [:div {:style {:padding "0px 30px 20px 30px"}}
-      children
-      [:button {:on-click on-close} "Close"]]]))
+     [:div {:style {:display "flex" :flex-direction "row" :justify-content "flex-end" :padding-right "2rem"}}
+      [close-button on-close]]
+     [:div {:style {:padding "0px 30px 30px 30px"}} children]]))
 
 
diff --git a/src/app/problem.cljs b/src/app/problem.cljs
@@ -108,6 +108,7 @@
                solution-attempted (r/atom false)
                tests (:tests problem)]
     (let [next-prob (next-problem id)
+          next-prob-href (state/href :problem/item {:id (:id next-prob)})
           on-run (fn []
                    (let [editor-value (get-editor-value)
                          _ (reset! code editor-value)
@@ -163,8 +164,9 @@
         [:div
          [:p {:on-click #(reset! success-modal-is-open false)}
           "Next problem "
-          [:a {:href (state/href :problem/item {:id (:id next-prob)})}
-           (str "#" (:id next-prob) " " (:title next-prob))]]]]])))
+          [:a {:href next-prob-href}
+           (str "#" (:id next-prob) " " (:title next-prob))]]]
+        [:button {:on-click #(set! js/window.location next-prob-href)} "Next Problem"]]])))
 
 (defn view [_]
   (fn [{:keys [path-params] :as _props}]