Skip to content

Postmill
Postmill
Commit 376114f7 authored by Emma's avatar Emma 🦉
Browse files
Options

move to BEM for submissions/sticky & lock icons

parent 278513b7
Pipeline #50773589 passed with stages
      in 7 minutes and 20 seconds
      Hide whitespace changes
      Inline Side-by-side
      Showing with 238 additions and 217 deletions
      assets/less/_submissions.less
      View file @ 376114f7
      @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();
      }
      templates/_layouts/submission.html.twig 0 → 100644
      View file @ 376114f7
      {%- 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 %}
      templates/submission/_macros.html.twig
      View file @ 376114f7
      {%- 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 -%}
      translations/messages.en.yml
      View file @ 376114f7
      # 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