avtopost.kultmost.ru/templates/components/profile_nav.html
2026-07-27 04:00:23 -04:00

194 lines
15 KiB
HTML

{% macro profile_nav(user, nav) -%}
<div class="c_nnsh6">
{% set delivery_read_cnt = user.notify | selectattr('type', 'equalto', 'delivery') | selectattr('read') | list | length %}
{% set competition_read_cnt = user.notify | selectattr('type', 'equalto', 'competition') | selectattr('read') | list | length %}
{% set exhibitions_read_cnt = user.notify | selectattr('type', 'equalto', 'exhibitions') | selectattr('read') | list | length %}
{% set invation_read_cnt = user.notify | selectattr('type', 'equalto', 'invitation') | selectattr('read') | list | length %}
{% set competition_req_read_cnt = user.notify | selectattr('type', 'equalto', 'competition_req') | selectattr('read') | list | length %}
{% if 'partner' in user.get('profile', '') %}
<a class="{% if nav =='competitions' %}b_ny6vg{%else%}b_cros1{%endif%}" href="/profile/partner/competitions#main">
<span class="{% if nav =='competitions' %}b_ld219{%else%}b_v15gw{%endif%}">Мои конкурсы
{% if competition_req_read_cnt > 0 %}
<span class="notification-badge mob" id="notificationCount">
{{ competition_req_read_cnt }}
</span>
{% endif %}
</span>
<img src="/static/ar.svg" crossorigin="anonymous" fetchpriority="high" loading="eager"/>
</a>
<a class="{% if nav =='delivery' %}b_ny6vg{%else%}b_cros1{%endif%}" href="/profile/delivery#main">
<span class="{% if nav =='delivery' %}b_ld219{%else%}b_v15gw{%endif%}">Где картины
{% if delivery_read_cnt > 0 %}
<span class="notification-badge mob" id="notificationCount">
{{ delivery_read_cnt }}
</span>
{% endif %}
</span>
<img src="/static/ar.svg" crossorigin="anonymous" fetchpriority="high" loading="eager"/>
</a>
<a class="{% if nav =='form' %}b_ny6vg{%else%}b_cros1{%endif%}" href="/profile/form#main">
<span class="{% if nav =='form' %}b_ld219{%else%}b_v15gw{%endif%}">Анкета</span>
<img src="/static/ar.svg" crossorigin="anonymous" fetchpriority="high" loading="eager"/>
</a>
<a class="{% if nav =='exhibitions' %}b_ny6vg{%else%}b_cros1{%endif%}" href="/profile/partner/exhibitions#main">
<span class="{% if nav =='exhibitions' %}b_ld219{%else%}b_v15gw{%endif%}">Мои Выставки</span>
<img src="/static/ar.svg" crossorigin="anonymous" fetchpriority="high" loading="eager"/>
</a>
{% elif 'admin' in user.get('profile', '') %}
{% else %}
<a class="{% if nav =='delivery' %}b_ny6vg{%else%}b_cros1{%endif%}" href="/profile/delivery#main">
<span class="{% if nav =='delivery' %}b_ld219{%else%}b_v15gw{%endif%}">Где картины
{% if delivery_read_cnt > 0 %}
<span class="notification-badge mob" id="notificationCount">
{{ delivery_read_cnt }}
</span>
{% endif %}
</span>
<img src="/static/ar.svg" crossorigin="anonymous" fetchpriority="high" loading="eager"/>
</a>
<a class="{% if nav =='competitions' %}b_ny6vg{%else%}b_cros1{%endif%}" href="/profile/competition#main">
<span class="{% if nav =='competitions' %}b_ld219{%else%}b_v15gw{%endif%}">Конкурсы
{% if competition_read_cnt > 0 %}
<span class="notification-badge mob" id="notificationCount">
{{ competition_read_cnt }}
</span>
{% endif %}
</span>
<img src="/static/ar.svg" crossorigin="anonymous" fetchpriority="high" loading="eager"/>
</a>
<a class="{% if nav =='paint' %}b_ny6vg{%else%}b_cros1{%endif%}" href="/profile/posts#main">
<span class="{% if nav =='paint' %}b_ld219{%else%}b_v15gw{%endif%}">Мои посты</span>
<img src="/static/ar.svg" crossorigin="anonymous" fetchpriority="high" loading="eager"/>
</a>
<a class="{% if nav =='exhibitions' %}b_ny6vg{%else%}b_cros1{%endif%}" href="/profile/exhibition#main">
<span class="{% if nav =='exhibitions' %}b_ld219{%else%}b_v15gw{%endif%}">Выставки
{% if exhibitions_read_cnt > 0 %}
<span class="notification-badge mob" id="notificationCount">
{{ exhibitions_read_cnt }}
</span>
{% endif %}
</span>
<img src="/static/ar.svg" crossorigin="anonymous" fetchpriority="high" loading="eager"/>
</a>
<a class="{% if nav =='news' %}b_ny6vg{%else%}b_cros1{%endif%}" href="/profile/news#main">
<span class="{% if nav =='news' %}b_ld219{%else%}b_v15gw{%endif%}">Мои новости</span>
<img src="/static/ar.svg" crossorigin="anonymous" fetchpriority="high" loading="eager"/>
</a>
<a class="{% if nav =='form' %}b_ny6vg{%else%}b_cros1{%endif%}" href="/profile/form#main">
<span class="{% if nav =='form' %}b_ld219{%else%}b_v15gw{%endif%}">Анкета</span>
<img src="/static/ar.svg" crossorigin="anonymous" fetchpriority="high" loading="eager"/>
</a>
<a class="{% if nav =='invitation' %}b_ny6vg{%else%}b_cros1{%endif%}" href="/profile/invitation#main">
<span class="{% if nav =='invitation' %}b_ld219{%else%}b_v15gw{%endif%}">Приглашения
{% if invation_read_cnt > 0 %}
<span class="notification-badge mob" id="notificationCount">
{{ invation_read_cnt }}
</span>
{% endif %}
</span>
<img src="/static/ar.svg" crossorigin="anonymous" fetchpriority="high" loading="eager"/>
</a>
{% endif %}
<a class="{% if nav =='password' %}b_ny6vg{%else%}b_cros1{%endif%}" href="/profile/password#main">
<span class="{% if nav =='password' %}b_ld219{%else%}b_v15gw{%endif%}">Сменить пароль</span><img src="/static/ar.svg" crossorigin="anonymous" fetchpriority="high" loading="eager"/>
</a>
<a class="{% if nav =='social' %}b_ny6vg{%else%}b_cros1{%endif%}" href="/profile/social#main">
<span class="{% if nav =='social' %}b_ld219{%else%}b_v15gw{%endif%}">Мои соц. сети</span><img src="/static/ar.svg" crossorigin="anonymous" fetchpriority="high" loading="eager"/>
</a>
{% if 'admin' in user.get('roles', []) %}
<a class="{% if nav =='statistics' %}b_ny6vg{%else%}b_cros1{%endif%}" href="/profile/admin/statistics#main">
<span class="{% if nav =='statistics' %}b_ld219{%else%}b_v15gw{%endif%}">Статистика</span><img src="/static/ar.svg" crossorigin="anonymous" fetchpriority="high" loading="eager"/>
</a>
<a class="{% if nav =='users' %}b_ny6vg{%else%}b_cros1{%endif%}" href="/profile/admin/users#main">
<span class="{% if nav =='users' %}b_ld219{%else%}b_v15gw{%endif%}">Пользователи</span><img src="/static/ar.svg" crossorigin="anonymous" fetchpriority="high" loading="eager"/>
</a>
<a class="{% if nav =='admin' %}b_ny6vg{%else%}b_cros1{%endif%}" href="/admin">
<span class="{% if nav =='admin' %}b_ld219{%else%}b_v15gw{%endif%}">Админ-панель</span><img src="/static/ar.svg" crossorigin="anonymous" fetchpriority="high" loading="eager"/>
</a>
{% endif %}
</div>
{% endmacro %}
{% macro style() -%}
<style type="text/css">
.b_xsvl1 { color: #5F1798; font-family: Inter; font-size: 16px; font-style: normal; font-weight: 700; line-height: normal; text-align: center; padding: 0 10px;}
.b_u9ode { align-items: center; align-self: stretch; background: #FFF; border-radius: 5px; display: flex; justify-content: center; padding: 10px 0; }
.b_al8e7 { color: #FFF; font-family: Inter; font-size: 14px; font-style: normal; font-weight: 400; line-height: normal; }
.b_m2ah9 { align-items: center; background: #5F1798; border-radius: 5px; display: flex; justify-content: center; padding: 15px 33px; }
.b_rhmvx { border-radius: 1em; height: 140px; min-width: 140px; max-width: 100%; object-fit: cover; object-position: top;}
.b_lgvu4 { align-items: center; background: #5F1798; border-radius: 25px; bottom: 0; display: flex; height: 50px; justify-content: center; position: absolute; right: 0; width: 50px; }
.b_zo7wz { align-items: center; display: flex; justify-content: space-around; position: absolute; }
.b_jkzqx { flex-shrink: 0; height: 140px; width: 100%; visibility: hidden;}
.b_hjteq { align-items: center; display: flex; width: 100%; justify-content: center; padding: 0 15px; }
.b_yzw2z { align-items: center; background: #DC3545; border-radius: 5px; display: flex; justify-content: center; padding: 10px 33px; }
.b_2rmrs { align-items: center; align-self: stretch; background: #FFF; display: flex; flex-direction: column; gap: 15px; justify-content: center; padding: 20px 0; }
.b_440jc { color: #171717; font-family: Inter; font-size: 14px; font-style: normal; font-weight: 400; line-height: normal; }
.b_v63fu { align-items: center; background: #F39318; border-radius: 5px; display: flex; justify-content: center; padding: 15px 55px; }
.b_h9dsc { display: none; align-items: center; align-self: stretch; background: #FFF; border-radius: 5px; flex-direction: column; gap: 15px; justify-content: center; padding: 10px 0; }
.b_ld219 { color: #171717; font-family: Inter; font-size: 14px; font-style: normal; font-weight: 700; line-height: normal; }
.b_ny6vg { align-items: center; background: #FFF; box-shadow: 0 -1px 0 0 #5F1798 inset; display: flex; height: 35px; justify-content: center; padding: 0 16px; }
.b_v15gw { color: #969696; font-family: Inter; font-size: 14px; font-style: normal; font-weight: 700; line-height: normal; }
.b_cros1 { align-items: center; background: #FFF; display: flex; height: 35px; justify-content: center; padding: 0 15px; }
.b_289i1 { align-items: center; background: #5F1798; border-radius: 5px; display: flex; justify-content: center; padding: 13px 55px; }
.b_3kfnv { align-self: stretch; height: 400px; }
.b_xcy5t { color: #0ED646; font-family: Inter; font-size: 12px; font-style: normal; font-weight: 700; line-height: normal; }
.b_qrxwg { align-items: center; background: rgba(14, 214, 70, 0.20); border-radius: 30px; display: flex; justify-content: center; padding: 1.5px 10px; }
.b_n8iqv { -webkit-box-orient: vertical; -webkit-line-clamp: 1; color: #000; display: -webkit-box; flex: 1 0 0; font-family: Inter; font-size: 24px; font-style: normal; font-weight: 700; line-height: normal; overflow: hidden; text-overflow: ellipsis; }
.b_8m3ql { align-items: center; align-self: stretch; display: flex; justify-content: center; }
.b_y8yqp { align-self: stretch; color: #5F1798; font-family: Inter; font-size: 14px; font-style: normal; font-weight: 400; line-height: normal; }
.b_4vs5o { aspect-ratio: 1/1; border-radius: 50px; height: 50px; width: 50px; }
.b_rvfm3 { align-self: stretch; color: #000; font-family: Inter; font-size: 16px; font-style: normal; font-weight: 400; line-height: normal; }
.b_1imfl { align-items: flex-start; display: flex; flex-direction: column; flex: 1 0 0; justify-content: center; }
.b_eu6mo { align-items: center; align-self: stretch; display: flex; gap: 13px; height: 50px; }
.b_714yb { -webkit-box-orient: vertical; -webkit-line-clamp: 3; align-self: stretch; color: rgba(58, 58, 58, 0.75); display: -webkit-box; font-family: Inter; font-size: 14px; font-style: normal; font-weight: 400; line-height: normal; overflow: hidden; text-overflow: ellipsis; }
.b_x26c8 { align-self: stretch; color: rgba(58, 58, 58, 0.75); font-family: Inter; font-size: 14px; font-style: normal; font-weight: 400; line-height: normal; text-align: right; }
.b_lt1br { align-items: flex-start; align-self: stretch; background: #FFF; display: flex; flex-direction: column; gap: 10px; justify-content: center; padding: 10px 20px; }
.b_lstsy { align-items: flex-start; border-radius: 10px; border: 1px solid #5F1798; box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.30), 0 4px 20px 0 rgba(0, 0, 0, 0.20); display: flex; flex-direction: column; flex-shrink: 0; width: 335px; }
/* Mobile */
@media (max-width: 699px) {
.c_mrl59 { align-items: center; background: #5F1798; border-radius: 25px; bottom: -15px; display: flex; height: 50px; justify-content: center; position: absolute; right: -15px; width: 50px; }
.c_iiehk { align-items: flex-end; align-self: stretch; border-radius: 5px; display: flex; flex-direction: column; gap: 20px; }
.c_nnsh6 { align-content: center; align-items: baseline; display: flex; flex-shrink: 0; justify-content: space-around; padding: 3px 0; row-gap: 8px; width: 315px; flex-direction: column;}.c_3ihvi { align-items: center; background: #FFF; display: flex; flex-direction: column; flex-shrink: 0; gap: 15px; justify-content: center; padding: 15px 10px; width: 335px; }
.c_nnsh6>a, .c_nnsh6>a>span{width: 100%;box-shadow: none;}
.c_nnsh6>a:hover{background: #f7f7f7;border-radius: 8px;}
.c_nnsh6>a:active{background: #f7f7f7;border-radius: 8px;}
.c_tihtk { align-content: flex-start; align-items: flex-start; display: flex; flex-shrink: 0; flex-wrap: wrap; gap: 20px; justify-content: center; width: 335px; }
.c_ru432 { align-content: flex-start; align-items: flex-start; background: #FFF; border-radius: 5px; display: flex; flex-wrap: wrap; justify-content: center; padding: 15px 0; width: 335px; }
.c_gtoe9 { align-items: center; display: flex; flex-direction: column; gap: 30px; width: 335px; }
.c_dg3k4 { align-items: center; background: #F6EBFF; display: flex; flex-direction: column; padding: 50px 0; }
}
/* Tablet */
@media (min-width: 700px) and (max-width: 900px) {
.c_iiehk { align-items: center; border-radius: 5px; display: flex; flex-direction: column; gap: 20px; width: 335px; }
.c_nnsh6>a>img{display: none;}
.b_v15gw>.mob{top: -10px; right: -20px; display: flex;}
.b_ld219>.mob{top: -10px; right: -20px; display: flex;}
.c_nnsh6 { align-content: center; align-items: center; align-self: stretch; display: flex; flex-wrap: wrap; gap: 0 5px; justify-content: center; padding: 3px 0; }
.c_3ihvi { align-items: flex-start; align-self: stretch; display: flex; flex-direction: column; gap: 15px; justify-content: center; padding: 15px 85px; }
.c_tihtk { align-content: flex-start; align-items: flex-start; display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; width: 700px; }
.c_ru432 { align-items: center; align-self: stretch; background: #FFF; border-radius: 5px; display: flex; flex-direction: column; padding: 15px 0; }
.c_gtoe9 { align-items: center; align-self: stretch; display: flex; flex-direction: column; gap: 30px; padding: 0 49px; }
.c_dg3k4 { align-items: center; background: #F6EBFF; display: flex; flex-direction: column; padding: 50px 0; }
}
/* Desktop */
@media (min-width: 901px) {
.c_iiehk { align-items: flex-end; border-radius: 5px; display: flex; flex-direction: column; gap: 20px; width: 310px; }
.c_nnsh6>a>img{display: none;}
.b_v15gw>.mob{top: -10px; right: -20px; display: flex;}
.b_ld219>.mob{top: -10px; right: -20px; display: flex;}
.c_nnsh6 { align-content: center; align-items: center; align-self: stretch; display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; padding-bottom: 5px; }
.c_3ihvi { align-items: flex-start; display: flex; flex-direction: column; gap: 15px; justify-content: center; padding: 20px 0; width: 1045px; }
.c_tihtk { align-content: flex-start; align-items: flex-start; display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; }
.c_ru432 { align-items: center; background: #FFF; border-radius: 5px; display: flex; flex-direction: column; flex: 1 0 0; padding: 15px 0; }
.c_gtoe9 { align-items: flex-start; align-self: stretch; display: flex; gap: 20px; padding: 0 99px; }
.c_dg3k4 { align-items: center; background: #F6EBFF; display: flex; flex-direction: column; padding: 50px 0; }
}</style>
{%- endmacro %}