153 lines
11 KiB
HTML
153 lines
11 KiB
HTML
{% extends "base.html" %}
|
||
{% import "/components/header.html" as header %}
|
||
{% import "/components/footer.html" as footer %}
|
||
|
||
|
||
{% block title %}Художники{% endblock %}
|
||
|
||
|
||
{% block content %}
|
||
{{ header.section(user) }}
|
||
<section class="c_ml49d">
|
||
<div class="c_lt3gk">
|
||
<div class="c_0u0z1 b_25g00">
|
||
<h2 class="c_w995b">Художники</h2>
|
||
<!-- <p class="c_z32f4">На платформе 105 художников из 37 городов</p> -->
|
||
</div>
|
||
<div class="c_51ptn b_mkrpo">
|
||
<div class="c_i3jiu b_pyo88"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<path d="M11.0001 20C10.7167 20 10.4792 19.9042 10.2876 19.7125C10.0959 19.5208 10.0001 19.2833 10.0001 19V13L4.20008 5.6C3.95008 5.26667 3.91258 4.91667 4.08758 4.55C4.26258 4.18333 4.56675 4 5.00008 4H19.0001C19.4334 4 19.7376 4.18333 19.9126 4.55C20.0876 4.91667 20.0501 5.26667 19.8001 5.6L14.0001 13V19C14.0001 19.2833 13.9042 19.5208 13.7126 19.7125C13.5209 19.9042 13.2834 20 13.0001 20H11.0001ZM12.0001 12.3L16.9501 6H7.05008L12.0001 12.3Z" fill="#1F1F1F"/>
|
||
</svg>
|
||
<span class="c_xvbqv b_nl2iq">Фильтры</span></div>
|
||
<form class="c_j433r b_kebyd">
|
||
<div class="c_retnk b_ss7tj"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<path d="M11.0001 20C10.7167 20 10.4792 19.9042 10.2876 19.7125C10.0959 19.5208 10.0001 19.2833 10.0001 19V13L4.20008 5.6C3.95008 5.26667 3.91258 4.91667 4.08758 4.55C4.26258 4.18333 4.56675 4 5.00008 4H19.0001C19.4334 4 19.7376 4.18333 19.9126 4.55C20.0876 4.91667 20.0501 5.26667 19.8001 5.6L14.0001 13V19C14.0001 19.2833 13.9042 19.5208 13.7126 19.7125C13.5209 19.9042 13.2834 20 13.0001 20H11.0001ZM12.0001 12.3L16.9501 6H7.05008L12.0001 12.3Z" fill="#5F1798"/>
|
||
</svg>
|
||
<span class="c_oh8mp b_k36jn">По званию:</span></div>
|
||
<div class="c_retnk b_ss7tj"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<path d="M11.0001 20C10.7167 20 10.4792 19.9042 10.2876 19.7125C10.0959 19.5208 10.0001 19.2833 10.0001 19V13L4.20008 5.6C3.95008 5.26667 3.91258 4.91667 4.08758 4.55C4.26258 4.18333 4.56675 4 5.00008 4H19.0001C19.4334 4 19.7376 4.18333 19.9126 4.55C20.0876 4.91667 20.0501 5.26667 19.8001 5.6L14.0001 13V19C14.0001 19.2833 13.9042 19.5208 13.7126 19.7125C13.5209 19.9042 13.2834 20 13.0001 20H11.0001ZM12.0001 12.3L16.9501 6H7.05008L12.0001 12.3Z" fill="#5F1798"/>
|
||
</svg>
|
||
<span class="c_oh8mp b_k36jn">По городу:</span></div>
|
||
<div class="c_retnk b_ss7tj"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<path d="M11.0001 20C10.7167 20 10.4792 19.9042 10.2876 19.7125C10.0959 19.5208 10.0001 19.2833 10.0001 19V13L4.20008 5.6C3.95008 5.26667 3.91258 4.91667 4.08758 4.55C4.26258 4.18333 4.56675 4 5.00008 4H19.0001C19.4334 4 19.7376 4.18333 19.9126 4.55C20.0876 4.91667 20.0501 5.26667 19.8001 5.6L14.0001 13V19C14.0001 19.2833 13.9042 19.5208 13.7126 19.7125C13.5209 19.9042 13.2834 20 13.0001 20H11.0001ZM12.0001 12.3L16.9501 6H7.05008L12.0001 12.3Z" fill="#5F1798"/>
|
||
</svg>
|
||
<span class="c_oh8mp b_k36jn">По жанру:</span></div>
|
||
</form>
|
||
</div>
|
||
<div class="c_cqj0y b_us10b"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<path d="M19.6 21L13.3 14.7C12.8 15.1 12.225 15.4167 11.575 15.65C10.925 15.8833 10.2333 16 9.5 16C7.68333 16 6.14583 15.3708 4.8875 14.1125C3.62917 12.8542 3 11.3167 3 9.5C3 7.68333 3.62917 6.14583 4.8875 4.8875C6.14583 3.62917 7.68333 3 9.5 3C11.3167 3 12.8542 3.62917 14.1125 4.8875C15.3708 6.14583 16 7.68333 16 9.5C16 10.2333 15.8833 10.925 15.65 11.575C15.4167 12.225 15.1 12.8 14.7 13.3L21 19.6L19.6 21ZM9.5 14C10.75 14 11.8125 13.5625 12.6875 12.6875C13.5625 11.8125 14 10.75 14 9.5C14 8.25 13.5625 7.1875 12.6875 6.3125C11.8125 5.4375 10.75 5 9.5 5C8.25 5 7.1875 5.4375 6.3125 6.3125C5.4375 7.1875 5 8.25 5 9.5C5 10.75 5.4375 11.8125 6.3125 12.6875C7.1875 13.5625 8.25 14 9.5 14Z" fill="#1F1F1F"/>
|
||
</svg>
|
||
<input id="memberSearch" list="membersList" type="search" placeholder="ФИО Художника" class="c_9e0sk b_6660r" aria-label="Поиск Художника по ФИО" />
|
||
<datalist id="membersList">
|
||
{% for user in users %}
|
||
<option value="{{ user.username or '' }}"></option>
|
||
{% endfor %}
|
||
</datalist>
|
||
</div>
|
||
|
||
</div>
|
||
<div class="c_lt3gk">
|
||
{% for user in users %}
|
||
<a href="/artists/{{user._id}}">
|
||
<figure class="c_w8wgt b_1ra6n">
|
||
<figcaption class="c_6uwp9 b_tskkt">
|
||
<div class="c_77ba6 b_ngmkx"><img crossorigin="anonymous" fetchpriority="high" loading="eager" class="c_k33vk b_qhm1h" src="{% if user.img %}/a/{{user._id}}{%else%}/static/painter.svg{%endif%}">
|
||
<div class="c_u1ot7 b_o9wak">
|
||
<p class="b_lx0im">{{user.living_place or ''}}</p>
|
||
<p class="b_q6jk0">{{user.username or ''}}</p>
|
||
<p class="b_lx0im">{{user.grade or ''}}</p>
|
||
</div>
|
||
</div>
|
||
</figcaption>
|
||
</figure>
|
||
</a>
|
||
{% endfor %}
|
||
</div>
|
||
</section>
|
||
<script>
|
||
(function(){
|
||
const input = document.getElementById('memberSearch');
|
||
const container = document.querySelectorAll('.c_lt3gk')[1];
|
||
if (!input || !container) return;
|
||
|
||
const itemsSelector = 'a';
|
||
const nameSelector = '.b_q6jk0';
|
||
const norm = s => (s || '').toString().trim().toLowerCase();
|
||
|
||
function filter() {
|
||
const q = norm(input.value);
|
||
|
||
const items = container.querySelectorAll(itemsSelector);
|
||
console.log(items)
|
||
items.forEach(a => {
|
||
const nameEl = a.querySelector(nameSelector);
|
||
const name = norm(nameEl ? nameEl.textContent : '');
|
||
a.style.display = (q === '' || name.indexOf(q) !== -1) ? '' : 'none';
|
||
});
|
||
}
|
||
|
||
input.addEventListener('input', filter);
|
||
input.addEventListener('change', filter);
|
||
input.addEventListener('keydown', (e) => { if (e.key === 'Escape') { input.value = ''; filter(); } });
|
||
|
||
filter();
|
||
})();
|
||
</script>
|
||
{{ footer.section() }}
|
||
{% endblock %}
|
||
{% block head %}
|
||
{{ header.style() }}
|
||
{{ footer.style() }}
|
||
<style>/* Base (common) styles */
|
||
|
||
.b_25g00 { align-items: flex-start; display: flex; flex-direction: column; gap: 20px; width: 335px; }
|
||
.b_7wywm { fill: #1F1F1F; height: 16px; width: 16.041px; }
|
||
.b_eo57r { height: 24px; width: 24px; }
|
||
.b_nl2iq { color: #3A3A3A; display: flex; flex-direction: column; flex: 1 0 0; font-family: Inter; font-size: 16px; font-style: normal; font-weight: 400; height: 38px; justify-content: center; line-height: normal; }
|
||
.b_pyo88 { align-items: center; align-self: stretch; border-bottom: 1px solid #000; display: flex; }
|
||
.b_4bpkv { fill: #5F1798; height: 16px; width: 16.041px; }
|
||
.b_fzhe4 { height: 24px; width: 24px; }
|
||
.b_k36jn { align-self: stretch; color: #000; display: flex; flex-direction: column; flex: 1 0 0; font-family: Inter; font-size: 16px; font-style: normal; font-weight: 400; justify-content: center; line-height: normal; }
|
||
.b_ss7tj { align-items: center; align-self: stretch; border-bottom: 1px solid #171717; display: flex; gap: 6px; padding-bottom: 5px; }
|
||
.b_kebyd { align-items: flex-start; align-self: stretch; background: #FDFAFF; border-radius: 5px; border: 1px solid #5F1798; display: flex; flex-direction: column; gap: 14px; padding: 20px 30px; }
|
||
.b_mkrpo { align-items: flex-start; display: flex; flex-direction: column; gap: 20px; width: 335px; }
|
||
.b_6660r { color: #3A3A3A; display: flex; flex-direction: column; flex: 1 0 0; font-family: Inter; font-size: 16px; font-style: normal; font-weight: 400; height: 38px; justify-content: center; line-height: normal; }
|
||
.b_us10b { align-items: center; border-bottom: 1px solid #000; display: flex; width: 335px; }
|
||
.b_qhm1h { border-radius: 1em; height: 70px; min-width: 70px; object-fit: cover; max-width: 170px; object-position: top;}
|
||
.b_lx0im { -webkit-box-orient: vertical; -webkit-line-clamp: 1; color: #3A3A3A; display: -webkit-box; font-family: Inter; font-size: 13px; font-style: normal; font-weight: 400; line-height: normal; overflow: hidden; text-overflow: ellipsis; }
|
||
.b_q6jk0 { -webkit-box-orient: vertical; -webkit-line-clamp: 2; color: #171717; display: -webkit-box; font-family: Inter; font-size: 16px; font-style: normal; font-weight: 700; line-height: normal; overflow: hidden; text-overflow: ellipsis; }
|
||
.b_o9wak { align-items: flex-start; display: flex; flex-direction: column; justify-content: center; }
|
||
.b_ngmkx { align-items: center; align-self: stretch; display: flex; gap: 13px; }
|
||
.b_tskkt { align-items: flex-start; align-self: stretch; display: flex; flex-direction: column; gap: 10px; justify-content: center; padding: 0 20px; height: 90px; }
|
||
.b_1ra6n { align-items: flex-start; background: #FDFAFF; border-radius: 5px; border: 1px solid #5F1798; display: flex; flex-direction: column; width: 335px; }
|
||
/* box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25), 0 4px 20px 0 rgba(0, 0, 0, 0.20); */
|
||
.c_ml49d {width: 100%;}
|
||
/* Mobile */
|
||
@media (max-width: 699px) {
|
||
.c_w995b { align-self: stretch; color: #5F1798; font-family: Inter; font-size: 42px; font-style: normal; font-weight: 700; line-height: normal; text-align: center; text-transform: uppercase; }
|
||
.c_z32f4 { color: #000; font-family: Inter; font-size: 12px; font-style: normal; font-weight: 700; line-height: normal; text-transform: uppercase; width: 335px; }
|
||
.c_0u0z1 { align-items: center; display: flex; flex-direction: column; gap: 20px; width: 335px; }
|
||
.c_lt3gk { align-content: flex-start; align-items: flex-start; align-self: stretch; display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; }
|
||
.c_ml49d { margin: auto;align-items: center; background: #FFF; display: flex; flex-direction: column; gap: 50px; width: 375px; }
|
||
}
|
||
|
||
/* Tablet */
|
||
@media (min-width: 700px) and (max-width: 900px) {
|
||
.c_w995b { align-self: stretch; color: #5F1798; font-family: Inter; font-size: 42px; font-style: normal; font-weight: 700; line-height: normal; text-transform: uppercase; }
|
||
.c_z32f4 { color: #000; font-family: Inter; font-size: 12px; font-style: normal; font-weight: 700; line-height: normal; text-transform: uppercase; width: 345px; }
|
||
.c_j433r { color: #3A3A3A; display: flex; flex-direction: column; flex: 1 0 0; font-family: Inter; font-size: 16px; font-style: normal; font-weight: 400; justify-content: center; line-height: normal; }
|
||
.c_51ptn { align-items: center; border-bottom: 1px solid #000; display: flex; width: 335px; }
|
||
.c_rf1gt { height: 24px; width: 24px; }
|
||
.c_zk6q0 { align-items: center; align-self: stretch; border-bottom: 1px solid #000; display: flex; }
|
||
.c_lt3gk { align-content: flex-start; align-items: flex-start; align-self: stretch; display: flex; flex-wrap: wrap; gap: 20px; }
|
||
.c_ml49d { align-items: flex-start; background: #FFF; display: flex; flex-direction: column; gap: 50px; padding: 50px 0 100px 50px; width: 800px; }
|
||
}
|
||
|
||
/* Desktop */
|
||
@media (min-width: 901px) {
|
||
.c_w995b { color: #5F1798; font-family: Inter; font-size: 42px; font-style: normal; font-weight: 700; line-height: normal; text-transform: uppercase; }
|
||
.c_z32f4 { color: #000; font-family: Inter; font-size: 12px; font-style: normal; font-weight: 700; line-height: normal; text-transform: uppercase; width: 319px; }
|
||
.c_lt3gk { align-items: flex-start; align-self: stretch; display: flex; gap: 20px; flex-wrap: wrap; }
|
||
.c_ml49d { align-items: flex-start; background: #FFF; display: flex; flex-direction: column; gap: 50px; padding: 50px 0 100px 100px; width: 1600px; }
|
||
}</style>
|
||
{% endblock %} |