Better mobile formatting

templates/admin-clients.html

@@ -4,20 +4,16 @@
 <table id="clients-table" class="sortable pure-table pure-table-bordered center">
   <thead>
       <tr>
-          <th>Friendly Name</th>
-          <th>Client ID</th>
-          <th>Last Known IP</th>
-          <th>Authenticated</th>
-          <th></th>
+          <th>Auth</th>
+          <th>Name</th>
+          <th class="only-large">Client ID</th>
+          <th class="only-large">Last Known IP</th>
+          <th class="only-large">Authenticated</th>
       </tr>
   </thead>
   <tbody>
       {{ range $i, $v := .TemplateData.Clients }} 
       <tr>
-          <td>{{ $v.Name }}</td>
-          <td>{{ $v.UUID }}</td>
-          <td>{{ $v.IP }}</td>
-          <td>{{ if $v.Auth }} Yes {{ else }} No {{ end }}</td>
           <td>
             {{ if $v.Auth }}
             <a href="/admin/clients/{{ $v.UUID }}/deauth" class="primary"><i class="fa fa-2 fa-toggle-on"></i></a>
@@ -25,6 +21,10 @@
             <a href="/admin/clients/{{ $v.UUID }}/auth" class="error"><i class="fa fa-2 fa-toggle-off"></i></a>
             {{ end }}
           </td>
+          <td>{{ $v.Name }}<p class="only-small">({{ $v.UUID }})</p></td>
+          <td class="only-large">{{ $v.UUID }}</td>
+          <td class="only-large">{{ $v.IP }}</td>
+          <td class="only-large">{{ if $v.Auth }} Yes {{ else }} No {{ end }}</td>
       </tr>
       {{ end }}
   </tbody>

templates/admin-editteam.html

@@ -1,10 +1,10 @@
 {{ $uuid := .TemplateData.UUID }}
 <div class="center">
-  <div>
+  <div class="team-management-buttons">
     <h3>Team Management</h3>
-    <button id="edit-team-button" onclick="javascript:gotoTeamTab();" class="pure-button-toggle-first pure-button pure-button-primary">Team Details</button>
-    <button id="edit-game-button" onclick="javascript:gotoTeamGameTab();" class="pure-button-toggle-middle pure-button">Game Details</button>
-    <button id="edit-team-members-button" onclick="javascript:gotoTeamMemberTab();" class="pure-button-toggle-last pure-button">Team Members</button>
+    <button id="edit-team-button" onclick="javascript:gotoTeamTab();" class="pure-button-toggle-first pure-button pure-button-primary">Team Details</button><br class="only-small" />
+    <button id="edit-game-button" onclick="javascript:gotoTeamGameTab();" class="pure-button-toggle-middle pure-button">Game Details</button><br class="only-small" />
+    <button id="edit-team-members-button" onclick="javascript:gotoTeamMemberTab();" class="pure-button-toggle-last pure-button">Team Members</button><br class="only-small" />
   </div>
   <div id="edit-team-tab" class="left">
     <form class="pure-form pure-form-aligned" action="/admin/teams/{{ $uuid }}/save" method="POST">
@@ -16,10 +16,10 @@
             <input id="teamname" name="teamname" value="{{ .TemplateData.Name }}" placeholder="Team Name">
           </div>
         </div>
-        <div class="pure-control-group reset-pull">
-          <a href="/admin/teams" class="pull-left space pure-button pure-button-plain">Cancel</a>
-          <button type="submit" class="pull-right space pure-button pure-button-primary">Update Team</button>
-          <button type="button" id="btnDeleteTeam" class="pull-right space pure-button pure-button-error">Delete Team</button>
+        <div class="pure-control-group team-management-buttons">
+          <a href="/admin/teams" class="pure-button pure-button-plain">Cancel</a>
+          <button type="submit" class="pure-button pure-button-primary">Update Team</button>
+          <button type="button" id="btnDeleteTeam" class="pure-button pure-button-error">Delete Team</button>
         </div>
       </fieldset>
     </form>
@@ -73,9 +73,9 @@
       <thead>
         <tr>
           <th>Name</th>
-          <th>Slack ID</th>
-          <th>Twitter</th>
-          <th>Email</th>
+          <th class="only-large">Slack ID</th>
+          <th class="only-large">Twitter</th>
+          <th class="only-large">Email</th>
           <th>Remove</th>
         </tr>
       </thead>
@@ -83,9 +83,9 @@
         {{ range $i, $v := .TemplateData.Members }}
         <tr>
           <td>{{ $v.Name }}</td>
-          <td>{{ $v.SlackId }}</td>
-          <td>{{ $v.Twitter }}</td>
-          <td>{{ $v.Email }}</td>
+          <td class="only-large">{{ $v.SlackId }}</td>
+          <td class="only-large">{{ $v.Twitter }}</td>
+          <td class="only-large">{{ $v.Email }}</td>
           <td>
             <form action="/admin/teams/{{ $uuid }}/deletemember" method="POST">
               <input type="hidden" name="memberid" value="{{ $v.UUID }}"/>

templates/admin-games.html

@@ -5,15 +5,15 @@
   <thead>
     <tr>
       <th>Game Name</th>
-      <th>Team Name</th>
+      <th class="only-large">Team Name</th>
       <th>Screenshots</th>
     </tr>
   </thead>
   <tbody>
     {{ range $i, $v := .TemplateData.Teams }} 
     <tr>
-      <td>{{ $v.Game.Name }}</td>
-      <td>{{ $v.Name }}</td>
+      <td>{{ $v.Game.Name }}<p class="only-small">by<br />{{ $v.Name }}</p></td>
+      <td class="only-large">{{ $v.Name }}</td>
       <td>{{ len $v.Game.Screenshots }}</td>
     </tr>
     {{ end }}

templates/admin-main.html

@@ -1,4 +1,4 @@
-<div class="content">
+<div class="">
   <div>
     <h3>Public Mode</h3>
     <button onclick="window.location.href='/admin/mode/0'" class="pure-button-toggle-first pure-button {{ if eq .PublicMode 0 }}pure-button-primary{{ end }}">Waiting</button>

templates/admin-teams.html

@@ -8,19 +8,19 @@
   <thead>
       <tr>
           <th>Name</th>
-          <th>Management Link</th>
-          <th>Members</th>
-          <th>Game</th>
+          <th class="only-large">Management Link</th>
+          <th class="only-large">Members</th>
+          <th class="only-large">Game</th>
           <th></th>
       </tr>
   </thead>
   <tbody>
       {{ range $i, $v := .TemplateData.Teams }} 
       <tr>
-          <td>{{ $v.Name }}</td>
-          <td><a href="/team/{{ $v.UUID }}">{{ $v.UUID }}</a></td>
-          <td>{{ len $v.Members }}</td>
-          <td>{{ $v.Game.Name }}</td>
+          <td>{{ $v.Name }}<p class="only-small">{{ $v.Game.Name }}</p></td>
+          <td class="only-large"><a href="/team/{{ $v.UUID }}">{{ $v.UUID }}</a></td>
+          <td class="only-large">{{ len $v.Members }}</td>
+          <td class="only-large">{{ $v.Game.Name }}</td>
           <td>
             <a href="/admin/teams/{{ $v.UUID }}/edit" class="pure-button pure-button-plain"><i class="fa fa-pencil"></i></a>
             <a href="/admin/teams/{{ $v.UUID }}/delete" class="pure-button pure-button-plain"><i class="fa fa-trash"></i></a>

templates/admin-votes.html

@@ -9,16 +9,15 @@
 <table id="votes-table" class="sortable pure-table pure-table-bordered center">
   <thead>
     <tr>
-      <th>Timestamp</th>
-      <th>Client ID</th>
+      <th>Time</th>
       <th>Rankings</th>
+      <th class="only-large">Client ID</th>
     </tr>
   </thead>
   <tbody>
     {{ range $i, $v := .TemplateData.AllVotes }}
     <tr>
       <td>{{ $v.Timestamp }}</td>
-      <td>{{ $v.ClientId }}</td>
       <td>
         <ol>
         {{ range $ci, $cv := $v.Choices }}
@@ -26,6 +25,7 @@
         {{ end }}
         </ol>
       </td>
+      <td class="only-large">{{ $v.ClientId }}</td>
     </tr>
     {{ end }}
   </tbody>