Improve design for small screen use
This commit is contained in:
parent
a578c5c2a7
commit
ae5e5f1104
5 changed files with 21 additions and 5 deletions
|
@ -70,6 +70,7 @@ main {
|
|||
padding: 2rem;
|
||||
grid-column: 2;
|
||||
grid-row: 1;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
nav {
|
||||
grid-column: 1;
|
||||
|
@ -94,6 +95,7 @@ nav h1 img {
|
|||
nav ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
position: relative;
|
||||
}
|
||||
nav .skip-link {
|
||||
|
@ -125,3 +127,13 @@ main > :first-child {
|
|||
font-weight: 650;
|
||||
text-decoration: underline dotted;
|
||||
}
|
||||
|
||||
@media (width < 1024px) {
|
||||
body {grid-template-columns: 1fr}
|
||||
nav, main {
|
||||
grid-column: 1;
|
||||
grid-row: auto;
|
||||
position: relative;
|
||||
height: initial;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,4 +1,5 @@
|
|||
table.full-width col.bar {width: auto}
|
||||
.plot {overflow-x: auto}
|
||||
|
||||
.plot td.bar {
|
||||
position: relative;
|
||||
|
@ -46,3 +47,7 @@ table.full-width col.bar {width: auto}
|
|||
}
|
||||
.plot td.bar.p div.tot span {left: 0}
|
||||
.plot td.bar.m div.tot span {right: 0}
|
||||
|
||||
@media (width < 720px) {
|
||||
.plot .bar {width: 0;overflow: hidden}
|
||||
}
|
||||
|
|
|
@ -1,6 +1,5 @@
|
|||
table {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
.table {overflow-x: auto}
|
||||
table {border-collapse: collapse}
|
||||
table.more tbody:last-child tr:last-child {
|
||||
border-bottom: .1rem dashed var(--gray);
|
||||
}
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
{% load main_extras %}
|
||||
{% load i18n %}
|
||||
<div id="snapshots">
|
||||
<div id="snapshots" class="table">
|
||||
{% if new_snapshot_url %}
|
||||
<p>
|
||||
<a href="{{ new_snapshot_url }}">{% translate "New statement" %}</a>
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
{% load main_extras %}
|
||||
{% load i18n %}
|
||||
<div id="transactions">
|
||||
<div id="transactions" class="table">
|
||||
{% if new_transaction_url %}
|
||||
<p>
|
||||
<a href="{{ new_transaction_url }}">{% translate "New transaction" %}</a>
|
||||
|
|
Loading…
Reference in a new issue