jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-22 16:56:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

Small UI tweaks to design website (#11135)

Browse Source
This commit is contained in:
Paulus Schoutsen 2022-01-09 21:20:15 -08:00 committed by GitHub
parent 4cb7154917
commit 34c3374d84
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 62 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
gallery/src/components/demo-cards.ts
View File

@ -61,10 +61,6 @@ class DemoCards extends LitElement {
}
static styles = css`
#container {
min-height: calc(100vh - 128px);
background: var(--primary-background-color);
}
.cards {
display: flex;
flex-wrap: wrap;

20
gallery/src/components/page-description.ts
View File

@ -14,13 +14,9 @@ class PageDescription extends HaMarkdown {
}
return html`
${until(
PAGES[this.page].description().then(
(content) => html`
<ha-card>
<div class="card-content">${content}</div>
</ha-card>
`
),
PAGES[this.page]
.description()
.then((content) => html`<div class="root">${content}</div>`),
""
)}
`;
@ -29,14 +25,14 @@ class PageDescription extends HaMarkdown {
static styles = [
HaMarkdown.styles,
css`
ha-card {
max-width: 600px;
margin: 16px auto;
.root {
max-width: 800px;
margin: 0 auto;
}
.card-content > *:first-child {
.root > *:first-child {
margin-top: 0;
}
.card-content > *:last-child {
.root > *:last-child {
margin-bottom: 0;
}
`,

72
gallery/src/ha-gallery.ts
View File

@ -3,7 +3,6 @@ import "@material/mwc-drawer";
import "@material/mwc-top-app-bar-fixed";
import { html, css, LitElement, PropertyValues } from "lit";
import { customElement, property, query } from "lit/decorators";
import "../../src/components/ha-card";
import "../../src/components/ha-icon-button";
import "../../src/managers/notification-manager";
import { haStyle } from "../../src/resources/styles";
@ -84,32 +83,36 @@ class HaGallery extends LitElement {
${PAGES[this._page].metadata.title || this._page.split("/")[1]}
</div>
</mwc-top-app-bar-fixed>
<div>
<page-description .page=${this._page}></page-description>
<div class="content">
${PAGES[this._page].description
? html`
<page-description .page=${this._page}></page-description>
`
: ""}
${dynamicElement(`demo-${this._page.replace("/", "-")}`)}
<div class="page-footer">
${PAGES[this._page].description ||
Object.keys(PAGES[this._page].metadata).length > 0
? html`
<a
href=${`${GITHUB_DEMO_URL}${this._page}.markdown`}
target="_blank"
>
Edit text
</a>
`
: ""}
${PAGES[this._page].demo
? html`
<a
href=${`${GITHUB_DEMO_URL}${this._page}.ts`}
target="_blank"
>
Edit demo
</a>
`
: ""}
</div>
</div>
<div class="page-footer">
${PAGES[this._page].description ||
Object.keys(PAGES[this._page].metadata).length > 0
? html`
<a
href=${`${GITHUB_DEMO_URL}${this._page}.markdown`}
target="_blank"
>
Edit text
</a>
`
: ""}
${PAGES[this._page].demo
? html`
<a
href=${`${GITHUB_DEMO_URL}${this._page}.ts`}
target="_blank"
>
Edit demo
</a>
`
: ""}
</div>
</div>
</mwc-drawer>
@ -216,9 +219,26 @@ class HaGallery extends LitElement {
opacity: 0.12;
}
div[slot="appContent"] {
display: flex;
flex-direction: column;
min-height: 100vh;
background: var(--primary-background-color);
}
.content {
flex: 1;
}
page-description {
margin: 16px;
}
.page-footer {
text-align: center;
margin: 16px 0;
padding-top: 16px;
border-top: 1px solid rgba(0, 0, 0, 0.12);
}
.page-footer a {

8
src/components/ha-markdown.ts
View File

@ -66,6 +66,14 @@ export class HaMarkdown extends LitElement {
line-height: 1.45;
font-family: var(--code-font-family, monospace);
}
h1,
h2,
h3,
h4,
h5,
h6 {
line-height: initial;
}
h2 {
font-size: 1.5em;
font-weight: bold;