Made the visuals look good for laptop

3 files changed, 14 insertions, 16 deletions

diff --git a/templates/controls.j2 b/templates/controls.j2
index 125dd38..6ba724a 100644
--- a/templates/controls.j2
+++ b/templates/controls.j2
@@ -1,5 +1,5 @@
 {% from "macros.j2" import court %}
-<div class="fixed-grid has-12-cols">
+<div class="fixed-grid has-6-cols">
     <div class="grid">
     {% for key, value in courts.items() %}
         {{ court(key, value) }}
@@ -10,16 +10,14 @@
     <div class="column">
         <div class="field has-addons">
             <div class="control">
-                <button class="button is-large is-responsive is-dark" 
-                        style="text-align:center" 
+                <button class="button is-responsive is-dark" 
                         hx-post="/decrement" 
                         hx-swap="outerHTML"
                         hx-target="#guests">-</button>
             </div>
             <div hx-get="/guests" hx-swap="outerHTML" hx-trigger="revealed"></div>
             <div class="control">
-                <button class="button is-large is-responsive is-dark" 
-                        style="text-align:center" 
+                <button class="button is-responsive is-dark" 
                         hx-post="/increment" 
                         hx-swap="outerHTML"
                         hx-target="#guests">+</button>
@@ -27,7 +25,7 @@
         </div>
     </div>
     <div class="column">
-        <div class="select is-large is-responsive">
+        <div class="select is-responsive">
             <select name="type">
                 <option>10 Levels</option>
                 <option>8 Levels</option>
@@ -39,19 +37,19 @@
         </div>
     </div>
     <div class="column">
-        <button class="button is-dark is-large is-responsive" 
+        <button class="button is-dark is-responsive" 
                 hx-post="/propose" 
                 hx-target="#games" 
                 hx-include="[name='type']">New Round</button>
     </div>
     <div class="column"></div>
     <div class="column">
-        <button class="button is-dark is-large is-responsive" 
+        <button class="button is-dark is-responsive" 
                 hx-post="/confirm" 
                 hx-target="#games">Start Round</button>
     </div>
     <div class="column">
-        <button class="button is-dark is-large is-responsive" 
+        <button class="button is-dark is-responsive" 
                 hx-post="/clear" 
                 hx-target="#games">Reset</button>
     </div>
diff --git a/templates/macros.j2 b/templates/macros.j2
index 58b1a73..8d05bb0 100644
--- a/templates/macros.j2
+++ b/templates/macros.j2
@@ -1,18 +1,18 @@
 {% macro court(id, status) -%}
-<button class= "button is-large is-responsive {% if status %}is-success{% else %}is-danger{% endif %}" 
+<button class= "button is-responsive {% if status %}is-success{% else %}is-danger{% endif %}" 
         hx-post="{{ "/court-toggle/" ~ id}}" 
         hx-swap="outerHTML"> Court {{ id }}</button>
 {%- endmacro %}
 
 {% macro player(id, status, name) -%}
-<button class="button is-medium is-responsive {% if status %}is-success{% else %}is-danger {% endif %}" 
+<button class="button is-responsive {% if status %}is-success{% else %}is-danger {% endif %}" 
         hx-post="{{ "/player-toggle/" ~ id}}"
         hx-swap="outerHTML"> {{ name }} </button>
 {%- endmacro %}
 
 {% macro guests(count) -%}
 <div class="control" id="guests">
-    <input class="input is-large is-responsive" type="text" style="text-align:center" value="{{ count }} Guests" disabled>
+    <input class="input is-responsive" type="text" style="text-align:center" value="{{ count }} Guests" disabled>
 </div>
 {%- endmacro %}
 
@@ -49,15 +49,15 @@
     </div>
     <div class="level-item has-text-centered"></div>
     <p class="level-item has-text-centered">
-        <button class="button is-large is-link" onclick="location.href = '/';">Games</button>
+        <button class="button is-link" onclick="location.href = '/';">Games</button>
     </p>
     <div class="level-item has-text-centered"></div>
     <div class="level-item has-text-centered">
-        <p class="title is-1">Match Up!</p>
+        <p class="title">Match Up!</p>
     </div>
     <div class="level-item has-text-centered"></div>
     <p class="level-item has-text-centered">
-        <button class="button is-large is-link" onclick="location.href = '/players';">Players</button>
+        <button class="button is-link" onclick="location.href = '/players';">Players</button>
     </p>
     <div class="level-item has-text-centered"></div>
     <div class="level-right">
diff --git a/templates/players.j2 b/templates/players.j2
index 6db040a..ae6afe0 100644
--- a/templates/players.j2
+++ b/templates/players.j2
@@ -5,7 +5,7 @@
 	<body>
 		<section class="section">
 			{{ navbar() }}
-			<div class="fixed-grid has-6-cols">
+			<div class="fixed-grid has-4-cols">
             <div class="grid">
             {% for id, value in players.items() %}
                 <div class="cell"> {{ player(id, value.status, value.name) }} </div>