16 KiB
16 KiB
| layout | title | permalink |
|---|---|---|
| default | Projetos com a tag Plugin | /plugin/ |
<div class="tabs is-centered is-boxed is-medium mb-6">
{% include sidebar.html %}
</div>
<details
class="box mb-5 p-0 collapse-card"
open
style="
border: 1px solid #cfe8fc;
overflow: hidden;
background-color: #fff;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
height: fit-content !important;
min-height: unset;
"
>
<summary
class="p-4 is-flex is-justify-content-space-between is-align-items-center"
style="cursor: pointer; background-color: #f8fbff; user-select: none"
>
<div class="is-flex is-align-items-center">
<span class="icon has-text-info mr-2"
><i class="fa-solid fa-list"></i
></span>
<span class="has-text-grey-dark has-text-weight-bold"
>Todos os Plugins Disponíveis</span
>
<span
id="filter-counter"
class="tag is-info is-light ml-3 is-hidden"
>0 selecionados</span
>
</div>
<span class="icon has-text-grey-light chevron-icon"
><i class="fa-solid fa-chevron-down"></i
></span>
</summary>
<div
class="p-4"
style="background-color: #fff; border-top: 1px solid #cfe8fc"
>
<div class="tags is-centered are-medium mb-0">
{% assign all_items_string = "" %} {% for p in site.data.all %} {%
if p.tags.plugin %} {% for item in p.tags.plugin %} {% if item != ""
%} {% unless all_items_string contains item %} {% assign
all_items_string = all_items_string | append: item | append: "|||"
%} {% endunless %} {% endif %} {% endfor %} {% endif %} {% endfor %}
{% assign unique_items = all_items_string | split: "|||" | sort %}
{% for item in unique_items %} {% if item != "" %}
<a
href="#"
class="tag is-white plugin-filter-item clickable-tag"
data-value="{{ item }}"
style="
border: 1px solid #deeaf6;
color: #5b7da3;
margin-bottom: 0.5rem;
transition: all 0.2s;
"
>
{{ item }}
</a>
{% endif %} {% endfor %}
</div>
</div>
</details>
<div class="columns is-mobile is-vcentered mb-5">
<div class="column is-auto">
<h2 class="title is-4 has-text-grey-dark">
<span class="icon has-text-info mr-2"
><i class="fa-solid fa-filter"></i
></span>
Filtro:
<code id="filter-display-name" style="color: #d63384">(todos)</code>
</h2>
</div>
<div class="column is-narrow">
<button
id="clearFilterButton"
class="button is-small is-danger is-light"
>
<span class="icon is-small"><i class="fa-solid fa-xmark"></i></span>
<span>Limpar Tudo</span>
</button>
</div>
</div>
<div id="project-list" class="columns is-multiline">
{% for projeto in site.data.all %} {% if projeto.tags.TAG contains
"plugin" %}
<div
class="column is-12-mobile is-6-tablet is-4-desktop is-3-widescreen project-item"
data-plugins="{{ projeto.tags.plugin | join: ',' }}"
>
<div
class="card project-card"
style="
height: 100%;
background-color: #f0f8ff;
border: 1px solid #cfe8fc;
border-radius: 12px;
display: flex;
flex-direction: column;
position: relative;
"
>
{% assign file_url = projeto.file | downcase | replace: ' ', '-' |
replace: 'ç', 'c' | replace: 'ã', 'a' | replace: 'á', 'a' | replace:
'â', 'a' | replace: 'é', 'e' | replace: 'ê', 'e' | replace: 'í', 'i'
| replace: 'ó', 'o' | replace: 'ô', 'o' | replace: 'õ', 'o' |
replace: 'ú', 'u' %} {% assign page_url = '../mmp_pages/' | 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>
{% if projeto.tags.plugin and projeto.tags.plugin.size > 0 %}
<div
class="tags is-centered is-gapless mb-0 mt-2"
style="gap: 4px; justify-content: center"
>
{% for item in projeto.tags.plugin %} {% if item != "" %}
<span
class="tag is-white project-tag-item clickable-tag"
data-value="{{ item }}"
style="
font-size: 0.65rem;
border: 1px solid #deeaf6;
color: #5b7da3;
padding: 0 6px;
height: 1.5em;
text-decoration: none;
cursor: pointer;
"
>
{{ item | truncate: 15 }}
</span>
{% endif %} {% endfor %}
</div>
{% endif %}
</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>
{% endif %} {% endfor %}
</div>
</div>