RunasSudo
/
ledger-pyreport
1
Fork 0
Code Issues Pull Requests Activity

Revamp report formatting 

Display at A4 width
Allow toggling full/A4 width
This commit is contained in:
RunasSudo 2020-07-19 02:24:31 +10:00
parent 1b10cdd6b1
commit 7fe942df5f
Signed by: RunasSudo
GPG Key ID: 7234E476BF21C61A
7 changed files with 133 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
ledger_pyreport/jinja2/base.html
View File

@ -24,8 +24,9 @@
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" integrity="sha256-l85OmPOjvil/SOvVt3HnSSjzF1TUMyT9eV0c2BzEGzU=" crossorigin="anonymous"> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" integrity="sha256-l85OmPOjvil/SOvVt3HnSSjzF1TUMyT9eV0c2BzEGzU=" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='main.css') }}"> <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='main.css') }}">
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='print.css') }}" media="print"> <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='print.css') }}" media="print">
{% block head %}{% endblock %}
</head> </head>
<body> <body class="{% block body_classes %}{% endblock %}">
{% block body %}{% endblock %} {% block body %}{% endblock %}
<script src="/static/toasts.js"></script> <script src="/static/toasts.js"></script>

27
ledger_pyreport/jinja2/base_report.html
View File

@ -18,13 +18,26 @@
{% extends 'base.html' %} {% extends 'base.html' %}
{% block body_classes %}narrow-report{% endblock %}
{% block body %} {% block body %}
<div class="nav-header"> <div class="page-container">
{% block links %} <aside class="leftbox">
<a href="/">Home</a> <div>
{% endblock %} <ul class="nav-links">
{% block links %}
<li><a href="/">Home</a></li>
<li class="width-toggle"><a href="#" onclick="document.querySelector('body').classList.toggle('narrow-report');return false;">Toggle full width</a></li>
{% endblock %}
</ul>
</div>
</aside>
<article class="page">
{% block report %}
{% endblock %}
</article>
<aside class="rightbox"></aside>
</div> </div>
{% block report %}
{% endblock %}
{% endblock %} {% endblock %}

8
ledger_pyreport/jinja2/index.html
View File

@ -20,6 +20,14 @@
{% block title %}ledger-pyreport{% endblock %} {% block title %}ledger-pyreport{% endblock %}
{% block head %}
<style type="text/css">
body {
padding: 2em;
}
</style>
{% endblock %}
{% block body %} {% block body %}
<div class="index-group"> <div class="index-group">
<form action="{{ url_for('trial') }}"> <form action="{{ url_for('trial') }}">

2
ledger_pyreport/jinja2/transaction.html
View File

@ -22,7 +22,7 @@
{% block links %} {% block links %}
{{ super() }} {{ super() }}
<a href="/transaction?{{ {'date': date.strftime('%Y-%m-%d'), 'pstart': pstart.strftime('%Y-%m-%d'), 'uuid': transaction.uuid, 'cash': 'on' if cash else '', 'commodity': 'on'}|urlencode }}">Show commodity detail</a> <li><a href="/transaction?{{ {'date': date.strftime('%Y-%m-%d'), 'pstart': pstart.strftime('%Y-%m-%d'), 'uuid': transaction.uuid, 'cash': 'on' if cash else '', 'commodity': 'on'}|urlencode }}">Show commodity detail</a></li>
{% endblock %} {% endblock %}
{% block report %} {% block report %}

2
ledger_pyreport/jinja2/transactions.html
View File

@ -22,7 +22,7 @@
{% block links %} {% block links %}
{{ super() }} {{ super() }}
{% if account %}<a href="/transactions?{{ {'date_end': date_end.strftime('%Y-%m-%d'), 'date_beg': date_beg.strftime('%Y-%m-%d'), 'account': account.name, 'cash': 'on' if cash else '', 'commodity': 'on'}|urlencode }}">Show commodity detail</a>{% endif %} {% if account %}<li><a href="/transactions?{{ {'date_end': date_end.strftime('%Y-%m-%d'), 'date_beg': date_beg.strftime('%Y-%m-%d'), 'account': account.name, 'cash': 'on' if cash else '', 'commodity': 'on'}|urlencode }}">Show commodity detail</a></li>{% endif %}
{% endblock %} {% endblock %}
{% block report %} {% block report %}

107
ledger_pyreport/static/main.css
View File

@ -1,7 +1,7 @@
/* /*
ledger-pyreport ledger-pyreport
Copyright © 2020 Lee Yingtong Li (RunasSudo) Copyright © 2020 Lee Yingtong Li (RunasSudo)
This program is free software: you can redistribute it and/or modify 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 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 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 but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU Affero General Public License for more details. GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License You should have received a copy of the GNU Affero General Public License
along with this program. If not, see <https://www.gnu.org/licenses/>. along with this program. If not, see <https://www.gnu.org/licenses/>.
*/ */
@ -21,6 +21,65 @@ body {
padding: 2em; 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 */ /* Tables */
h1 { h1 {
@ -90,17 +149,51 @@ table.ledger a:hover {
/* Navigation bar */ /* Navigation bar */
.nav-header { .nav-links {
color: #888; 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; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
} }
.nav-header a { body:not(.narrow-report) .nav-links li {
color: #888; display: inline;
} }
.nav-header a:hover { body:not(.narrow-report) .nav-links li:not(:last-child)::after {
color: #666; 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 */ /* Home page */

2
ledger_pyreport/static/print.css
View File

@ -20,6 +20,6 @@ body {
padding: initial; padding: initial;
} }
.nav-header { aside {
display: none; display: none;
} }