Commit 376114f7 authored by Emma's avatar Emma 🦉

move to BEM for submissions/sticky & lock icons

parent 278513b7
Pipeline #50773589 passed with stages
in 7 minutes and 20 seconds
@import (reference) '_mixins';
@import (reference) '_variables';
.submission {
margin-bottom: 1rem;
&__title {
font-size: 1.33rem;
font-weight: normal;
margin: 0;
// don't make giant new lines if only the tiny host text wraps.
// also aligns icons correctly.
line-height: 0;
> * {
// restore line-height for children
line-height: var(--line-height);
}
}
&__link {
color: var(--submission-link);
&:visited {
color: var(--submission-link-visited);
}
}
&--sticky &__link {
color: var(--submission-link-sticky);
}
&__host {
font-size: 0.75rem;
}
&__body {
word-wrap: break-word;
padding-top: 1rem;
}
}
.submission-header > * {
......@@ -13,12 +48,6 @@
.vote-flex;
}
.submission-title {
font-size: 1.33rem;
font-weight: normal;
margin: 0;
}
.submission-image,
.submission-thumbnail {
display: block;
......@@ -33,18 +62,6 @@
}
}
.submission-link {
color: var(--submission-link);
&:visited {
color: var(--submission-link-visited);
}
.submission-sticky & {
color: var(--submission-link-sticky);
}
}
.submission-info {
.meta;
}
......@@ -57,15 +74,6 @@
}
}
.submission-body {
word-wrap: break-word;
padding-top: 1rem;
}
.submission-host {
font-size: 0.75rem;
}
.submission-permalink-nav {
.horizontal-menu();
}
{%- block submission_info_submitter -%}
{%- from 'user/_macros.html.twig' import user_link -%}
{{ user_link(submission.user, {
class: 'submission-submitter',
flag: submission.userFlag,
}) }}
{%- endblock submission_info_submitter -%}
{%- block submission_info_timestamp -%}
{%- set date = submission.timestamp|localizeddate('long', 'short') -%}
<time datetime="{{ submission.timestamp|date('c') }}" title="{{ date }}" class="submission-timestamp relative-time">
{{- 'submissions.info_at_timestamp'|trans({'%timestamp%': date}) -}}
</time>
{%- endblock submission_info_timestamp -%}
{%- block submission_info_forum_name -%}
<a href="{{ path('forum', {forum_name: submission.forum.name}) }}" class="submission-forum">
{{- submission.forum.name -}}
</a>
{%- endblock submission_info_forum_name -%}
{%- block submission_info_edited_at -%}
{%- set date = submission.editedAt|localizeddate('long', 'short') -%}
<time datetime="{{ submission.editedAt|date('c') }}" title="{{ date }}" class="relative-time-diff" data-compare-to="{{ submission.timestamp|date('c') }}">
{{- 'submissions.info_at_timestamp'|trans({'%timestamp%': date}) -}}
</time>
{%- endblock submission_info_edited_at -%}
{%- block submission -%}
{%- from '_macros/icon.html.twig' import icon -%}
{%- from 'vote/_macros.html.twig' import vote -%}
{%- set open_external = submission.url is not empty and (app.user.openExternalLinksInNewTab ?? false) -%}
<article class="{{ block('submission_classes') }}">
<div class="submission-row">
<div class="submission-vote">
{{- vote(submission, 'submission_vote') -}}
</div>
{% if submission.image %}
<div class="submission-image-container">
<a href="{{ block('submission_url') }}" class="submission-image" {% if submission.url %}rel="nofollow noreferrer noopener" {% if open_external %}target="_blank"{% endif %}{% endif %}>
<img src="{{ submission.image|imagine_filter('submission_thumbnail_1x') }}"
srcset="{{ submission.image|imagine_filter('submission_thumbnail_2x') }} 2x"
class="submission-thumbnail"
alt=""
width="70"
height="70">
</a>
</div>
{% endif %}
<div class="submission-inner">
<header class="submission-header">
<h1 class="submission__title submission-title">
<a href="{{ block('submission_url') }}" class="submission__link submission-link" {% if submission.url %}rel="nofollow noreferrer noopener" {% if open_external %}target="{{ open_external ? '_blank' }}"{% endif %}{% endif %}>
{{- submission.title -}}
</a>
{% if submission.sticky %}
<span class="submission__sticky-icon"
title="{{ 'This submission is locked'|trans }}">
{{- icon('pin') -}}
</span>
{% endif %}
{% if submission.locked %}
<span class="submission__locked-icon"
title="{{ 'This submission is pinned'|trans }}">
{{- icon('lock') -}}
</span>
{% endif %}
{% if submission.url is not empty and '://' in submission.url %}
<small class="submission__host submission-host">
{%- with {host: submission.url|split('://')[1]|split('/')[0]} -%}
{{- host[0:4] == 'www.' ? host[4:] : host -}}
{%- endwith -%}
</small>
{% endif %}
</h1>
<p class="submission-info">
{%- if show_forum_name -%}
{{ 'submissions.info_with_forum_name'|trans({
'%submitter%': block('submission_info_submitter'),
'%timestamp%': block('submission_info_timestamp'),
'%forum%': block('submission_info_forum_name'),
})|raw }}
{%- else -%}
{{ 'submissions.info_without_forum_name'|trans({
'%submitter%': block('submission_info_submitter'),
'%timestamp%': block('submission_info_timestamp'),
})|raw }}
{%- endif -%}
{% if submission.editedAt %}
<span class="submission-info-edited-at {{ submission.moderated ? 'submission-info-moderated' }}">
{{ (submission.moderated ? 'submissions.moderator_info' : 'submissions.edit_info')|trans({
'%edited_at%': block('submission_info_edited_at')
})|raw }}
</span>
{% endif %}
</p>
</header>
{%- if show_body -%}
{% if submission.body is not null %}
<div class="submission__body submission-body">
{{- submission.body|cached_markdown({ context: 'submission', submission: submission })|raw -}}
</div>
{% endif %}
{%- endif -%}
{%- spaceless -%}
<nav class="submission-nav">
<ul>
<li>
<a href="{{ path('submission', {forum_name: submission.forum.name, submission_id: submission.id, slug: submission.title|slugify}) }}">
{{- 'submissions.comments'|trans({'%count%': submission.comments|length}) -}}
</a>
</li>
{%- if is_granted('edit', submission) -%}
<li>
<a href="{{ path('edit_submission', {forum_name: submission.forum.name, submission_id: submission.id}) }}">
{{- 'submissions.edit'|trans -}}
</a>
</li>
{%- endif -%}
{%- if is_granted('delete_immediately', submission) %}
<li>
<form action="{{ path('submission_delete_immediately', {forum_name: submission.forum.name, submission_id: submission.id}) }}" method="POST">
<input type="hidden" name="token" value="{{ csrf_token('delete_submission') }}">
<button class="confirm-submission-delete">{{ 'action.delete'|trans }}</button>
</form>
</li>
{%- elseif is_granted('delete_with_reason', submission) %}
<li>
<a href="{{ path('submission_delete_with_reason', {forum_name: submission.forum.name, submission_id: submission.id}) }}">
{{- 'action.delete'|trans -}}
</a>
</li>
{%- endif -%}
{%- if is_granted('moderator', submission.forum) -%}
<li>
<form action="{{ path(submission.locked ? 'unlock' : 'lock', {
forum_name: submission.forum.name,
submission_id: submission.id,
}) }}" method="post">
<input type="hidden" name="token" value="{{ csrf_token('lock') }}">
<button>{{ submission.locked ? 'action.unlock'|trans : 'action.lock'|trans }}</button>
</form>
</li>
<li>
<a href="{{ path('forum_ban', {forum_name: submission.forum.name, username: submission.user.username}) }}">
{{- 'action.ban'|trans -}}
</a>
</li>
{%- endif -%}
{%- if is_granted('ROLE_ADMIN') -%}
<li>
<a href="{{ path('ban_user', {'username': submission.user.username}) }}">{{ 'action.global_ban'|trans }}</a>
</li>
{%- endif -%}
</ul>
</nav>
{%- endspaceless -%}
</div>
</div>
</article>
{% endblock submission %}
{%- block submission_url -%}
{%- if submission.url -%}
{{- submission.url -}}
{%- else -%}
{{- path('submission', {forum_name: submission.forum.name, submission_id: submission.id, slug: submission.title|slugify}) -}}
{%- endif -%}
{%- endblock submission_url -%}
{% block submission_classes %}
submission
{{ submission.url ? 'submission--has-url submission-has-url' }}
{{ submission.body is not null ? 'submission--has-body submission-has-body' }}
{{ not show_body ? 'submission--collapsed submission-body-hidden' : 'submission--expanded' }}
{{ submission.sticky ? 'submission--sticky submission-sticky' }}
{{ submission.locked ? 'submission--locked submission-locked' }}
{% endblock submission_classes %}
{%- macro submission(submission, options) -%}
{%- set options = {
show_body: false,
show_forum_name: true,
}|merge(options|default({})) -%}
{{- block('submission') -}}
{%- endmacro -%}
{% use '_layouts/submission.html.twig' %}
{% macro submission(submission, options) %}
{%- with {
show_body: options.show_body ?? false,
show_forum_name: options.show_forum_name ?? true,
submission: submission
} only -%}
{{ block('submission') }}
{%- endwith -%}
{% endmacro -%}
{%- macro submission_sort(current) -%}
{%- set attr = app.request.attributes -%}
......@@ -19,182 +22,3 @@
{%- endfor -%}
{%- endspaceless -%}
{%- endmacro -%}
{%- block submission_info_submitter -%}
{%- from 'user/_macros.html.twig' import user_link -%}
{{ user_link(submission.user, {
class: 'submission-submitter',
flag: submission.userFlag,
}) }}
{%- endblock -%}
{%- block submission_info_timestamp -%}
{%- set date = submission.timestamp|localizeddate('long', 'short') -%}
<time datetime="{{ submission.timestamp|date('c') }}" title="{{ date }}" class="submission-timestamp relative-time">
{{- 'submissions.info_at_timestamp'|trans({'%timestamp%': date}) -}}
</time>
{%- endblock -%}
{%- block submission_info_forum_name -%}
<a href="{{ path('forum', {forum_name: submission.forum.name}) }}" class="submission-forum">
{{- submission.forum.name -}}
</a>
{%- endblock -%}
{%- block submission_info_edited_at -%}
{%- set date = submission.editedAt|localizeddate('long', 'short') -%}
<time datetime="{{ submission.editedAt|date('c') }}" title="{{ date }}" class="relative-time-diff" data-compare-to="{{ submission.timestamp|date('c') }}">
{{- 'submissions.info_at_timestamp'|trans({'%timestamp%': date}) -}}
</time>
{%- endblock -%}
{%- block submission -%}
{%- from 'vote/_macros.html.twig' import vote -%}
{%- set open_external = submission.url is not empty and (app.user.openExternalLinksInNewTab ?? false) -%}
<article class="submission {{ submission.url ? 'submission-has-url' }} {{ submission.body is not null ? 'submission-has-body' }} {{ not options.show_body ? 'submission-body-hidden' }} {{ submission.sticky ? 'submission-sticky' }} {{ submission.locked ? 'submission-locked' }}">
<div class="submission-row">
<div class="submission-vote">
{{- vote(submission, 'submission_vote') -}}
</div>
{% if submission.image %}
<div class="submission-image-container">
<a href="{{ block('submission_url') }}" class="submission-image" {% if submission.url %}rel="nofollow noreferrer noopener" {% if open_external %}target="_blank"{% endif %}{% endif %}>
<img src="{{ submission.image|imagine_filter('submission_thumbnail_1x') }}"
srcset="{{ submission.image|imagine_filter('submission_thumbnail_2x') }} 2x"
class="submission-thumbnail"
alt=""
width="70"
height="70">
</a>
</div>
{% endif %}
<div class="submission-inner">
<header class="submission-header">
<h1 class="submission-title">
<a href="{{ block('submission_url') }}" class="submission-link" {% if submission.url %}rel="nofollow noreferrer noopener" {% if open_external %}target="{{ open_external ? '_blank' }}"{% endif %}{% endif %}>
{{- submission.title -}}
</a>
{% if submission.url is not empty and '://' in submission.url %}
<small class="submission-host">
{%- with {host: submission.url|split('://')[1]|split('/')[0]} -%}
{{- host[0:4] == 'www.' ? host[4:] : host -}}
{%- endwith -%}
</small>
{% endif %}
</h1>
<p class="submission-info">
{% if submission.locked %}
{% from '_macros/icon.html.twig' import icon %}
{{ icon('lock') }}
{% endif %}
{%- if options.show_forum_name -%}
{{ 'submissions.info_with_forum_name'|trans({
'%submitter%': block('submission_info_submitter'),
'%timestamp%': block('submission_info_timestamp'),
'%forum%': block('submission_info_forum_name'),
})|raw }}
{%- else -%}
{{ 'submissions.info_without_forum_name'|trans({
'%submitter%': block('submission_info_submitter'),
'%timestamp%': block('submission_info_timestamp'),
})|raw }}
{%- endif -%}
{% if submission.editedAt %}
<span class="submission-info-edited-at {{ submission.moderated ? 'submission-info-moderated' }}">
{{ (submission.moderated ? 'submissions.moderator_info' : 'submissions.edit_info')|trans({
'%edited_at%': block('submission_info_edited_at')
})|raw }}
</span>
{% endif %}
{% if app.environment == 'dev' and app.request.query.has('showrank') %}
{{ submission.ranking - submission.timestamp.timestamp }}
{% endif %}
</p>
</header>
{%- if options.show_body -%}
{% if submission.url %}
<div class="submission-media">{{ block('submission_media') }}</div>
{% endif %}
{% if submission.body is not null %}
<div class="submission-body">{{ submission.body|cached_markdown({ context: 'submission', submission: submission })|raw }}</div>
{% endif %}
{%- endif -%}
{%- spaceless -%}
<nav class="submission-nav">
<ul>
<li>
<a href="{{ path('submission', {forum_name: submission.forum.name, submission_id: submission.id, slug: submission.title|slugify}) }}">
{{- 'submissions.comments'|trans({'%count%': submission.comments|length}) -}}
</a>
</li>
{%- if is_granted('edit', submission) -%}
<li>
<a href="{{ path('edit_submission', {forum_name: submission.forum.name, submission_id: submission.id}) }}">
{{- 'submissions.edit'|trans -}}
</a>
</li>
{%- endif -%}
{%- if is_granted('delete_immediately', submission) %}
<li>
<form action="{{ path('submission_delete_immediately', {forum_name: submission.forum.name, submission_id: submission.id}) }}" method="POST">
<input type="hidden" name="token" value="{{ csrf_token('delete_submission') }}">
<button class="confirm-submission-delete">{{ 'action.delete'|trans }}</button>
</form>
</li>
{%- elseif is_granted('delete_with_reason', submission) %}
<li>
<a href="{{ path('submission_delete_with_reason', {forum_name: submission.forum.name, submission_id: submission.id}) }}">
{{- 'action.delete'|trans -}}
</a>
</li>
{%- endif -%}
{%- if is_granted('moderator', submission.forum) -%}
<li>
<form action="{{ path(submission.locked ? 'unlock' : 'lock', {
forum_name: submission.forum.name,
submission_id: submission.id,
}) }}" method="post">
<input type="hidden" name="token" value="{{ csrf_token('lock') }}">
<button>{{ submission.locked ? 'action.unlock'|trans : 'action.lock'|trans }}</button>
</form>
</li>
<li>
<a href="{{ path('forum_ban', {forum_name: submission.forum.name, username: submission.user.username}) }}">
{{- 'action.ban'|trans -}}
</a>
</li>
{%- endif -%}
{%- if is_granted('ROLE_ADMIN') -%}
<li>
<a href="{{ path('ban_user', {'username': submission.user.username}) }}">{{ 'action.global_ban'|trans }}</a>
</li>
{%- endif -%}
</ul>
</nav>
{%- endspaceless -%}
</div>
</div>
</article>
{% endblock %}
{%- block submission_url -%}
{%- if submission.url -%}
{{- submission.url -}}
{%- else -%}
{{- path('submission', {forum_name: submission.forum.name, submission_id: submission.id, slug: submission.title|slugify}) -}}
{%- endif -%}
{%- endblock -%}
{%- block submission_media -%}
{# TODO #}
{%- endblock -%}
# New keys should use the generic categories 'title', 'label', 'help', 'nav',
# etc. Older keys are subject to renaming.
This submission is locked: This submission is locked
This submission is pinned: This submission is pinned
'Expires at (YYYY-MM-DD hh:mm)': Expires at (YYYY-MM-DD hh:mm)
action:
mark_as_trusted: Mark user as trusted
mark_as_untrusted: Mark user as untrusted
......@@ -38,8 +42,6 @@ add_moderator:
ban_add:
title: Ban an IP address
'Expires at (YYYY-MM-DD hh:mm)': Expires at (YYYY-MM-DD hh:mm)
ban_list:
ip: IP address
timestamp: Time
......
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