remove deprecated classes

assets/css/_common.less

@@ -65,3 +65,7 @@
 .forum-group-heading a {
   color: var(--text);
 }
+
+.submission-permalink-nav {
+  .horizontal-menu();
+}

assets/css/_submissions.less

@@ -37,42 +37,39 @@
   &__body {
     padding-top: 1rem;
   }
-}
 
-.submission-header > * {
+  &__header > * {
     margin-bottom: 0;
-}
+  }
 
-.submission-row {
-  .vote-flex;
-}
+  &__row {
+    .vote-flex();
+  }
 
-.submission-image,
-.submission-thumbnail {
+  &__image,
+  &__thumbnail {
     display: block;
-}
+  }
 
-.submission-image-container {
+  &__image-container {
     margin-right: 1rem;
 
     @media screen and (max-width: 480px) {
       // don't show thumbnails on tiny screens
       display: none;
     }
-}
+  }
 
-.submission-info {
+  &__info {
     .meta;
-}
+  }
+
 
-.submission-nav {
+  &__nav {
     .meta-nav;
 
     ul {
       margin-bottom: 0;
     }
-}
-
-.submission-permalink-nav {
-  .horizontal-menu();
+  }
 }

assets/js/dropdowns.js

@@ -35,7 +35,6 @@ function toggleAttributes($dropdowns) {
 
         $dropdown
             .toggleClass('dropdown--expanded')
-            .toggleClass('expanded') // BC
             .find('.dropdown__toggle')
             .attr('aria-expanded', expanded);
     });
@@ -98,7 +97,6 @@ function globalKeyDownHandler(event) {
 
 // init
 
-$('.dropdown').addClass('dropdown-container').addClass('js'); // BC
 $('.dropdown__toggle').attr('aria-haspopup', true).attr('aria-expanded', false);
 
 $(document).on('keydown', globalKeyDownHandler);

templates/_forms/standard_form_theme.html.twig

@@ -46,7 +46,7 @@
 
 {% block form_help -%}
   {%- if help is not empty -%}
-    {%- set help_attr = help_attr|merge({class: (help_attr.class|default('') ~ ' form-help form__help')|trim}) -%}
+    {%- set help_attr = help_attr|merge({class: (help_attr.class|default('') ~ ' form-help')|trim}) -%}
     <p id="{{ id }}_help"{% with { attr: help_attr } %}{{ block('attributes') }}{% endwith %}>
       {%- if translation_domain is same as(false) -%}
         {{- help -}}

templates/_includes/search.html.twig

@@ -16,7 +16,7 @@
       <input class="form-control" type="text" name="query" placeholder="{{ 'label.search'|trans }}" />
     </div>
 
-    <p class="form-help form__help">
+    <p class="form-help">
       <strong>{{ 'help.search_external_prefix'|trans }}</strong>
       {{ 'help.search_external_message'|trans }}
     </p>

templates/_includes/site_nav.html.twig

@@ -57,13 +57,13 @@
         </li>
 
         {% if is_granted('ROLE_ADMIN') %}
-          <li class="dropdown dropdown-container">
+          <li class="dropdown">
             <button type="button"
-                    class="dropdown__toggle no-underline no-wrap site-nav__link dropdown-toggle {{ active == 'admin' ? 'site-nav__link--active' }}">
+                    class="dropdown__toggle no-underline no-wrap site-nav__link {{ active == 'admin' ? 'site-nav__link--active' }}">
               <span class="no-underline__exempt">{{ 'label.admin'|trans }}</span>
               <span class="dropdown__arrow" aria-hidden="true"></span>
             </button>
-            <ul class="card dropdown__menu no-wrap unlistify dropdown-menu">
+            <ul class="card dropdown__menu no-wrap unlistify">
               <li>
                 <a href="{{ path('user_bans') }}" class="menu-link">
                   {{ icon('hammer') }}
@@ -140,14 +140,14 @@
         </li>
 
         {# user menu #}
-        <li class="dropdown dropdown--right dropdown-container">
-          <button type="button" class="dropdown__toggle no-underline site-nav__link dropdown-toggle no-wrap {{ active == 'user' ? 'site-nav__link--active' }}">
+        <li class="dropdown dropdown--right">
+          <button type="button" class="dropdown__toggle no-underline site-nav__link no-wrap {{ active == 'user' ? 'site-nav__link--active' }}">
             {{ icon('user') }}
             <strong class="no-underline__exempt no-mobile">{{ app.user.username }}</strong>
             <span class="dropdown__arrow no-mobile" aria-hidden="true"></span>
           </button>
 
-          <ul class="card dropdown__menu dropdown-menu unlistify no-wrap">
+          <ul class="card dropdown__menu unlistify no-wrap">
             <li>
               <a href="{{ path('user', {username: app.user.username}) }}"
                  class="menu-link">

templates/_layouts/comment.html.twig

@@ -2,29 +2,28 @@
   {%- from 'vote/_macros.html.twig' import vote -%}
   <article class="comment
                   comment--{{ level > 1 ? 'nested' : 'top-level' }}
-                  comment-{{ level > 1 ? 'level-'~(level - 1) : 'top-level' }}
                   {{ show_context ? 'comment--with-context' }}
-                  {{ comment.softDeleted ? 'comment--soft-deleted comment-soft-deleted' }}"
+                  {{ comment.softDeleted ? 'comment--soft-deleted' }}"
            id="comment_{{ comment.id }}"
            data-level="{{ level }}">
     {% if show_context %}
       {{- block('comment_context') -}}
     {% endif %}
 
-    <div class="comment__row comment-row">
-      <div class="comment__vote comment-vote">
+    <div class="comment__row">
+      <div class="comment__vote">
         {{ vote(comment, 'comment_vote') }}
       </div>
 
-      <div class="comment__main comment-inner">
-        <h1 class="comment__info comment-info break-text">
+      <div class="comment__main">
+        <h1 class="comment__info break-text">
           {{ 'comments.info'|trans({
             '%user%': block('comment_info_user'),
             '%timestamp%': block('comment_info_timestamp'),
           })|raw }}
 
           {% if comment.editedAt %}
-            <span class="comment__edited-at comment-info-edited-at {{ comment.moderated ? 'comment__moderated comment-info-moderated' }}">
+            <span class="comment__edited-at {{ comment.moderated ? 'comment__moderated' }}">
               {{ (comment.moderated ? 'comments.moderator_info' : 'comments.edit_info')|trans({
                 '%edited_at%': block('comment_info_edited_at')
               })|raw }}
@@ -32,11 +31,11 @@
           {% endif %}
         </h1>
 
-        <div class="comment__body comment-body break-text">
+        <div class="comment__body break-text">
           {{ comment.body|cached_markdown({ context: 'comment', comment: comment })|raw }}
         </div>
 
-        <nav class="comment__nav comment-nav">
+        <nav class="comment__nav">
           <ul>{{ block('comment_nav') }}</ul>
         </nav>
 
@@ -48,7 +47,7 @@
     </div>
 
     {% if recurse and comment.children|length > 0 %}
-      <div class="comment__replies comment-replies">
+      <div class="comment__replies">
         {%- for reply in comment.children -%}
           {%- with { comment: reply, level: level + 1 } -%}
             {{- block('comment') -}}
@@ -90,7 +89,7 @@
 
   {%- if not comment.softDeleted -%}
     {{- user_link(comment.user, {
-      class: 'comment__author comment-user',
+      class: 'comment__author',
       flag: comment.userFlag,
       submitter: comment.user is same as(comment.submission.user),
     }) -}}
@@ -103,7 +102,7 @@
   {%- set date = comment.timestamp|localizeddate('long', 'short') -%}
   <time datetime="{{ comment.timestamp|date('c') }}"
         title="{{ date }}"
-        class="comment__timestamp comment-timestamp relative-time">
+        class="comment__timestamp relative-time">
     {{- 'comments.info_at_timestamp'|trans({'%timestamp%': date}) -}}
   </time>
 {%- endblock comment_info_timestamp -%}
@@ -129,7 +128,7 @@
 {%- endblock comment_nav -%}
 
 {%- block comment_nav_reply -%}
-  <li class="comment-nav-reply">
+  <li>
     <a href="{{ path('comment', {
       forum_name: comment.submission.forum.name,
       submission_id: comment.submission.id,
@@ -138,7 +137,7 @@
       forumName: comment.submission.forum.name,
       submissionId: comment.submission.id,
       commentId: comment.id
-    }) }}" class="comment__reply-link">
+    }) }}">
       {{- 'comments.reply'|trans -}}
     </a>
   </li>

templates/_layouts/submission.html.twig

 {%- block submission_info_submitter -%}
   {%- from 'user/_macros.html.twig' import user_link -%}
   {{ user_link(submission.user, {
-    class: 'submission-submitter',
+    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">
+  <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">
+  <a href="{{ path('forum', {forum_name: submission.forum.name}) }}" class="submission__forum">
     {{- submission.forum.name -}}
   </a>
 {%- endblock submission_info_forum_name -%}
@@ -31,17 +31,17 @@
   {%- from 'vote/_macros.html.twig' import vote -%}
   {%- set open_external = submission.url is not empty and open_external_links_in_new_tab -%}
   <article class="{{ block('submission_classes') }}">
-    <div class="submission-row">
-      <div class="submission-vote">
+    <div class="submission__row">
+      <div class="submission__vote">
         {{- vote(submission, 'submission_vote') -}}
       </div>
 
       {% if submission.image and show_thumbnails %}
-        <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 %}>
+        <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"
+                 class="submission__thumbnail"
                  alt=""
                  width="70"
                  height="70">
@@ -49,10 +49,10 @@
         </div>
       {% endif %}
 
-      <div class="submission-inner">
-        <header class="submission-header">
-          <h1 class="submission__title break-text 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 %}>
+      <div class="submission__inner">
+        <header class="submission__header">
+          <h1 class="submission__title break-text">
+            <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>
 
@@ -71,7 +71,7 @@
             {% endif %}
 
             {% if submission.url is not empty and '://' in submission.url %}
-              <small class="submission__host submission-host">
+              <small class="submission__host">
                 {%- with {host: submission.url|split('://')[1]|split('/')[0]} -%}
                   {{- host[0:4] == 'www.' ? host[4:] : host -}}
                 {%- endwith -%}
@@ -79,7 +79,7 @@
             {% endif %}
           </h1>
 
-          <p class="submission-info">
+          <p class="submission__info">
             {%- if show_forum_name -%}
               {{ 'submissions.info_with_forum_name'|trans({
                 '%submitter%': block('submission_info_submitter'),
@@ -94,7 +94,7 @@
             {%- endif -%}
 
             {% if submission.editedAt %}
-              <span class="submission-info-edited-at {{ submission.moderated ? 'submission-info-moderated' }}">
+              <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 }}
@@ -105,14 +105,14 @@
 
         {%- if show_body -%}
           {% if submission.body is not null %}
-            <div class="submission__body break-text submission-body">
+            <div class="submission__body break-text">
               {{- submission.body|cached_markdown({ context: 'submission', submission: submission })|raw -}}
             </div>
           {% endif %}
         {%- endif -%}
 
         {%- filter spaceless -%}
-          <nav class="submission-nav">
+          <nav class="submission__nav">
             <ul>
               <li>
                 <a href="{{ path('submission', {forum_name: submission.forum.name, submission_id: submission.id, slug: submission.title|slugify}) }}">
@@ -184,9 +184,9 @@
 
 {% 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' }}
+  {{ submission.url ? 'submission--has-url' }}
+  {{ submission.body is not null ? 'submission--has-body' }}
+  {{ not show_body ? 'submission--collapsed' : 'submission--expanded' }}
+  {{ submission.sticky ? 'submission--sticky' }}
+  {{ submission.locked ? 'submission--locked' }}
 {% endblock submission_classes %}

templates/_macros/post_nav.html.twig

 {% macro front_post_types(current) %}
   <ul class="unlistify tabs__bar">
-    <li class="tabs__tab {{ current == 'submissions' ? 'tabs__tab--active' }}">
+    <li>
       <a href="{{ path('front') }}"
-         class="tab tabs__link {{ current == 'submissions' ? 'tab--active tabs__link--active' }}">
+         class="tab {{ current == 'submissions' ? 'tab--active' }}">
         {{- 'nav.submissions'|trans -}}
       </a>
     </li>
-    <li class="tabs__tab {{ current == 'comments' ? 'tabs__tab--active' }}">
+    <li>
       <a href="{{ path('comment_list') }}"
-         class="tab tabs__link {{ current == 'comments' ? 'tab--active tabs__link--active' }}">
+         class="tab {{ current == 'comments' ? 'tab--active' }}">
         {{- 'nav.comments'|trans -}}
       </a>
     </li>
@@ -17,15 +17,15 @@
 
 {% macro forum_post_types(forum_name, current) %}
   <ul class="unlistify tabs__bar">
-    <li class="tabs__tab {{ current == 'submissions' ? 'tabs__tab--active' }}">
+    <li>
       <a href="{{ path('forum', { forum_name: forum_name }) }}"
-         class="tab tabs__link {{ current == 'submissions' ? 'tab--active tabs__link--active' }}">
+         class="tab {{ current == 'submissions' ? 'tab--active' }}">
         {{- 'nav.submissions'|trans -}}
       </a>
     </li>
-    <li class="tabs__tab {{ current == 'comments' ? 'tabs__tab--active' }}">
+    <li>
       <a href="{{ path('forum_comments', { forum_name: forum_name }) }}"
-         class="tab tabs__link {{ current == 'comments' ? 'tab--active tabs__link--active' }}">
+         class="tab {{ current == 'comments' ? 'tab--active' }}">
         {{- 'nav.comments'|trans -}}
       </a>
     </li>
@@ -35,7 +35,7 @@
 {% macro submission_sort(current) %}
   {% from _self import _submission_sort_items, _tab_button %}
   {% set current_label = 'submissions.sort_by_%s'|format(current)|trans %}
-  <li class="dropdown tabs__tab">
+  <li class="dropdown">
     {{ _tab_button(current_label, 'label.sort_by_mode', '%mode%', 'sort') }}
 
     <ul class="dropdown__menu card unlistify">
@@ -67,7 +67,7 @@
     moderated: { label: 'nav.moderated'|trans, condition: (app.user.moderatorTokens ?? [])|length > 0 },
   } %}
   {% set current_label = filter_modes[choice].label %}
-  <li class="dropdown tabs__tab">
+  <li class="dropdown">
     {{ _tab_button(current_label, 'label.filter_on_mode', '%mode%', 'filter') }}
 
     <ul class="dropdown__menu card unlistify">
@@ -93,7 +93,7 @@
   {% if app.request.query.has('t') or sort_by not in ['hot', 'new'] %}
     {% set attr = app.request.attributes %}
     {% set current_label = 'submissions.time_%s'|format(current)|trans %}
-    <li class="dropdown tabs__tab">
+    <li class="dropdown">
       {{ _tab_button(current_label, 'label.from_time', '%time%', 'clock') }}
 
       <ul class="dropdown__menu card unlistify">

templates/ban/_tabs.html.twig

 <nav class="tabs">
   <ul class="unlistify tabs__bar">
-    <li class="tabs__tab {{ page == 'user_bans' ? 'tabs__tab--active' }}">
-      <a href="{{ path('user_bans') }}" class="tab tabs__link {{ page == 'user_bans' ? 'tab--active tabs__link--active' }}">
+    <li>
+      <a href="{{ path('user_bans') }}" class="tab {{ page == 'user_bans' ? 'tab--active' }}">
         {{- 'nav.user_bans'|trans -}}
       </a>
     </li>
-    <li class="tabs__tab {{ page == 'ip_bans' ? 'tabs__tab--active' }}">
-      <a href="{{ path('ip_bans') }}" class="tab tabs__link {{ page == 'ip_bans' ? 'tab--active tabs__link--active' }}">
+    <li>
+      <a href="{{ path('ip_bans') }}" class="tab {{ page == 'ip_bans' ? 'tab--active' }}">
         {{- 'nav.ip_bans'|trans -}}
       </a>
     </li>

templates/forum/_list_macros.html.twig

@@ -2,15 +2,15 @@
   <nav class="tabs forum-list-view-selector">
     <ul class="unlistify tabs__bar">
       {% with { active: app.request.attributes.get('_route') == 'forum_list' } %}
-        <li class="tabs__tab {{ active ? 'tabs__tab--active' }}">
-          <a href="{{ path('forum_list') }}" class="tab tabs__link {{ active ? 'tab--active tabs__link--active' }}">
+        <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 class="tabs__tab {{ active ? 'tabs__tab--active' }}">
-          <a href="{{ path('forums_by_category') }}" class="tab tabs__link {{ active ? 'tab--active tabs__link--active' }}">
+        <li>
+          <a href="{{ path('forums_by_category') }}" class="tab {{ active ? 'tab--active' }}">
             {{- 'forum_list.category_view'|trans -}}
           </a>
         </li>

templates/theme/_nav.html.twig

 <nav class="tabs">
   <ul class="tabs__bar unlistify">
     {% with { active: current_page == 'css' } %}
-      <li class="tabs__tab {{ active ? 'tabs__tab--active' }}">
+      <li>
         <a href="{{ path('edit_theme_css', { username: theme.author.username, name: theme.name }) }}"
-           class="tab tabs__link {{ active ? 'tab--active tabs__link--active' }}">
+           class="tab {{ active ? 'tab--active' }}">
           {{- 'nav.css'|trans -}}
         </a>
       </li>
     {% endwith %}
 
     {% with { active: current_page == 'settings' } %}
-      <li class="tabs__tab {{ active ? 'tabs__tab--active' }}">
+      <li>
         <a href="{{ path('edit_theme_settings', { username: theme.author.username, name: theme.name }) }}"
-           class="tab tabs__link {{ active ? 'tab--active tabs__link--active' }}">
+           class="tab {{ active ? 'tab--active' }}">
           {{- 'nav.theme_settings'|trans -}}
         </a>
       </li>

templates/user/_inbox_nav.html.twig

@@ -6,8 +6,8 @@
 <nav class="tabs">
   <ul class="tabs__bar unlistify">
     {% for name, link in links %}
-      <li class="tabs__tab {{ active == name ? 'tabs_tab--active' }}">
-        <a href="{{ link.path }}" class="tab tabs__link {{ active == name ? 'tab--active tabs__link--active' }}">
+      <li>
+        <a href="{{ link.path }}" class="tab {{ active == name ? 'tab--active' }}">
           {{- link.label -}}
         </a>
       </li>

templates/user/_nav.html.twig

@@ -5,9 +5,9 @@
       { path: 'user_submissions', label: 'user.submissions' },
       { path: 'user_comments', label: 'user.comments' },
     ] %}
-      <li class="tabs__tab {{ tab.path == current ? 'tabs__tab--active' }}">
+      <li>
         <a href="{{ path(tab.path, {username: user.username}) }}"
-           class="tab tabs__link {{ tab.path == current ? 'tab--active tabs__link--active' }}">
+           class="tab {{ tab.path == current ? 'tab--active' }}">
           {{- tab.label|trans -}}
         </a>
       </li>

templates/user/settings.html.twig

@@ -9,8 +9,8 @@
   <h1 class="page-heading">{{ block('title') }}</h1>
 
   {{ form_start(form) }}
-    <fieldset class="fieldset form__group">
-      <legend class="form__group-header">{{ 'label.general'|trans }}</legend>
+    <fieldset class="fieldset">
+      <legend>{{ 'label.general'|trans }}</legend>
 
       {{ form_row(form.locale) }}
 
@@ -21,24 +21,24 @@
       {{ form_row(form.showThumbnails) }}
     </fieldset>
 
-    <fieldset class="fieldset form__group">
-      <legend class="form__group-header">{{ 'label.posting'|trans }}</legend>
+    <fieldset class="fieldset">
+      <legend>{{ 'label.posting'|trans }}</legend>
 
       {{ form_row(form.autoFetchSubmissionTitles) }}
 
       {{ form_row(form.enablePostPreviews) }}
     </fieldset>
 
-    <fieldset class="fieldset form__group">
-      <legend class="form__group-header">{{ 'heading.notifications'|trans }}</legend>
+    <fieldset class="fieldset">
+      <legend>{{ 'heading.notifications'|trans }}</legend>
 
         {{ form_row(form.notifyOnReply) }}
 
         {{ form_row(form.notifyOnMentions) }}
     </fieldset>
 
-    <fieldset class="fieldset form__group">
-      <legend class="form__group-header">{{ 'label.appearance'|trans }}</legend>
+    <fieldset class="fieldset">
+      <legend>{{ 'label.appearance'|trans }}</legend>
 
       {{ form_row(form.preferred_theme, {attr: {class: 'select2'}}) }}
 

tests/Controller/UserControllerTest.php

@@ -44,7 +44,7 @@ class UserControllerTest extends WebTestCase {
 
         $this->assertContains(
             'You will be notified about this comment.',
-            $crawler->filter('.comment-body')->text()
+            $crawler->filter('.comment__body')->text()
         );
     }
 
@@ -63,7 +63,7 @@ class UserControllerTest extends WebTestCase {
 
         $this->assertContains(
             'You will be notified about this comment.',
-            $crawler->filter('.comment-body')->text()
+            $crawler->filter('.comment__body')->text()
         );
     }