Skip to content

Commit 3161ce6

Browse files
burincburinc
committed
Make trivia game responsive for mobile devices
- Add CSS media queries for tablet and mobile - Stack image and questions vertically on small screens - Adjust font sizes and button padding for mobile - Optimize image heights for portrait mode - Make touch targets more accessible
1 parent b4a887a commit 3161ce6

1 file changed

Lines changed: 249 additions & 31 deletions

File tree

‎src/scittle/conj_2025/trivia_slideshow.cljs‎

Lines changed: 249 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -727,37 +727,255 @@
727727
"Main trivia game component"
728728
[]
729729
(let [{:keys [game-complete?]} @game-state]
730-
[:div {:style {:padding "20px"
731-
:max-width "1200px"
732-
:margin "0 auto"
733-
:font-family "system-ui, -apple-system, sans-serif"
734-
:background "#fafafa"
735-
:min-height "80vh"}}
736-
737-
(if game-complete?
738-
[game-summary]
739-
[:div
740-
[:div {:style {:text-align "center"
741-
:margin-bottom "30px"}}
742-
[:h1 {:style {:color "#4caf50"
743-
:font-size "32px"
744-
:margin-bottom "10px"}}
745-
"🎯 Clojure Conj 2025 Epic Trivia"]
746-
[:p {:style {:color "#666"
747-
:font-size "16px"}}
748-
"Two Lies and a Truth Edition"]]
749-
750-
[:div {:style {:background "white"
751-
:border-radius "16px"
752-
:box-shadow "0 4px 16px rgba(0,0,0,0.1)"
753-
:overflow "hidden"}}
754-
[:div {:style {:display "flex"
755-
:flex-wrap "wrap"
756-
:min-height "400px"}}
757-
[image-display (:image (current-slide-data))]
758-
[trivia-question-panel]]
759-
760-
[navigation-controls]]])]))
730+
[:div
731+
;; Add responsive styles
732+
[:style "
733+
.trivia-container {
734+
padding: 20px;
735+
max-width: 1200px;
736+
margin: 0 auto;
737+
font-family: system-ui, -apple-system, sans-serif;
738+
background: #fafafa;
739+
min-height: 80vh;
740+
}
741+
.trivia-content {
742+
display: flex;
743+
flex-wrap: wrap;
744+
min-height: 400px;
745+
}
746+
.trivia-image {
747+
flex: 1;
748+
display: flex;
749+
align-items: center;
750+
justify-content: center;
751+
padding: 20px;
752+
min-width: 300px;
753+
}
754+
.trivia-image img {
755+
max-width: 100%;
756+
max-height: 500px;
757+
border-radius: 12px;
758+
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
759+
object-fit: contain;
760+
image-orientation: from-image;
761+
}
762+
.trivia-questions {
763+
flex: 1;
764+
display: flex;
765+
flex-direction: column;
766+
padding: 20px;
767+
max-width: 600px;
768+
min-width: 300px;
769+
}
770+
771+
/* Mobile styles */
772+
@media (max-width: 768px) {
773+
.trivia-container {
774+
padding: 10px;
775+
}
776+
.trivia-content {
777+
flex-direction: column;
778+
min-height: auto;
779+
}
780+
.trivia-image {
781+
width: 100%;
782+
padding: 10px;
783+
min-width: unset;
784+
}
785+
.trivia-image img {
786+
max-height: 300px;
787+
}
788+
.trivia-questions {
789+
width: 100%;
790+
padding: 10px;
791+
max-width: none;
792+
min-width: unset;
793+
}
794+
.trivia-questions h3 {
795+
font-size: 20px !important;
796+
}
797+
.trivia-option-button {
798+
padding: 15px !important;
799+
font-size: 14px !important;
800+
}
801+
.trivia-nav {
802+
flex-wrap: wrap;
803+
padding: 10px !important;
804+
gap: 10px !important;
805+
}
806+
.trivia-nav button {
807+
padding: 10px 20px !important;
808+
font-size: 14px !important;
809+
}
810+
.game-title {
811+
font-size: 24px !important;
812+
}
813+
.game-subtitle {
814+
font-size: 14px !important;
815+
}
816+
}
817+
818+
/* Very small mobile */
819+
@media (max-width: 480px) {
820+
.trivia-image img {
821+
max-height: 200px;
822+
}
823+
.trivia-questions h3 {
824+
font-size: 18px !important;
825+
}
826+
.trivia-option-button {
827+
padding: 12px !important;
828+
font-size: 13px !important;
829+
}
830+
.game-title {
831+
font-size: 20px !important;
832+
}
833+
}"]
834+
835+
[:div {:class "trivia-container"}
836+
(if game-complete?
837+
[game-summary]
838+
[:div
839+
[:div {:style {:text-align "center"
840+
:margin-bottom "30px"}}
841+
[:h1 {:class "game-title"
842+
:style {:color "#4caf50"
843+
:font-size "32px"
844+
:margin-bottom "10px"}}
845+
"🎯 Clojure Conj 2025 Epic Trivia"]
846+
[:p {:class "game-subtitle"
847+
:style {:color "#666"
848+
:font-size "16px"}}
849+
"Two Lies and a Truth Edition"]]
850+
851+
[:div {:style {:background "white"
852+
:border-radius "16px"
853+
:box-shadow "0 4px 16px rgba(0,0,0,0.1)"
854+
:overflow "hidden"}}
855+
[:div {:class "trivia-content"}
856+
;; Image section
857+
[:div {:class "trivia-image"}
858+
[:img {:src (:image (current-slide-data))
859+
:alt "Conference photo"}]]
860+
861+
;; Questions section
862+
[:div {:class "trivia-questions"}
863+
(let [{:keys [question options correct-index explanation]} (current-slide-data)
864+
{:keys [show-result current-slide answers]} @game-state
865+
selected-answer (get-answer-for-slide current-slide)]
866+
[:<>
867+
[:h3 {:style {:margin-bottom "20px"
868+
:font-size "24px"
869+
:color "#333"}}
870+
question]
871+
872+
(when-not show-result
873+
[:p {:style {:margin-bottom "20px"
874+
:color "#666"
875+
:font-size "14px"
876+
:font-style "italic"}}
877+
"Two statements are lies, one is the truth. Pick the truth!"])
878+
879+
[:div {:style {:margin-bottom "20px"}}
880+
(for [[idx option] (map-indexed vector options)]
881+
^{:key idx}
882+
(let [is-correct? (= idx correct-index)
883+
is-selected? (= selected-answer idx)
884+
button-color (cond
885+
(and show-result is-selected? is-correct?) "#4caf50"
886+
(and show-result is-selected? (not is-correct?)) "#f44336"
887+
(and show-result is-correct?) "#81c784"
888+
:else "#e0e0e0")
889+
text-color (if (and show-result (or is-selected? is-correct?))
890+
"white"
891+
"#333")]
892+
[:button {:class "trivia-option-button"
893+
:on-click (when-not show-result
894+
#(handle-answer idx))
895+
:disabled show-result
896+
:style {:padding "20px"
897+
:margin "10px 0"
898+
:width "100%"
899+
:background button-color
900+
:color text-color
901+
:border "none"
902+
:border-radius "8px"
903+
:cursor (if show-result "default" "pointer")
904+
:font-size "16px"
905+
:font-weight (if (and show-result is-correct?) "600" "400")
906+
:text-align "left"
907+
:transition "all 0.3s ease"
908+
:box-shadow (cond
909+
(and show-result is-correct?) "0 4px 12px rgba(76, 175, 80, 0.3)"
910+
(and show-result is-selected? (not is-correct?)) "0 4px 12px rgba(244, 67, 54, 0.3)"
911+
:else "0 2px 4px rgba(0,0,0,0.1)")}}
912+
option
913+
(when (and show-result is-correct?)
914+
[:span {:style {:margin-left "10px"}} "✓"])
915+
(when (and show-result is-selected? (not is-correct?))
916+
[:span {:style {:margin-left "10px"}} "✗"])]))]
917+
918+
(when show-result
919+
[:div {:style {:padding "15px"
920+
:background (if (= show-result :correct) "#e8f5e9" "#ffebee")
921+
:border-radius "8px"
922+
:margin-top "15px"}}
923+
[:p {:style {:margin "0"
924+
:color (if (= show-result :correct) "#2e7d32" "#c62828")
925+
:font-weight "600"
926+
:margin-bottom "10px"}}
927+
(if (= show-result :correct)
928+
"🎉 Correct! You found the truth!"
929+
"❌ Not quite...")]
930+
[:p {:style {:margin "0"
931+
:color "#555"
932+
:font-size "14px"}}
933+
explanation]])])]]
934+
935+
;; Navigation
936+
(let [{:keys [current-slide show-result]} @game-state]
937+
[:div {:class "trivia-nav"
938+
:style {:display "flex"
939+
:justify-content "space-between"
940+
:align-items "center"
941+
:padding "20px"
942+
:gap "20px"}}
943+
[:button {:on-click previous-slide
944+
:disabled (= current-slide 0)
945+
:style {:padding "12px 24px"
946+
:background (if (= current-slide 0) "#e0e0e0" "#2196f3")
947+
:color (if (= current-slide 0) "#999" "white")
948+
:border "none"
949+
:border-radius "6px"
950+
:cursor (if (= current-slide 0) "not-allowed" "pointer")
951+
:font-weight "600"
952+
:font-size "16px"}}
953+
"← Previous"]
954+
955+
[:div {:style {:text-align "center"}}
956+
[:p {:style {:margin "0"
957+
:font-size "18px"
958+
:font-weight "600"
959+
:color "#333"}}
960+
(str "Slide " (inc current-slide) " of " (total-slides))]
961+
[:p {:style {:margin "5px 0 0 0"
962+
:font-size "14px"
963+
:color "#666"}}
964+
(str "Score: " (:score @game-state) "/" (total-slides))]]
965+
966+
[:button {:on-click next-slide
967+
:disabled (nil? show-result)
968+
:style {:padding "12px 24px"
969+
:background (if show-result "#2196f3" "#e0e0e0")
970+
:color (if show-result "white" "#999")
971+
:border "none"
972+
:border-radius "6px"
973+
:cursor (if show-result "pointer" "not-allowed")
974+
:font-weight "600"
975+
:font-size "16px"}}
976+
(if (= current-slide (dec (total-slides)))
977+
"Finish →"
978+
"Next →")]])]])]]))
761979

762980
;; ============================================================================
763981
;; App Initialization

0 commit comments

Comments
 (0)