From f0005401b7e0b7856137cf14dd64a13863b799d4 Mon Sep 17 00:00:00 2001
From: Kris <kris.aubuchon@discourse.org>
Date: Tue, 28 Jun 2022 22:49:01 -0400
Subject: [PATCH] UX: core adjustments and styles for the experimental sidebar
(#17271)
---
.../discourse/app/routes/application.js | 3 ++
.../stylesheets/common/base/discourse.scss | 3 +-
.../stylesheets/common/base/sidebar.scss | 31 +++++++++++-----
app/assets/stylesheets/common/base/topic.scss | 1 +
.../stylesheets/common/base/user-badges.scss | 2 +-
.../stylesheets/common/foundation/base.scss | 10 ------
app/assets/stylesheets/desktop/discourse.scss | 35 +++++++++++++++----
app/assets/stylesheets/desktop/history.scss | 2 +-
.../stylesheets/desktop/topic-post.scss | 4 ---
app/assets/stylesheets/desktop/topic.scss | 4 +++
10 files changed, 62 insertions(+), 33 deletions(-)
diff --git a/app/assets/javascripts/discourse/app/routes/application.js b/app/assets/javascripts/discourse/app/routes/application.js
index 0b02e6417fa..59aecbb31a2 100644
--- a/app/assets/javascripts/discourse/app/routes/application.js
+++ b/app/assets/javascripts/discourse/app/routes/application.js
@@ -48,6 +48,9 @@ const ApplicationRoute = DiscourseRoute.extend(OpenComposer, {
},
toggleSidebar() {
+ // enables CSS transitions, but not on did-insert
+ document.querySelector("body").classList.add("sidebar-animate");
+
this.controllerFor("application").toggleProperty("showSidebar");
},
diff --git a/app/assets/stylesheets/common/base/discourse.scss b/app/assets/stylesheets/common/base/discourse.scss
index 40cdb225c9b..ea87cccb869 100644
--- a/app/assets/stylesheets/common/base/discourse.scss
+++ b/app/assets/stylesheets/common/base/discourse.scss
@@ -327,11 +327,10 @@ table {
}
.wrap {
- @extend .clearfix;
+ max-width: var(--d-max-width);
margin-right: auto;
margin-left: auto;
padding: 0 10px;
-
.contents {
position: relative;
}
diff --git a/app/assets/stylesheets/common/base/sidebar.scss b/app/assets/stylesheets/common/base/sidebar.scss
index 1158a7eb0ed..9a38add8d82 100644
--- a/app/assets/stylesheets/common/base/sidebar.scss
+++ b/app/assets/stylesheets/common/base/sidebar.scss
@@ -1,3 +1,7 @@
+:root {
+ --d-sidebar-width: 240px;
+}
+
.header-sidebar-toggle {
margin-right: 1em;
margin-left: -10px;
@@ -49,10 +53,16 @@
text-transform: uppercase;
font-size: 1em;
font-weight: bold;
- align-items: center;
+ align-items: stretch;
}
.sidebar-section-header-link {
+ @include ellipsis;
+ flex: 1 1 auto;
+ color: var(--primary);
+ font-size: var(--font-down-1);
+ padding: 0.25em 0.5em;
+
&:visited {
color: var(--primary);
}
@@ -60,11 +70,6 @@
&:hover {
background: var(--primary-low);
}
-
- flex: 1 1 auto;
- color: var(--primary);
- font-size: var(--font-down-1);
- padding: 0.25em 0.5em;
}
.sidebar-section-header-button {
@@ -142,17 +147,25 @@
}
.sidebar-section-header-caret {
+ flex: 0 0 auto;
width: 1.5em;
display: flex;
- justify-content: center;
+ justify-content: flex-end;
+ align-items: center;
border: none;
- background-color: transparent;
+ background: transparent;
+ padding: 0.25em 0;
+ opacity: 0;
+ transition: opacity 0.25s;
&:hover {
opacity: 100;
}
- opacity: 0;
+ svg {
+ display: block;
+ flex: 0 0 auto;
+ }
.d-icon {
font-size: $font-down-1;
diff --git a/app/assets/stylesheets/common/base/topic.scss b/app/assets/stylesheets/common/base/topic.scss
index e46bfd77d91..c882e9af301 100644
--- a/app/assets/stylesheets/common/base/topic.scss
+++ b/app/assets/stylesheets/common/base/topic.scss
@@ -32,6 +32,7 @@ $topic-progress-height: 42px;
max-width: calc(
100vw - 20px
); // 20px is the left + right padding on .wrap in common/base/discourse.scss
+ min-width: 0; // grid needs to be able to shrink
}
.timeline-container {
diff --git a/app/assets/stylesheets/common/base/user-badges.scss b/app/assets/stylesheets/common/base/user-badges.scss
index ecd77e11f83..69ed47021b2 100644
--- a/app/assets/stylesheets/common/base/user-badges.scss
+++ b/app/assets/stylesheets/common/base/user-badges.scss
@@ -208,7 +208,7 @@
align-self: flex-start;
@media screen and (min-width: 767px) {
- max-width: calc(#{$large-width} / 2);
+ max-width: calc(var(--d-max-width) / 2);
margin-right: 1.5em;
}
diff --git a/app/assets/stylesheets/common/foundation/base.scss b/app/assets/stylesheets/common/foundation/base.scss
index c3e28a3a7d0..ca066afc8be 100644
--- a/app/assets/stylesheets/common/foundation/base.scss
+++ b/app/assets/stylesheets/common/foundation/base.scss
@@ -116,16 +116,6 @@ pre code {
}
}
-// TODO figure out a clean place to put stuff like this
-.row:before,
-.row:after {
- display: table;
- content: "";
-}
-.row:after {
- clear: both;
-}
-
// Tables
// --------------------------------------------------
diff --git a/app/assets/stylesheets/desktop/discourse.scss b/app/assets/stylesheets/desktop/discourse.scss
index cdd053d58db..5eea6cfcfdc 100644
--- a/app/assets/stylesheets/desktop/discourse.scss
+++ b/app/assets/stylesheets/desktop/discourse.scss
@@ -3,6 +3,10 @@
// BEWARE: changing these styles implies they take effect anywhere they are seen
// throughout the Discourse application
+:root {
+ --d-max-width: 1110px;
+}
+
// Base Elements
body.widget-dragging {
cursor: ns-resize;
@@ -187,8 +191,11 @@ input {
box-sizing: border-box;
width: 100%;
display: grid;
- grid-template-areas: "content";
- grid-template-columns: minmax(0, 1fr);
+ // we can CSS transition the sidebar grid width change
+ // as long as we keep the column count consistent
+ // grid transitions are only supported in Firefox at the moment, but coming summer 2022 to Chrome
+ grid-template-areas: "sidebar content";
+ grid-template-columns: 0 minmax(0, 1fr);
gap: 0;
#main-outlet {
@@ -196,8 +203,24 @@ input {
}
}
-body.has-sidebar-page #main-outlet-wrapper {
- grid-template-areas: "sidebar content";
- grid-template-columns: 240px 1fr;
- gap: 0 2em;
+body.has-sidebar-page {
+ .wrap {
+ // increase page max-width to accommodate sidebar width
+ max-width: calc(var(--d-sidebar-width) + var(--d-max-width));
+ }
+ .d-header .wrap {
+ padding-left: 1.75em;
+ }
+ #main-outlet-wrapper {
+ grid-template-columns: var(--d-sidebar-width) minmax(0, 1fr);
+ gap: 0 2em;
+ padding-left: 0;
+ }
+}
+
+body.sidebar-animate {
+ .d-header .wrap,
+ #main-outlet-wrapper {
+ transition: ease-in-out 0.5s;
+ }
}
diff --git a/app/assets/stylesheets/desktop/history.scss b/app/assets/stylesheets/desktop/history.scss
index acb91f6ccc8..9dc4ec3c84e 100644
--- a/app/assets/stylesheets/desktop/history.scss
+++ b/app/assets/stylesheets/desktop/history.scss
@@ -2,7 +2,7 @@
.modal.history-modal {
.modal-inner-container {
- max-width: $large-width;
+ max-width: var(--d-max-width);
}
.modal-body {
height: 70vh;
diff --git a/app/assets/stylesheets/desktop/topic-post.scss b/app/assets/stylesheets/desktop/topic-post.scss
index 85faf6c057a..667a7fe4736 100644
--- a/app/assets/stylesheets/desktop/topic-post.scss
+++ b/app/assets/stylesheets/desktop/topic-post.scss
@@ -1,7 +1,3 @@
-.wrap {
- max-width: $large-width;
-}
-
.full-width {
margin-left: 0;
}
diff --git a/app/assets/stylesheets/desktop/topic.scss b/app/assets/stylesheets/desktop/topic.scss
index b7033d57d60..5e767a62339 100644
--- a/app/assets/stylesheets/desktop/topic.scss
+++ b/app/assets/stylesheets/desktop/topic.scss
@@ -120,6 +120,10 @@
left: 0;
}
+.onscreen-post .row {
+ display: flex; // children should never wrap
+}
+
@media all and (min-width: 400px) {
#topic-footer-main-buttons {
max-width: 70%;