feat(weather): update navigate icons

gallery/easel/route/view/weather/__init__.py

@@ -25,8 +25,6 @@ def build_weather_response(request: AppRequest, response: WeatherResponse):
         request=request,
         name="weather.html",
         context={
-            "tag_util": TagUtil,
-            "datetime": datetime,
             "response": response,
         },
     )

gallery/easel/route/view/weather/filters.py

@@ -1,6 +1,12 @@
 import datetime
 
-from gallery.sketch.weather.model import Cloudness, Precipitation, Sky, WindDirection, WindDirectionDeg
+from gallery.sketch.weather.model import (
+    Cloudness,
+    Precipitation,
+    Sky,
+    WindDirection,
+    WindDirectionDeg,
+)
 
 
 def wind_direction_icon(wind_direction_deg: float) -> str:
@@ -8,7 +14,7 @@ def wind_direction_icon(wind_direction_deg: float) -> str:
     if wind_direction == WindDirection.CALM:
         return "wind-calm"
     else:
-      return f"wind-from-{wind_direction.name.lower()}"
+        return f"wind-from-{wind_direction.name.lower()}"
 
 
 def cloudness_icon(sky: Sky, date: datetime.datetime, period: str) -> list[str]:

gallery/easel/route/view/weather/templates/weather.html

@@ -9,16 +9,24 @@
 {% block content %}
 <h4>
   {% if response.period == 'day' %}
-  <a class="button {{'disabled' if response.date == datetime.date.today() else ''}}"
-     href="../tag/{{tag_util.create_tag('day', response.date, -1)}}">⬅️</a>
-  <a class="button"
-     href="../tag/days-10">⬆️</a>
-  <span>{{response.location}} | {{format_date(response.date, 'E, d MMMM Y', locale=request.state.language)}}</span>
-  <a class="button"
-     href="../tag/{{tag_util.create_tag('day', response.date, 1)}}">➡️</a>
+  <a class="icon-link {{'disabled' if response.date == datetime.date.today() else ''}}"
+     href="../tag/{{tag_util.create_tag('day', response.date, -1)}}">
+    <i class="bi bi-arrow-left-square"></i>
+  </a>
+  <a class="icon-link"
+     href="../tag/days-10">
+    <i class="bi bi-arrow-up-square"></i>
+  </a>
+  <span>{{response.location}} | {{format_date(response.date, DATE_FORMAT, locale=request.state.language)}}</span>
+  <a class="icon-link"
+     href="../tag/{{tag_util.create_tag('day', response.date, 1)}}">
+    <i class="bi bi-arrow-right-square"></i>
+  </a>
   {% endif %}
   {% if response.period == 'days' %}
-  <span>{{response.location}} | {{format_date(response.date, 'E, d MMMM Y', locale=request.state.language)}}</span>
+  <span>{{response.location}} | {{format_date(response.date, DATE_FORMAT, locale=request.state.language)}}</span>
+  <span>- {{format_date(response.date + datetime.timedelta(days=(response.values | length - 1)), DATE_FORMAT,
+    locale=request.state.language)}}</span>
   {% endif %}
 </h4>
 <div class="table-responsive">
@@ -58,8 +66,7 @@
             data-bs-toggle="tooltip"
             data-bs-title="{{ value.sky }}">
           {% for icon in value.sky | cloudness_icon(value.date, response.period) %}
-          <div class="wi wi-{{icon}} text-primary"
-               style="font-size: 3.5rem;"></div>
+          <div class="wi wi-{{icon}} wi-xl text-primary"></div>
           {% endfor %}
         </td>
         {% endfor %}
@@ -95,7 +102,7 @@
         <td class="wind"
             data-bs-toggle="tooltip"
             data-bs-title="{{ value.wind_direction }}">
-          <div class="wi wi-wind-deg wi-{{value.wind_direction | wind_direction_icon}} fs-1 text-primary"></div>
+          <div class="wi wi-wind-deg wi-{{value.wind_direction | wind_direction_icon}} wi-l text-primary"></div>
         </td>
         {% endfor %}
       </tr>