mmpSearch/_includes/project-card.html

80 lines
4.1 KiB
HTML

{% assign projeto = include.project %}
{% assign filter_instruments = "" %}
{% assign filter_samples = "" %}
{% for track in projeto.tracks %}
{% if track.instruments %}
{% for inst in track.instruments %}
{% assign filter_instruments = filter_instruments | append: inst.instrument_name | append: "," %}
{% endfor %}
{% elsif track.instrument_name %}
{% assign filter_instruments = filter_instruments | append: track.instrument_name | append: "," %}
{% endif %}
{% if track.sample %}
{% for smp in track.sample %}
{% assign filter_samples = filter_samples | append: smp.sample_name | append: "," %}
{% endfor %}
{% elsif track.sample_name %}
{% assign filter_samples = filter_samples | append: track.sample_name | append: "," %}
{% endif %}
{% endfor %}
<div class="column is-12-mobile is-6-tablet is-4-desktop is-4-widescreen project-item"
data-bpm="{{ projeto.bpm }}"
data-plugins="{{ projeto.tags.plugin | join: ',' }}"
data-instruments="{{ filter_instruments }}"
data-samples="{{ filter_samples }}"
data-basslines="{{ projeto.tags.bassline | join: ',' }}"
data-automations="{{ projeto.tags.automation | join: ',' }}">
<div class="card project-card" style="height: 100%; background-color: #f0f8ff; border: 1px solid #cfe8fc; border-radius: 12px; display: flex; flex-direction: column;">
{% assign file_url = projeto.file | slugify %}
{% assign page_url = '../projetos/' | append: file_url | append: '.html' %}
<a href="{{ page_url }}" style="text-decoration: none; flex: 1; display: flex; flex-direction: column;">
<div class="card-content has-text-centered p-4" style="flex: 1; display: flex; flex-direction: column;">
<div style="width: 50px; height: 50px; background-color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 0.5rem auto; box-shadow: 0 2px 5px rgba(0,0,0,0.05);">
<span class="icon" style="color: #3273dc;"><i class="fa-solid fa-music fa-lg"></i></span>
</div>
<p class="title is-6 mb-2" style="color: #205081; word-break: break-word; font-weight: 700; line-height: 1.2;">
{{ projeto.file }}
</p>
{% if projeto.bpm %}
<div class="mb-3">
<span class="tag is-dark is-rounded is-light" style="font-size: 0.7rem; font-weight: bold; border: 1px solid #ccc;">
🎵 {{ projeto.bpm }} BPM
</span>
</div>
{% else %}
<div class="mb-3" style="height: 24px;"></div>
{% endif %}
<div style="flex: 1;"></div>
<div class="tags is-centered is-gapless mb-0 mt-2" style="gap: 4px; justify-content: center;">
{% if projeto.tags.plugin.size > 0 %}
<span class="tag is-white" style="font-size: 0.65rem; border: 1px solid #deeaf6; color: #5b7da3;">{{ projeto.tags.plugin.size }} plugins</span>
{% endif %}
{% if filter_instruments.size > 0 %}
<span class="tag is-white" style="font-size: 0.65rem; border: 1px solid #deeaf6; color: #5b7da3;">Insts</span>
{% endif %}
</div>
</div>
</a>
<footer class="card-footer" style="border-top: 1px solid #cfe8fc; background-color: #fff; border-radius: 0 0 12px 12px; overflow: hidden;">
<a href="#" class="card-footer-item js-open-modal" data-target-url="{{ page_url }}" data-modal-title="Detalhes: {{ projeto.file }}" data-full-btn-text="Ir para Página" data-full-btn-link="{{ page_url }}" style="color: #5b7da3; font-size: 0.8rem; font-weight: 600; border-right: 1px solid #eee; transition: background 0.2s;">Ver</a>
{% assign creation_url = '/mmpSearch/creation.html?project=' | append: projeto.file %}
{% assign embed_url = creation_url | append: '&embed=true' %}
<a href="#" class="card-footer-item js-open-modal" data-target-url="{{ embed_url }}" data-modal-title="Editor: {{ projeto.file }}" data-full-btn-text="Abrir Editor" data-full-btn-link="{{ creation_url }}" style="color: #3273dc; font-size: 0.8rem; font-weight: 600;">Editar</a>
</footer>
</div>
</div>