InfernalGames/gallery
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(easel): update navbar

Browse Source
This commit is contained in:
shmyga
2026-06-01 00:27:06 +03:00
parent eec72c77ab
commit b5f2c272bb
8 changed files with 85 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
gallery/easel/route/view/common/templates/base.html
View File

@@ -21,10 +21,12 @@
<body>
<div class="app col-lg-8 mx-auto p-3 py-md-5">
<header class="d-flex align-items-center pb-3 mb-5 border-bottom">
<header class="app-header pb-3 mb-5 border-bottom">
<div class="link-list">
<app-link href="/"
icon="gear">API Gallery</app-link>
{% block header %}{% endblock %}
</div>
<ul class="navbar-nav flex-row flex-wrap ms-md-auto">
<li class="nav-item dropdown">
<button class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle d-flex align-items-center"
@@ -33,7 +35,7 @@
aria-expanded="false"
data-bs-toggle="dropdown"
aria-label="{{_('Select language')}} (default)">
<span class="fi fi-gb me-2 language-icon-active"></span>
<span class="fi fir fi-gb me-2 language-icon-active"></span>
<span class="d-lg-none ms-2"
id="bd-language-text">{{_("Select language")}}</span>
</button>
@@ -44,7 +46,7 @@
class="dropdown-item d-flex align-items-center"
data-bs-language-value="en"
aria-pressed="false">
<span class="fi fi-gb me-2 language-icon-active"></span>
<span class="fi fir fi-gb me-2 language-icon-active"></span>
{{_("English")}}
</button>
</li>
@@ -53,7 +55,7 @@
class="dropdown-item d-flex align-items-center"
data-bs-language-value="ru"
aria-pressed="false">
<span class="fi fi-ru me-2 language-icon-active"></span>
<span class="fi fir fi-ru me-2 language-icon-active"></span>
{{_("Russian")}}
</button>
</li>

1
gallery/easel/route/view/schedule/templates/channel.html
View File

@@ -4,7 +4,6 @@
{% endblock %}
{% block header %}
<span class="fs-4 text-body ms-2 me-2">/</span>
<app-link href="/schedule"
icon="tv">{{_("TV program")}}</app-link>
{% endblock %}

1
gallery/easel/route/view/schedule/templates/schedule.html
View File

@@ -4,7 +4,6 @@
{% endblock %}
{% block header %}
<span class="fs-4 text-body ms-2 me-2">/</span>
<app-link href="/schedule"
icon="tv">{{_("TV program")}}</app-link>
{% endblock %}

4
gallery/easel/route/view/weather/templates/weather.html
View File

@@ -2,8 +2,8 @@
{% block title %}{{_("Weather")}} | {{response.location}} | {{response.date.strftime('%a, %d %B %Y')}}{% endblock %}
{% block header %}
<span class="fs-4 text-body ms-2 me-2">/</span>
<app-link href="/weather" icon="brightness-high">{{_("Weather")}}</app-link>
<app-link href="/weather"
icon="brightness-high">{{_("Weather")}}</app-link>
{% endblock %}
{% block content %}

15
static/src/lib/flag-icons.scss Normal file
View File

@@ -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%;
}

29
static/src/main.scss
View File

@@ -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";

34
static/src/mobile.scss Normal file
View File

@@ -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;
}
}
}
}

2
static/src/weather.scss
View File

@@ -31,7 +31,7 @@
}
.temperature {
padding: 0;
padding: 0 !important;
}
.temperature .value {