Added: time diffs as strings (#39)

app.py

@@ -5,6 +5,7 @@
 import os
 import yaml
 import datetime
+from num2words import num2words
 
 def prettify_time_diff(dt, anchor=datetime.datetime.now()):
 
@@ -14,13 +15,13 @@ def prettify_time_diff(dt, anchor=datetime.datetime.now()):
         return 'just now'
     elif delta < datetime.timedelta(hours=1):
         minutes = delta.seconds // 60
-        return f'{minutes} minute{"s" if minutes != 1 else ""} ago'
+        return f'{num2words(minutes)} minute{"s" if minutes != 1 else ""} ago'
     elif delta < datetime.timedelta(days=1):
         hours = delta.seconds // 3600
-        return f'{hours} hour{"s" if hours != 1 else ""} ago'
+        return f'{num2words(hours)} hour{"s" if hours != 1 else ""} ago'
     else:
         days = delta.days
-        return f'{days} day{"s" if days != 1 else ""} ago'
+        return f'{num2words(days)} day{"s" if days != 1 else ""} ago'
 
 # Satisfies 
 def flask_route_macros():

static/style.css

@@ -60,3 +60,9 @@
 .search-dropdown-item:hover {
     background-color: rgba(0, 0, 0, 0.5);
 }
+
+
+.tooltip .tooltip-inner {
+    color: #fff; 
+    background-color: #343A40; /* or any dark color of your choice */
+}

templates/base.html.jinja

@@ -118,14 +118,10 @@
         </div>
     </div>
 
-
-    <!-- Optional JavaScript; choose one of the two! -->
-    {% block scripts %}{% endblock %}
+    <!-- Bootstrap Bundle with Popper -->
+    <script src="{{ url_for('static', filename='bootstrap.bundle.min.js') }}"></script>
 
     <script>
-
-
-
     document.getElementById('search').addEventListener('keyup', function() {
         var input = this.value;
         if(input.length > 2){
@@ -156,8 +152,10 @@
     });
 
     </script>
-    <!-- Option 1: Bootstrap Bundle with Popper -->
-    <script src="{{ url_for('static', filename='bootstrap.bundle.min.js') }}"></script>
+
+    <!-- Optional JavaScript -->
+    {% block scripts %}{% endblock %}
+
 </body>
 
 </html>

templates/page.html.jinja

@@ -12,9 +12,21 @@ View - {{ page.title|e }}
 
 {% block content %}
 <div style="padding-bottom: 10px;">
-<h4>{{ page.title|e }}</h4> <small>Created {{ prettify_time_diff(page.created_at) }} (Last edited on <span data-bs-toggle="tooltip" data-bs-placement="top" data-bs-original-title="Tooltip on top">{{ prettify_time_diff(page.last_edited) }}</span>)</small>
+<h4>{{ page.title|e }}</h4> 
+<small>
+    Created 
+    <a href="#" class="text-decoration-none" onclick="event.preventDefault();" data-bs-toggle="tooltip" data-bs-placement="top" title="{{ page.created_at }}">
+        {{ prettify_time_diff(page.created_at) }}
+    </a> 
+    (last edited 
+    <a href="#" class="text-decoration-none" onclick="event.preventDefault();" data-bs-toggle="tooltip" data-bs-placement="top" title="{{ page.last_edited }}">
+        {{ prettify_time_diff(page.last_edited) }} 
+    </a>)
+</small>
 </div>
 
+
+
 <div class="card p-3">
     <div class="card-body">
         <p>{{ page.content|safe }}</p>
@@ -41,14 +53,15 @@ View - {{ page.title|e }}
 </a>
 
 {% endblock %}
+{%block scripts%}
 
 
-{%block scripts%}
 <script>
+document.addEventListener("DOMContentLoaded", function(){
   var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
   var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
     return new bootstrap.Tooltip(tooltipTriggerEl)
   })
-
+});
 </script>
 {%endblock%}