Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

FEATURE: control topic width with variables (#18743)

This commit is contained in:
Kris 2022-10-25 14:45:37 -04:00 committed by GitHub
parent 5f02f11acc
commit d0f88da9c9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 81 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
app/assets/stylesheets/common/base/personal-message.scss
View File

@ -83,15 +83,6 @@
margin-top: 0.5em; margin-top: 0.5em;
} }
.small-action-desc.timegap {
flex: 0 0 auto;
padding: 0 1em;
margin-top: -1.75em;
margin-left: -1em;
background: var(--secondary);
max-width: calc(758px - 1.5em);
}
.post-notice { .post-notice {
margin-bottom: 1em; margin-bottom: 1em;
border: none; border: none;

9
app/assets/stylesheets/common/base/reviewables.scss
View File

@ -350,7 +350,7 @@
.reviewable-score-reason { .reviewable-score-reason {
margin: 0.5em 0; margin: 0.5em 0;
max-width: $topic-body-width; max-width: var(--topic-body-width);
margin-bottom: 0.5em; margin-bottom: 0.5em;
} }
@ -358,7 +358,7 @@
margin: 0.5em 0; margin: 0.5em 0;
.reviewable-conversation-post { .reviewable-conversation-post {
max-width: $topic-body-width; max-width: var(--topic-body-width);
margin-bottom: 0.5em; margin-bottom: 0.5em;
.username { .username {
@ -405,8 +405,7 @@
.reviewable-post-header { .reviewable-post-header {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
max-width: $topic-body-width; width: var(--topic-body-width);
width: $topic-body-width;
align-items: center; align-items: center;
.reviewable-reply-to { .reviewable-reply-to {
@ -426,7 +425,7 @@
} }
.post-body { .post-body {
max-width: $topic-body-width; max-width: var(--topic-body-width);
max-height: 300px; max-height: 300px;
margin-top: 0.5em; margin-top: 0.5em;
overflow-y: auto; overflow-y: auto;

45
app/assets/stylesheets/common/base/topic-post.scss
View File

@ -35,9 +35,9 @@ $quote-share-maxwidth: 150px;
} }
.placeholder-text { .placeholder-text {
margin-left: 11px; margin-left: var(--topic-body-width-padding);
display: inline-block; display: inline-block;
width: calc(100% - 11px); width: calc(100% - var(--topic-body-width-padding));
height: 1.5em; height: 1.5em;
margin-bottom: 0.6em; margin-bottom: 0.6em;
} }
@ -1084,7 +1084,8 @@ blockquote > *:last-child {
} }
.gap { .gap {
padding: 0.25em 0 0.5em 56px; // 45px (topic avatar) + 11px (margin) = 56px padding: 0.25em 0 0.5em
calc(var(--topic-avatar-width) + var(--topic-body-width-padding));
color: var(--primary-med-or-secondary-high); color: var(--primary-med-or-secondary-high);
cursor: pointer; cursor: pointer;
text-transform: uppercase; text-transform: uppercase;
@ -1120,17 +1121,20 @@ blockquote > *:last-child {
.small-action { .small-action {
display: flex; display: flex;
align-items: center; align-items: center;
max-width: 758px;
.topic-avatar,
.small-action-desc {
border-top: 1px solid var(--primary-low); border-top: 1px solid var(--primary-low);
}
.topic-avatar { .topic-avatar {
align-self: flex-start; align-self: flex-start;
padding: 0.7em 0; padding: 0.7em 0;
border-top: none;
margin-right: 11px;
flex: 0 0 auto; flex: 0 0 auto;
width: var(--topic-avatar-width);
.d-icon { .d-icon {
font-size: 2em; font-size: 2em;
width: 45px; width: var(--topic-avatar-width);
text-align: center; text-align: center;
color: var(--primary-low-mid); color: var(--primary-low-mid);
} }
@ -1145,15 +1149,18 @@ blockquote > *:last-child {
} }
.small-action-desc { .small-action-desc {
box-sizing: border-box;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
flex: 1 1 100%;
align-items: center; align-items: center;
padding: 1em 0; padding: 1em 0 1em var(--topic-body-width-padding);
text-transform: uppercase; text-transform: uppercase;
font-weight: bold; font-weight: bold;
font-size: var(--font-down-1); font-size: var(--font-down-1);
color: var(--primary-medium); color: var(--primary-medium);
width: calc(
var(--topic-body-width) + (var(--topic-body-width-padding) * 2)
);
min-width: 0; // Allows flex container to shrink min-width: 0; // Allows flex container to shrink
button { button {
@ -1408,8 +1415,9 @@ a.mention-group {
.signup-cta { .signup-cta {
box-sizing: border-box; box-sizing: border-box;
max-width: calc(#{$topic-body-width} + 4.5em); max-width: calc(var(--topic-body-width) + 4.5em);
padding: 3em 5em 2em 56px; // 45px (topic avatar) + 11px (margin) = 56px padding: 3em 5em 2em
calc(var(--topic-avatar-width + var(--topic-body-width-padding)));
@include breakpoint(mobile-extra-large) { @include breakpoint(mobile-extra-large) {
padding: 1.5em 1.5em 0.25em; padding: 1.5em 1.5em 0.25em;
} }
@ -1453,11 +1461,11 @@ a.mention-group {
display: flex; display: flex;
width: 100%; width: 100%;
max-width: calc( max-width: calc(
#{$topic-body-width} + (#{$topic-body-width-padding} * 2) + #{$topic-avatar-width} - var(--topic-body-width) + (var(--topic-body-width-padding) * 2) +
(0.8em * 2) var(--topic-avatar-width)
); );
padding: 0.8em; padding: var(--topic-body-width-padding);
padding-left: 0;
&.old { &.old {
background-color: unset; background-color: unset;
color: var(--primary-medium); color: var(--primary-medium);
@ -1473,8 +1481,9 @@ a.mention-group {
.d-icon { .d-icon {
font-size: 2em; font-size: 2em;
width: var(--topic-avatar-width);
color: var(--primary-high); color: var(--primary-high);
margin-right: 0.65em; margin-right: var(--topic-body-width-padding);
} }
} }
@ -1558,8 +1567,8 @@ a.mention-group {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
max-width: calc( max-width: calc(
#{$topic-body-width} + (#{$topic-body-width-padding} * 2) + #{$topic-avatar-width} - var(--topic-body-width) + (var(--topic-body-width-padding) * 2) +
(0.8em * 2) var(--topic-avatar-width)
); );
.filtered-avatar { .filtered-avatar {

25
app/assets/stylesheets/common/base/topic.scss
View File

@ -217,7 +217,10 @@ $topic-progress-height: 42px;
.topic-timer-info { .topic-timer-info {
border-top: 1px solid var(--primary-low); border-top: 1px solid var(--primary-low);
margin: 0; margin: 0;
max-width: 758px; max-width: calc(
var(--topic-body-width) + (var(--topic-body-width-padding) * 2) +
var(--topic-avatar-width)
);
&:empty { &:empty {
padding: 0; padding: 0;
} }
@ -291,9 +294,12 @@ a.badge-category {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
box-sizing: border-box; box-sizing: border-box;
max-width: 758px; max-width: calc(
var(--topic-body-width) + (var(--topic-body-width-padding) * 2) +
var(--topic-avatar-width)
);
#edit-title { #edit-title {
flex: 1 1 auto; flex: 1 1 100%;
} }
.category-chooser, .category-chooser,
.mini-tag-chooser { .mini-tag-chooser {
@ -304,11 +310,14 @@ a.badge-category {
} }
} }
.mini-tag-chooser { .mini-tag-chooser {
margin-left: 2%; margin-left: 2%; // category/tag chooser are 49% wide, so this is 1% * 2
@media all and (max-width: 500px) { @media all and (max-width: 500px) {
margin-left: 0; margin-left: 0;
} }
} }
.edit-controls {
flex: 1 1 100%;
}
.select-kit .category-row { .select-kit .category-row {
max-width: unset; max-width: unset;
} }
@ -464,8 +473,8 @@ a.topic-featured-link {
.topic-area { .topic-area {
.pending-posts { .pending-posts {
max-width: calc( max-width: calc(
#{$topic-body-width} + #{$topic-avatar-width} + #{$topic-body-width-padding * var(--topic-body-width) + (var(--topic-body-width-padding) * 2) +
2} var(--topic-avatar-width)
); );
.reviewable-item { .reviewable-item {
.post-body { .post-body {
@ -480,8 +489,8 @@ a.topic-featured-link {
justify-content: space-between; justify-content: space-between;
padding-bottom: 1em; padding-bottom: 1em;
max-width: calc( max-width: calc(
#{$topic-body-width} + #{$topic-avatar-width} + #{$topic-body-width-padding * var(--topic-body-width) + (var(--topic-body-width-padding) * 2) +
2} var(--topic-avatar-width)
); );
align-items: center; align-items: center;

6
app/assets/stylesheets/common/foundation/variables.scss
View File

@ -14,6 +14,12 @@ $topic-body-width-padding: 11px;
$topic-avatar-width: 45px; $topic-avatar-width: 45px;
$reply-area-max-width: 1475px !default; $reply-area-max-width: 1475px !default;
:root {
--topic-body-width: #{$topic-body-width};
--topic-body-width-padding: #{$topic-body-width-padding};
--topic-avatar-width: #{$topic-avatar-width};
}
$d-sidebar-width: 16em !default; $d-sidebar-width: 16em !default;
// Brand color variables // Brand color variables

42
app/assets/stylesheets/desktop/topic-post.scss
View File

@ -36,11 +36,11 @@
section.post-menu-area { section.post-menu-area {
position: relative; position: relative;
padding-left: 11px; padding-left: var(--topic-body-width-padding);
} }
.post-links-container { .post-links-container {
margin-left: 11px; margin-left: var(--topic-body-width-padding);
} }
nav.post-controls { nav.post-controls {
@ -103,7 +103,9 @@ nav.post-controls {
} }
} }
.show-replies { .show-replies {
margin-left: -11px; // negates padding-left on .cooked, for visual alignment margin-left: calc(
var(--topic-body-width-padding) * -1
); // negates padding-left on .cooked, for visual alignment
.d-icon { .d-icon {
margin-right: var(--control-icon-space); margin-right: var(--control-icon-space);
} }
@ -176,7 +178,6 @@ pre.codeblock-buttons:hover {
&.bottom { &.bottom {
border-top: none; border-top: none;
margin-bottom: 20px; margin-bottom: 20px;
margin-left: 11px;
&.hidden { &.hidden {
display: block; display: block;
opacity: 0; opacity: 0;
@ -199,8 +200,11 @@ pre.codeblock-buttons:hover {
.collapse-down { .collapse-down {
transform: translate(-50%, 55%); transform: translate(-50%, 55%);
} }
margin-left: 56px; margin-left: var(--topic-avatar-width);
width: 699px; width: calc(
var(--topic-body-width) + (var(--topic-body-width-padding) * 2) +
var(--topic-avatar-width) - (var(--topic-avatar-width + 2px))
); // 2px accounts for left and right borders
.row { .row {
border-bottom: none; border-bottom: none;
.topic-avatar, .topic-avatar,
@ -249,7 +253,7 @@ pre.codeblock-buttons:hover {
} }
.topic-map { .topic-map {
margin: 20px 0 20px 11px; margin: 20px 0 20px var(--topic-body-width-padding);
.map { .map {
.secondary { .secondary {
text-align: center; text-align: center;
@ -324,7 +328,10 @@ pre.codeblock-buttons:hover {
} }
#topic-footer-buttons { #topic-footer-buttons {
max-width: calc(690px + (11px * 2) + 45px); max-width: calc(
var(--topic-body-width) + (var(--topic-body-width-padding) * 2) +
var(--topic-avatar-width)
);
@media screen and (max-width: 924px) { @media screen and (max-width: 924px) {
.topic-footer-main-buttons { .topic-footer-main-buttons {
@ -363,7 +370,7 @@ span.post-count {
button.expand-post { button.expand-post {
margin-top: 10px; margin-top: 10px;
margin-left: $topic-body-width-padding; margin-left: var(--topic-body-width-padding);
} }
iframe { iframe {
@ -459,23 +466,26 @@ blockquote {
// variables are used to calculate the width of .gap // variables are used to calculate the width of .gap
.topic-body { .topic-body {
width: calc(#{$topic-body-width} + (#{$topic-body-width-padding} * 2)); width: calc(var(--topic-body-width) + (var(--topic-body-width-padding) * 2));
float: left; float: left;
min-width: 0; // prevents some elements, like <pre>, from blowing out the width min-width: 0; // prevents some elements, like <pre>, from blowing out the width
position: relative; position: relative;
border-top: 1px solid var(--primary-low); border-top: 1px solid var(--primary-low);
padding: 12px 0 0 0; padding: 12px 0 0 0;
.topic-meta-data { .topic-meta-data {
padding: 0 $topic-body-width-padding 0.25em $topic-body-width-padding; padding: 0 var(--topic-body-width-padding) 0.25em
var(--topic-body-width-padding);
} }
.cooked { .cooked {
padding: 1em $topic-body-width-padding 0.25em $topic-body-width-padding; padding: 1em var(--topic-body-width-padding) 0.25em
var(--topic-body-width-padding);
} }
.group-request { .group-request {
padding: 0.5em $topic-body-width-padding 0 $topic-body-width-padding; padding: 0.5em var(--topic-body-width-padding) 0
var(--topic-body-width-padding);
} }
a.expand-hidden { a.expand-hidden {
padding-left: $topic-body-width-padding; padding-left: var(--topic-body-width-padding);
} }
} }
@ -495,8 +505,8 @@ blockquote {
.topic-area > .loading-container { .topic-area > .loading-container {
// loader needs to be same width as posts // loader needs to be same width as posts
width: calc( width: calc(
#{$topic-avatar-width} + #{$topic-body-width} + var(--topic-body-width) + var(--topic-avatar) +
(#{$topic-body-width-padding} * 2) (var(--topic-body-width-padding) * 2)
); );
max-width: 100%; max-width: 100%;
@media all and (max-width: 790px) { @media all and (max-width: 790px) {