From 40605820b5347b3df627b07824fe77c9bd404dc3 Mon Sep 17 00:00:00 2001
From: Yi-Jyun Pan <pan93412@gmail.com>
Date: Fri, 4 Oct 2024 02:03:13 +0800
Subject: [PATCH] refactor: RWD optimization

---
 assets/styles/app.scss             | 14 +++++++++++---
 templates/overview/index.html.twig | 16 ++++++++--------
 templates/profile/index.html.twig  |  6 +++---
 3 files changed, 22 insertions(+), 14 deletions(-)

diff --git a/assets/styles/app.scss b/assets/styles/app.scss
index d180fb1..4a60c1f 100644
--- a/assets/styles/app.scss
+++ b/assets/styles/app.scss
@@ -328,9 +328,17 @@ ul.credit {
   display: grid;
   gap: 3rem;
   grid-template:
-    "hello-text          hello-text          hello-text   hello-text" auto
-    "weekly-metrics      weekly-metrics      leaderboard  leaderboard" 1fr
-    "historic-statistics historic-statistics leaderboard  leaderboard" 1fr;
+    "hello-text" auto
+    "weekly-metrics" auto
+    "historic-statistics" auto
+    "leaderboard" auto;
+
+  @media (min-width: 768px) {
+    grid-template:
+      "hello-text          hello-text          hello-text   hello-text" auto
+      "weekly-metrics      weekly-metrics      leaderboard  leaderboard" 1fr
+      "historic-statistics historic-statistics leaderboard  leaderboard" 1fr;
+  }
 
   &__hello-text {
     grid-area: hello-text;
diff --git a/templates/overview/index.html.twig b/templates/overview/index.html.twig
index d0d7ce3..f67fc1f 100644
--- a/templates/overview/index.html.twig
+++ b/templates/overview/index.html.twig
@@ -13,15 +13,15 @@
     <section class="app-overview-dashboard__weekly-metrics">
         <h3 class="mb-3">每週學習概況</h3>
 
-        <div class="row gutter-2">
-            <div class="col-6">
-                <div class="week-overview__cards vstack gap-1">
+        <div class="row g-2">
+            <div class="col-12 col-md-6">
+                <div class="vstack gap-1">
                     <turbo-frame id="solved_questions" src="{{ path('app_overview_cards_solved_questions') }}"></turbo-frame>
                     <turbo-frame id="points" src="{{ path('app_overview_cards_points') }}"></turbo-frame>
                     <turbo-frame id="level" src="{{ path('app_overview_cards_level') }}"></turbo-frame>
                 </div>
             </div>
-            <div class="col-6">
+            <div class="col-12 col-md-6">
                 <turbo-frame id="events_daily_chart" src="{{ path('app_overview_cards_events_daily_chart') }}"></turbo-frame>
             </div>
         </div>
@@ -30,15 +30,15 @@
     <section class="app-overview-dashboard__historic-statistics">
         <h3 class="mb-3">學習歷程</h3>
 
-        <div class="historic-statistics__main row gutter-2">
-            <div class="col-6">
-                <div class="historic-statistics__cards vstack gap-1">
+        <div class="row g-5 g-md-2">
+            <div class="col-12 col-md-6">
+                <div class="vstack gap-1">
                     <turbo-frame id="solved_questions" src="{{ path('app_overview_cards_solved_questions') }}"></turbo-frame>
                     <turbo-frame id="events_count" src="{{ path('app_overview_cards_events_count') }}"></turbo-frame>
                     <turbo-frame id="questions_count" src="{{ path('app_overview_cards_questions_count') }}"></turbo-frame>
                 </div>
             </div>
-            <div class="col-6">
+            <div class="col-12 col-md-6t">
                 <turbo-frame id="events_history" src="{{ path('app_overview_cards_events_history') }}"></turbo-frame>
             </div>
         </div>
diff --git a/templates/profile/index.html.twig b/templates/profile/index.html.twig
index ba73f51..4809fd2 100644
--- a/templates/profile/index.html.twig
+++ b/templates/profile/index.html.twig
@@ -4,8 +4,8 @@
 {% block title %}個人資料{% endblock %}
 
 {% block app %}
-    <div class="profile d-flex row">
-        <turbo-frame id="app-profile-information" class="profile__information col gr-5">
+    <div class="profile d-flex row g-5">
+        <turbo-frame id="app-profile-information" class="profile__information col-12 col-md-6">
             <h2 class="mb-3">
                 {{ user.name }}
 
@@ -47,7 +47,7 @@
             </ul>
         </turbo-frame>
 
-        <section class="profile__update col">
+        <section class="profile__update col-12 col-md-6">
             <h2 class="mb-4">更新帳號資訊</h2>
 
             <div class="vstack gap-4">