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