150 lines
7.6 KiB
HTML
150 lines
7.6 KiB
HTML
{% macro section(post, nominations=[]) -%}
|
|
<figure class="c_45o96 b_a6uur" data-post-id="{{ post._id }}"
|
|
data-has-description="{{ post.description is not none and post.description|trim != '' }}">
|
|
<div class="b_1vs97">
|
|
<picture>
|
|
<img crossorigin="anonymous" fetchpriority="high" loading="eager" alt="{{ post.title }}" class="b_1vs97"
|
|
src="/b/posts/{{ post.medias_original[0] }}/500/90/80" data-src="/b/posts/{{ post.medias_original[0] }}">
|
|
</picture>
|
|
</div>
|
|
<figcaption class="c_dvi1x b_is70q">
|
|
<header class="c_2a5ek b_wae70">
|
|
<h2 class="c_n5g0e b_sa3vv">{{ post.title }}</h2>
|
|
</header>
|
|
<div class="c_y2b5u b_xo6ir post">
|
|
<p class="c_ehiop b_8d1cf">{{ post.size }}</p>
|
|
{% if post.description %}
|
|
<p class="c_t5wnp b_mjekb">{{ post.description or ''}}</p>
|
|
{% else %}
|
|
|
|
<div class="c_nb6gy floating-group">
|
|
<textarea type="text" id="description-{{post._id}}" name="description" class="c_4ykpn"></textarea>
|
|
<label for="description-{{post._id}}" class="floating-label">Описание</label>
|
|
</div>
|
|
<button class="saves" data-post_id="{{post._id}}">Сохранить</button>
|
|
|
|
|
|
{% endif %}
|
|
</div>
|
|
{% if nominations|length > 0 %}
|
|
<div class="c_aihm6 floating-group">
|
|
<select class="c_xhd5k" type="text" id="nom_{{post._id}}" onchange="selectNom(this)" name="nomination" required="">
|
|
<option value="">Выбрать</option>
|
|
{% for i in nominations %}
|
|
<option>{{i}}</option>
|
|
{% endfor %}
|
|
</select>
|
|
<label for="nom_{{post._id}}" class="c_z3ybu floating-label">Номинация</label>
|
|
</div>
|
|
{% endif %}
|
|
<button class="c_kg401 b_5bn1r">
|
|
|
|
<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<rect x="0.5" y="0.5" width="29" height="29" rx="9" fill="#5F1798" fill-opacity="0.2"/>
|
|
<rect x="0.5" y="0.5" width="29" height="29" rx="9" stroke="#5F1798"/>
|
|
<path d="M13 19.4L9 15.4L10.4 14L13 16.6L19.6 10L21 11.4L13 19.4Z" fill="white"/>
|
|
</svg>
|
|
<span class="c_shz86 b_s5wyz">Выбрать</span></button>
|
|
</figcaption>
|
|
</figure>
|
|
|
|
{%- endmacro %}
|
|
|
|
{% macro style() -%}
|
|
<style>/* Base (common) styles */
|
|
.saves{padding: 8px 10px;
|
|
width: 270px;
|
|
justify-content: center;
|
|
border-radius: 5px;
|
|
background: #5F1798;
|
|
color: white;
|
|
display: flex;
|
|
margin: 8px 0;}
|
|
.floating-group {position: relative;}
|
|
figcaption > .floating-group{width: 100%;}
|
|
.floating-group {
|
|
position: relative;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
.c_xhd5k, .c_4ykpn {
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
padding: 16px 16px;
|
|
border: 2px solid #ddd;
|
|
border-radius: 8px;
|
|
font-size: 16px;
|
|
transition: all 0.3s ease;
|
|
background: #FDFAFF;
|
|
}
|
|
.floating-label {position: absolute;left: 16px;top: 16px;font-size: 16px;color: #666;transition: all 0.3s ease;pointer-events: none;background: #fdfaff;padding: 0 6px;z-index: 2;}
|
|
.floating-group select:focus + .floating-label, .floating-group textarea:focus + .floating-label, .floating-group select:not(:placeholder-shown) + .floating-label, .floating-group textarea:not(:placeholder-shown) + .floating-label {
|
|
top: -8px;
|
|
font-size: 15px;
|
|
color: #5F1798;
|
|
}
|
|
.floating-label {
|
|
position: absolute;
|
|
left: 16px;
|
|
top: -8px;
|
|
font-size: 13px;
|
|
color: #5F1798;
|
|
transition: all 0.3s ease;
|
|
pointer-events: none;
|
|
background: #FDFAFF;
|
|
padding: 0 6px;
|
|
z-index: 2;
|
|
}
|
|
/* Плавающий лейбл */
|
|
.floating-group input:focus + .floating-label, .floating-group textarea:focus + .floating-label,
|
|
.floating-group input:not(:placeholder-shown) + .floating-label, .floating-group textarea:not(:placeholder-shown) + .floating-label {top: -8px;font-size: 15px;color: #5F1798;}
|
|
|
|
/* Красная подсветка — ТОЛЬКО после попытки отправки */
|
|
.floating-group.error input, .floating-group.error textarea, .floating-group.error select,
|
|
.floating-group.error input[type="file"] {border-color: #e74c3c !important;box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.38);}
|
|
|
|
.floating-group.error .floating-label {color: #e74c3c !important;}
|
|
.c_4ykpn {width: 100%;padding: 16px 16px;border: 2px solid #ddd;border-radius: 8px;font-size: 16px;transition: all 0.3s ease;background: #fdfaff;}
|
|
|
|
.c_4ykpn:focus {border-color: #5F1798;outline: none;box-shadow: 0 0 0 3px rgba(95, 23, 152, 0.15);}
|
|
|
|
picture>img{ width: 100%; object-fit: scale-down; }
|
|
|
|
.b_1vs97 { align-self: stretch; border-radius: 5px; height: 222px; }
|
|
.b_sa3vv { -webkit-box-orient: vertical; -webkit-line-clamp: 2; color: #171717; display: -webkit-box; font-family: Inter; font-size: 24px; font-style: normal; font-weight: 700; line-height: normal; overflow: hidden; text-overflow: ellipsis; }
|
|
.b_wae70 { align-items: center; display: flex; }
|
|
.b_8d1cf { -webkit-box-orient: vertical; -webkit-line-clamp: 1; color: #3A3A3A; display: -webkit-box; font-family: Inter; font-size: 16px; font-style: normal; font-weight: 400; line-height: normal; overflow: hidden; text-overflow: ellipsis; }
|
|
.b_mjekb { -webkit-box-orient: vertical; -webkit-line-clamp: 1; color: #3A3A3A; display: -webkit-box; font-family: Inter; font-size: 16px; font-style: normal; font-weight: 400; line-height: normal; overflow: hidden; text-overflow: ellipsis; }
|
|
.b_xo6ir { align-items: flex-start; display: flex; flex-direction: column; gap: 5px; }
|
|
.b_2td2f { color: #171717; font-family: Inter; font-size: 24px; font-style: normal; font-weight: 600; line-height: normal; }
|
|
.b_fb7c1 { fill: #FFF; height: 9.4px; width: 12px; }
|
|
.b_bkiit { flex-shrink: 0; height: 24px; width: 24px; }
|
|
.b_1yjli { align-items: center; background: #5e179820; border-radius: 9.5px; border: 1px solid #0ED646; display: flex; height: 30px; justify-content: center; padding: 3px; width: 30px; }
|
|
.b_s5wyz { color: #000; font-family: Inter; font-size: 14px; font-style: normal; font-weight: 400; line-height: normal; }
|
|
.b_5bn1r { align-items: center; align-self: stretch; border-radius: 5px; border: 1px solid #5F1798; display: flex; gap: 8px; justify-content: center; padding: 8px 0; }
|
|
.b_is70q { align-items: flex-start; align-self: stretch; display: flex; flex-direction: column; gap: 10px; justify-content: center; padding: 10px 20px; }
|
|
.b_a6uur { align-items: flex-start; background: #FDFAFF; border-radius: 5px; border: 1px solid #5F1798; box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25), 0 4px 20px 0 rgba(0, 0, 0, 0.20); display: flex; flex-direction: column; width: 335px; }
|
|
|
|
/* Mobile */
|
|
@media (max-width: 699px) {
|
|
.c_nb6gy { display: flex; justify-content: center; align-items: center; align-self: stretch; border-radius: 5px; background: #fdfaff; width: 100%; }
|
|
.c_4ykpn { display: flex; padding: 10px 10px; align-items: center; flex: 1 0 0; }
|
|
|
|
}
|
|
|
|
/* Tablet */
|
|
@media (min-width: 700px) and (max-width: 900px) {
|
|
|
|
.c_4ykpn { display: flex; padding: 10px 10px; align-items: center; flex: 1 0 0; }
|
|
|
|
.c_nb6gy { display: flex; width: 100%; justify-content: center; align-items: center; border-radius: 5px; background: #fdfaff; }
|
|
|
|
}
|
|
|
|
/* Desktop */
|
|
@media (min-width: 901px) {
|
|
.c_nb6gy { display: flex; width: 100%; justify-content: center; align-items: center; border-radius: 5px; background: #fdfaff; }
|
|
.c_4ykpn { display: flex; padding: 10px 10px; align-items: center; flex: 1 0 0; }
|
|
|
|
.c_t5wnp { -webkit-box-orient: vertical; -webkit-line-clamp: 3; color: #3A3A3A; display: -webkit-box; font-family: Inter; font-size: 16px; font-style: normal; font-weight: 400; line-height: normal; overflow: hidden; text-overflow: ellipsis; }
|
|
}</style>
|
|
{%- endmacro %} |