Skip to content

UX: new styling for composer tips #32843

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
May 22, 2025
+143 −160
Merged

UX: new styling for composer tips #32843

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
10cde8c
UX: new styling for composer tips
chapoi May 21, 2025
3625362
linting
chapoi May 21, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
303 changes: 143 additions & 160 deletions app/assets/stylesheets/common/base/compose.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1028,17 +1028,18 @@ div.ac-wrap {
position: absolute;
width: calc(60%);
max-height: 50%;
bottom: 3.7rem;
bottom: 4.2rem;
right: 1rem;
overflow-y: auto;
z-index: z("composer", "dropdown") + 1;
padding: 1.5em 1.5rem 0.75em 1.5rem;
box-shadow: var(--shadow-dropdown);
background: var(--highlight-bg);
border-radius: var(--d-border-radius-large);

.show-preview & {
bottom: 3.2rem;
width: calc(50% - 16px);
right: 1.5rem;
bottom: 4.2rem;
width: calc(50% - 2rem);
}

.blurb {
Expand Down Expand Up @@ -1083,8 +1084,8 @@ div.ac-wrap {
flex-direction: row-reverse;
align-items: center;
position: absolute;
right: 0;
top: 0;
right: 0.5rem;
top: 0.5rem;
color: var(--primary-medium);
font-size: var(--font-0);

Expand Down Expand Up @@ -1136,209 +1137,191 @@ div.ac-wrap {
}

.similar-topics {
background-color: var(--tertiary-low);

.similar-topic {
margin-bottom: 0.5em;
}

a[href] {
color: var(--primary);
}

.posts-count {
background-color: var(--tertiary);
}

.topic-title {
flex: 0 1 auto;
margin-right: 0.5em;
}

span.badge-wrapper {
margin-left: 0;
}

.blurb {
color: var(--primary-high);
}

.topic-title,
.blurb {
.topic-title {
margin-bottom: 0.5em;
flex: 0 1 auto;
margin-right: 0.5em;

.d-icon {
color: var(--primary-high);
}
}

span.topic {
display: flex;
flex-direction: column;
span.topic {
display: flex;
flex-direction: column;

.first-line {
flex: 1;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.first-line {
flex: 1;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}

.second-line {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0.5em;
.second-line {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0.5em;

.discourse-tags {
font-size: var(--font-down-1);
.discourse-tags {
font-size: var(--font-down-1);
}
}
}
}
}

.fullscreen-composer {
overflow: hidden;
.fullscreen-composer {
overflow: hidden;

.profiler-results {
display: none;
}
.profiler-results {
display: none;
}

#reply-control {
&.fullscreen {
// important needed because of inline styles when height is changed manually with grippie
height: 100vh !important;
max-height: 100%; // prevents devices from miscalculating using vh
z-index: z("header") + 1;

@supports (--custom: property) {
height: calc(var(--composer-vh, 1vh) * 100) !important;
}
#reply-control {
&.fullscreen {
// important needed because of inline styles when height is changed manually with grippie
height: 100vh !important;
max-height: 100%; // prevents devices from miscalculating using vh
z-index: z("header") + 1;

@supports (--custom: property) {
height: calc(var(--composer-vh, 1vh) * 100) !important;
}

.d-editor-preview-wrapper {
margin-top: 1%;
}
.d-editor-preview-wrapper {
margin-top: 1%;
}

.reply-to {
border-bottom: 1px solid var(--primary-low);
margin-bottom: 0;
padding-bottom: 8px;
}
.reply-to {
border-bottom: 1px solid var(--primary-low);
margin-bottom: 0;
padding-bottom: 8px;
}

.d-editor-textarea-wrapper {
border: none;
}
.d-editor-textarea-wrapper {
border: none;
}

&.show-preview .d-editor-textarea-wrapper {
border-right: 1px solid var(--primary-low);
}
&.show-preview .d-editor-textarea-wrapper {
border-right: 1px solid var(--primary-low);
}

#draft-status,
#file-uploading {
margin-left: 0;
text-align: initial;
}
#draft-status,
#file-uploading {
margin-left: 0;
text-align: initial;
}

.composer-popup {
top: 30px;
}
.composer-popup {
top: 30px;
}

&::before {
content: "";
background: var(--secondary);
width: 100%;
height: 100%;
position: fixed;
z-index: -1;
left: 0;
&::before {
content: "";
background: var(--secondary);
width: 100%;
height: 100%;
position: fixed;
z-index: -1;
left: 0;
}
}
}
}
}

.composer-fullscreen-prompt {
animation: fadeIn 1s ease-in-out;
animation-delay: 1.5s;
animation-direction: reverse;
animation-fill-mode: forwards;
position: fixed;
left: 50%;
top: 10%;
transform: translate(-50%, 0);
z-index: z("header") + 1;
background: var(--primary-very-high);
color: var(--secondary);
padding: 0.5em 0.75em;
pointer-events: none;
border-radius: 2px;
.composer-fullscreen-prompt {
animation: fadeIn 1s ease-in-out;
animation-delay: 1.5s;
animation-direction: reverse;
animation-fill-mode: forwards;
position: fixed;
left: 50%;
top: 10%;
transform: translate(-50%, 0);
z-index: z("header") + 1;
background: var(--primary-very-high);
color: var(--secondary);
padding: 0.5em 0.75em;
pointer-events: none;
border-radius: 2px;

@media (prefers-reduced-motion) {
animation-duration: 0s;
}
@media (prefers-reduced-motion) {
animation-duration: 0s;
}

.rtl & {
// R2 is not smart enough to support this swap
transform: translate(50%, 0);
}
.rtl & {
// R2 is not smart enough to support this swap
transform: translate(50%, 0);
}

kbd {
background: none;
kbd {
background: none;
}
}
}

// align the previewless composer with the topic content
#reply-control:not(.fullscreen).hide-preview {
--composer-internal-padding: 1em;
--layout-gap: 2em;
--topic-width: calc(
var(--topic-body-width) + (var(--topic-body-width-padding) * 2)
);
width: 100%;
max-width: calc(var(--topic-width) + var(--topic-avatar-width));
}

body:not(.has-sidebar-page) {
// align the previewless composer with the topic content
#reply-control:not(.fullscreen).hide-preview {
margin-left: 0.67em;

// 1100px is equivalent to --d-max-width
@media screen and (width >= 1110px) {
margin-left: calc(((100% - var(--d-max-width)) / 2) + 0.67em);
}
--composer-internal-padding: 1em;
--layout-gap: 2em;
--topic-width: calc(
var(--topic-body-width) + (var(--topic-body-width-padding) * 2)
);
width: 100%;
max-width: calc(var(--topic-width) + var(--topic-avatar-width));
}

// 790px is equivalent to --topic-width
@media screen and (width < 790px) {
max-width: calc(100% - calc(0.67em * 2));
body:not(.has-sidebar-page) {
#reply-control:not(.fullscreen).hide-preview {
margin-left: 0.67em;
}

@include viewport.until(sm) {
max-width: unset;
margin-inline: unset;
// 1100px is equivalent to --d-max-width
@media screen and (width >= 1110px) {
margin-left: calc(((100% - var(--d-max-width)) / 2) + 0.67em);
}

// 790px is equivalent to --topic-width
@media screen and (width < 790px) {
max-width: calc(100% - calc(0.67em * 2));
margin-left: 0.67em;
}

@include viewport.until(sm) {
max-width: unset;
margin-inline: unset;
}
}
}
}

body.has-sidebar-page {
#reply-control:not(.fullscreen).hide-preview {
margin-left: calc(var(--d-sidebar-width) + var(--layout-gap));
body.has-sidebar-page {
#reply-control:not(.fullscreen).hide-preview {
margin-left: calc(var(--d-sidebar-width) + var(--layout-gap));

// 1390px is equivalent to --d-max-width + --d-sidebar-width
@media screen and (width >= 1390px) {
left: calc(
(100% - var(--d-max-width) + var(--d-sidebar-width)) / 2
); // 50% of the whitespace
margin-left: var(--layout-gap);
}
// 1390px is equivalent to --d-max-width + --d-sidebar-width
@media screen and (width >= 1390px) {
left: calc(
(100% - var(--d-max-width) + var(--d-sidebar-width)) / 2
); // 50% of the whitespace
margin-left: var(--layout-gap);
}

// This is when the topic width starts to shrink
@media screen and (width <= 1180px) {
width: calc(100% - var(--d-sidebar-width) - var(--layout-gap) - 0.67em);
}
// This is when the topic width starts to shrink
@media screen and (width <= 1180px) {
width: calc(100% - var(--d-sidebar-width) - var(--layout-gap) - 0.67em);
}

// sidebar shrinks
@media screen and (width <= 1000px) {
--layout-gap: 1em;
margin-left: calc(var(--d-sidebar-width) + var(--layout-gap));
// sidebar shrinks
@media screen and (width <= 1000px) {
--layout-gap: 1em;
margin-left: calc(var(--d-sidebar-width) + var(--layout-gap));
}
}
}
}
Loading