Update pages for mobile use

app/templates/_game_player_info.html

@@ -1,21 +1,29 @@
 <h2>Game Info</h2>
-<div class="table-responsive">
+<div class="table">
     <table class="table">
-        <tr>
+      <tr>
-            <th>My Role</th>
+        <th>My Game</th>
-            <td>{{ current_user.role_in_game(game).name }}</td>
+        <td>{{ game.name.title() }}</td>
-        </tr>
+      </tr>
-        <tr>
+      <tr>
-            <th>Game State</th>
+          <th>My Name</th>
-            <td>{{ game.state.name }}</td>
+          <td>{{ current_user.name.title() }}</td>
-        </tr>
+      </tr>
-        <tr>
+      <tr>
-            <th>Start Time</th>
+          <th>My Role</th>
-            <td>{% if game.start_time %}{{ moment(game.start_time).format('DD-MM-YYYY, hh:mm')}}{% else %}-{% endif %}</td>
+          <td>{{ current_user.role_in_game(game).name.title() }}</td>
-        </tr>
+      </tr>
-        <tr>
+      <tr>
-            <th>End Time</th>
+        <th>Game State</th>
-            <td>{% if game.end_time %}{{ moment(game.end_time).format('DD-MM-YYYY, hh:mm')}}{% else %}-{% endif %}</td>
+        <td>{{ game.state.name.title() }}</td>
-        </tr>
+      </tr>
+      <tr>
+        <th>Start Time</th>
+        <td>{% if game.start_time %}{{ moment(game.start_time).format('DD-MM-YYYY, hh:mm')}}{% else %}-{% endif %}</td>
+      </tr>
+      <tr>
+        <th>End Time</th>
+        <td>{% if game.end_time %}{{ moment(game.end_time).format('DD-MM-YYYY, hh:mm')}}{% else %}-{% endif %}</td>
+      </tr>
     </table>
-</div>
+</div>

app/templates/base.html

@@ -1,5 +1,10 @@
 {% extends 'bootstrap/base.html' %}
 
+{% block styles %}
+{{ super() }}
+<link rel="stylesheet" href="{{ url_for('static', filename='css/default.css') }}">
+{% endblock %}
+
 {% block title %}
 {% if title %}{{ title }} - The Hunt{% else %}Welcome to The Hunt{% endif %}
 {% endblock %}

app/templates/game_bunny_dashboard.html

@@ -8,11 +8,14 @@
 {% endblock %}
 
 {% block player_app_content %}
-<h1>{{ game.name }}: {{ current_user.name }}</h1>
+<div class="row">
-{% include '_game_player_info.html' %}
+  <div class="col-xs-0 col-md-1"></div>
+
+    <div class="col-xs-12 col-md-7">
+
 <h2>Objective Locations:</h2>
 {% if game.objectives %}
-<div class="table-responsive">
+<div class="table">
     <table class="table">
         <thead>
             <tr>
@@ -34,9 +37,21 @@
         </tbody>
     </table>
 </div>
-<div id="map" style=" height: 500px; border-radius: 10px; " class="col-md-6 col-xs-12"></div>
 {% endif %}
 
+</div>
+<div class="col-xs-12 col-md-3">
+  {% include '_game_player_info.html' %}
+</div>
+</div>
+
+{% if game.objectives %}
+<div class="row">
+  <div class="col-xs-1 col-md-1"></div>
+  <div id="map" style=" height: 500px; border-radius: 10px; " class="col-xs-10 col-md-10"></div>
+  <div class="col-xs-1 col-md-1"></div>
+</div>
+{% endif %}
 
 {% endblock %}
 
@@ -70,4 +85,4 @@
     }
 
 </script>
-{% endblock %}
+{% endblock %}

app/templates/game_hunter_dashboard.html

@@ -8,22 +8,17 @@
 {% endblock %}
 
 {% block player_app_content %}
-<h1>{{ game.name }}: {{ current_user.name }}</h1>
+<div class="row">
-{% include '_game_player_info.html' %}
+  <div class="col-xs-0 col-md-1"></div>
-<h2>Bunnies:</h2>
+
-<a href="{{ url_for('main.catch_bunny', game_name=game.name) }}">
+  <div class="col-xs-12 col-md-7">
-    <button class="btn btn-success">Catch Bunny</button>
+    <h2>Bunnies</h2>
-</a>
+    <div class="table">
-<div class="table-responsive">
+      <table class="table">
-    <table class="table">
         <thead>
             <tr>
                 <th scope="col">Player Name</th>
-                <th scope="col">Times Caught
+                <th scope="col">Times Caught</th>
-                    <span style="font-size: smaller;">
-                        (<span style="color:green;">Accepted</span>/<span style="color:red;">Denied</span>/<span style="color:gray;">Not reviewed</span>)
-                    </span>
-                </th>
                 <th scope="col">Last location</th>
                 <th scope="col"></th>
             </tr>
@@ -33,7 +28,7 @@
             {% for bunny in game.bunnies() %}
             <tr>
                 <td>{{ bunny.user.name }}</td>
-                <td><span style="color:green;">{{ bunny.player_caught_by_players | selectattr('catching_player', '==', player) | selectattr('review.name', '==', 'accepted') |list|length}}</span> / 
+                <td><span style="color:green;">{{ bunny.player_caught_by_players | selectattr('catching_player', '==', player) | selectattr('review.name', '==', 'accepted') |list|length}}</span> /
                     <span style="color:red;">{{ bunny.player_caught_by_players | selectattr('catching_player', '==', player) | selectattr('review.name', '==', 'denied') |list|length}}</span> /
                     <span style="color:gray;">{{ bunny.player_caught_by_players | selectattr('catching_player', '==', player) | selectattr('review.name', '==', 'none') |list|length}}</span>
                 </td>
@@ -43,15 +38,28 @@
                 {% endwith %}</td>
                 <td>
                     <a href="{{ url_for('main.catch_bunny', game_name=game.name, bunny_name=bunny.user.name) }}">
-                        <button class="btn btn-success">Catch</button>
+                        <button class="btn btn-success btn-sm">Catch</button>
                     </a>
                 </td>
             </tr>
             {% endfor %}
         </tbody>
-    </table>
+      </table>
+      <span style="font-size: smaller;">
+          (<span style="color:green;">Accepted</span>/<span style="color:red;">Denied</span>/<span style="color:gray;">Not reviewed</span>)
+      </span>
+    </div>
+  </div>
+  <div class="col-xs-12 col-md-3">
+    {% include '_game_player_info.html' %}
+  </div>
+</div>
+
+<div class="row">
+  <div class="col-xs-1 col-md-1"></div>
+  <div id="map" style=" height: 500px; border-radius: 10px; " class="col-xs-10 col-md-10"></div>
+  <div class="col-xs-1 col-md-1"></div>
 </div>
-<div id="map" style=" height: 500px; border-radius: 10px; " class="col-md-6 col-xs-12"></div>
 
 {% endblock %}
 
@@ -72,8 +80,8 @@
     L.tileLayer( 'https://geodata.nationaalgeoregister.nl/tiles/service/wmts/brtachtergrondkaartpastel/EPSG:3857/{z}/{x}/{y}.png', {
         attribution: 'Kaartgegevens &copy; <a href="https://kadaster.nl">Kadaster</a>'
     }).addTo( map );
-    
+
-    var bunnies = JSON.parse('{{ json.dumps(game.last_locations(game.bunnies()), cls=location_encoder)|safe }}') 
+    var bunnies = JSON.parse('{{ json.dumps(game.last_locations(game.bunnies()), cls=location_encoder)|safe }}')
     for (var i = 0; i < bunnies.length; i++){
         addPlayerMarker(map, bunnies[i])
     }
@@ -84,4 +92,4 @@
     }
 
 </script>
-{% endblock %}
+{% endblock %}

app/templates/index.html

@@ -1,11 +1,19 @@
 {% extends 'player_base.html' %}
 
 {% block player_app_content %}
-<h1>Hi, {{ current_user.name }}!</h1>
+<div class="row">
-
+  <div class="col-xs-0 col-md-1"></div>
+  <div class="col-xs-12 col-md-10">
 <h2>My games:</h2>
+  </div>
+  <div class="col-xs-0 col-md-1"></div>
+</div>
+
 {% if current_user.games %}
-<div class="table-responsive">
+<div class="row">
+  <div class="col-xs-0 col-md-1"></div>
+  <div class="col-xs-12 col-md-10">
+<div class="table">
     <table class="table">
         <thead>
             <tr>
@@ -20,12 +28,12 @@
             {% for game in current_user.games %}
             <tr>
                 <td><a href="{{ url_for('main.game_dashboard', game_name = game.name) }}">{{ game.name }}</a></td>
-                <td>{{ game.state.name}}</td>
+                <td>{{ game.state.name.title() }}</td>
                 <td>{{ game.start_time }}</td>
                 <td>{{ game.end_time }}</td>
                 <td>
                     {% for gameplayer in current_user.user_games if gameplayer.game == game %}
-                        {{ gameplayer.role.name }}
+                        {{ gameplayer.role.name.title() }}
                     {% endfor %}
                 </td>
             </tr>
@@ -33,9 +41,13 @@
         </tbody>
     </table>
 </div>
+</div>
+<div class="col-xs-0 col-md-1"></div>
+</div>
+
 {% else %}
 <div class="alert alert-info" role="alert">
     You don't participate in any game yet 😢
 </div>
 {% endif %}
-{% endblock %}
+{% endblock %}