21 KiB
21 KiB
layout, title, permalink
| layout | title | permalink |
|---|---|---|
| default | Projetos por Pattern Rítmico | /pattern/ |
<div class="tabs is-centered is-boxed is-medium mb-6">
{% include sidebar.html %}
</div>
<div class="columns is-centered">
<div class="column is-8">
<div
class="box has-background-white-ter has-text-centered shadow-sm"
style="border: 1px solid #cfe8fc; height: fit-content !important; min-height: unset;"
>
<h2 class="title is-5 has-text-grey-dark mb-3">
<span class="icon has-text-info"
><i class="fa-solid fa-drum"></i
></span>
Busca por Pattern Rítmico
</h2>
<p class="subtitle is-7 has-text-grey mb-4">
Desenhe um ritmo (16 steps) abaixo ou clique nos patterns dos
instrumentos:
</p>
<div
id="pattern-search-box"
style="
display: flex;
gap: 6px;
justify-content: center;
flex-wrap: wrap;
margin-bottom: 1rem;
"
>
{% for i in (0..15) %} {% assign mod = i | modulo: 4 %} {% if i >
0 and mod == 0 %}
<div style="width: 8px"></div>
{% endif %}
<div
class="search-step"
data-index="{{i}}"
title="Step {{ i | plus: 1 }}"
style="
width: 25px;
height: 45px;
background: #e8e8e8;
border: 1px solid #ccc;
border-radius: 4px;
cursor: pointer;
transition: all 0.1s;
"
></div>
{% endfor %}
</div>
<button
id="clearFilterButton"
class="button is-small is-danger is-light is-rounded"
>
<span class="icon"><i class="fa-solid fa-trash"></i></span>
<span>Limpar Desenho</span>
</button>
</div>
</div>
</div>
<div id="project-list" class="columns is-multiline">
{% for projeto in site.data.all %} {% assign project_patterns_flat = ""
| split: "," %} {% for track in projeto.tracks %} {% if
track.instruments %} {% for instrument in track.instruments %} {% if
instrument.patterns %} {% for pattern in instrument.patterns %} {%
assign pattern_steps = pattern.steps %} {% if pattern_steps and
pattern_steps.size > 0 %} {% assign total_steps = pattern_steps.size %}
{% assign chunk_size = 4 %} {% assign num_chunks = total_steps |
divided_by: chunk_size %} {% assign remainder = total_steps | modulo:
chunk_size %} {% if remainder > 0 %}{% assign num_chunks = num_chunks |
plus: 1 %}{% endif %} {% for i in (0..num_chunks) %} {% assign
start_index = i | times: chunk_size %} {% assign current_chunk_array =
pattern_steps | slice: start_index, chunk_size %} {% if
current_chunk_array.size > 0 %} {% assign chunk_string = "" %} {% for
step in current_chunk_array %} {% if step == true or step == 'true' or
step == 1 %}{% assign chunk_string = chunk_string | append: '1' %}{%
else %}{% assign chunk_string = chunk_string | append: '0' %}{% endif %}
{% endfor %} {% unless project_patterns_flat contains chunk_string %} {%
assign project_patterns_flat = project_patterns_flat | push:
chunk_string %} {% endunless %} {% endif %} {% endfor %} {% endif %} {%
endfor %} {% endif %} {% endfor %} {% endif %} {% endfor %} {% if
project_patterns_flat.size > 0 %} {% assign project_patterns_string =
project_patterns_flat | join: ',' %}
<div
class="column is-12-mobile is-6-tablet is-4-desktop is-3-widescreen project-item"
data-patterns="{{ project_patterns_string }}"
>
<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 | 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; display: block"
>
<div class="card-content has-text-centered p-4 pb-0">
<div
style="
width: 40px;
height: 40px;
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"></i
></span>
</div>
<p
class="title is-6 mb-3"
style="color: #205081; word-break: break-word"
>
{{ projeto.file }}
</p>
</div>
</a>
<div class="card-content px-4 pb-4 pt-2" style="flex: 1">
<div
class="patterns-visualizer p-3"
style="
background: #fff;
border-radius: 8px;
border: 1px dashed #cfe8fc;
text-align: left;
"
>
<p
class="is-size-7 has-text-grey mb-2 filter-status-label"
style="font-weight: 600; text-align: center"
>
Patterns por Instrumento:
</p>
<div style="display: flex; flex-direction: column; gap: 8px">
{% for track in projeto.tracks %} {% if track.instruments %}
{% for instrument in track.instruments %} {% if
instrument.patterns %} {% assign inst_patterns = "" | split:
"," %} {% for pattern in instrument.patterns %} {% assign
pattern_steps = pattern.steps %} {% if pattern_steps and
pattern_steps.size > 0 %} {% assign total_steps =
pattern_steps.size %} {% assign chunk_size = 4 %} {% assign
num_chunks = total_steps | divided_by: chunk_size %} {% assign
remainder = total_steps | modulo: chunk_size %} {% if
remainder > 0 %}{% assign num_chunks = num_chunks | plus: 1
%}{% endif %} {% for i in (0..num_chunks) %} {% assign
start_index = i | times: chunk_size %} {% assign
current_chunk_array = pattern_steps | slice: start_index,
chunk_size %} {% if current_chunk_array.size > 0 %} {% assign
chunk_string = "" %} {% for step in current_chunk_array %} {%
if step == true or step == 'true' or step == 1 %}{% assign
chunk_string = chunk_string | append: '1' %}{% else %}{%
assign chunk_string = chunk_string | append: '0' %}{% endif %}
{% endfor %} {% if chunk_string != "0000" %} {% unless
inst_patterns contains chunk_string %} {% assign inst_patterns
= inst_patterns | push: chunk_string %} {% endunless %} {%
endif %} {% endif %} {% endfor %} {% endif %} {% endfor %} {%
if inst_patterns.size > 0 %}
<div
class="instrument-row"
style="
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid #f5f5f5;
padding-bottom: 4px;
"
>
{% assign instrument_slug = instrument.instrument_name |
replace: ' ', '+' %}
<a
href="{{ '/instruments/?instrument=' | append: instrument_slug | relative_url }}"
class="tag is-white is-light instrument-link"
style="
font-size: 0.6rem;
color: #555;
max-width: 85px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
text-decoration: none;
border: 1px solid transparent;
"
title="Ver projetos com {{ instrument.instrument_name }}"
>
{{ instrument.instrument_name }}
</a>
<div style="display: flex; gap: 3px">
{% for p_str in inst_patterns %}
<div
class="pattern-mini-grid js-pattern-trigger"
data-pattern-val="{{ p_str }}"
title="Filtrar por: {{ p_str }}"
>
{% assign bits = p_str | split: '' %} {% for bit in bits
%}
<div
style="width: 4px; height: 8px; background-color: {% if bit == '1' %}#4caf50{% else %}#eee{% endif %};"
></div>
{% endfor %}
</div>
{% endfor %}
</div>
</div>
{% endif %} {% endif %} {% endfor %} {% endif %} {% endfor %}
</div>
</div>
</div>
<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;
"
>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>