Improve design for small screen use

This commit is contained in:
Edgar P. Burkhart 2023-04-18 16:53:08 +02:00
parent a578c5c2a7
commit ae5e5f1104
Signed by: edpibu
GPG key ID: 9833D3C5A25BD227
5 changed files with 21 additions and 5 deletions

View file

@ -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;
}
}

View file

@ -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}
}

View file

@ -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);
}

View file

@ -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>

View file

@ -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>