From 7fe942df5f627d8c61b6a955b053da6aeaded327 Mon Sep 17 00:00:00 2001 From: RunasSudo Date: Sun, 19 Jul 2020 02:24:31 +1000 Subject: [PATCH] Revamp report formatting Display at A4 width Allow toggling full/A4 width --- ledger_pyreport/jinja2/base.html | 3 +- ledger_pyreport/jinja2/base_report.html | 27 ++++-- ledger_pyreport/jinja2/index.html | 8 ++ ledger_pyreport/jinja2/transaction.html | 2 +- ledger_pyreport/jinja2/transactions.html | 2 +- ledger_pyreport/static/main.css | 107 +++++++++++++++++++++-- ledger_pyreport/static/print.css | 2 +- 7 files changed, 133 insertions(+), 18 deletions(-) diff --git a/ledger_pyreport/jinja2/base.html b/ledger_pyreport/jinja2/base.html index faa7055..00a7229 100644 --- a/ledger_pyreport/jinja2/base.html +++ b/ledger_pyreport/jinja2/base.html @@ -24,8 +24,9 @@ + {% block head %}{% endblock %} - + {% block body %}{% endblock %} diff --git a/ledger_pyreport/jinja2/base_report.html b/ledger_pyreport/jinja2/base_report.html index e60c8ba..90b3f48 100644 --- a/ledger_pyreport/jinja2/base_report.html +++ b/ledger_pyreport/jinja2/base_report.html @@ -18,13 +18,26 @@ {% extends 'base.html' %} +{% block body_classes %}narrow-report{% endblock %} + {% block body %} -
- {% block links %} - Home - {% endblock %} +
+ + +
+ {% block report %} + {% endblock %} +
+ +
- - {% block report %} - {% endblock %} {% endblock %} diff --git a/ledger_pyreport/jinja2/index.html b/ledger_pyreport/jinja2/index.html index 4992182..904b4b4 100644 --- a/ledger_pyreport/jinja2/index.html +++ b/ledger_pyreport/jinja2/index.html @@ -20,6 +20,14 @@ {% block title %}ledger-pyreport{% endblock %} +{% block head %} + +{% endblock %} + {% block body %}
diff --git a/ledger_pyreport/jinja2/transaction.html b/ledger_pyreport/jinja2/transaction.html index 9331e78..c1b6427 100644 --- a/ledger_pyreport/jinja2/transaction.html +++ b/ledger_pyreport/jinja2/transaction.html @@ -22,7 +22,7 @@ {% block links %} {{ super() }} - Show commodity detail +
  • Show commodity detail
    • {% endblock %} {% block report %} diff --git a/ledger_pyreport/jinja2/transactions.html b/ledger_pyreport/jinja2/transactions.html index 2adb8bc..ac3cff6 100644 --- a/ledger_pyreport/jinja2/transactions.html +++ b/ledger_pyreport/jinja2/transactions.html @@ -22,7 +22,7 @@ {% block links %} {{ super() }} - {% if account %}Show commodity detail{% endif %} + {% if account %}
  • Show commodity detail
    • {% endif %} {% endblock %} {% block report %} diff --git a/ledger_pyreport/static/main.css b/ledger_pyreport/static/main.css index 38a77c7..cc5b1ce 100644 --- a/ledger_pyreport/static/main.css +++ b/ledger_pyreport/static/main.css @@ -1,7 +1,7 @@ /* ledger-pyreport Copyright © 2020 Lee Yingtong Li (RunasSudo) - + This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or @@ -11,7 +11,7 @@ but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more details. - + You should have received a copy of the GNU Affero General Public License along with this program. If not, see . */ @@ -21,6 +21,65 @@ body { padding: 2em; } +body.narrow-report { + padding: 0; +} + +@media screen and (min-width: 37cm) { + body.narrow-report article.page { + width: 21cm; + + box-sizing: border-box; + margin: 0.5cm 0 0.5cm 0; + padding: 1cm; + + border: 2px solid #ccc; + box-shadow: 4px 4px 4px #777; + } +} + +/* Left/right boxes */ + +@media screen and (min-width: 37cm) { + body.narrow-report div.page-container { + display: flex; + justify-content: center; + align-items: flex-start; + } + + body.narrow-report aside.leftbox, body.narrow-report aside.rightbox { + width: 7cm; + } + + body.narrow-report aside.leftbox > div, body.narrow-report aside.rightbox > div { + width: 7cm; + box-sizing: border-box; + padding: 0.5cm; + border: 1px solid #ccc; + } + + body.narrow-report aside.leftbox { + position: relative; + order: -1; + margin: 0.5cm 1cm 0.5cm auto; + } + + body.narrow-report aside.rightbox { + position: relative; + margin: 0.5cm auto 0.5cm 1cm; + } + + body.narrow-report aside.leftbox > div, body.narrow-report aside.rightbox > div { + position: fixed; + overflow-y: auto; + max-height: calc(100% - 1cm); + } + + body.narrow-report aside.leftbox > div :last-child, body.narrow-report aside.rightbox > div :last-child { + margin-bottom: 0; + } +} + /* Tables */ h1 { @@ -90,17 +149,51 @@ table.ledger a:hover { /* Navigation bar */ -.nav-header { +.nav-links { color: #888; + margin: 0; + padding: 0; +} +.nav-links li { + list-style: none; +} +.nav-links a { + color: #888; +} +.nav-links a:hover { + color: #666; +} + +body:not(.narrow-report) .nav-links { position: absolute; top: 0; left: 0; } -.nav-header a { - color: #888; +body:not(.narrow-report) .nav-links li { + display: inline; } -.nav-header a:hover { - color: #666; +body:not(.narrow-report) .nav-links li:not(:last-child)::after { + content: " | "; +} +@media screen and (max-width: 37cm) { + body { + padding: 2em !important; + } + + .nav-links { + position: absolute; + top: 0; + left: 0; + } + .nav-links li { + display: inline; + } + .nav-links li.width-toggle { + display: none; + } + .nav-links li:not(:first-child)::before { + content: " | "; + } } /* Home page */ diff --git a/ledger_pyreport/static/print.css b/ledger_pyreport/static/print.css index a41311f..bcee674 100644 --- a/ledger_pyreport/static/print.css +++ b/ledger_pyreport/static/print.css @@ -20,6 +20,6 @@ body { padding: initial; } -.nav-header { +aside { display: none; }