ci(version): 0.3.0

gallery/easel/route/view/common/templates/base.html

@@ -37,7 +37,7 @@
                   aria-expanded="false"
                   data-bs-toggle="dropdown"
                   aria-label="{{_('Select language')}} (default)">
-            <span class="fi fir fi-gb me-2 language-icon-active"></span>
+            <span class="fi fir fi-gb me-2 language-icon-active icon-header"></span>
             <span class="d-lg-none ms-2"
                   id="bd-language-text">{{_("Select language")}}</span>
           </button>
@@ -70,7 +70,7 @@
                   aria-expanded="false"
                   data-bs-toggle="dropdown"
                   aria-label="Toggle theme (auto)">
-            <span class="bi bi-circle-half me-2 opacity-50 theme-icon-active"></span>
+            <span class="bi bi-circle-half me-2 opacity-50 theme-icon-active icon-header"></span>
             <span class="d-lg-none ms-2"
                   id="bd-theme-text">{{_("Toggle theme")}}</span>
           </button>

gallery/easel/route/view/common/utils/template.py

@@ -1,3 +1,4 @@
+import datetime
 from pathlib import Path
 
 from babel.dates import format_date
@@ -7,6 +8,7 @@ from fastapi.templating import Jinja2Templates
 from gallery.version import __version__
 
 from ...translation import _
+from .tag import TagUtil
 
 
 def is_widget(request: Request) -> bool:
@@ -31,6 +33,9 @@ def build_templates(templates_dir: Path | None = None, filters: dict | None = No
             "_": _,
             "version": __version__,
             "format_date": format_date,
+            "datetime": datetime,
+            "tag_util": TagUtil,
+            "DATE_FORMAT": "E, d MMMM Y",
         }
     )
     if filters:

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 ''}}"
+  <a class="icon-link {{'disabled' if response.date == datetime.date.today() else ''}}"
-     href="../tag/{{tag_util.create_tag('day', response.date, -1)}}">⬅️</a>
+     href="../tag/{{tag_util.create_tag('day', response.date, -1)}}">
-  <a class="button"
+    <i class="bi bi-arrow-left-square"></i>
-     href="../tag/days-10">⬆️</a>
+  </a>
-  <span>{{response.location}} | {{format_date(response.date, 'E, d MMMM Y', locale=request.state.language)}}</span>
+  <a class="icon-link"
-  <a class="button"
+     href="../tag/days-10">
-     href="../tag/{{tag_util.create_tag('day', response.date, 1)}}">➡️</a>
+    <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"
+          <div class="wi wi-{{icon}} wi-xl text-primary"></div>
-               style="font-size: 3.5rem;"></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>

pyproject.toml

@@ -1,6 +1,6 @@
 [tool.poetry]
 name = "gallery"
-version = "0.2.3"
+version = "0.3.0"
 description = ""
 authors = ["shmyga <shmyga.z@gmail.com>"]
 readme = "README.md"

static/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "gallery",
-  "version": "0.2.3",
+  "version": "0.3.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "gallery",
-      "version": "0.2.3",
+      "version": "0.3.0",
       "license": "ISC",
       "dependencies": {
         "@popperjs/core": "^2.11.8",

static/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gallery",
-  "version": "0.2.3",
+  "version": "0.3.0",
   "scripts": {
     "build": "vite build",
     "dev": "vite build --watch"

static/src/lib/bootstrap-icons.scss

@@ -1,4 +1,6 @@
-//$bootstrap-icons: "circle-half", "moon-stars-fill", "brightness-high", "gear", "sun-fill", "tv";
+.icon-link {
+  vertical-align: -0.25rem;
+}
 
 .bi {
   display: inline-block;
@@ -13,12 +15,6 @@
   mask-repeat: no-repeat;
   background-color: currentColor;
 
-  //@each $icon in $bootstrap-icons {
-  //  &.bi-#{$icon} {
-  //    mask-image: url("bootstrap-icons/icons/#{$icon}.svg");
-  //  }
-  ///
-
   &.bi-circle-half {
     mask-image: url(bootstrap-icons/icons/circle-half.svg);
   }
@@ -37,4 +33,13 @@
   &.bi-tv {
     mask-image: url(bootstrap-icons/icons/tv.svg);
   }
+  &.bi-arrow-left-square {
+    mask-image: url(bootstrap-icons/icons/arrow-left-square.svg);
+  }
+  &.bi-arrow-right-square {
+    mask-image: url(bootstrap-icons/icons/arrow-right-square.svg);
+  }
+  &.bi-arrow-up-square {
+    mask-image: url(bootstrap-icons/icons/arrow-up-square.svg);
+  }
 }

static/src/lib/flag-icons.scss

@@ -12,4 +12,6 @@
 .fir {
   @extend .fis;
   border-radius: 50%;
+  height: 1em;
+  border: 1px solid gray;
 }

static/src/lib/weather-icons/weather-icons.scss

@@ -13,4 +13,11 @@
   mask-position: 50%;
   mask-repeat: no-repeat;
   background-color: currentColor;
+
+  &.wi-l {
+    font-size: 2.5rem;
+  }
+  &.wi-xl {
+    font-size: 3.5rem;
+  }
 }

static/src/main.scss

@@ -12,11 +12,8 @@
   }
 }
 
-.icon {
+.icon-header {
-  display: inline-block;
+  @include font-size($h4-font-size);
-  width: 2rem;
-  height: 2rem;
-  background-size: contain;
 }
 
 .app-header {