UX: core adjustments and styles for the experimental sidebar (#17271)
This commit is contained in:
Kris
GitHub
parent
9d870f151c
commit
f0005401b7
|
|
@ -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");
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
// --------------------------------------------------
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
|
||||
.modal.history-modal {
|
||||
.modal-inner-container {
|
||||
max-width: $large-width;
|
||||
max-width: var(--d-max-width);
|
||||
}
|
||||
.modal-body {
|
||||
height: 70vh;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,3 @@
|
|||
.wrap {
|
||||
max-width: $large-width;
|
||||
}
|
||||
|
||||
.full-width {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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%;
|
||||
|
|
|
|||
Loading…
Reference in New Issue