consistently format prices everywhere

.pre-commit-config.yaml

@@ -6,11 +6,11 @@ repos:
 #     rev: 24.8.0
 #     hooks:
 #     -   id: black
-- repo: https://github.com/pycqa/isort
-  rev: 5.13.2
-  hooks:
-    - id: isort
-      name: isort (python)
+# - repo: https://github.com/pycqa/isort
+#   rev: 5.13.2
+#   hooks:
+#     - id: isort
+#       name: isort (python)
 - repo: https://github.com/Riverside-Healthcare/djLint
   rev: v1.34.0
   hooks:

common/components.py

@@ -3,6 +3,7 @@ from string import ascii_lowercase
 from typing import Any, Callable
 
 from django.template import TemplateDoesNotExist
+from django.template.defaultfilters import floatformat
 from django.template.loader import render_to_string
 from django.urls import NoReverseMatch, reverse
 from django.utils.safestring import SafeText, mark_safe
@@ -50,6 +51,7 @@ def randomid(seed: str = "", length: int = 10) -> str:
 def Popover(
     popover_content: str,
     wrapped_content: str = "",
+    wrapped_classes: str = "",
     children: list[HTMLTag] = [],
     attributes: list[HTMLAttribute] = [],
 ) -> str:
@@ -62,14 +64,15 @@ def Popover(
             ("id", id),
             ("wrapped_content", wrapped_content),
             ("popover_content", popover_content),
+            ("wrapped_classes", wrapped_classes),
         ],
         children=children,
         template="cotton/popover.html",
     )
 
 
-def PopoverTruncated(input_string: str) -> str:
-    if (truncated := truncate(input_string)) != input_string:
+def PopoverTruncated(input_string: str, length: int = 30, ellipsis: str = "…") -> str:
+    if (truncated := truncate(input_string, length, ellipsis)) != input_string:
         return Popover(wrapped_content=truncated, popover_content=input_string)
     else:
         return input_string
@@ -193,3 +196,11 @@ def NameWithPlatformIcon(name: str, platform: str) -> SafeText:
     )
 
     return mark_safe(content)
+
+
+def PurchasePrice(purchase) -> str:
+    return Popover(
+        popover_content=f"{floatformat(purchase.price)} {purchase.price_currency}",
+        wrapped_content=f"{floatformat(purchase.converted_price)} {purchase.converted_currency}",
+        wrapped_classes="underline decoration-dotted",
+    )

common/utils.py

@@ -36,8 +36,8 @@ def safe_getattr(obj: object, attr_chain: str, default: Any | None = None) -> ob
 
 def truncate(input_string: str, length: int = 30, ellipsis: str = "…") -> str:
     return (
-        (f"{input_string[:length-len(ellipsis)]}{ellipsis}")
-        if len(input_string) > 30
+        (f"{input_string[:length-len(ellipsis)].rstrip()}{ellipsis}")
+        if len(input_string) > length
         else input_string
     )
 

games/static/base.css

@@ -2192,6 +2192,10 @@ input:checked + .toggle-bg {
   text-decoration-color: #64748b;
 }
 
+.decoration-dotted {
+  text-decoration-style: dotted;
+}
+
 .opacity-0 {
   opacity: 0;
 }
@@ -3117,6 +3121,10 @@ textarea:disabled:is(.dark *) {
     flex-direction: row;
   }
 
+  .md\:justify-between {
+    justify-content: space-between;
+  }
+
   .md\:space-x-8 > :not([hidden]) ~ :not([hidden]) {
     --tw-space-x-reverse: 0;
     margin-right: calc(2rem * var(--tw-space-x-reverse));
@@ -3260,3 +3268,13 @@ textarea:disabled:is(.dark *) {
 .\[\&_td\:last-child\]\:text-right td:last-child {
   text-align: right;
 }
+
+@media not all and (min-width: 640px) {
+  .\[\&_td\:not\(\:first-child\)\:not\(\:last-child\)\]\:max-sm\:hidden td:not(:first-child):not(:last-child) {
+    display: none;
+  }
+
+  .\[\&_th\:not\(\:first-child\)\:not\(\:last-child\)\]\:max-sm\:hidden th:not(:first-child):not(:last-child) {
+    display: none;
+  }
+}

games/templates/cotton/popover.html

@@ -1,8 +1,10 @@
-<span data-popover-target={{ id }} class="{{ class }}">{{ wrapped_content|default:slot }}</span>
+<span data-popover-target={{ id }} class="{{ wrapped_classes }}">{{ wrapped_content|default:slot }}</span>
 <div data-popover
      id="{{ id }}"
      role="tooltip"
      class="absolute z-10 invisible inline-block text-sm text-white transition-opacity duration-300 bg-white border border-purple-200 rounded-lg shadow-sm opacity-0 dark:text-white dark:border-purple-600 dark:bg-purple-800">
     <div class="px-3 py-2">{{ popover_content }}</div>
     <div data-popper-arrow></div>
+    <!-- for Tailwind CSS to generate decoration-dotted CSS from Python component -->
+    <span class="hidden decoration-dotted"></span>
 </div>

games/templates/cotton/simple_table.html

@@ -7,20 +7,20 @@
                 {{ header_action }}
                 </c-table-header>
             {% endif %}
-            <thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
+            <thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400 [&_th:not(:first-child):not(:last-child)]:max-sm:hidden">
                 <tr>
                     {% for column in columns %}<th scope="col" class="px-6 py-3">{{ column }}</th>{% endfor %}
                 </tr>
             </thead>
-            <tbody class="dark:divide-y">
+            <tbody class="dark:divide-y [&_td:not(:first-child):not(:last-child)]:max-sm:hidden">
                 {% for row in rows %}<c-table-row :data=row />{% endfor %}
             </tbody>
         </table>
     </div>
     {% if page_obj and elided_page_range %}
-        <nav class="flex items-center flex-column md:flex-row justify-between px-6 py-4 dark:bg-gray-900 sm:rounded-b-lg"
+        <nav class="flex items-center flex-col md:flex-row md:justify-between px-6 py-4 dark:bg-gray-900 sm:rounded-b-lg"
              aria-label="Table navigation">
-            <span class="text-sm font-normal text-gray-500 dark:text-gray-400 mb-4 md:mb-0 block w-full md:inline md:w-auto">Showing <span class="font-semibold text-gray-900 dark:text-white">{{ page_obj.start_index }}</span>—<span class="font-semibold text-gray-900 dark:text-white">{{ page_obj.end_index }}</span> of <span class="font-semibold text-gray-900 dark:text-white">{{ page_obj.paginator.count }}</span></span>
+            <span class="text-sm text-center font-normal text-gray-500 dark:text-gray-400 mb-4 md:mb-0 block w-full md:inline md:w-auto"><span class="font-semibold text-gray-900 dark:text-white">{{ page_obj.start_index }}</span>—<span class="font-semibold text-gray-900 dark:text-white">{{ page_obj.end_index }}</span> of <span class="font-semibold text-gray-900 dark:text-white">{{ page_obj.paginator.count }}</span></span>
             <ul class="inline-flex -space-x-px rtl:space-x-reverse text-sm h-8">
                 <li>
                     {% if page_obj.has_previous %}

games/templates/stats.html

@@ -142,7 +142,9 @@
             </tr>
             <tr>
                 <td class="px-2 sm:px-4 md:px-6 md:py-2">Spendings ({{ total_spent_currency }})</td>
-                <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{{ total_spent }} ({{ spent_per_game }}/game)</td>
+                <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">
+                    {{ total_spent | floatformat }} ({{ spent_per_game | floatformat }}/game)
+                </td>
             </tr>
         </tbody>
     </table>
@@ -253,7 +255,7 @@
                 {% for purchase in purchased_unfinished %}
                     <tr>
                         <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{% partial purchase-name %}</td>
-                        <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{{ purchase.converted_price }}</td>
+                        <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{{ purchase.converted_price | floatformat }}</td>
                         <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{{ purchase.date_purchased | date:"d/m/Y" }}</td>
                     </tr>
                 {% endfor %}
@@ -274,7 +276,7 @@
                 {% for purchase in all_purchased_this_year %}
                     <tr>
                         <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{% partial purchase-name %}</td>
-                        <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{{ purchase.converted_price }}</td>
+                        <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{{ purchase.converted_price | floatformat }}</td>
                         <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{{ purchase.date_purchased | date:"d/m/Y" }}</td>
                     </tr>
                 {% endfor %}

games/views/game.py

@@ -16,6 +16,7 @@ from common.components import (
     NameWithPlatformIcon,
     Popover,
     PopoverTruncated,
+    PurchasePrice,
 )
 from common.time import (
     dateformat,
@@ -25,7 +26,7 @@ from common.time import (
     local_strftime,
     timeformat,
 )
-from common.utils import format_float_or_int, safe_division, truncate
+from common.utils import safe_division, truncate
 from games.forms import GameForm
 from games.models import Edition, Game, Purchase, Session
 from games.views.general import use_custom_redirect
@@ -247,7 +248,7 @@ def view_game(request: HttpRequest, game_id: int) -> HttpResponse:
                 ),
                 purchase.get_type_display(),
                 purchase.date_purchased.strftime(dateformat),
-                f"{format_float_or_int(purchase.price)} {purchase.price_currency}",
+                PurchasePrice(purchase),
                 render_to_string(
                     "cotton/button_group.html",
                     {

games/views/purchase.py

@@ -13,9 +13,8 @@ from django.template.loader import render_to_string
 from django.urls import reverse
 from django.utils import timezone
 
-from common.components import A, Button, Icon, LinkedNameWithPlatformIcon
+from common.components import A, Button, Icon, LinkedNameWithPlatformIcon, PurchasePrice
 from common.time import dateformat
-from common.utils import format_float_or_int
 from games.forms import PurchaseForm
 from games.models import Edition, Purchase
 from games.views.general import use_custom_redirect
@@ -49,7 +48,6 @@ def list_purchases(request: HttpRequest) -> HttpResponse:
                 "Name",
                 "Type",
                 "Price",
-                "Currency",
                 "Infinite",
                 "Purchased",
                 "Refunded",
@@ -66,8 +64,7 @@ def list_purchases(request: HttpRequest) -> HttpResponse:
                         platform=purchase.platform,
                     ),
                     purchase.get_type_display(),
-                    format_float_or_int(purchase.price),
-                    purchase.price_currency,
+                    PurchasePrice(purchase),
                     purchase.infinite,
                     purchase.date_purchased.strftime(dateformat),
                     (