Skip to content

Commit 519c827

Browse files
burincburinc
committed
Fix the in-active navigation issue
1 parent b7e6932 commit 519c827

File tree

1 file changed

+146
-89
lines changed

1 file changed

+146
-89
lines changed

‎src/scittle/conj_2025/trivia_slideshow.cljs‎

Lines changed: 146 additions & 89 deletions
Original file line numberDiff line numberDiff line change
@@ -873,98 +873,155 @@
873873
(defn slideshow-viewer
874874
"Simple slideshow viewer without game mechanics"
875875
[]
876-
(let [{:keys [current-slide]} @game-state
877-
{:keys [image]} (current-slide-data)]
878-
[:div {:class "trivia-container"}
879-
;; Title
880-
[:div {:style {:text-align "center"
881-
:margin-bottom "30px"}}
882-
[:h1 {:class "game-title"
883-
:style {:color "#2196f3"
884-
:font-size "32px"
885-
:margin-bottom "10px"}}
886-
"🖼️ Clojure Conj 2025 Photo Gallery"]
887-
[:p {:class "game-subtitle"
888-
:style {:color "#666"
889-
:font-size "16px"}}
890-
"Browse through conference memories"]]
891-
892-
[:div {:class "trivia-card"}
893-
;; Image section - full width
894-
[:div {:style {:display "flex"
895-
:align-items "center"
896-
:justify-content "center"
897-
:padding "40px"
898-
:min-height "500px"}}
899-
[:img {:src image
900-
:alt "Conference photo"
901-
:style {:max-width "100%"
902-
:max-height "600px"
903-
:border-radius "12px"
904-
:box-shadow "0 4px 12px rgba(0,0,0,0.15)"
905-
:object-fit "contain"
906-
:image-orientation "from-image"}}]]
907-
908-
;; Navigation
909-
[:div {:class "trivia-nav"
910-
:style {:padding "20px"
911-
:border-top "1px solid #e0e0e0"}}
912-
[:div {:style {:text-align "center"
913-
:margin-bottom "15px"}}
914-
[:p {:class "trivia-slide-info"}
915-
(str "Photo " (inc current-slide) " of " (total-slides))]]
916-
917-
[:div {:style {:display "flex"
918-
:justify-content "space-between"
919-
:gap "15px"}}
920-
[:button {:on-click previous-slide
921-
:disabled (= current-slide 0)
922-
:style {:padding "12px 24px"
923-
:background (if (= current-slide 0) "#e0e0e0" "#2196f3")
924-
:color (if (= current-slide 0) "#999" "white")
925-
:border "none"
926-
:border-radius "6px"
927-
:cursor (if (= current-slide 0) "not-allowed" "pointer")
928-
:font-weight "600"
929-
:font-size "16px"
930-
:flex "1"}}
931-
"← Previous"]
932-
933-
[:button {:on-click back-to-menu
934-
:style {:padding "12px 24px"
935-
:background "#757575"
936-
:color "white"
937-
:border "none"
938-
:border-radius "6px"
876+
(let [lightbox-open? (r/atom false)]
877+
(fn []
878+
(let [{:keys [current-slide]} @game-state
879+
{:keys [image]} (current-slide-data)]
880+
[:div {:class "trivia-container"}
881+
;; Lightbox overlay
882+
(when @lightbox-open?
883+
[:div {:style {:position "fixed"
884+
:top 0
885+
:left 0
886+
:right 0
887+
:bottom 0
888+
:background "rgba(0,0,0,0.95)"
889+
:z-index 9999
890+
:display "flex"
891+
:align-items "center"
892+
:justify-content "center"
939893
:cursor "pointer"
940-
:font-weight "600"
941-
:font-size "16px"
942-
:flex "0 0 auto"}}
943-
"🏠 Menu"]
944-
945-
(if (= current-slide (dec (total-slides)))
946-
[:button {:on-click back-to-menu
947-
:style {:padding "12px 24px"
948-
:background "#4caf50"
949-
:color "white"
950-
:border "none"
951-
:border-radius "6px"
952-
:cursor "pointer"
953-
:font-weight "600"
954-
:font-size "16px"
955-
:flex "1"}}
956-
"✓ Finish"]
957-
[:button {:on-click next-slide
958-
:style {:padding "12px 24px"
959-
:background "#2196f3"
960-
:color "white"
894+
:animation "fadeIn 0.2s ease"}
895+
:on-click #(reset! lightbox-open? false)}
896+
[:div {:style {:position "relative"
897+
:max-width "95vw"
898+
:max-height "95vh"}}
899+
[:img {:src image
900+
:alt "Conference photo - full size"
901+
:style {:max-width "95vw"
902+
:max-height "95vh"
903+
:object-fit "contain"
904+
:image-orientation "from-image"}}]
905+
[:div {:style {:position "absolute"
906+
:top "10px"
907+
:right "10px"
908+
:background "rgba(255,255,255,0.9)"
909+
:color "#333"
961910
:border "none"
962-
:border-radius "6px"
911+
:border-radius "50%"
912+
:width "40px"
913+
:height "40px"
914+
:display "flex"
915+
:align-items "center"
916+
:justify-content "center"
917+
:font-size "24px"
963918
:cursor "pointer"
964-
:font-weight "600"
965-
:font-size "16px"
966-
:flex "1"}}
967-
"Next →"])]]]]))
919+
:font-weight "bold"}}
920+
"×"]]])
921+
922+
;; Title
923+
[:div {:style {:text-align "center"
924+
:margin-bottom "30px"}}
925+
[:h1 {:class "game-title"
926+
:style {:color "#2196f3"
927+
:font-size "32px"
928+
:margin-bottom "10px"}}
929+
"🖼️ Clojure Conj 2025 Photo Gallery"]
930+
[:p {:class "game-subtitle"
931+
:style {:color "#666"
932+
:font-size "16px"}}
933+
"Browse through conference memories"]]
934+
935+
[:div {:class "trivia-card"}
936+
;; Image section - full width
937+
[:div {:style {:display "flex"
938+
:align-items "center"
939+
:justify-content "center"
940+
:padding "40px"
941+
:min-height "500px"}}
942+
[:img {:src image
943+
:alt "Conference photo"
944+
:on-click #(reset! lightbox-open? true)
945+
:style {:max-width "100%"
946+
:max-height "600px"
947+
:border-radius "12px"
948+
:box-shadow "0 4px 12px rgba(0,0,0,0.15)"
949+
:object-fit "contain"
950+
:image-orientation "from-image"
951+
:cursor "pointer"
952+
:transition "transform 0.2s ease, box-shadow 0.2s ease"}
953+
:on-mouse-enter #(do
954+
(set! (.. % -target -style -transform) "scale(1.02)")
955+
(set! (.. % -target -style -boxShadow) "0 8px 24px rgba(0,0,0,0.25)"))
956+
:on-mouse-leave #(do
957+
(set! (.. % -target -style -transform) "scale(1)")
958+
(set! (.. % -target -style -boxShadow) "0 4px 12px rgba(0,0,0,0.15)"))}]]
959+
960+
;; Navigation
961+
[:div {:class "trivia-nav"
962+
:style {:padding "20px"
963+
:border-top "1px solid #e0e0e0"}}
964+
[:div {:style {:text-align "center"
965+
:margin-bottom "15px"}}
966+
[:p {:class "trivia-slide-info"}
967+
(str "Photo " (inc current-slide) " of " (total-slides))]
968+
[:p {:style {:margin "5px 0 0 0"
969+
:font-size "13px"
970+
:color "#999"
971+
:font-style "italic"}}
972+
"Click image to view full size"]]
973+
974+
[:div {:style {:display "flex"
975+
:justify-content "space-between"
976+
:gap "15px"}}
977+
[:button {:on-click previous-slide
978+
:disabled (= current-slide 0)
979+
:style {:padding "12px 24px"
980+
:background (if (= current-slide 0) "#e0e0e0" "#2196f3")
981+
:color (if (= current-slide 0) "#999" "white")
982+
:border "none"
983+
:border-radius "6px"
984+
:cursor (if (= current-slide 0) "not-allowed" "pointer")
985+
:font-weight "600"
986+
:font-size "16px"
987+
:flex "1"}}
988+
"← Previous"]
989+
990+
[:button {:on-click back-to-menu
991+
:style {:padding "12px 24px"
992+
:background "#757575"
993+
:color "white"
994+
:border "none"
995+
:border-radius "6px"
996+
:cursor "pointer"
997+
:font-weight "600"
998+
:font-size "16px"
999+
:flex "0 0 auto"}}
1000+
"🏠 Menu"]
1001+
1002+
(if (= current-slide (dec (total-slides)))
1003+
[:button {:on-click back-to-menu
1004+
:style {:padding "12px 24px"
1005+
:background "#4caf50"
1006+
:color "white"
1007+
:border "none"
1008+
:border-radius "6px"
1009+
:cursor "pointer"
1010+
:font-weight "600"
1011+
:font-size "16px"
1012+
:flex "1"}}
1013+
"✓ Finish"]
1014+
[:button {:on-click next-slide
1015+
:style {:padding "12px 24px"
1016+
:background "#2196f3"
1017+
:color "white"
1018+
:border "none"
1019+
:border-radius "6px"
1020+
:cursor "pointer"
1021+
:font-weight "600"
1022+
:font-size "16px"
1023+
:flex "1"}}
1024+
"Next →"])]]]]))))
9681025

9691026
;; ============================================================================
9701027
;; Main Component

0 commit comments

Comments
 (0)