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 9418e60eef
6 changed files with 82 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -21,10 +21,12 @@
<body> <body>
<div class="app col-lg-8 mx-auto p-3 py-md-5"> <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="/" <app-link href="/"
icon="gear">API Gallery</app-link> icon="gear">API Gallery</app-link>
{% block header %}{% endblock %} {% block header %}{% endblock %}
</div>
<ul class="navbar-nav flex-row flex-wrap ms-md-auto"> <ul class="navbar-nav flex-row flex-wrap ms-md-auto">
<li class="nav-item dropdown"> <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" <button class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle d-flex align-items-center"

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

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

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

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

31
static/src/main.scss
View File

@@ -1,6 +1,12 @@
@use "flag-icons/sass/flag-icons" with ( @use "flag-icons/sass/flag-icons" with (
$flag-icons-path: "flag-icons/flags", $flag-icons-path: "flag-icons/flags",
$flag-icons-included-countries: ("gb", "ru", "by", "ua", "kz") $flag-icons-included-countries: (
"gb",
"ru",
"by",
"ua",
"kz",
)
); );
@import "./lib/bootstrap"; @import "./lib/bootstrap";
@@ -21,3 +27,26 @@
height: 2rem; height: 2rem;
background-size: contain; 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";

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

@@ -0,0 +1,44 @@
$mobile-spacer: 0.5rem;
$grid-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px,
);
@media (max-width: map-get($grid-breakpoints, "md")) {
.app-header {
flex-direction: column;
> .link-list {
flex-direction: column;
gap: 0;
app-link {
display: flex;
align-items: center;
&:not(:last-child)::after {
content: "";
}
}
&::after {
content: " ";
padding-top: 0.5rem;
}
}
}
.navbar-nav {
flex-direction: column !important;
> .nav-item {
.btn {
padding: 0.125rem !important;
}
}
}
}