diff --git a/nummi/main/static/main/css/main.css b/nummi/main/static/main/css/main.css index 9181c72..eb4eee6 100644 --- a/nummi/main/static/main/css/main.css +++ b/nummi/main/static/main/css/main.css @@ -423,13 +423,14 @@ ul.statements { } .statement-details { - overflow-x: auto; display: grid; - grid-template-columns: repeat(4, min-content); + @media (width > 720px) { + grid-template-columns: repeat(3, min-content); + } gap: var(--gap); align-items: center; - > span:nth-child(2) { + > span.evolution { display: grid; grid-auto-rows: min-content; > span[class^="ri-"] { @@ -439,12 +440,49 @@ ul.statements { text-align: right; } } - > span:first-child, - > span:nth-child(3) { + > span.start, + > span.end, + > span.file, + > span.incons { display: grid; border: var(--gray) 1px solid; padding: var(--gap); + &.file, + &.incons { + grid-column: 1 / -1; + } + &.incons { + border-color: var(--red); + grid-template-columns: min-content 1fr; + grid-auto-flow: column; + align-items: center; + gap: 0.5rem; + + > .ds { + display: grid; + grid-auto-rows: min-content; + } + .value { + text-align: right; + } + .diff { + font-weight: 650; + } + .sum { + text-decoration: line-through; + } + .links { + grid-column: 1 / -1; + grid-row: 2; + display: grid; + gap: inherit; + a { + color: var(--red); + } + } + } + > .date { text-align: right; } diff --git a/nummi/statement/templates/statement/statement_detail.html b/nummi/statement/templates/statement/statement_detail.html index e31ffcc..bb7c795 100644 --- a/nummi/statement/templates/statement/statement_detail.html +++ b/nummi/statement/templates/statement/statement_detail.html @@ -19,22 +19,39 @@ {{ "file-edit"|remix }}{% translate "Edit statement" %}