Commit 8c1743e7 authored by Emma's avatar Emma 🦉

redesign forum list

parent 8fba2299
Pipeline #56083674 passed with stages
in 8 minutes and 16 seconds
@import '../_variables';
.forum-card {
border: solid 1px var(--border-light);
display: flex;
flex-direction: column;
margin-bottom: 1rem;
padding: 1rem;
&__heading {
margin-bottom: 0.5rem;
}
&__main-column {
flex: 1 1 auto;
}
&__subscribe-column {
align-items: center;
display: flex;
flex-wrap: wrap;
margin-top: 1rem;
> :not(:last-child) {
margin-right: 1rem;
}
}
@media screen and (min-width: @desktop-min-width) {
align-items: center;
flex-direction: row;
&__subscribe-column {
text-align: center;
flex-direction: column;
margin-left: 1rem;
margin-top: 0;
> :not(:last-child) {
margin-right: 0;
}
}
}
}
......@@ -35,8 +35,11 @@
@import '_form/form-help';
@import '_form/required-indicator';
@import '_things/forum-card';
@import '_utilities/break-text';
@import '_utilities/no-desktop';
@import '_utilities/no-margin';
@import '_utilities/no-mobile';
@import '_utilities/no-underline';
@import '_utilities/no-wrap';
......
{% macro forum_list_header() %}
<h1 class="page-heading">{{ 'forum_list.page_title'|trans }}</h1>
<nav class="tabs forum-list-view-selector">
<ul class="unlistify tabs__bar">
{% with { active: app.request.attributes.get('_route') == 'forum_list' } %}
<li>
<a href="{{ path('forum_list') }}" class="tab {{ active ? 'tab--active' }}">
{{- 'forum_list.list_view'|trans -}}
</a>
</li>
{% endwith %}
{% with { active: app.request.attributes.get('_route') == 'forums_by_category' } %}
<li>
<a href="{{ path('forums_by_category') }}" class="tab {{ active ? 'tab--active' }}">
{{- 'forum_list.category_view'|trans -}}
</a>
</li>
{% endwith %}
</ul>
</nav>
{% macro forum_list_tabs() %}
<ul class="unlistify tabs__bar">
{% with { active: app.request.attributes.get('_route') == 'forum_list' } %}
<li>
<a href="{{ path('forum_list') }}" class="tab {{ active ? 'tab--active' }}">
{{- 'forum_list.list_view'|trans -}}
</a>
</li>
{% endwith %}
{% with { active: app.request.attributes.get('_route') == 'forums_by_category' } %}
<li>
<a href="{{ path('forums_by_category') }}" class="tab {{ active ? 'tab--active' }}">
{{- 'forum_list.category_view'|trans -}}
</a>
</li>
{% endwith %}
</ul>
{% endmacro %}
{% macro create_forum() %}
{% if is_granted('create_forum') %}
<p role="navigation">
<a href="{{ path('create_forum') }}" class="button">{{ 'forum_list.create_forum'|trans }}</a>
......
......@@ -15,7 +15,10 @@
</span>
<span class="subscribe-button__subscriber-count"
aria-label="{{ 'forum.subscriber_count'|trans({'%count%': subscriber_count}) }}">
aria-label="{{ 'forum.subscriber_count'|trans({
'%count%': subscriber_count,
'%formatted_count%': subscriber_count|localizednumber,
}) }}">
{{- subscriber_count|localizednumber -}}
</span>
</span>
......
{% extends 'base.html.twig' %}
{% from 'forum/list_by_category.html.twig' import forum_view_selector %}
{% from '_macros/icon.html.twig' import icon %}
{% from 'forum/_list_macros.html.twig' import create_forum, forum_list_tabs %}
{% block page_classes %}
forum-list-page
{% endblock %}
{% block page_classes 'forum-list-page' %}
{% block title %}
{{- 'forum_list.page_title'|trans -}}
{% endblock %}
{% block title 'forum_list.page_title'|trans %}
{% block head %}
{{ include('_includes/meta_pagination.html.twig', {pager: forums}, with_context=false) }}
<link rel="canonical" href="{{ url('forum_list') }}">
{% include '_includes/meta_pagination.html.twig' with {pager: forums} %}
{% endblock %}
{% from _self import table_head as th %}
{% from 'forum/_list_macros.html.twig' import forum_list_header %}
{% set forum_sort_modes = {
'by_name': 'forum_list.name'|trans,
'by_title': 'forum_list.title'|trans,
'by_submissions': 'forum_list.submission_count'|trans,
'by_subscribers': 'forum_list.subscribers'|trans,
} %}
{% block body %}
{{ forum_list_header() }}
<h1 class="page-heading">{{ 'forum_list.page_title'|trans }}</h1>
<nav class="tabs forum-list-view-selector">
{{ forum_list_tabs() }}
<ul class="tabs__bar unlistify">
<li class="dropdown">
<button class="tab dropdown__toggle"
aria-label="{{ 'label.sort_by_mode'|trans({
'%mode%': forum_sort_modes[sortBy]
}) }}">
{{ icon('sort') }}
{{ forum_sort_modes[sortBy] }}
<span class="dropdown__arrow" aria-hidden="true"></span>
</button>
<ul class="dropdown__menu card unlistify">
{% for mode, label in forum_sort_modes %}
<li>
<a href="{{ path('forum_list', { sortBy: mode }) }}"
class="menu-link {{ app.request.attributes.get('sortBy') == mode ? 'menu-link--active' }}">
{{- label -}}
</a>
</li>
{% endfor %}
</ul>
</li>
</ul>
</nav>
<table class="table forum-list">
<thead>
<tr>
<th class="table__shrink">{{ th('forum_list.name'|trans, 'by_name', sortBy) }}</th>
<th>{{ th('forum_list.title'|trans, 'by_title', sortBy) }}</th>
<th class="table__shrink">{{ th('forum_list.submission_count'|trans, 'by_submissions', sortBy) }}</th>
<th class="table__shrink">{{ th('forum_list.subscribers'|trans, 'by_subscribers', sortBy) }}</th>
</tr>
</thead>
<tbody>
{% for forum in forums %}
<tr>
<td class="table__shrink">
<a href="{{ path('forum', {forum_name: forum.name}) }}"><strong>{{ forum.name }}</strong></a>
{{ create_forum() }}
{% if forum.featured %}
<span title="{{ 'help.forum_is_featured'|trans }}">&#x2b50;</span>
{% endif %}
{% for forum in forums %}
<article class="forum-card">
<div class="forum-card__main-column">
<h2 class="forum-card__heading">
<a href="{{ path('forum', {forum_name: forum.name}) }}">
<span class="forum-card__name">/f/{{ forum.name }}</span>
&mdash;
<span class="forum-card__title n">{{ forum.title }}</span>
{#- remove spacing -#}
</a>
{% if is_granted('ROLE_USER') and app.user.hidingForum(forum) %}
<span title="{{ 'help.forum_is_hidden'|trans }}">&#x274c;</span>
{% endif %}
</td>
<td>{{ forum.title }}</td>
<td class="table__shrink">{{ forum.submissions|length|localizednumber }}</td>
{% if is_granted('ROLE_USER') %}
{% from 'forum/_macros.html.twig' import subscribe_button %}
{% set subscribed = forum.subscribed(app.user) %}
<td class="table__shrink">
<form action="{{ path(subscribed ? 'unsubscribe' : 'subscribe', {forum_name: forum.name}) }}"
method="POST"
class="subscribe-form"
data-forum="{{ forum.name }}">
<input type="hidden" name="token" value="{{ csrf_token('subscribe') }}">
{{ subscribe_button(forum, subscribed, true) }}
</form>
</td>
{% else %}
<td class="table__shrink">{{ forum.subscriptions|length|localizednumber }}</td>
{% if forum.featured %}
<span title="{{ 'help.forum_is_featured'|trans }}"
aria-label="{{ 'help.forum_is_featured'|trans }}">&#x2b50;</span>
{% endif %}
</tr>
{% endfor %}
</tbody>
</table>
{% include '_includes/pagination.html.twig' with {pager: forums} %}
{% endblock %}
{% if is_granted('ROLE_USER') and app.user.hidingForum(forum) %}
<span title="{{ 'help.forum_is_hidden'|trans }}"
aria-label="{{ 'help.forum_is_hidden'|trans }}">&#x274c;</span>
{% endif %}
</h2>
{% macro table_head(label, newSortBy, currentSortBy) %}
{%- if newSortBy == currentSortBy -%}
{{ label }} &#x25BC;
{% else %}
<a href="{{ path('forum_list', app.request.attributes.get('_route_params')|merge({sortBy: newSortBy})) }}">
{{- label -}}
</a>
{%- endif -%}
{% endmacro %}
<p class="forum-card__description no-margin">
{{- forum.description -}}
</p>
</div>
<div class="forum-card__subscribe-column">
{% if is_granted('ROLE_USER') %}
{% from 'forum/_macros.html.twig' import subscribe_button %}
{% set subscribed = forum.subscribed(app.user) %}
<form action="{{ path(subscribed ? 'unsubscribe' : 'subscribe', {forum_name: forum.name}) }}"
method="POST"
class="subscribe-form"
data-forum="{{ forum.name }}">
<input type="hidden" name="token" value="{{ csrf_token('subscribe') }}">
{{ subscribe_button(forum, subscribed, true) }}
</form>
{% else %}
<p class="no-margin">{{ 'forum.subscriber_count'|trans({
'%count%': forum.subscriptions|length,
'%formatted_count%': forum.subscriptions|length|localizednumber,
}) }}</p>
{% endif %}
<p class="no-margin">{{ 'forum.submission_count'|trans({
'%count%': forum.submissions|length,
'%formatted_count%': forum.submissions|length|localizednumber,
}) }}</p>
</div>
</article>
{% endfor %}
{{ include('_includes/pagination.html.twig', {pager: forums}, with_context=false) }}
{% endblock %}
{% extends 'base.html.twig' %}
{% from 'forum/_list_macros.html.twig' import forum_list_header %}
{% from 'forum/_list_macros.html.twig' import forum_list_tabs %}
{% block page_classes %}
forums-by-category-page
......@@ -10,7 +10,11 @@
{% endblock %}
{% block body %}
{{ forum_list_header() }}
<h1 class="page-heading">{{ 'forum_list.page_title'|trans }}</h1>
<nav class="tabs forum-list-view-selector">
{{ forum_list_tabs() }}
</nav>
<ul class="grouped-forum-listing">
{% for category in forum_categories %}
......
......@@ -80,7 +80,7 @@ forum:
edit: Forum bearbeiten
subscribe: Abonnieren
unsubscribe: Abbestellen
subscriber_count: '{0} Keine Abonnenten|{1} %count% Abonnent|[1,Inf[ %count% Abonnenten'
subscriber_count: '{0} Keine Abonnenten|{1} %formatted_count% Abonnent|[1,Inf[ %formatted_count% Abonnenten'
add_moderator: Moderator hinzufügen
forum_form:
......
......@@ -121,7 +121,7 @@ forum:
edit: Επεξεργασία φόρουμ
subscribe: Εγγραφείτε
unsubscribe: Διαγραφείτε
subscriber_count: '{0} Μηδενικούς συνδρομητές|{1} %count% συνδρομητής|[1,Inf[ %count% συνδρομητές'
subscriber_count: '{0} Μηδενικούς συνδρομητές|{1} %formatted_count% συνδρομητής|[1,Inf[ %formatted_count% συνδρομητές'
add_moderator: Προσθέστε συντονιστή
......
......@@ -147,7 +147,8 @@ forum:
edit: Edit forum
subscribe: Subscribe
unsubscribe: Unsubscribe
subscriber_count: '{0} No subscribers|{1} %count% subscriber|[1,Inf[ %count% subscribers'
subscriber_count: '{0} No subscribers|{1} %formatted_count% subscriber|[1,Inf[ %formatted_count% subscribers'
submission_count: '{0} No submissions|{1} %formatted_count% submission|[1,Inf[ %formatted_count% submissions'
add_moderator: Add moderator
forum_form:
......
......@@ -130,7 +130,7 @@ forum:
edit: Redakti diskutejon
subscribe: Aboni
unsubscribe: Malaboni
subscriber_count: '{0} Sen abonantoj|{1} %count% abonanto|[1,Inf[ %count% abonantoj'
subscriber_count: '{0} Sen abonantoj|{1} %formatted_count% abonanto|[1,Inf[ %formatted_count% abonantoj'
add_moderator: Aldoni kontrolanton
forum_form:
......
......@@ -134,7 +134,7 @@ forum:
edit: Editar foro
subscribe: Suscribirse
unsubscribe: Desuscribirse
subscriber_count: '{0} Sin suscriptoras|{1} %count% suscriptora|[1,Inf[ %count% suscriptoras'
subscriber_count: '{0} Sin suscriptoras|{1} %formatted_count% suscriptora|[1,Inf[ %formatted_count% suscriptoras'
add_moderator: Agregar moderadora
forum_form:
......
......@@ -86,7 +86,7 @@ forum:
edit: Muokkaa foorumia
subscribe: Tilaa
unsubscribe: Poista tilaus
subscriber_count: '{0} Ei tilaajia|{1} %count% tilaaja|[1,Inf[ %count% tilaajaa'
subscriber_count: '{0} Ei tilaajia|{1} %formatted_count% tilaaja|[1,Inf[ %formatted_count% tilaajaa'
add_moderator: Lisää moderaattori
......
......@@ -136,7 +136,7 @@ forum:
edit: Modifier le forum
subscribe: S'abonner
unsubscribe: Se désabonner
subscriber_count: '{0} Aucun abonnement|{1} %count% personne abonnée|[1,Inf[ %count% personnes abonnées'
subscriber_count: '{0} Aucun abonnement|{1} %formatted_count% personne abonnée|[1,Inf[ %formatted_count% personnes abonnées'
add_moderator: Ajouter un modérateur
forum_form:
......
......@@ -87,7 +87,7 @@ forum:
edit: Rediger forum
subscribe: Abonnere
unsubscribe: Avabonnere
subscriber_count: '{0} Ingen abonnenter|{1} %count% abonnent|[1,Inf[ %count% abonnenter'
subscriber_count: '{0} Ingen abonnenter|{1} %formatted_count% abonnent|[1,Inf[ %formatted_count% abonnenter'
add_moderator: Legg til moderator
forum_form:
......
......@@ -84,7 +84,7 @@ forum:
edit: Bewerk forum
subscribe: Abonneren
unsubscribe: Zeg abonnement op
subscriber_count: '{0} Geen abonnees|{1} %count% abbonee|[1,Inf[ %count% abbonees'
subscriber_count: '{0} Geen abonnees|{1} %formatted_count% abbonee|[1,Inf[ %formatted_count% abbonees'
add_moderator: Moderator toevoegen
forum_form:
......
......@@ -118,7 +118,7 @@ forum:
edit: Alterar fórum
subscribe: Inscrever
unsubscribe: Desinscrever
subscriber_count: '{0} Sem inscritos|{1} %count% inscrito|[1,Inf[ %count% inscritos'
subscriber_count: '{0} Sem inscritos|{1} %formatted_count% inscrito|[1,Inf[ %formatted_count% inscritos'
add_moderator: Adicionar moderador
forum_form:
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment