Fix responsive design on session page

GaiwanTeam · Sep 4, 2024 · d95677b · d95677b
1 parent da71648
commit d95677b
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 11 deletions.
diff --git a/resources/public/css/styles.css b/resources/public/css/styles.css
@@ -607,8 +607,17 @@ body {
 }
 
 .sessions-session_detail .header-row .title {
-  font-size: var(--size-8);
+  font-size: var(--size-7);
   text-wrap: wrap;
+  word-break: break-word;
+}
+
+@media (min-width: 1024px) {
+
+  .sessions-session_detail .header-row .title {
+    font-size: var(--size-8);
+  }
+
 }
 
 .sessions-session_detail .header-row .type {
@@ -641,33 +650,65 @@ body {
 
 .sessions-session_detail .three-box {
   position: relative;
-  font-size: var(--size-6);
   margin-top: var(--size-4);
   margin-bottom: var(--size-4);
   display: flex;
   padding: var(--size-4);
   gap: var(--size-4);
+  display: flex;
+  flex-direction: column;
+}
+
+@media (min-width: 1024px) {
+
+  .sessions-session_detail .three-box {
+    display: flex;
+    flex-direction: row;
+  }
+
 }
 
 .sessions-session_detail .three-box >div {
   border-width: 8px;
   font-weight: 600;
   padding: var(--size-4);
-  width: 33%;
   text-align: center;
 }
 
+@media (min-width: 1024px) {
+
+  .sessions-session_detail .three-box >div {
+    width: 33%;
+  }
+
+}
+
 .sessions-session_detail .three-box >div >.small {
-  font-size: var(--size-3);
   text-transform: uppercase;
   letter-spacing: 0.1em;
 }
 
+@media (min-width: 1024px) {
+
+  .sessions-session_detail .three-box >div >.small {
+    font-size: var(--size-3);
+  }
+
+}
+
 .sessions-session_detail .three-box >div >.large {
-  font-size: var(--size-7);
+  font-size: var(--size-6);
   font-weight: 700;
 }
 
+@media (min-width: 1024px) {
+
+  .sessions-session_detail .three-box >div >.large {
+    font-size: var(--size-7);
+  }
+
+}
+
 .sessions-session_detail .three-box:before {
   width: 90%;
   top: 0;

diff --git a/src/co/gaiwan/compass/html/sessions.clj b/src/co/gaiwan/compass/html/sessions.clj
@@ -186,7 +186,10 @@
   [capacity-gauge :w-100px]
   :mt-8
   [:.header-row :flex :gap-2 :mb-8
-   [:.title :font-size-8 {:text-wrap :wrap}]
+   [:.title :lg:font-size-8
+    :font-size-7
+    {:text-wrap :wrap
+     :word-break :break-word}]
    [:.header-row-text]
    [:.type
     {:background --session-type-color}
@@ -198,11 +201,10 @@
    [:>p :font-semibold]
    [:.datetime :font-size-7 :font-bold]]
   [:.three-box #_{:background t/--activity-color}
-   :relative
-   :font-size-6 :my-4 :flex :p-4 :gap-4
-   [:>div :border-8 :font-semibold :p-4 :w-33% :text-center
-    [:>.small :font-size-3 :uppercase :tracking-widest]
-    [:>.large :font-size-7 :font-bold]]
+   :relative :my-4 :flex :p-4 :gap-4 :lg:flex-row :flex-col
+   [:>div :border-8 :font-semibold :p-4 :lg:w-33% :text-center
+    [:>.small :lg:font-size-3 :uppercase :tracking-widest]
+    [:>.large :font-size-6 :lg:font-size-7 :font-bold]]
    [:&:before
     {:content "''"
      :position "absolute"