Fix responsiveness issues

G2HJei · Dec 24, 2024 · 2168182 · 2168182
1 parent 99a6681
commit 2168182
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 13 deletions.
diff --git a/src/main/resources/templates/home.html b/src/main/resources/templates/home.html
@@ -6,10 +6,12 @@
 <body>
 <main layout:fragment="content" th:with="routing = ${T(xyz.zlatanov.ravenscore.controller.ControllerConstants)}">
     <div class="container container-rs-small">
-        <div class="d-flex justify-content-start align-items-center mt-5">
-            <img th:src="@{'/logo.png'}" style="max-width: 50%; height: 24rem" alt="Logo"
-                 class="d-inline-block align-text-top">
-            <div class="me-3">
+        <div class="row mt-5">
+            <div class="col-12 col-md-6 d-flex justify-content-center align-items-center">
+                <img th:src="@{'/logo.png'}" style="max-height: 24rem" alt="Logo"
+                     class="d-inline-block align-text-top">
+            </div>
+            <div class="col-12 col-md-6">
                 <p> Welcome my Lord,</p>
                 <p> In Ravenscore, you can create, manage and participate in tournaments of the classic
                     board game <a
@@ -24,18 +26,18 @@
                 <hr/>
                 <figure>
                     <blockquote class="blockquote fs-6 fst-italic fw-light">
-                        <p class="mb-1">“Always keep your foes confused. If they are never certain who you are or what
+                        <p>“Always keep your foes confused. If they are never certain who you are or what
                             you
                             want, they cannot know what you are like to do next. Sometimes the best way to baffle them
                             is to
                             make
                             moves that have no purpose, or even seem to work against you. Remember that, Sansa, when you
                             come to
                             play the game.”</p>
-                        <p class="mb-1">“What... what game?”</p>
-                        <p class="mb-1">“The only game. The game of thrones.”</p>
+                        <p>“What... what game?”</p>
+                        <p>“The only game. The game of thrones.”</p>
                     </blockquote>
-                    <figcaption class="blockquote-footer text-end">
+                    <figcaption class="blockquote-footer text-end mt-1">
                         "A Storm of Swords"&nbsp;<cite title="A Storm of Swords">(George R. R. Martin)</cite>
                     </figcaption>
                 </figure>

diff --git a/src/main/resources/templates/tournament.html b/src/main/resources/templates/tournament.html
@@ -312,8 +312,8 @@ <h6 class="accordion-header highlight-primary">
                                  th:data-rs-game-completed="${game.completed}"
                                  th:data-bs-parent="${'#accordionGames-'+stageIdx.index}">
                                 <div class="accordion-body ms-3">
-                                    <div class="d-flex justify-content-start gap-3 w-100">
-                                        <div>
+                                    <div class="row">
+                                        <div class="col-12 col-lg-4 d-flex flex-column justify-content-start align-items-center mb-3">
                                             <div th:if="${not model.adminUnlocked}"
                                                  class="text-center text-secondary-emphasis"
                                                  th:text="${game.completed ? ('Round ' + game.round): ''}">
@@ -362,7 +362,7 @@ <h6 class="accordion-header highlight-primary">
                                                 </div>
                                             </div>
                                         </div>
-                                        <div class="w-100">
+                                        <div class="col-12 col-lg-8">
                                             <div th:class="${game.playersRevealed ? 'visually-hidden' : ''}">
                                                 <h6 class="text-center mt-1 mb-4">Participants</h6>
                                                 <div th:if="${game.participantIdList.isEmpty()}"
@@ -406,8 +406,8 @@ <h6 class="text-center">Game Rankings</h6>
                                                 <table class="table table-borderless table-hover">
                                                     <thead>
                                                     <tr>
-                                                        <th scope="col"></th>
-                                                        <th scope="col">Player</th>
+                                                        <th scope="col" style="width: 5%"></th>
+                                                        <th scope="col" style="width: 55%">Player</th>
                                                         <th scope="col" class="text-center">Points</th>
                                                         <th scope="col" class="text-center">Castles</th>
                                                     </tr>