diff --git a/lambda_search/static_dev/css/lambda_theme.css b/lambda_search/static_dev/css/lambda_theme.css
index de01db6..8d4bdcc 100644
--- a/lambda_search/static_dev/css/lambda_theme.css
+++ b/lambda_search/static_dev/css/lambda_theme.css
@@ -181,11 +181,7 @@ h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1 {
color: var(--lambda-text)
}
-@media (max-width: 99px) {
- div.lambda-login {
- width: 90%;
- }
- }
+
.lambda-login {
width: 40%;
@@ -194,4 +190,50 @@ h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1 {
.lambda-feedback-form {
width: 60%;
}
+
+.lambda-logo {
+ padding-left: 50%;
+}
+
+
+@media (max-width: 576px) {
+ html {
+ font-size: 14px;
+ }
+
+ h1, .h1 {
+ font-size: 1.75rem;
+ }
+ h2, .h2 {
+ font-size: 1.5rem;
+ }
+
+ h3, .h3 {
+ font-size: 1.25rem;
+ }
+ .lambda-login {
+ width: 90% !important;
+ }
+ .lambda-feedback-form {
+ width: 90% !important;
+ }
+}
+
+@media (max-width: 992px) {
+ .lambda-profile {
+ padding-top: 4%;
+ }
+}
+
+@media (min-width: 767px) {
+ .profile-group {
+ position: static !important;
+ transform: none !important;
+
+ }
+ .lambda-logo {
+ padding-left: 10px;
+ }
+
+}
\ No newline at end of file
diff --git a/lambda_search/templates/base.html b/lambda_search/templates/base.html
index dedc103..9c4edaf 100644
--- a/lambda_search/templates/base.html
+++ b/lambda_search/templates/base.html
@@ -2,6 +2,7 @@
+
{% block title %}
diff --git a/lambda_search/templates/includes/header.html b/lambda_search/templates/includes/header.html
index 2c776ef..10eaa24 100644
--- a/lambda_search/templates/includes/header.html
+++ b/lambda_search/templates/includes/header.html
@@ -2,118 +2,157 @@
{% load static %}
{% with request.resolver_match.view_name as view_name %}
<header class="container-fluid mt-3">
- <div class="d-flex flex-wrap align-items-center justify-content-center
- justify-content-md-between lambda-secondary rounded-4 mx-2 p-3">
- <ul class="nav col-12 col-md-auto mb-2 justify-content-end mb-md-0">
- <li class="nav-item my-auto mx-2 me-3">
- <a href="{% url 'homepage:homepage' %}">
+ <nav class="navbar navbar-expand-md lambda-secondary rounded-4 mx-2 p-3">
+ <div class="container-fluid p-0 position-relative">
+ <!-- Левая группа (логотип) -->
+ <div class="d-flex align-items-center">
+ <a href="{% url 'homepage:homepage' %}" class="d-flex align-items-center me-3 lambda-logo">
<img src="{% static 'images/logo.png' %}" height="40" alt="search">
</a>
- </li>
- <li class="nav-item mx-1 my-auto">
- <a class="btn lambda-nav{% if view_name == 'search:search' %} lambda-nav-active{% endif %}"
- {% if view_name != 'search:search' %}href="{% url 'search:search' %}"{% endif %}>
- {% trans "Search" %}
- </a>
- </li>
- <li class="nav-item mx-1 my-auto">
- <a class="btn lambda-nav {% if view_name == 'feedback:feedback' %} lambda-nav-active {% endif %}"
- {% if view_name != 'feedback:feedback' %}href="{% url 'feedback:feedback' %}"{% endif %}>
- {% trans "Go feedback" %}
- </a>
- </li>
- <li class="nav-item mx-1 my-auto">
- <a class="btn lambda-nav{% if view_name == 'about:about' %} lambda-nav-active{% endif %}"
- {% if view_name != 'about:about' %}href="{% url 'about:about' %}"{% endif %}>
- {% trans "About" %}
- </a>
- </li>
- </ul>
+ <!-- Основная навигация (всегда слева) -->
+ <div class="d-none d-md-flex">
+ <ul class="navbar-nav me-auto mb-2 mb-md-0">
+ <li class="nav-item mx-1">
+ <a class="btn lambda-nav{% if view_name == 'search:search' %} lambda-nav-active{% endif %}"
+ {% if view_name != 'search:search' %}href="{% url 'search:search' %}"{% endif %}>
+ {% trans "Search" %}
+ </a>
+ </li>
+ <li class="nav-item mx-1">
+ <a class="btn lambda-nav{% if view_name == 'feedback:feedback' %} lambda-nav-active{% endif %}"
+ {% if view_name != 'feedback:feedback' %}href="{% url 'feedback:feedback' %}"{% endif %}>
+ {% trans "Go feedback" %}
+ </a>
+ </li>
+ <li class="nav-item mx-1">
+ <a class="btn lambda-nav{% if view_name == 'about:about' %} lambda-nav-active{% endif %}"
+ {% if view_name != 'about:about' %}href="{% url 'about:about' %}"{% endif %}>
+ {% trans "About" %}
+ </a>
+ </li>
+ </ul>
+ </div>
+ </div>
- <ul class="nav col-12 col-md-auto mb-2 justify-content-end mb-md-0">
- {% if request.user.is_authenticated and request.user.is_staff %}
- <li class="nav-item my-auto mx-1">
- <a class="btn lambda-primary lambda-btn" href="{% url 'admin:index' %}">
- {% trans "Admin-panel" %}
- </a>
- </li>
- {% endif %}
+ <!-- Центральная группа с адаптивным меню -->
+ <div class="collapse navbar-collapse" id="navbarNav">
+ <!-- Мобильная версия основной навигации -->
+ <div class="d-md-none">
+ <ul class="navbar-nav mb-2">
+ <li class="nav-item mx-1">
+ <a class="btn lambda-nav{% if view_name == 'search:search' %} lambda-nav-active{% endif %}"
+ {% if view_name != 'search:search' %}href="{% url 'search:search' %}"{% endif %}>
+ {% trans "Search" %}
+ </a>
+ </li>
+ <li class="nav-item mx-1">
+ <a class="btn lambda-nav{% if view_name == 'feedback:feedback' %} lambda-nav-active{% endif %}"
+ {% if view_name != 'feedback:feedback' %}href="{% url 'feedback:feedback' %}"{% endif %}>
+ {% trans "Go feedback" %}
+ </a>
+ </li>
+ <li class="nav-item mx-1">
+ <a class="btn lambda-nav{% if view_name == 'about:about' %} lambda-nav-active{% endif %}"
+ {% if view_name != 'about:about' %}href="{% url 'about:about' %}"{% endif %}>
+ {% trans "About" %}
+ </a>
+ </li>
+ </ul>
+ </div>
- <div class="dropdown my-auto mx-1 lambda-nav lambda-nav-active">
- <button id="language-text" class="btn dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
- {% get_current_language as LANGUAGE_CODE %}
- {% get_language_info for LANGUAGE_CODE as current_language %}
- {{ current_language.name_local }}
- </button>
- <ul class="dropdown-menu lambda-secondary">
- {% get_available_languages as LANGUAGES %}
- {% get_language_info_list for LANGUAGES as languages %}
- {% for language in languages%}
- <li>
- <form action="{% url 'set_language' %}" method="post" id="{{language.code}}_form">
- {% csrf_token %}
- <input type="hidden" name="language" value="{{ language.code }}">
- <button type="button" class="dropdown-item lambda-btn lambda-font-medium {% if language.code == current_language.code %}lambda-primary{% endif %}"
- aria-pressed="{% if language.code == current_language.code %}true{% else %}false{% endif %}"
- onclick="document.getElementById('{{ language.code }}_form').submit();">
- {{ language.name_local }}
- </button>
- </form>
+ <!-- Дополнительные элементы в гамбургере -->
+ <ul class="navbar-nav ms-auto">
+ {% if request.user.is_authenticated and request.user.is_staff %}
+ <li class="nav-item mx-1">
+ <a class="btn lambda-primary lambda-btn" href="{% url 'admin:index' %}">
+ {% trans "Admin-panel" %}
+ </a>
</li>
- {% endfor %}
+ {% endif %}
+
+ <li class="nav-item mx-1">
+ <div class="dropdown my-auto lambda-nav lambda-nav-active">
+ <button id="language-text" class="btn dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
+ {% get_current_language as LANGUAGE_CODE %}
+ {% get_language_info for LANGUAGE_CODE as current_language %}
+ {{ current_language.name_local }}
+ </button>
+ <ul class="dropdown-menu lambda-secondary">
+ {% get_available_languages as LANGUAGES %}
+ {% get_language_info_list for LANGUAGES as languages %}
+ {% for language in languages %}
+ <li>
+ <form action="{% url 'set_language' %}" method="post" id="{{language.code}}_form">
+ {% csrf_token %}
+ <input type="hidden" name="language" value="{{ language.code }}">
+ <button type="button" class="dropdown-item lambda-btn lambda-font-medium {% if language.code == current_language.code %}lambda-primary{% endif %}"
+ aria-pressed="{% if language.code == current_language.code %}true{% else %}false{% endif %}"
+ onclick="document.getElementById('{{ language.code }}_form').submit();">
+ {{ language.name_local }}
+ </button>
+ </form>
+ </li>
+ {% endfor %}
+ </ul>
+ </div>
+ </li>
+
+ <li class="nav-item mx-1">
+ <div class="dropdown my-auto lambda-nav lambda-nav-active">
+ <button class="btn dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
+ {% trans "theme_button" %}
+ </button>
+ <ul class="dropdown-menu lambda-secondary">
+ <li><a class="dropdown-item lambda-btn " data-bs-theme-value="light" href="javascript:void(0);">{% trans "light_theme" %}</a></li>
+ <li><a class="dropdown-item lambda-btn" data-bs-theme-value="dark" href="javascript:void(0);">{% trans "dark_theme" %}</a></li>
+ <li><a class="dropdown-item lambda-btn" data-bs-theme-value="auto" href="javascript:void(0);">{% trans "auto_theme" %}</a></li>
+ </ul>
+ </div>
+ </li>
</ul>
</div>
-
-
- <div class="dropdown my-auto mx-1 lambda-nav lambda-nav-active">
- <button class="btn dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
- {% trans "theme_button" %}
+
+ <!-- Правая группа (профиль и гамбургер) -->
+ <div class="position-absolute top-50 end-0 translate-middle-y d-flex align-items-center gap-2 profile-group">
+ <!-- Профиль -->
+ {% if request.user.is_authenticated %}
+ <div class="dropdown">
+ <button class="btn dropdown-toggle bg-transparent d-flex align-items-center border-1 lambda-border" type="button" data-bs-toggle="dropdown"
+ aria-expanded="false">
+ {% if request.user.profile.get_small_avatar %}
+ <img src="{{ request.user.profile.get_small_avatar }}" class="rounded-circle me-2"
+ width="32" height="32" alt="">
+ {% else %}
+ <img src="{% static "images/default_avatar.svg" %}" class="rounded-circle me-2"
+ width="32" height="32" alt="">
+ {% endif %}
+ <span class="lambda-font-medium">{{ request.user.username }}</span>
+ </button>
+
+ <ul class="dropdown-menu lambda-secondary dropdown-menu-end">
+ <li><a class="dropdown-item lambda-btn {% if view_name == 'users:profile' %} lambda-primary{% endif %}" href="{% url "users:profile" %}">{% trans "Profile" %}</a></li>
+ <li><a class="dropdown-item lambda-btn {% if view_name == 'history:history' %} lambda-primary{% endif %}" href="{% url 'history:history' %}">{% trans "History" %}</a></li>
+ <li><hr class="dropdown-divider"></li>
+ <li><a class="dropdown-item lambda-btn {% if view_name == 'users:logout' %} lambda-primary{% endif %}" href="{% url "users:logout" %}">{% trans "Logout" %}</a></li>
+ </ul>
+ </div>
+ {% else %}
+ <a class="btn lambda-btn lambda-primary{% if view_name == 'users:login' %} lambda-btn-pressed{% endif %}"
+ {% if view_name != 'users:login' %}href="{% url 'users:login' %}"{% endif %}>
+ {% trans "Login" %}
+ </a>
+ {% endif %}
+
+ <!-- Гамбургер -->
+ <button class="navbar-toggler lambda-primary lambda-btn d-md-none" type="button" data-bs-toggle="collapse"
+ data-bs-target="#navbarNav" aria-controls="navbarNav"
+ aria-expanded="false" aria-label="Toggle navigation">
+ <span class="navbar-toggler-icon"></span>
</button>
- <ul class="dropdown-menu lambda-secondary">
- <li><a class="dropdown-item lambda-btn " data-bs-theme-value="light" href="javascript:void(0);">{% trans "light_theme" %}</a></li>
- <li><a class="dropdown-item lambda-btn" data-bs-theme-value="dark" href="javascript:void(0);">{% trans "dark_theme" %}</a></li>
- <li><a class="dropdown-item lambda-btn" data-bs-theme-value="auto" href="javascript:void(0);">{% trans "auto_theme" %}</a></li>
- </ul>
</div>
- {% if request.user.is_authenticated %}
- <div class="dropdown my-auto mx-1 lambda-font-medium">
- <button class="btn dropdown-toggle bg-transparent d-flex align-items-center border-1 lambda-border" type="button" data-bs-toggle="dropdown"
- aria-expanded="false">
- {% if request.user.profile.get_small_avatar %}
- <img src="{{ request.user.profile.get_small_avatar }}" class="rounded-circle me-2"
- width="32" height="32" alt="">
- {% else %}
- <img src="{% static "images/default_avatar.svg" %}" class="rounded-circle me-2"
- width="32" height="32" alt="">
- {% endif %}
- <span class="lambda-font-medium">{{ request.user.username }}</span>
- </button>
-
- <ul class="dropdown-menu lambda-secondary">
- <li><a class="dropdown-item lambda-btn {% if view_name == 'users:profile' %} lambda-primary{% endif %}" href="{% url "users:profile" %}">{% trans "Profile" %}</a></li>
- <li><a class="dropdown-item lambda-btn {% if view_name == 'history:history' %} lambda-primary{% endif %}" href="{% url 'history:history' %}">{% trans "History" %}</a></li>
- <li><hr class="dropdown-divider"></li>
- <li><a class="dropdown-item lambda-btn {% if view_name == 'users:logout' %} lambda-primary{% endif %}" href="{% url "users:logout" %}">{% trans "Logout" %}</a></li>
- </ul>
- </div>
- {% else %}
- <li class="nav-item mx-1 my-auto">
- <a class="btn lambda-btn lambda-primary{% if view_name == 'users:login' %} lambda-btn-pressed{% endif %}"
- {% if view_name != 'users:login' %}href="{% url 'users:login' %}"{% endif %}>
- {% trans "Login" %}
- </a>
- </li>
- <li class="nav-item mx-1 my-auto">
- <a class="btn lambda-btn lambda-primary{% if view_name == 'users:signup' %} lambda-btn-pressed{% endif %}"
- {% if view_name != 'users:signup' %}href="{% url 'users:signup' %}"{% endif %}>
- {% trans "Signup" %}
- </a>
- </li>
- {% endif %}
-
- </ul>
- </div>
+ </div>
+ </nav>
</header>
{% endwith %}
\ No newline at end of file
diff --git a/lambda_search/templates/users/profile.html b/lambda_search/templates/users/profile.html
index 3e91916..76d370b 100644
--- a/lambda_search/templates/users/profile.html
+++ b/lambda_search/templates/users/profile.html
@@ -45,7 +45,7 @@ <h5 class="text-center">{% trans "Upload avatar" %}</h5>
</div>
</div>
- <div class="col-lg-8">
+ <div class="col-lg-8 lambda-profile">
{% if messages %}
<div class="alert alert-success">
{% for message in messages %}