From 10d6377b66eae0e444ef5e12575f6e425a376ce0 Mon Sep 17 00:00:00 2001
From: Felix Breidenstein <mail@felixbreidenstein.de>
Date: Mon, 29 Nov 2021 23:43:48 +0100
Subject: [PATCH] make more pretty
---
schmeckels/serve.py | 2 +-
schmeckels/templates/base.html | 26 +++--
schmeckels/templates/transactions.html | 130 ++++++++++++++++++-------
3 files changed, 112 insertions(+), 46 deletions(-)
diff --git a/schmeckels/serve.py b/schmeckels/serve.py
index 44c768c..34c762b 100644
--- a/schmeckels/serve.py
+++ b/schmeckels/serve.py
@@ -24,7 +24,7 @@ def index():
tags = session.query(Tag).filter_by(reporting=True).all()
# Get start and end of timerange
- months = 12
+ months = 3
today = datetime.now()
start_month = today - relativedelta(months=months)
start_date = date(start_month.year, start_month.month, 1)
diff --git a/schmeckels/templates/base.html b/schmeckels/templates/base.html
index 8bc721c..2680087 100644
--- a/schmeckels/templates/base.html
+++ b/schmeckels/templates/base.html
@@ -8,6 +8,9 @@
<title>Schmeckels</title>
<link href="https://unpkg.com/tailwindcss/dist/tailwind.min.css" rel="stylesheet">
<link href="/static/style.css" rel="stylesheet">
+ <style>
+ {% block style %} {% endblock %}
+ </style>
</head>
<body class="bg-grey-100 font-sans leading-normal tracking-normal">
@@ -29,23 +32,26 @@
<a class="text-blue-500 hover:text-blue-800" href="/upload">Upload</a>
</li>
</ul>
- </div>
+ </div>
<div class="pt-2 container mx-auto">
{% with messages = get_flashed_messages() %}
- {% if messages %}
- {% for message in messages %}
- <div class="bg-blue-100 border-t border-b border-blue-500 text-blue-700 px-2 py-2 mb-5" role="alert">
- <p class="font-bold">{{ message }}</p>
- </div>
- {% endfor %}
- {% endif %}
+ {% if messages %}
+ {% for message in messages %}
+ <div class="bg-blue-100 border-t border-b border-blue-500 text-blue-700 px-2 py-2 mb-5" role="alert">
+ <p class="font-bold">{{ message }}</p>
+ </div>
+ {% endfor %}
+ {% endif %}
{% endwith %}
- {% block main %} {% endblock %}
+ {% block main %} {% endblock %}
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js'></script>
- {% block script %} {% endblock %}
+ <script>
+ {% block script %} {% endblock %}
+ </script>
+
</body>
</html>
diff --git a/schmeckels/templates/transactions.html b/schmeckels/templates/transactions.html
index 5fad594..6c55d69 100644
--- a/schmeckels/templates/transactions.html
+++ b/schmeckels/templates/transactions.html
@@ -1,43 +1,103 @@
{% extends "base.html" %}
+
+{% block style %}
+#navbar {
+overflow: hidden;
+background-color: lightcyan;
+padding: 10px;
+}
+
+/* Navbar links */
+#navbar a {
+float: left;
+display: block;
+color: #f2f2f2;
+text-align: center;
+padding: 14px;
+text-decoration: none;
+}
+
+/* Page content */
+.content {
+padding: 16px;
+}
+
+/* The sticky class is added to the navbar with JS when it reaches its scroll position */
+.sticky {
+position: fixed;
+top: 0;
+width: 100%;
+}
+
+/* Add some top padding to the page content to prevent sudden quick movement (as the navigation bar gets a new position
+at the top of the page (position:fixed and top:0) */
+.sticky + .content {
+padding-top: 60px;
+}
+{% endblock %}
+
{% block main %}
-<form action="/bulksort" method="POST">
-<select name="tag">
- {% for tag in tags %}
- <option value="{{ tag.id }}">{{ tag.name }}</option>
- {% endfor %}
-</select>
-<input type="submit">
-<table class="table-auto">
- <thead>
- <tr>
- <th class="px-4 py-2"></th>
- <th class="px-4 py-2">Date</th>
- <th class="px-4 py-2">Sender/Empfänger</th>
- <th class="px-4 py-2">Verwendungszweck</th>
- <th class="px-4 py-2 text-right">Betrag</th>
- <th class="px-4 py-2">Kategorie</th>
- </tr>
- </thead>
- <tbody>
- {% for t in transactions %}
- <tr>
- <td class="border px-4 py-2"><input type="checkbox" name="transaction" value="{{ t.id }}"></td>
- <td class="border px-4 py-2">{{ t.get_date("de") }}</td>
- <td class="border px-4 py-2">{{ t.name }}<br/> <span class="text-gray-500">{{t.iban}}</span></td>
- <td class="border px-4 py-2">{{ t.description }}</td>
- <td class="border px-4 py-2 text-right {{ 'text-green-500' if t.is_positive() else 'text-red-500' }}">{{ t.pretty_amount() }} €</td>
- <td class="border px-4 py-2">
- {% for tag in t.tags %}
- <span style="background-color: {{ tag.color() }};" class="text-white rounded p-1" >{{ tag.name }}</span>
- {% endfor %}
- </td>
- </tr>
-{% endfor %}
- </tbody>
-</table>
+<form action="/bulksort" method="POST" id="content">
+ <div id="navbar">
+ <select name="tag">
+ {% for tag in tags %}
+ <option value="{{ tag.id }}">{{ tag.name }}</option>
+ {% endfor %}
+ </select>
+ <input type="submit">
+ </div>
+ <table class="table-auto">
+ <thead>
+ <tr>
+ <th class="px-4 py-2"></th>
+ <th class="px-4 py-2">Date</th>
+ <th class="px-4 py-2">Sender/Empfänger</th>
+ <th class="px-4 py-2">Verwendungszweck</th>
+ <th class="px-4 py-2 text-right">Betrag</th>
+ <th class="px-4 py-2">Kategorie</th>
+ </tr>
+ </thead>
+ <tbody>
+ {% for t in transactions %}
+ <tr>
+ <td class="border px-4 py-2"><input type="checkbox" name="transaction" value="{{ t.id }}"></td>
+ <td class="border px-4 py-2">{{ t.get_date("de") }}</td>
+ <td class="border px-4 py-2">{{ t.name }}<br /> <span class="text-gray-500">{{t.iban}}</span></td>
+ <td class="border px-4 py-2">{{ t.description }}</td>
+ <td class="border px-4 py-2 text-right {{ 'text-green-500' if t.is_positive() else 'text-red-500' }}">{{
+ t.pretty_amount() }} €</td>
+ <td class="border px-4 py-2">
+ {% for tag in t.tags %}
+ <span style="background-color: {{ tag.color() }};" class="text-white rounded p-1">{{ tag.name }}</span>
+ {% endfor %}
+ </td>
+ </tr>
+ {% endfor %}
+ </tbody>
+ </table>
</form>
{% endblock %}
+
+{% block script %}
+// When the user scrolls the page, execute myFunction
+window.onscroll = function() {myFunction()};
+
+// Get the navbar
+var navbar = document.getElementById("navbar");
+
+// Get the offset position of the navbar
+var sticky = navbar.offsetTop;
+
+// Add the sticky class to the navbar when you reach its scroll position. Remove "sticky" when you leave the scroll position
+function myFunction() {
+if (window.pageYOffset >= sticky) {
+navbar.classList.add("sticky")
+} else {
+navbar.classList.remove("sticky");
+}
+}
+{% endblock %}