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
This commit is contained in:
parent
698e97125e
commit
d14851e552
app/assets
javascripts/discourse/widgets
stylesheets
|
@ -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) {
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -18,9 +18,6 @@
|
|||
&:not(.two-rows) {
|
||||
min-height: 2.75em;
|
||||
}
|
||||
h1 {
|
||||
margin: 0 0 0.125em 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
|
|
Loading…
Reference in New Issue