UX: left-align title with content for sidebar (#18202)

This commit is contained in:
Kris 2022-09-12 21:46:57 -04:00 committed by GitHub
parent 1fa21ed415
commit 0ef68f52d8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 24 additions and 24 deletions

View File

@ -2,16 +2,18 @@ import { createWidget } from "discourse/widgets/widget";
import hbs from "discourse/widgets/hbs-compiler";
createWidget("header-contents", {
tagName: "div.contents.clearfix",
tagName: "div.contents",
template: hbs`
{{#if this.site.desktopView}}
{{#if this.siteSettings.enable_experimental_sidebar_hamburger}}
{{#if attrs.sidebarEnabled}}
{{sidebar-toggle attrs=attrs}}
<div class="header-logo-wrapper">
{{#if this.site.desktopView}}
{{#if this.siteSettings.enable_experimental_sidebar_hamburger}}
{{#if attrs.sidebarEnabled}}
{{sidebar-toggle attrs=attrs}}
{{/if}}
{{/if}}
{{/if}}
{{/if}}
{{home-logo attrs=attrs}}
{{home-logo attrs=attrs}}
</div>
{{#if attrs.topic}}
{{header-topic-info attrs=attrs}}
{{/if}}

View File

@ -19,7 +19,12 @@
height: 100%;
.contents {
display: flex;
display: grid;
grid-template-areas: "logo-wrapper extra-info panel";
grid-template-columns: auto 1fr auto;
.has-sidebar-page & {
grid-template-columns: minmax(var(--d-sidebar-width), auto) 1fr auto;
}
align-items: center;
height: 100%;
@ -42,7 +47,14 @@
}
}
.header-logo-wrapper {
grid-area: logo-wrapper;
display: flex;
align-items: center;
}
.title {
grid-area: logo;
display: flex;
align-items: center;
height: 100%;
@ -61,6 +73,7 @@
}
.panel {
grid-area: panel;
position: relative;
display: flex;
flex: 0 0 auto;
@ -212,6 +225,7 @@
}
.header-sidebar-toggle {
grid-area: hamburger;
button {
margin-right: 1em;
box-sizing: content-box; // matches other header icons

View File

@ -199,19 +199,3 @@ body.has-sidebar-page {
padding-left: 0;
}
}
@media (prefers-reduced-motion: no-preference) {
body.sidebar-animate {
#main-outlet-wrapper {
// grid-template-columns transition supported in Firefox, Chrome support coming summer 2022
transition-property: grid-template-columns, max-width;
transition-timing-function: var(--d-sidebar-animation-ease);
transition-duration: var(--d-sidebar-animation-time);
}
.d-header-wrap .wrap {
transition: max-width var(--d-sidebar-animation-time)
var(--d-sidebar-animation-ease);
}
}
}