Improve mobile

This commit is contained in:
Florian Baumann 2023-02-28 14:31:55 +01:00
parent a3d17da32c
commit 52490771eb

View File

@ -30,15 +30,56 @@
visibility: visible;
display: inline-block;
}
@media only screen and (max-width: 900px) {
.level-item {
justify-content: unset
}
table#cards td {
display: none;
}
table#cards th {
display: none;
}
table#cards th:nth-child(1) {
display: revert;
}
table#cards th:nth-child(2) {
display: revert;
}
table#cards th:nth-child(4) {
display: revert;
}
table#cards th:nth-child(5) {
display: revert;
}
table#cards th:nth-child(9) {
display: revert;
}
table#cards td:nth-child(1) {
display: revert;
}
table#cards td:nth-child(2) {
display: revert;
}
table#cards td:nth-child(4) {
display: revert;
}
table#cards td:nth-child(5) {
display: revert;
}
table#cards td:nth-child(9) {
display: revert;
}
}
</style>
</head>
<body>
<!-- Site Title -->
<div class="container">
<section class="hero is-primary">
<div class="hero-body">
<p class="title">
@ -49,11 +90,9 @@
</p>
</div>
</section>
</div>
<!-- Nav Bar -->
<section class="section">
<div class="container">
<nav class="level">
<!-- Left side -->
@ -66,7 +105,7 @@
<select name="set" id="set" form="searchform">
<option value="">-</option>
{{range .sets}}
<option value="{{ index . "code" }}">{{ printf "%.25s" (index . "_id") }} ({{ index . "count" }})
<option value="{{ index . " code" }}">{{ printf "%.25s" (index . "_id") }} ({{ index . "count" }})
</option>
{{end}}
</select>
@ -110,7 +149,7 @@
</nav>
<!-- Results Table -->
<table class="table is-fullwidth">
<table id="cards" class="table is-fullwidth">
<thead>
<tr>
<th><abbr title="Amount">#</abbr></th>
@ -163,14 +202,10 @@
</tbody>
</table>
</div>
</section>
</body>
<!-- Select set from last search -->
<script>
<!-- Select set from last search -->
<script>
function getParam(paramName) {
return decodeURI(
(RegExp(paramName + '=' + '(.+?)(&|$)').exec(location.search) || [, null])[1]
@ -181,16 +216,17 @@
var selectedSortVal = getParam("sort");
document.getElementById("sort").value = selectedSortVal;
</script>
</script>
<div class="container">
<footer class="footer">
<footer class="footer">
<div class="content has-text-centered">
<p>
<strong>Serra</strong> Version {{ .version }} by <a href="https://noqqe.de">noqqe</a>.
<a href="http://opensource.org/licenses/mit-license.php">MIT</a>.
</p>
</div>
</footer>
</div>
</footer>
</body>
</html>