UX: better alignment for tags in the header ()

* 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
This commit is contained in:
Joe 2019-08-28 16:18:27 +08:00 committed by Sam
parent 698e97125e
commit d14851e552
5 changed files with 13 additions and 56 deletions
app/assets
javascripts/discourse/widgets
stylesheets

View File

@ -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) {

View File

@ -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,

View File

@ -18,9 +18,6 @@
&:not(.two-rows) {
min-height: 2.75em;
}
h1 {
margin: 0 0 0.125em 0;
}
}
}

View File

@ -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;
}

View File

@ -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;