From 0ae9215e2c07ce6d97b464950b7e3f764603aafe Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joakim=20Hells=C3=A9n?= <tlovinator@gmail.com>
Date: Tue, 6 Dec 2022 17:02:02 +0100
Subject: [PATCH] Make HTML sexier

---
 discord_rss_bot/templates/base.html  | 21 ++++++++++------
 discord_rss_bot/templates/index.html | 37 +++++++++++++++++-----------
 discord_rss_bot/templates/nav.html   | 11 ++++++---
 3 files changed, 44 insertions(+), 25 deletions(-)
diff --git a/discord_rss_bot/templates/base.html b/discord_rss_bot/templates/base.html
index d43d153..fbf0dab 100644
--- a/discord_rss_bot/templates/base.html
+++ b/discord_rss_bot/templates/base.html
@@ -10,14 +10,21 @@
         <title>RSS - {% block title %}{% endblock %}</title>
     {% endblock %}
 </head>
-<body>
+<body class="bg-dark text-white">
 {% include "nav.html" %}
-<div id="content">{% block content %}{% endblock %}</div>
-<footer>
-    {% block footer %}
-        <a href="https://github.com/TheLovinator1/discord-rss-bot">RSS Bot</a> by TheLovinator1
-    {% endblock %}
-</footer>
+<div class="container-fluid">
+    {% block content %}{% endblock %}
+    <footer class="d-flex flex-wrap justify-content-between align-items-center py-3 my-4 border-top">
+        <p class="col-md-4 mb-0 text-muted">Made by <a href="https://github.com/TheLovinator1">TheLovinator</a></p>
+        <ul class="nav col-md-4 justify-content-end">
+            <li class="nav-item"><a href="mailto:tlovinator@gmail.com" class="nav-link px-2 text-muted">Email</a></li>
+            <li class="nav-item"><a href="https://github.com/TheLovinator1/discord-rss-bot/issues"
+                                    class="nav-link px-2 text-muted">Send an issue</a></li>
+            <li class="nav-item"><a href="https://github.com/TheLovinator1/discord-rss-bot/issues"
+                                    class="nav-link px-2 text-muted">Feature request</a></li>
+        </ul>
+    </footer>
+</div>
 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"
         integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
         crossorigin="anonymous">
diff --git a/discord_rss_bot/templates/index.html b/discord_rss_bot/templates/index.html
index 4feac10..66bc496 100644
--- a/discord_rss_bot/templates/index.html
+++ b/discord_rss_bot/templates/index.html
@@ -9,7 +9,7 @@
         <!-- Check if any feeds -->
         {% if feeds %}
             {% for feed in feeds %}
-                <a href="/feed/{{ feed.url }}">{{ feed.url }}</a>
+                <p><a href="/feed/{{ feed.url }}">{{ feed.url }}</a></p>
             {% endfor %}
         {% else %}
             <p>No feeds yet</p>
@@ -21,24 +21,33 @@
     <hr>
     <ul>
         <li>
-            <p>Feed stats:</p>
-            <p>Total: {{ feed_count.total }} feeds</p>
-            <p>Broken: {{ feed_count.broken }} feeds</p>
-            <p>Enabled: {{ feed_count.updates_enabled }} feeds</p>
+            <p>
+                {{ feed_count.total }} feeds
+                {% if feed_count.broken %}
+                    - {{ feed_count.broken }} broken
+                {% endif %}
+                {% if feed_count.total != feed_count.updates_enabled %}
+                    - {{ feed_count.updates_enabled }} enabled
+                {% endif %}
+            </p>
         </li>
     </ul>
     <!-- Feed entries stats -->
     <ul>
         <li>
-            <p>Feed entries:</p>
-            <p>Total: {{ entry_count.total }} entries</p>
-            <p>Read: {{ entry_count.read }} entries</p>
-            <p>Important: {{ entry_count.important }} entries</p>
-            <p>Has enclosures: {{ entry_count.has_enclosures }} entries</p>
-            <p>1 Month: {{ entry_count.averages[0]|round(2) }} entries per day</p>
-            <p>3 Months: {{ entry_count.averages[1]|round(2) }} entries per day</p>
-            <p>12 Months: {{ entry_count.averages[2]|round(2) }} entries per day</p>
-
+            <p>{{ entry_count.total }} entries total</p>
+            {% if entry_count.read != entry_count.total %}
+                <p>{{ entry_count.total - entry_count.read }} unread entries</p>
+            {% endif %}
+            {% if entry_count.important %}
+                <p>Important: {{ entry_count.important }} entries</p>
+            {% endif %}
+            {% if entry_count.has_enclosures %}
+                <p>Has enclosures: {{ entry_count.has_enclosures }} entries</p>
+            {% endif %}
+            <p>1 Month average: {{ entry_count.averages[0]|round(2) }} entries per day</p>
+            <p>3 Months average: {{ entry_count.averages[1]|round(2) }} entries per day</p>
+            <p>12 Months average: {{ entry_count.averages[2]|round(2) }} entries per day</p>
         </li>
     </ul>
 
diff --git a/discord_rss_bot/templates/nav.html b/discord_rss_bot/templates/nav.html
index 25a30af..df77204 100644
--- a/discord_rss_bot/templates/nav.html
+++ b/discord_rss_bot/templates/nav.html
@@ -1,18 +1,21 @@
-<nav class="navbar navbar-expand-md navbar-dark bg-primary">
+<nav class="navbar navbar-expand-md navbar-dark bg-dark bg-gradient">
     <div class="container-fluid">
-        <a class="navbar-brand abs" href="/">discord-rss-bot</a>
         <button class="navbar-toggler ms-auto" type="button" data-bs-toggle="collapse" data-bs-target="#collapseNavbar">
             <span class="navbar-toggler-icon"></span>
         </button>
         <div class="navbar-collapse collapse" id="collapseNavbar">
             <ul class="navbar-nav">
                 <li class="nav-item">
-                    <a class="nav-link" href="/add">Add new feed.</a>
+                    <a class="nav-link" href="/">Feeds</a>
+                </li>
+                <li class="nav-item nav-link">|</li>
+                <li class="nav-item">
+                    <a class="nav-link" href="/add">Add new feed</a>
                 </li>
             </ul>
             <ul class="navbar-nav ms-auto">
                 <li class="nav-item">
-                    <a class="nav-link" href="https://github.com/sponsors/TheLovinator1" data-bs-target="#myModal" data-bs-toggle="modal">Donate</a>
+                    <a class="nav-link" href="https://github.com/sponsors/TheLovinator1">Donate ❤️</a>
                 </li>
             </ul>
         </div>
