ui updates

a1ex4 · Oct 17, 2023 · 5b4c237 · 5b4c237
1 parent bf23594
commit 5b4c237
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 24 deletions.
diff --git a/app/static/style.css b/app/static/style.css
@@ -25,6 +25,10 @@
     /* linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent 50%), */
 }
 
+.card-img {
+    mask-image: linear-gradient(to bottom, rgba(7, 0, 91, 0.71), #001233ed 50%);
+}
+
 .game-title {
     font-size: 18px;
     font-weight: bold;

diff --git a/app/templates/index.html b/app/templates/index.html
@@ -139,19 +139,19 @@
         }
 
         /* Filtering buttons */
-        .filter-buttons {
+        /* .filter-buttons {
             margin-bottom: 20px;
-        }
+        } */
 
-        .filter-button {
+        /* .filter-button {
             background-color: #3498db;
             color: white;
             padding: 8px 16px;
             border: none;
             border-radius: 4px;
             cursor: pointer;
             margin-right: 10px;
-        }
+        } */
 
         /* Active filter button style */
         .active-filter {
@@ -187,19 +187,30 @@
 <body>
     {% block content %}
     <div id="content" class="container-fluid text-center mt-3">
-
-        <div class="btn-group" role="group" aria-label="Basic outlined example">
-            <button type="button" class="btn btn-primary active"><i class="bi bi-card-heading"></i></button>
-            <button type="button" class="btn btn-primary"><i class="bi bi-grid-fill"></i></button>
-            <button type="button" class="btn btn-primary"><i class="bi bi-list-ul"></i></button>
+
+        <div class="row gy-2 gx-3 align-items-center justify-content-md-center">
+
+            <div class="col-auto">
+                <button onclick="resetFilters()" type="button" class="btn btn-primary filter-button">Clear
+                    filters</button>
+            </div>
+
+            <div class="col-auto">
+                <input type="text" id="textFilter" class="form-control" id="autoSizingInput"
+                    placeholder="Search titles...">
+            </div>
+            <div class="col-auto">
+                <div class="btn-group" role="group">
+                    <button type="button" class="btn btn-primary active"><i class="bi bi-card-heading"></i></button>
+                    <button type="button" class="btn btn-primary"><i class="bi bi-grid-fill"></i></button>
+                    <button type="button" class="btn btn-primary"><i class="bi bi-list-ul"></i></button>
+                </div>
+            </div>
         </div>
 
-        <!-- Filtering buttons container -->
-        <div class="filter-buttons">
-            <!-- Filter buttons will be dynamically generated here -->
-            <!-- Reset filter button -->
-            <button class="filter-button" onclick="resetFilters()">Reset Filters</button>
-            <input type="text" id="textFilter" placeholder="Search titles..." style="height: 26px;">
+        <div class="row mt-3 align-items-center justify-content-md-center">
+            <div class="col-auto filter-buttons">
+            </div>
         </div>
 
         <div class="grid-container" id="gridContainer">
@@ -215,11 +226,11 @@ <h5 class="card-title game-title">{{ game.name }}</h5>
                             <p class="card-text game-description"><small>{{ game.id }}</small></p>
                             <div class="tags-container">
                                 {% if game.has_latest_version %}
-                                    <span class="badge rounded-pill text-bg-success game-tag">Up to date</span>
+                                <span class="badge rounded-pill text-bg-success game-tag">Up to date</span>
                                 {% else %}
-                                    <span class="badge rounded-pill text-bg-warning game-tag">Outdated</span>
+                                <span class="badge rounded-pill text-bg-warning game-tag">Outdated</span>
                                 {% endif %}
-                            </div> 
+                            </div>
                         </div>
                     </div>
                 </div>

diff --git a/app/templates/settings.html b/app/templates/settings.html
@@ -76,12 +76,6 @@ <h2 class="pb-3">Authentication</h2>
                     </div>
                 </div>
 
-                <!-- Button trigger modal -->
-                <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#deleteUserModal">
-                    Launch demo modal
-                </button>
-                <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#deleteUserModal"
-                    data-bs-user="Alex">Delete user Alex</button>
                 <!-- Delete User Modal -->
                 <div class="modal fade" id="deleteUserModal" tabindex="-1" aria-labelledby="deleteUserModalLabel"
                     aria-hidden="true">