Sort the member types like above, add maximum possible seats to titles, Use headers instead of a list for improved readability

This commit is contained in:
MTRNord 2024-04-28 11:51:28 +02:00
parent 4d45b664c8
commit 391e1bd6c3
No known key found for this signature in database
3 changed files with 107 additions and 62 deletions

View file

@ -7,10 +7,27 @@
color: var(--color-text);
}
.nominees button {
border-radius: 9999px;
border-color: transparent;
padding: .1em .5em;
.nominees {
button {
border-radius: 9999px;
border-color: transparent;
padding: .1em .5em;
}
.nominee {
summary {
font-size: 1.25rem;
scroll-margin-top: 74px;
margin-block: 1.38rem .5rem;
font-weight: 700;
line-height: 1.3;
}
/* The summary cant take h4 but we made it artificially look like h4. Hence we need to make h4 look like h5 */
h4 {
font-size: 0.8rem;
}
}
}
}

View file

@ -33,84 +33,103 @@
{% set nominees_path = page.path ~ "nominees.toml" %}
{% set nominees = load_data(path=nominees_path, format="toml") %}
{% if nominees.platinum_members %}
<h3 id="platinum-nominees">Platinum Members</h3>
{% if nominees.individual_members %}
<h3 id="individual-nominees">Individual Members (Max. 4 Seats)</h3>
<div class="nominees">
<div class="nominees-buttons-row"><button class="expand-all">Expand all</button> - <button class="collapse-all">Collapse all</button></div>
{% for representative in nominees.platinum_members %}
{{ nominee::project(representative=representative) }}
{% endfor %}
<div class="nominees-buttons-row">
<button class="expand-all">Expand all</button> &ndash; <button class="collapse-all">Collapse all</button>
</div>
{% for individual in nominees.individual_members %}
{{ nominee::individual(individual=individual) }}
{% endfor %}
</div>
{% endif %}
{% if nominees.gold_members %}
<h3 id="gold-nominees">Gold Members</h3>
<div class="nominees">
<div class="nominees-buttons-row"><button class="expand-all">Expand all</button> - <button class="collapse-all">Collapse all</button></div>
{% for representative in nominees.gold_members %}
{{ nominee::project(representative=representative) }}
{% endfor %}
</div>
{% endif %}
{% if nominees.silver_members %}
<h3 id="silver-nominees">Silver Members</h3>
<div class="nominees">
<div class="nominees-buttons-row"><button class="expand-all">Expand all</button> - <button class="collapse-all">Collapse all</button></div>
{% for representative in nominees.silver_members %}
{{ nominee::project(representative=representative) }}
{% endfor %}
</div>
{% endif %}
{% if nominees.ecosystem_members %}
<h3 id="ecosystem-nominees">Ecosystem Members</h3>
<h3 id="ecosystem-nominees">Ecosystem Members (Max. 3 Seats)</h3>
<div class="nominees">
<div class="nominees-buttons-row"><button class="expand-all">Expand all</button> - <button class="collapse-all">Collapse all</button></div>
{% for representative in nominees.ecosystem_members %}
<div class="nominees-buttons-row">
<button class="expand-all">Expand all</button> &ndash; <button class="collapse-all">Collapse all</button>
</div>
{% for representative in nominees.ecosystem_members %}
{{ nominee::project(representative=representative) }}
{% endfor %}
{% endfor %}
</div>
{% endif %}
{% if nominees.associate_members %}
<h3 id="associate-nominees">Associate Members</h3>
<h3 id="associate-nominees">Associate Members (Max. 2 Seats)</h3>
<div class="nominees">
<div class="nominees-buttons-row"><button class="expand-all">Expand all</button> - <button class="collapse-all">Collapse all</button></div>
{% for representative in nominees.associate_members %}
<div class="nominees-buttons-row">
<button class="expand-all">Expand all</button> &ndash; <button class="collapse-all">Collapse all</button>
</div>
{% for representative in nominees.associate_members %}
{{ nominee::project(representative=representative) }}
{% endfor %}
{% endfor %}
</div>
{% endif %}
{% if nominees.individual_members %}
<h3 id="individual-nominees">Individual Members</h3>
{% if nominees.platinum_members %}
<h3 id="platinum-nominees">Platinum Members (Max. 4 Seats)</h3>
<div class="nominees">
<div class="nominees-buttons-row"><button class="expand-all">Expand all</button> - <button class="collapse-all">Collapse all</button></div>
{% for individual in nominees.individual_members %}
{{ nominee::individual(individual=individual) }}
{% endfor %}
<div class="nominees-buttons-row">
<button class="expand-all">Expand all</button> &ndash; <button class="collapse-all">Collapse all</button>
</div>
{% for representative in nominees.platinum_members %}
{{ nominee::project(representative=representative) }}
{% endfor %}
</div>
{% endif %}
{% if nominees.sct_members %}
<h3 id="sct-nominees">Spec Core Team Members</h3>
{% if nominees.gold_members %}
<h3 id="gold-nominees">Gold Members (Max. 3 Seats)</h3>
<div class="nominees">
<div class="nominees-buttons-row"><button class="expand-all">Expand all</button> - <button class="collapse-all">Collapse all</button></div>
{% for individual in nominees.sct_members %}
{{ nominee::individual(individual=individual) }}
{% endfor %}
<div class="nominees-buttons-row">
<button class="expand-all">Expand all</button> &ndash; <button class="collapse-all">Collapse all</button>
</div>
{% for representative in nominees.gold_members %}
{{ nominee::project(representative=representative) }}
{% endfor %}
</div>
{% endif %}
{% if nominees.silver_members %}
<h3 id="silver-nominees">Silver Members (Max. 2 Seats)</h3>
<div class="nominees">
<div class="nominees-buttons-row">
<button class="expand-all">Expand all</button> &ndash; <button class="collapse-all">Collapse all</button>
</div>
{% for representative in nominees.silver_members %}
{{ nominee::project(representative=representative) }}
{% endfor %}
</div>
{% endif %}
{% if nominees.guardians %}
<h3 id="guardian-nominees">Guardians</h3>
<h3 id="guardian-nominees">Guardians (Max. 3 Seats)</h3>
<div class="nominees">
<div class="nominees-buttons-row"><button class="expand-all">Expand all</button> - <button class="collapse-all">Collapse all</button></div>
{% for guardian in nominees.guardians %}
<div class="nominees-buttons-row">
<button class="expand-all">Expand all</button> &ndash; <button class="collapse-all">Collapse all</button>
</div>
{% for guardian in nominees.guardians %}
{{ nominee::individual(individual=guardian) }}
{% endfor %}
{% endfor %}
</div>
{% endif %}
{% if nominees.sct_members %}
<h3 id="sct-nominees">Spec Core Team Members (Max. 2 Seats)</h3>
<div class="nominees">
<div class="nominees-buttons-row">
<button class="expand-all">Expand all</button> &ndash; <button class="collapse-all">
Collapse all
</button>
</div>
{% for individual in nominees.sct_members %}
{{ nominee::individual(individual=individual) }}
{% endfor %}
</div>
{% endif %}
</article>
{% endblock content %}

View file

@ -1,19 +1,28 @@
{% macro individual(individual) %}
<details class="nominee">
<summary>{{ individual.name }} {% if individual.pronouns %}({{ individual.pronouns }}){% endif %}</summary>
<ul>
{% if individual.bio %}<li>{{ individual.bio | markdown(inline=true) | safe }}</li>{% endif %}
{% if individual.platform_statement %}<li>{{ individual.platform_statement | markdown(inline=true) | safe }}</li>{% endif %}
</ul>
{% if individual.bio %}
<h4>Biography</h4>
{{ individual.bio | markdown() | safe }}
{% endif %}
{% if individual.platform_statement %}
<h4>Platform Statement</h4>
{{ individual.platform_statement | markdown() | safe }}
{% endif %}
</details>
{% endmacro %}
{% macro project(representative) %}
<details class="nominee">
<summary>{{ representative.name }} {% if representative.pronouns %}({{ representative.pronouns }}){% endif %} - {{ representative.project }}</summary>
<ul>
{% if representative.bio %}<li>{{ representative.bio | markdown(inline=true) | safe }}</li>{% endif %}
{% if representative.platform_statement %}<li>{{ representative.platform_statement | markdown(inline=true) | safe }}</li>{% endif %}
</ul>
<summary>{{ representative.name }} {% if representative.pronouns %}({{ representative.pronouns }}){% endif %} - {{
representative.project }}</summary>
{% if representative.bio %}
<h4>Biography</h4>
{{ representative.bio | markdown() | safe }}
{% endif %}
{% if representative.platform_statement %}
<h4>Platform Statement</h4>
{{ representative.platform_statement | markdown() | safe }}
{% endif %}
</details>
{% endmacro %}