Make the caches table responsive

Signed-off-by: Graham <gpe@openrs2.org>

archive/src/main/resources/org/openrs2/archive/templates/caches/index.html

@@ -16,48 +16,50 @@
 			</div>
 		</nav>
 		<main class="container">
-			<table class="table table-striped table-bordered table-hover">
+			<div class="table-responsive">
-				<thead class="thead-dark">
+				<table class="table table-striped table-bordered table-hover">
-					<tr>
+					<thead class="thead-dark">
-						<th>Game</th>
+						<tr>
-						<th>Build</th>
+							<th>Game</th>
-						<th>Timestamp</th>
+							<th>Build</th>
-						<th>Name</th>
+							<th>Timestamp</th>
-						<th>Indexes</th>
+							<th>Name</th>
-						<th>Groups</th>
+							<th>Indexes</th>
-						<th>Keys<sup><a href="#empty-locs">[1]</a></sup></th>
+							<th>Groups</th>
-						<th>Download</th>
+							<th>Keys<sup><a href="#empty-locs">[1]</a></sup></th>
-					</tr>
+							<th>Download</th>
-				</thead>
+						</tr>
-				<tbody>
+					</thead>
-					<!--/*@thymesVar id="caches" type="java.util.List<org.openrs2.archive.cache.CacheExporter.Cache>"*/-->
+					<tbody>
-					<tr th:each="cache : ${caches}">
+						<!--/*@thymesVar id="caches" type="java.util.List<org.openrs2.archive.cache.CacheExporter.Cache>"*/-->
-						<td th:text="${cache.game}">runescape</td>
+						<tr th:each="cache : ${caches}">
-						<td th:text="${cache.build}" class="text-right">550</td>
+							<td th:text="${cache.game}">runescape</td>
-						<td th:text="${#temporals.formatISO(cache.timestamp)}"></td>
+							<td th:text="${cache.build}" class="text-right">550</td>
-						<td th:text="${cache.name}"></td>
+							<td th:text="${#temporals.formatISO(cache.timestamp)}"></td>
-						<td
+							<td th:text="${cache.name}"></td>
-							th:class="${cache.archiveStats}? (${cache.archiveStats.allIndexesValid}? 'table-success' : 'table-danger') + ' text-right'"
+							<td
-							th:text="${cache.archiveStats}? ${cache.archiveStats.validIndexes} + ' / ' + ${cache.archiveStats.indexes} + ' (' + ${#numbers.formatPercent(cache.archiveStats.validIndexesFraction, 1, 2)} + ')' : 'Calculating...'"
+								th:class="${cache.archiveStats}? (${cache.archiveStats.allIndexesValid}? 'table-success' : 'table-danger') + ' text-right'"
-						>Calculating...
+								th:text="${cache.archiveStats}? ${cache.archiveStats.validIndexes} + ' / ' + ${cache.archiveStats.indexes} + ' (' + ${#numbers.formatPercent(cache.archiveStats.validIndexesFraction, 1, 2)} + ')' : 'Calculating...'"
-						</td>
+							>Calculating...
-						<td
+							</td>
-							th:class="${cache.groupStats}? (${cache.groupStats.allGroupsValid}? 'table-success' : 'table-warning') + ' text-right'"
+							<td
-							th:text="${cache.groupStats}? ${#numbers.formatInteger(cache.groupStats.validGroups, 1, 'COMMA')} + ' / ' + ${#numbers.formatInteger(cache.groupStats.groups, 1, 'COMMA')} + ' (' + ${#numbers.formatPercent(cache.groupStats.validGroupsFraction, 1, 2)} + ')' : 'Calculating...'"
+								th:class="${cache.groupStats}? (${cache.groupStats.allGroupsValid}? 'table-success' : 'table-warning') + ' text-right'"
-						>Calculating...
+								th:text="${cache.groupStats}? ${#numbers.formatInteger(cache.groupStats.validGroups, 1, 'COMMA')} + ' / ' + ${#numbers.formatInteger(cache.groupStats.groups, 1, 'COMMA')} + ' (' + ${#numbers.formatPercent(cache.groupStats.validGroupsFraction, 1, 2)} + ')' : 'Calculating...'"
-						</td>
+							>Calculating...
-						<td
+							</td>
-							th:class="${cache.groupStats}? (${cache.groupStats.allKeysValid}? 'table-success' : 'table-warning') + ' text-right'"
+							<td
-							th:text="${cache.groupStats}? ${#numbers.formatInteger(cache.groupStats.validKeys, 1, 'COMMA')} + ' / ' + ${#numbers.formatInteger(cache.groupStats.keys, 1, 'COMMA')} + ' (' + ${#numbers.formatPercent(cache.groupStats.validKeysFraction, 1, 2)} + ')' : 'Calculating...'"
+								th:class="${cache.groupStats}? (${cache.groupStats.allKeysValid}? 'table-success' : 'table-warning') + ' text-right'"
-						>Calculating...
+								th:text="${cache.groupStats}? ${#numbers.formatInteger(cache.groupStats.validKeys, 1, 'COMMA')} + ' / ' + ${#numbers.formatInteger(cache.groupStats.keys, 1, 'COMMA')} + ' (' + ${#numbers.formatPercent(cache.groupStats.validKeysFraction, 1, 2)} + ')' : 'Calculating...'"
-						</td>
+							>Calculating...
-						<td>
+							</td>
-							<a th:href="${'/caches/' + cache.id + '.zip'}" class="btn btn-primary btn-sm">Cache</a>
+							<td>
-							<a th:href="${'/caches/' + cache.id + '.json'}" class="btn btn-primary btn-sm">Keys</a>
+								<a th:href="${'/caches/' + cache.id + '.zip'}" class="btn btn-primary btn-sm">Cache</a>
-						</td>
+								<a th:href="${'/caches/' + cache.id + '.json'}" class="btn btn-primary btn-sm">Keys</a>
-					</tr>
+							</td>
-				</tbody>
+						</tr>
-			</table>
+					</tbody>
+				</table>
+			</div>
 			<p id="empty-locs">
 				[1]: Map squares in the middle of the sea are unreachable by
 				normal players, making it impossible to obtain the keys for