From b5f2c272bb34802ca1d43b45de98dea601498ce5 Mon Sep 17 00:00:00 2001 From: shmyga Date: Mon, 1 Jun 2026 00:27:06 +0300 Subject: [PATCH] feat(easel): update navbar --- .../route/view/common/templates/base.html | 16 +++++---- .../view/schedule/templates/channel.html | 1 - .../view/schedule/templates/schedule.html | 1 - .../route/view/weather/templates/weather.html | 4 +-- static/src/lib/flag-icons.scss | 15 ++++++++ static/src/main.scss | 29 +++++++++++++--- static/src/mobile.scss | 34 +++++++++++++++++++ static/src/weather.scss | 2 +- 8 files changed, 85 insertions(+), 17 deletions(-) create mode 100644 static/src/lib/flag-icons.scss create mode 100644 static/src/mobile.scss diff --git a/gallery/easel/route/view/common/templates/base.html b/gallery/easel/route/view/common/templates/base.html index e658372..78f7be5 100644 --- a/gallery/easel/route/view/common/templates/base.html +++ b/gallery/easel/route/view/common/templates/base.html @@ -21,10 +21,12 @@
-
- API Gallery - {% block header %}{% endblock %} +
+
+ API Gallery + {% block header %}{% endblock %} +
  • @@ -44,7 +46,7 @@ class="dropdown-item d-flex align-items-center" data-bs-language-value="en" aria-pressed="false"> - + {{_("English")}}
    • @@ -53,7 +55,7 @@ class="dropdown-item d-flex align-items-center" data-bs-language-value="ru" aria-pressed="false"> - + {{_("Russian")}} diff --git a/gallery/easel/route/view/schedule/templates/channel.html b/gallery/easel/route/view/schedule/templates/channel.html index b8a457c..f6785ad 100644 --- a/gallery/easel/route/view/schedule/templates/channel.html +++ b/gallery/easel/route/view/schedule/templates/channel.html @@ -4,7 +4,6 @@ {% endblock %} {% block header %} -/ {{_("TV program")}} {% endblock %} diff --git a/gallery/easel/route/view/schedule/templates/schedule.html b/gallery/easel/route/view/schedule/templates/schedule.html index 00b6cd7..6af0811 100644 --- a/gallery/easel/route/view/schedule/templates/schedule.html +++ b/gallery/easel/route/view/schedule/templates/schedule.html @@ -4,7 +4,6 @@ {% endblock %} {% block header %} -/ {{_("TV program")}} {% endblock %} diff --git a/gallery/easel/route/view/weather/templates/weather.html b/gallery/easel/route/view/weather/templates/weather.html index 6698c8a..c2a515e 100644 --- a/gallery/easel/route/view/weather/templates/weather.html +++ b/gallery/easel/route/view/weather/templates/weather.html @@ -2,8 +2,8 @@ {% block title %}{{_("Weather")}} | {{response.location}} | {{response.date.strftime('%a, %d %B %Y')}}{% endblock %} {% block header %} -/ -{{_("Weather")}} +{{_("Weather")}} {% endblock %} {% block content %} diff --git a/static/src/lib/flag-icons.scss b/static/src/lib/flag-icons.scss new file mode 100644 index 0000000..6e81e7b --- /dev/null +++ b/static/src/lib/flag-icons.scss @@ -0,0 +1,15 @@ +@use "flag-icons/sass/flag-icons" with ( + $flag-icons-path: "flag-icons/flags", + $flag-icons-included-countries: ( + "gb", + "ru", + "by", + "ua", + "kz", + ) +); + +.fir { + @extend .fis; + border-radius: 50%; +} diff --git a/static/src/main.scss b/static/src/main.scss index 98b8d93..1317349 100644 --- a/static/src/main.scss +++ b/static/src/main.scss @@ -1,8 +1,4 @@ -@use "flag-icons/sass/flag-icons" with ( - $flag-icons-path: "flag-icons/flags", - $flag-icons-included-countries: ("gb", "ru", "by", "ua", "kz") -); - +@import "./lib/flag-icons"; @import "./lib/bootstrap"; @import "./lib/bootstrap-icons"; @@ -21,3 +17,26 @@ height: 2rem; background-size: contain; } + +.app-header { + display: flex; + flex-direction: row; + + > .link-list { + display: flex; + flex-direction: row; + gap: 1rem; + + app-link { + display: flex; + align-items: center; + + &:not(:last-child)::after { + margin-left: 1rem; + content: "|"; + } + } + } +} + +@import "./mobile"; diff --git a/static/src/mobile.scss b/static/src/mobile.scss new file mode 100644 index 0000000..8be9136 --- /dev/null +++ b/static/src/mobile.scss @@ -0,0 +1,34 @@ +@import "./lib/bootstrap"; + +@include media-breakpoint-down(md) { + .app-header { + flex-direction: column; + + > .link-list { + border-bottom: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important; + padding-bottom: map-get($spacers, 1); + margin-bottom: map-get($spacers, 1); + flex-direction: column; + gap: 0; + + app-link { + display: flex; + align-items: center; + + &:not(:last-child)::after { + content: ""; + } + } + } + } + + .navbar-nav { + flex-direction: column !important; + + > .nav-item { + .btn { + padding: 0.125rem !important; + } + } + } +} diff --git a/static/src/weather.scss b/static/src/weather.scss index a9ecef9..05ae645 100644 --- a/static/src/weather.scss +++ b/static/src/weather.scss @@ -31,7 +31,7 @@ } .temperature { - padding: 0; + padding: 0 !important; } .temperature .value {