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

Revamp report formatting

Browse Source 
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="{{ url_for('static', filename='main.css') }}">
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='print.css') }}" media="print">
{% block head %}{% endblock %}
</head>
<body>
<body class="{% block body_classes %}{% endblock %}">
{% block body %}{% endblock %}
<script src="/static/toasts.js"></script>

29
ledger_pyreport/jinja2/base_report.html
View File

@ -18,13 +18,26 @@
{% extends 'base.html' %}
{% block body %}
<div class="nav-header">
{% block links %}
<a href="/">Home</a>
{% endblock %}
</div>
{% block body_classes %}narrow-report{% endblock %}
{% block report %}
{% endblock %}
{% block body %}
<div class="page-container">
<aside class="leftbox">
<div>
<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>
{% endblock %}

8
ledger_pyreport/jinja2/index.html
View File

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

2
ledger_pyreport/jinja2/transaction.html
View File

@ -22,7 +22,7 @@
{% block links %}
{{ 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 %}
{% block report %}

2
ledger_pyreport/jinja2/transactions.html
View File

@ -22,7 +22,7 @@
{% block links %}
{{ 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 %}
{% block report %}

103
ledger_pyreport/static/main.css
View File

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

2
ledger_pyreport/static/print.css
View File

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