refactor: RWD optimization

Author: pan93412

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;

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>

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">