Moved to a mobile friendly CSS framework

1 files changed, 14 insertions, 40 deletions

diff --git a/app/templates/macros.j2 b/app/templates/macros.j2
index 4fe35f0..17a2940 100644
--- a/app/templates/macros.j2
+++ b/app/templates/macros.j2
@@ -1,11 +1,11 @@
 {% macro court_button(court) -%}
-<button class= "button is-responsive {% if court.status %}is-success{% else %}is-danger{% endif %}" 
+<button class= "{% if court.status %}{% else %}contrast{% endif %}" 
         hx-post="{{ "/court-toggle/" ~ court.id}}" 
         hx-swap="outerHTML"> Court {{ court.id }}</button>
 {%- endmacro %}
 
 {% macro player_button(player) -%}
-<button class="button is-responsive {% if player.status %}is-success{% else %}is-danger {% endif %}" 
+<button class="{% if player.status %}{% else %}contrast{% endif %}" 
         hx-post="{{ "/player-toggle/" ~ player.id}}"
         hx-swap="outerHTML"> {{ player.first_name + " " + player.last_name}} </button>
 {%- endmacro %}
@@ -16,56 +16,30 @@
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>Match Up!</title>
 <link rel="icon" type="image/x-icon" href="{{ url_for('static', filename='favicon.ico') }}">
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.4/css/bulma.min.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/notyf@3/notyf.min.css">
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
 <link rel="stylesheet" href="{{ url_for('static', filename='custom.css') }}">
 <script src="https://cdn.jsdelivr.net/npm/htmx.org@2.0.6/dist/htmx.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/notyf@3/notyf.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/js/fontawesome.min.js"></script>
-<script defer src="{{ url_for('static', filename='custom.js') }}"></script>
 </head>
 {%- endmacro %}
 
 {% macro footer() -%}
-<div class="content has-text-centered">Made by <a href="https://karanjayachandra.com/">Karan</a> using <a href="https://flask.palletsprojects.com">Flask</a>, <a href="https://htmx.org/">HTMX</a>, <a href="https://carlosroso.com/notyf/">Notyf</a> and <a href="https://bulma.io">Bulma</a></div>
+<div class="container">Made by <a href="https://karanjayachandra.com/">Karan</a> with <i class="fas fa-heart"></i></div>
 {%- endmacro %}
 
+
 {% macro navbar(url_for) -%}
-<nav class="level">
-    <p class="level-item has-text-centered">
-        <button class="button is-link" onclick="location.href = '/';">Games</button>
-    </p>
-    <p class="level-item has-text-centered">
-        <button class="button is-link" onclick="location.href = '/players';">Players</button>
-    </p>
-    <div class="level-item has-text-centered"></div>
-    <div class="level-left"></div>
-    <div class="level-item has-text-centered">
-        <p class="title">Match Up!</p>
-    </div>
-    <div class="level-item has-text-centered"></div>
-    <div class="level-right">
-        <div class="field has-addons has-addons-centered">
-            <div class="control"><button class="button is-dark" id="timer-dec">
-                <span class="icon"><i class="fas fa-light fa-minus"></i></span>
-            </button></div>
-            <p class="control has-icons-left has-icons-right">
-                <input class="input is-responsive" id="timer-display" type="text" style="text-align:center; " readonly>
-                <span class="icon is-small is-left">
-                    <i class="fas fa-light fa-clock"></i>
-                </span>
-            </p>
-            <div class="control"><button class="button is-dark" id="timer-inc">
-                <span class="icon"><i class="fas fa-light fa-plus"></i></span>
-            </button></div>
-            <div class="control"><button class="button is-dark" id="timer-start">
-                <span class="icon"><i class="fas fa-light fa-play"></i></span>
-            </button></div>
-            <div class="control"><button class="button is-dark" id="timer-stop">
-                <span class="icon"><i class="fas fa-light fa-stop"></i></span>
-            </button></div>
-        </div>
-    </div>
+<nav>
+  <ul>
+    <li><strong>Match Up!</strong></li>
+  </ul>
+  <ul>
+    <li><a href="/">Games</a></li>
+    <li><a href="/players">Players</a></li>
+    <li><a href="/login/">Admin</a></li>
+  </ul>
 </nav>
 {%- endmacro %}
\ No newline at end of file