UX: better alignment for tags in the header (#8047)

UX: better alignment for tags in the header (#8047)

  • Removes unused styles

This commit only removes unnecessary / duplicate styles. It does not cause any visual changes.

  • adds class to <h1> tag in header topic info.

This is much better to target than h1

  • removes unused styles

  • header title margin adjustment

  • minor header-title margin adjustments

  • One more header-title margin adjustment

diff --git a/app/assets/javascripts/discourse/widgets/header-topic-info.js.es6 b/app/assets/javascripts/discourse/widgets/header-topic-info.js.es6
index f3b136b..02edb15 100644
--- a/app/assets/javascripts/discourse/widgets/header-topic-info.js.es6
+++ b/app/assets/javascripts/discourse/widgets/header-topic-info.js.es6
@@ -94,7 +94,7 @@ export default createWidget("header-topic-info", {
       );
     }
 
-    const title = [h("h1", heading)];
+    const title = [h("h1.header-title", heading)];
     const category = topic.get("category");
 
     if (loaded || category) {
diff --git a/app/assets/stylesheets/common/base/header.scss b/app/assets/stylesheets/common/base/header.scss
index 705acde..3063883 100644
--- a/app/assets/stylesheets/common/base/header.scss
+++ b/app/assets/stylesheets/common/base/header.scss
@@ -257,8 +257,12 @@
       color: $danger;
     }
   }
-  h1 {
-    margin: 0 0 0.25em 0;
+  .header-title {
+    margin: 0 0 0.15em 0;
+    .archetype-private_message & {
+      // PMs might have participant avatars in the header
+      margin: 0;
+    }
     font-size: $font-up-3;
     width: 100%;
   }
@@ -277,9 +281,6 @@
   }
   .badge-wrapper {
     margin-right: 8px;
-    &.bullet {
-      padding-top: 2px; // alignment hack
-    }
   }
   .badge-wrapper.bullet {
     .badge-category-parent-bg,
diff --git a/app/assets/stylesheets/desktop/header.scss b/app/assets/stylesheets/desktop/header.scss
index 730edd2..b76ac0d 100644
--- a/app/assets/stylesheets/desktop/header.scss
+++ b/app/assets/stylesheets/desktop/header.scss
@@ -18,9 +18,6 @@
     &:not(.two-rows) {
       min-height: 2.75em;
     }
-    h1 {
-      margin: 0 0 0.125em 0;
-    }
   }
 }
 
diff --git a/app/assets/stylesheets/desktop/topic-post.scss b/app/assets/stylesheets/desktop/topic-post.scss
index 21b94f8..0ec4d34 100644
--- a/app/assets/stylesheets/desktop/topic-post.scss
+++ b/app/assets/stylesheets/desktop/topic-post.scss
@@ -513,52 +513,6 @@ video {
   }
 }
 
-.extra-info-wrapper {
-  overflow: hidden;
-  .badge-wrapper,
-  i,
-  .topic-link {
-    -webkit-animation: fadein 0.7s;
-    animation: fadein 0.7s;
-  }
-  .topic-statuses {
-    .d-icon {
-      color: $header_primary-medium;
-    }
-    .d-icon-envelope {
-      color: $danger;
-    }
-  }
-  .topic-link {
-    color: $header_primary;
-    display: block;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-}
-
-/* default docked header CSS for all topics, including those without categories */
-
-.extra-info {
-  h1 {
-    margin: 5px 0 0 0;
-    font-size: $font-up-3;
-    line-height: $line-height-large;
-    width: 100%;
-  }
-}
-
-/* override docked header CSS for topics with categories */
-
-.extra-info.two-rows {
-  h1 {
-    line-height: $line-height-medium;
-    margin: 0;
-    width: 100%;
-  }
-}
-
 .open > .dropdown-menu {
   display: block;
 }
diff --git a/app/assets/stylesheets/mobile/header.scss b/app/assets/stylesheets/mobile/header.scss
index 22610af..43e9813 100644
--- a/app/assets/stylesheets/mobile/header.scss
+++ b/app/assets/stylesheets/mobile/header.scss
@@ -38,8 +38,13 @@
       &:not(.two-rows) {
         min-height: 2.25em;
       }
-      h1 {
+      .header-title {
         font-size: $font-0;
+        margin: 0 0 0.35em 0;
+        .archetype-private_message & {
+          // PMs might have participant avatars in the header
+          margin: 0 0 0.15em 0;
+        }
       }
       .private-message-glyph-wrapper {
         float: left;

GitHub sha: d14851e5