Skip to content

fix: Refactor responsive design in CSS; update header and profile tem… #15

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
mavinsplay merged 1 commit into from
Apr 15, 2025
Merged

fix: Refactor responsive design in CSS; update header and profile tem… #15

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
52 changes: 47 additions & 5 deletions lambda_search/static_dev/css/lambda_theme.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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%;
Expand All @@ -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;
}

}
1 change: 1 addition & 0 deletions lambda_search/templates/base.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
<html lang="ru" data-bs-theme="auto">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

<title>
{% block title %}
Expand Down
243 changes: 141 additions & 102 deletions lambda_search/templates/includes/header.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 %}
2 changes: 1 addition & 1 deletion lambda_search/templates/users/profile.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 %}
Expand Down