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 -->
@ -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,12 +202,8 @@
</tbody> </tbody>
</table> </table>
</div>
</section> </section>
</body>
<!-- Select set from last search --> <!-- Select set from last search -->
<script> <script>
function getParam(paramName) { function getParam(paramName) {
@ -183,7 +218,6 @@
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>
@ -192,5 +226,7 @@
</p> </p>
</div> </div>
</footer> </footer>
</div>
</body>
</html> </html>