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;
}
.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 {
margin-bottom: 1em;
border: none;

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

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

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

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

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

@ -217,7 +217,10 @@ $topic-progress-height: 42px;
.topic-timer-info {
border-top: 1px solid var(--primary-low);
margin: 0;
max-width: 758px;
max-width: calc(
var(--topic-body-width) + (var(--topic-body-width-padding) * 2) +
var(--topic-avatar-width)
);
&:empty {
padding: 0;
}
@ -291,9 +294,12 @@ a.badge-category {
display: flex;
flex-wrap: wrap;
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 {
flex: 1 1 auto;
flex: 1 1 100%;
}
.category-chooser,
.mini-tag-chooser {
@ -304,11 +310,14 @@ a.badge-category {
}
}
.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) {
margin-left: 0;
}
}
.edit-controls {
flex: 1 1 100%;
}
.select-kit .category-row {
max-width: unset;
}
@ -464,8 +473,8 @@ a.topic-featured-link {
.topic-area {
.pending-posts {
max-width: calc(
#{$topic-body-width} + #{$topic-avatar-width} + #{$topic-body-width-padding *
2}
var(--topic-body-width) + (var(--topic-body-width-padding) * 2) +
var(--topic-avatar-width)
);
.reviewable-item {
.post-body {
@ -480,8 +489,8 @@ a.topic-featured-link {
justify-content: space-between;
padding-bottom: 1em;
max-width: calc(
#{$topic-body-width} + #{$topic-avatar-width} + #{$topic-body-width-padding *
2}
var(--topic-body-width) + (var(--topic-body-width-padding) * 2) +
var(--topic-avatar-width)
);
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;
$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;
// Brand color variables

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

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