180 lines
9.2 KiB
HTML
180 lines
9.2 KiB
HTML
|
{% extends 'base.html' %}
|
|||
|
|
|
|||
|
|
{% load static %}
|
|||
|
|
{% load filters %}
|
|||
|
|
{% load thumbnail %}
|
|||
|
|
|
|||
|
|
{% block content %}
|
|||
|
|
{% include 'includes/breadcrumbs_dark.html' %}
|
|||
|
|
|
|||
|
|
<section class="sect pt-2">
|
|||
|
|
<div class="container">
|
|||
|
|
<div
|
|||
|
|
class="d-flex align-items-start align-items-sm-center justify-content-between flex-wrap flex-column flex-sm-row gap-4">
|
|||
|
|
<h1 class="h1 mb-0">Отзывы наших клиентов</h1>
|
|||
|
|
</div>
|
|||
|
|
<div class="justify-content-between sortW d-flex reviewsContent flex-wrap">
|
|||
|
|
<div class="d-flex align-items-center gap-2 gap-lg-4 flex-column flex-lg-row sortSmW">
|
|||
|
|
<form method="GET">
|
|||
|
|
<input type="hidden" name="sort" value="{{ sort_query }}">
|
|||
|
|
<select name="filter" id="istochnik" class="formSelect" onchange="this.form.submit()">
|
|||
|
|
<option value="">
|
|||
|
|
Источник
|
|||
|
|
</option>
|
|||
|
|
{% if yandex_reviews_count > 0 %}
|
|||
|
|
<option value="1" {% if filter_query == '1' %}selected{% endif %}>
|
|||
|
|
Яндекс
|
|||
|
|
</option>
|
|||
|
|
{% endif %}
|
|||
|
|
{% if two_gis_reviews_count > 0 %}
|
|||
|
|
<option value="2" {% if filter_query == '2' %}selected{% endif %}>
|
|||
|
|
2Гис
|
|||
|
|
</option>
|
|||
|
|
{% endif %}
|
|||
|
|
{% if vlru_reviews_count > 0 %}
|
|||
|
|
<option value="3" {% if filter_query == '3' %}selected{% endif %}>
|
|||
|
|
Vl
|
|||
|
|
</option>
|
|||
|
|
{% endif %}
|
|||
|
|
</select>
|
|||
|
|
</form>
|
|||
|
|
<form method="GET">
|
|||
|
|
{% if filter_query %}
|
|||
|
|
<input type="hidden" name="filter" value="{{ filter_query }}">
|
|||
|
|
{% endif %}
|
|||
|
|
<select name="sort" id="sort" class="formSelect d-block d-lg-none" onchange="this.form.submit()">
|
|||
|
|
<option value="-date" {% if sort_query == '-date' %}selected{% endif %}>
|
|||
|
|
Сначала новые
|
|||
|
|
</option>
|
|||
|
|
<option value="date" {% if sort_query == 'date' %}selected{% endif %}>
|
|||
|
|
Cначала старые
|
|||
|
|
</option>
|
|||
|
|
</select>
|
|||
|
|
</form>
|
|||
|
|
<span class="h4 color-gray5 text-nowrap d-none d-lg-block">
|
|||
|
|
{% if filter_query == '1' %}
|
|||
|
|
{{ yandex_reviews_count|declension_of_reviews }}
|
|||
|
|
{% elif filter_query == '2' %}
|
|||
|
|
{{ two_gis_reviews_count|declension_of_reviews }}
|
|||
|
|
{% elif filter_query == '3' %}
|
|||
|
|
{{ vlru_reviews_count|declension_of_reviews }}
|
|||
|
|
{% else %}
|
|||
|
|
{{ all_reviews_count|declension_of_reviews }}
|
|||
|
|
{% endif %}
|
|||
|
|
</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="d-none d-lg-flex align-items-center gap-4">
|
|||
|
|
<span class="h4">Сортировка:</span>
|
|||
|
|
{% if sort_query == '-date' %}
|
|||
|
|
<a class="sortLink active d-flex gap-2 align-items-center" href="{% url 'core:reviews' %}?sort=date{% if filter_query%}&filter={{ filter_query }}{% endif %}">
|
|||
|
|
<span class="h4 mb-0">По дате</span>
|
|||
|
|
<svg>
|
|||
|
|
<use xlink:href="{% static 'img/icons/icons.svg' %}?v=1#sort"></use>
|
|||
|
|
</svg>
|
|||
|
|
</a>
|
|||
|
|
{% else %}
|
|||
|
|
<a class="sortLink d-flex gap-2 align-items-center" href="{% url 'core:reviews' %}?sort=-date{% if filter_query%}&filter={{ filter_query }}{% endif %}">
|
|||
|
|
<span class="h4 mb-0">По дате</span>
|
|||
|
|
<svg class="icon-sort-reverse">
|
|||
|
|
<use xlink:href="{% static 'img/icons/icons.svg' %}?v=1#sort"></use>
|
|||
|
|
</svg>
|
|||
|
|
</a>
|
|||
|
|
{% endif %}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="row mt-3 reviewsPage">
|
|||
|
|
{% for review in reviews %}
|
|||
|
|
<div class="col-md-6 col-xl-4 mb-3 mb-lg-4">
|
|||
|
|
<!-- Отзыв с кнопкой подробнее, когда выпадает текст ниже -->
|
|||
|
|
<div class="reviewsCard cardText">
|
|||
|
|
<div class="d-flex justify-content-between flex-wrap gap-2 mb-3">
|
|||
|
|
<div class="d-flex align-items-center gap-1">
|
|||
|
|
<img src="{% static 'img/icons/avatar.svg' %}?v=1" alt="person" class="reviewsCardPersonIcon">
|
|||
|
|
<div class="d-block">
|
|||
|
|
<span class="fw-medium d-block text--lg">{{ review.name }}</span>
|
|||
|
|
<span class="fw-medium d-block text--15 color-gray5 ">{{ review.get_date }}</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
{% if review.source == '1' %}
|
|||
|
|
<img src="{% static 'img/admin/reviews/logo-1.png' %}?v=1" alt="logo" class="reviewsCardLogo d-none d-sm-block">
|
|||
|
|
{% elif review.source == '2' %}
|
|||
|
|
<img src="{% static 'img/admin/reviews/2gis.svg' %}?v=1" alt="logo" class="reviewsCardLogo d-none d-sm-block">
|
|||
|
|
{% else %}
|
|||
|
|
<img src="{% static 'img/admin/reviews/vl.svg' %}?v=1" alt="logo" class="reviewsCardLogo d-none d-sm-block">
|
|||
|
|
{% endif %}
|
|||
|
|
</div>
|
|||
|
|
<div class="content content--hidden my-1">
|
|||
|
|
{{ review.text|linebreaks }}
|
|||
|
|
</div>
|
|||
|
|
{% if review.source == '1' %}
|
|||
|
|
<img src="{% static 'img/admin/reviews/logo-1.png' %}?v=1" alt="logo" class="reviewsCardLogo d-block d-sm-none my-4">
|
|||
|
|
{% elif review.source == '2' %}
|
|||
|
|
<img src="{% static 'img/admin/reviews/2gis.svg' %}?v=1" alt="logo" class="reviewsCardLogo d-block d-sm-none my-4">
|
|||
|
|
{% else %}
|
|||
|
|
<img src="{% static 'img/admin/reviews/vl.svg' %}?v=1" alt="logo" class="reviewsCardLogo d-block d-sm-none my-4">
|
|||
|
|
{% endif %}
|
|||
|
|
<button class="button button--white mt-3 reviewsCardBtn" data-src="#modalReviews"
|
|||
|
|
data-bs-name="{{ review.name }}"
|
|||
|
|
data-bs-date="{{ review.get_date }}"
|
|||
|
|
data-bs-id="{{ review.id }}"
|
|||
|
|
data-bs-text="{{ review.text|linebreaks }}"
|
|||
|
|
{% if review.screen %}
|
|||
|
|
data-bs-screen="{{ review.screen.url }}"
|
|||
|
|
{% else %}
|
|||
|
|
data-bs-screen="#"
|
|||
|
|
{% endif %}
|
|||
|
|
{% if review.source == '1' %}
|
|||
|
|
data-bs-source="{% static 'img/admin/reviews/logo-1.png' %}?v=1"
|
|||
|
|
{% elif review.source == '2' %}
|
|||
|
|
data-bs-source="{% static 'img/admin/reviews/2gis.svg' %}?v=1"
|
|||
|
|
{% else %}
|
|||
|
|
data-bs-source="{% static 'img/admin/reviews/vl.svg' %}?v=1"
|
|||
|
|
{% endif %}
|
|||
|
|
data-fancybox>Подробнее</button>
|
|||
|
|
</div><!-- /reviewsCard -->
|
|||
|
|
</div>
|
|||
|
|
{% endfor %}
|
|||
|
|
</div>
|
|||
|
|
{% include 'includes/pagination.html' %}
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
{% include 'includes/form.html' with mparam="mb-5" %}
|
|||
|
|
{% include 'includes/about.html' %}
|
|||
|
|
{% endblock %}
|
|||
|
|
{% block js %}
|
|||
|
|
<script>
|
|||
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|||
|
|
const reviewModal= document.getElementById('modalReviews')
|
|||
|
|
if (reviewModal) {
|
|||
|
|
reviewButtons = document.querySelectorAll('.reviewsCardBtn')
|
|||
|
|
reviewButtons.forEach(button => {
|
|||
|
|
button.addEventListener('click', function(event) {
|
|||
|
|
const review_id = button.getAttribute('data-bs-id')
|
|||
|
|
|
|||
|
|
const review_source = button.getAttribute('data-bs-source')
|
|||
|
|
const review_screen = button.getAttribute('data-bs-screen')
|
|||
|
|
const review_date = button.getAttribute('data-bs-date')
|
|||
|
|
const review_name = button.getAttribute('data-bs-name')
|
|||
|
|
const review_text = button.getAttribute('data-bs-text')
|
|||
|
|
|
|||
|
|
const reviewModalName = reviewModal.querySelector('#reviewName')
|
|||
|
|
const reviewModalDate = reviewModal.querySelector('#reviewDate')
|
|||
|
|
const reviewModalScreen = reviewModal.querySelector('#reviewScreen')
|
|||
|
|
const reviewModalText = reviewModal.querySelector('#reviewText')
|
|||
|
|
const reviewModalSource = reviewModal.querySelector('#reviewSource')
|
|||
|
|
const reviewModalSourceSecond = reviewModal.querySelector('#reviewSourceSecond')
|
|||
|
|
|
|||
|
|
reviewModalName.textContent = review_name
|
|||
|
|
reviewModalDate.textContent = review_date
|
|||
|
|
reviewModalText.innerHTML = review_text
|
|||
|
|
reviewModalScreen.src = review_screen
|
|||
|
|
reviewModalSource.src = review_source
|
|||
|
|
reviewModalSourceSecond.src = review_source
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
})}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
</script>
|
|||
|
|
{% endblock %}
|