From b3cf483813d2bc3c9384d7981cacb10aababfec9 Mon Sep 17 00:00:00 2001
From: Kris <kris.aubuchon@discourse.org>
Date: Mon, 26 Apr 2021 18:55:50 -0400
Subject: [PATCH] UX: Mobile consistency for topic status messages (#12828)
---
.../stylesheets/common/base/topic-post.scss | 5 ++++
app/assets/stylesheets/common/base/topic.scss | 30 +++++++++++++++++++
app/assets/stylesheets/desktop/topic.scss | 25 ----------------
app/assets/stylesheets/mobile/topic.scss | 13 --------
4 files changed, 35 insertions(+), 38 deletions(-)
diff --git a/app/assets/stylesheets/common/base/topic-post.scss b/app/assets/stylesheets/common/base/topic-post.scss
index 8411914ab09..548093d4da4 100644
--- a/app/assets/stylesheets/common/base/topic-post.scss
+++ b/app/assets/stylesheets/common/base/topic-post.scss
@@ -861,6 +861,10 @@ blockquote > *:last-child {
color: var(--primary-medium);
min-width: 0; // Allows flex container to shrink
+ button {
+ align-self: flex-start;
+ }
+
.custom-message {
flex: 1 1 100%;
text-transform: none;
@@ -883,6 +887,7 @@ blockquote > *:last-child {
> p {
margin: 0;
+ padding-right: 0.5em;
line-height: $line-height-medium;
flex: 1 1;
}
diff --git a/app/assets/stylesheets/common/base/topic.scss b/app/assets/stylesheets/common/base/topic.scss
index 1d94461b442..463b90b60fb 100644
--- a/app/assets/stylesheets/common/base/topic.scss
+++ b/app/assets/stylesheets/common/base/topic.scss
@@ -117,6 +117,36 @@
}
}
+.topic-status-info,
+.topic-timer-info {
+ border-top: 1px solid var(--primary-low);
+ margin: 0;
+ max-width: 758px;
+ &:empty {
+ padding: 0;
+ }
+ span .d-icon {
+ font-size: $font-down-1;
+ }
+ .topic-timer-heading,
+ .slow-mode-heading {
+ display: flex;
+ align-items: center;
+ margin: 0;
+ padding: var(--below-topic-margin) 0;
+ }
+ .slow-mode-remove,
+ .topic-timer-modify {
+ display: flex;
+ margin-left: auto;
+ align-self: flex-start;
+ }
+ button {
+ font-size: $font-down-2;
+ background: transparent;
+ }
+}
+
.title-wrapper {
display: flex;
flex-wrap: wrap;
diff --git a/app/assets/stylesheets/desktop/topic.scss b/app/assets/stylesheets/desktop/topic.scss
index ab262a40477..b483aaa752a 100644
--- a/app/assets/stylesheets/desktop/topic.scss
+++ b/app/assets/stylesheets/desktop/topic.scss
@@ -59,31 +59,6 @@
}
}
-.topic-status-info,
-.topic-timer-info {
- border-top: 1px solid var(--primary-low);
- margin: 0;
- &:empty {
- padding: 0;
- }
- max-width: 758px;
- .topic-timer-heading,
- .slow-mode-heading {
- display: flex;
- align-items: center;
- margin: 0;
- padding: var(--below-topic-margin) 0;
- }
- .slow-mode-remove,
- .topic-timer-modify {
- margin-left: auto;
- }
- button {
- font-size: $font-down-2;
- background: transparent;
- }
-}
-
#topic-progress-wrapper {
position: fixed;
bottom: 0;
diff --git a/app/assets/stylesheets/mobile/topic.scss b/app/assets/stylesheets/mobile/topic.scss
index 3855e32836d..ce0878dfe99 100644
--- a/app/assets/stylesheets/mobile/topic.scss
+++ b/app/assets/stylesheets/mobile/topic.scss
@@ -28,19 +28,6 @@
}
}
-.topic-timer-info {
- padding-left: 10px;
- border-top: 1px solid var(--primary-low);
- padding-top: 10px;
- h3 {
- margin: 0;
- display: flex;
- button {
- align-self: flex-start;
- }
- }
-}
-
#topic-progress-wrapper {
position: fixed;
right: 10px; // match 10px padding on .wrap