jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-28 11:46:42 +00:00
Code Issues Packages Projects Releases Wiki Activity

Hassio styling tweaks (#4749)

Browse Source 
* Hassio styling tweaks

* Update hassio-style.ts

* Update hassio-pages-with-tabs.ts
This commit is contained in:
Bram Kragten 2020-02-04 10:54:10 +01:00 committed by GitHub
parent c54b474838
commit 862044ca23
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 199 additions and 207 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

67
hassio/src/addon-store/hassio-addon-repository.ts
View File

@ -42,46 +42,45 @@ class HassioAddonRepositoryEl extends LitElement {
if (this.filter && addons.length < 1) { if (this.filter && addons.length < 1) {
return html` return html`
<div class="card-group"> <div class="content">
<div class="title"> <p class="description">
<div class="description"> No results found in "${repo.name}"
No results found in "${repo.name}" </p>
</div>
</div>
</div> </div>
`; `;
} }
return html` return html`
<div class="card-group"> <div class="content">
<div class="title"> <h1>
${repo.name} ${repo.name}
<div class="description"> </h1>
Maintained by ${repo.maintainer}<br /> <p class="description">
<a class="repo" href=${repo.url} target="_blank">${repo.url}</a> Maintained by ${repo.maintainer}<br />
</div> <a class="repo" href=${repo.url} target="_blank">${repo.url}</a>
</p>
<div class="card-group">
${addons.map(
(addon) => html`
<paper-card
.addon=${addon}
class=${addon.available ? "" : "not_available"}
@click=${this.addonTapped}
>
<div class="card-content">
<hassio-card-content
.hass=${this.hass}
.title=${addon.name}
.description=${addon.description}
.available=${addon.available}
.icon=${this.computeIcon(addon)}
.iconTitle=${this.computeIconTitle(addon)}
.iconClass=${this.computeIconClass(addon)}
></hassio-card-content>
</div>
</paper-card>
`
)}
</div> </div>
${addons.map(
(addon) => html`
<paper-card
.addon=${addon}
class=${addon.available ? "" : "not_available"}
@click=${this.addonTapped}
>
<div class="card-content">
<hassio-card-content
.hass=${this.hass}
.title=${addon.name}
.description=${addon.description}
.available=${addon.available}
.icon=${this.computeIcon(addon)}
.iconTitle=${this.computeIconTitle(addon)}
.iconClass=${this.computeIconClass(addon)}
></hassio-card-content>
</div>
</paper-card>
`
)}
</div> </div>
`; `;
} }

108
hassio/src/addon-store/hassio-repositories-editor.ts
View File

@ -36,61 +36,63 @@ class HassioRepositoriesEditor extends LitElement {
protected render(): TemplateResult { protected render(): TemplateResult {
const repos = this._sortedRepos(this.repos); const repos = this._sortedRepos(this.repos);
return html` return html`
<div class="card-group"> <div class="content">
<div class="title"> <h1>
Repositories Repositories
<div class="description"> </h1>
Configure which add-on repositories to fetch data from: <p class="description">
</div> Configure which add-on repositories to fetch data from:
</div> </p>
${// Use repeat so that the fade-out from call-service-api-button <div class="card-group">
// stays with the correct repo after we add/delete one. ${// Use repeat so that the fade-out from call-service-api-button
repeat( // stays with the correct repo after we add/delete one.
repos, repeat(
(repo) => repo.slug, repos,
(repo) => html` (repo) => repo.slug,
<paper-card> (repo) => html`
<div class="card-content"> <paper-card>
<hassio-card-content <div class="card-content">
.hass=${this.hass} <hassio-card-content
.title=${repo.name} .hass=${this.hass}
.description=${repo.url} .title=${repo.name}
icon="hassio:github-circle" .description=${repo.url}
></hassio-card-content> icon="hassio:github-circle"
</div> ></hassio-card-content>
<div class="card-actions"> </div>
<ha-call-api-button <div class="card-actions">
path="hassio/supervisor/options" <ha-call-api-button
.hass=${this.hass} path="hassio/supervisor/options"
.data=${this.computeRemoveRepoData(repos, repo.url)} .hass=${this.hass}
class="warning" .data=${this.computeRemoveRepoData(repos, repo.url)}
> class="warning"
Remove >
</ha-call-api-button> Remove
</div> </ha-call-api-button>
</paper-card> </div>
` </paper-card>
)} `
)}
<paper-card> <paper-card>
<div class="card-content add"> <div class="card-content add">
<iron-icon icon="hassio:github-circle"></iron-icon> <iron-icon icon="hassio:github-circle"></iron-icon>
<paper-input <paper-input
label="Add new repository by URL" label="Add new repository by URL"
.value=${this._repoUrl} .value=${this._repoUrl}
@value-changed=${this._urlChanged} @value-changed=${this._urlChanged}
></paper-input> ></paper-input>
</div> </div>
<div class="card-actions"> <div class="card-actions">
<ha-call-api-button <ha-call-api-button
path="hassio/supervisor/options" path="hassio/supervisor/options"
.hass=${this.hass} .hass=${this.hass}
.data=${this.computeAddRepoData(repos, this._repoUrl)} .data=${this.computeAddRepoData(repos, this._repoUrl)}
> >
Add Add
</ha-call-api-button> </ha-call-api-button>
</div> </div>
</paper-card> </paper-card>
</div>
</div> </div>
`; `;
} }

64
hassio/src/dashboard/hassio-addons.ts
View File

@ -23,37 +23,39 @@ class HassioAddons extends LitElement {
protected render(): TemplateResult { protected render(): TemplateResult {
return html` return html`
<div class="content card-group"> <div class="content">
<div class="title">Add-ons</div> <h1>Add-ons</h1>
${!this.addons <div class="card-group">
? html` ${!this.addons
<paper-card> ? html`
<div class="card-content"> <paper-card>
You don't have any add-ons installed yet. Head over to <div class="card-content">
<a href="#" @click=${this._openStore}>the add-on store</a> to You don't have any add-ons installed yet. Head over to
get started! <a href="#" @click=${this._openStore}>the add-on store</a>
</div> to get started!
</paper-card> </div>
` </paper-card>
: this.addons `
.sort((a, b) => (a.name > b.name ? 1 : -1)) : this.addons
.map( .sort((a, b) => (a.name > b.name ? 1 : -1))
(addon) => html` .map(
<paper-card .addon=${addon} @click=${this._addonTapped}> (addon) => html`
<div class="card-content"> <paper-card .addon=${addon} @click=${this._addonTapped}>
<hassio-card-content <div class="card-content">
.hass=${this.hass} <hassio-card-content
title=${addon.name} .hass=${this.hass}
description=${addon.description} title=${addon.name}
?available=${addon.available} description=${addon.description}
icon=${this._computeIcon(addon)} ?available=${addon.available}
.iconTitle=${this._computeIconTitle(addon)} icon=${this._computeIcon(addon)}
.iconClass=${this._computeIconClass(addon)} .iconTitle=${this._computeIconTitle(addon)}
></hassio-card-content> .iconClass=${this._computeIconClass(addon)}
</div> ></hassio-card-content>
</paper-card> </div>
` </paper-card>
)} `
)}
</div>
</div> </div>
`; `;
} }

28
hassio/src/dashboard/hassio-update.ts
View File

@ -38,7 +38,12 @@ export class HassioUpdate extends LitElement {
this.supervisorInfo, this.supervisorInfo,
this.hassOsInfo, this.hassOsInfo,
].filter((value) => { ].filter((value) => {
return !!value && value.version !== value.last_version; return (
!!value &&
(value.last_version
? value.version !== value.last_version
: value.version !== value.version_latest)
);
}).length; }).length;
if (!updatesAvailable) { if (!updatesAvailable) {
@ -52,12 +57,12 @@ export class HassioUpdate extends LitElement {
<div class="error">Error: ${this._error}</div> <div class="error">Error: ${this._error}</div>
` `
: ""} : ""}
<h1>
${updatesAvailable > 1
? "Updates Available 🎉"
: "Update Available 🎉"}
</h1>
<div class="card-group"> <div class="card-group">
<div class="title">
${updatesAvailable > 1
? "Updates Available 🎉"
: "Update Available 🎉"}
</div>
${this._renderUpdateCard( ${this._renderUpdateCard(
"Home Assistant", "Home Assistant",
this.hassInfo.version, this.hassInfo.version,
@ -149,13 +154,6 @@ export class HassioUpdate extends LitElement {
haStyle, haStyle,
hassioStyle, hassioStyle,
css` css`
:host {
width: 33%;
}
paper-card {
display: inline-block;
margin-bottom: 32px;
}
.icon { .icon {
--iron-icon-height: 48px; --iron-icon-height: 48px;
--iron-icon-width: 48px; --iron-icon-width: 48px;
@ -170,6 +168,10 @@ export class HassioUpdate extends LitElement {
.warning { .warning {
color: var(--secondary-text-color); color: var(--secondary-text-color);
} }
.card-content {
height: calc(100% - 47px);
box-sizing: border-box;
}
.card-actions { .card-actions {
text-align: right; text-align: right;
} }

2
hassio/src/hassio-pages-with-tabs.ts
View File

@ -123,7 +123,7 @@ class HassioPagesWithTabs extends LitElement {
} }
paper-tabs { paper-tabs {
margin-left: 12px; margin-left: 12px;
--paper-tabs-selection-bar-color: #fff; --paper-tabs-selection-bar-color: var(--text-primary-color, #fff);
text-transform: uppercase; text-transform: uppercase;
} }
app-header, app-header,

51
hassio/src/resources/hassio-style.ts
View File

@ -4,45 +4,36 @@ const documentContainer = document.createElement("template");
documentContainer.setAttribute("style", "display: none;"); documentContainer.setAttribute("style", "display: none;");
export const hassioStyle = css` export const hassioStyle = css`
.card-group { .content {
margin-top: 24px; margin: 8px;
} }
.card-group .title { h1 {
color: var(--primary-text-color); color: var(--primary-text-color);
font-size: 2em; font-size: 2em;
padding-left: 8px;
margin-bottom: 8px; margin-bottom: 8px;
font-family: var(--paper-font-headline_-_font-family);
-webkit-font-smoothing: var(--paper-font-headline_-_-webkit-font-smoothing);
font-size: var(--paper-font-headline_-_font-size);
font-weight: var(--paper-font-headline_-_font-weight);
letter-spacing: var(--paper-font-headline_-_letter-spacing);
line-height: var(--paper-font-headline_-_line-height);
padding-left: 16px;
} }
.card-group .description { .description {
font-size: 0.5em;
font-weight: 500;
margin-top: 4px; margin-top: 4px;
padding-left: 16px;
} }
.card-group paper-card { .card-group {
--card-group-columns: 4; display: grid;
width: calc( grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
(100% - 12px * var(--card-group-columns)) / var(--card-group-columns) grid-gap: 8px;
);
margin: 4px;
vertical-align: top;
} }
@media screen and (max-width: 1200px) and (min-width: 901px) { .card-group > * {
.card-group paper-card { max-width: 450px;
--card-group-columns: 3;
}
} }
@media screen and (max-width: 900px) and (min-width: 601px) { @media screen and (max-width: 800px) {
.card-group paper-card { .card-group > * {
--card-group-columns: 2; max-width: 100%;
}
}
@media screen and (max-width: 600px) and (min-width: 0) {
.card-group paper-card {
width: 100%;
margin: 4px 0;
}
.content {
padding: 0;
} }
} }
ha-call-api-button { ha-call-api-button {

16
hassio/src/snapshots/hassio-snapshots.ts
View File

@ -79,14 +79,14 @@ class HassioSnapshots extends LitElement {
protected render(): TemplateResult { protected render(): TemplateResult {
return html` return html`
<div class="content"> <div class="content">
<h1>
Create snapshot
</h1>
<p class="description">
Snapshots allow you to easily backup and restore all data of your
Hass.io instance.
</p>
<div class="card-group"> <div class="card-group">
<div class="title">
Create snapshot
<div class="description">
Snapshots allow you to easily backup and restore all data of your
Hass.io instance.
</div>
</div>
<paper-card> <paper-card>
<div class="card-content"> <div class="card-content">
<paper-input <paper-input
@ -173,8 +173,8 @@ class HassioSnapshots extends LitElement {
</paper-card> </paper-card>
</div> </div>
<h1>Available snapshots</h1>
<div class="card-group"> <div class="card-group">
<div class="title">Available snapshots</div>
${this._snapshots === undefined ${this._snapshots === undefined
? undefined ? undefined
: this._snapshots.length === 0 : this._snapshots.length === 0

18
hassio/src/system/hassio-host-info.ts
View File

@ -126,23 +126,13 @@ class HassioHostInfo extends LitElement {
hassioStyle, hassioStyle,
css` css`
paper-card { paper-card {
display: inline-block; height: 100%;
width: 400px; width: 100%;
margin-left: 8px;
} }
.card-content { .card-content {
height: 200px;
color: var(--primary-text-color); color: var(--primary-text-color);
} box-sizing: border-box;
@media screen and (max-width: 830px) { height: calc(100% - 47px);
paper-card {
margin-top: 8px;
margin-left: 0;
width: 100%;
}
.card-content {
height: auto;
}
} }
.info { .info {
width: 100%; width: 100%;

15
hassio/src/system/hassio-supervisor-info.ts
View File

@ -103,20 +103,13 @@ class HassioSupervisorInfo extends LitElement {
hassioStyle, hassioStyle,
css` css`
paper-card { paper-card {
display: inline-block; height: 100%;
width: 400px; width: 100%;
} }
.card-content { .card-content {
height: 200px;
color: var(--primary-text-color); color: var(--primary-text-color);
} box-sizing: border-box;
@media screen and (max-width: 830px) { height: calc(100% - 47px);
paper-card {
width: 100%;
}
.card-content {
height: auto;
}
} }
.info { .info {
width: 100%; width: 100%;

3
hassio/src/system/hassio-supervisor-log.ts
View File

@ -50,6 +50,9 @@ class HassioSupervisorLog extends LitElement {
hassioStyle, hassioStyle,
ANSI_HTML_STYLE, ANSI_HTML_STYLE,
css` css`
paper-card {
width: 100%;
}
pre { pre {
white-space: pre-wrap; white-space: pre-wrap;
} }

34
hassio/src/system/hassio-system.ts
View File

@ -32,17 +32,19 @@ class HassioSystem extends LitElement {
public render(): TemplateResult | void { public render(): TemplateResult | void {
return html` return html`
<div class="content"> <div class="content">
<div class="title">Information</div> <h1>Information</h1>
<hassio-supervisor-info <div class="side-by-side">
.hass=${this.hass} <hassio-supervisor-info
.supervisorInfo=${this.supervisorInfo} .hass=${this.hass}
></hassio-supervisor-info> .supervisorInfo=${this.supervisorInfo}
<hassio-host-info ></hassio-supervisor-info>
.hass=${this.hass} <hassio-host-info
.hostInfo=${this.hostInfo} .hass=${this.hass}
.hassOsInfo=${this.hassOsInfo} .hostInfo=${this.hostInfo}
></hassio-host-info> .hassOsInfo=${this.hassOsInfo}
<div class="title">System log</div> ></hassio-host-info>
</div>
<h1>System log</h1>
<hassio-supervisor-log .hass=${this.hass}></hassio-supervisor-log> <hassio-supervisor-log .hass=${this.hass}></hassio-supervisor-log>
</div> </div>
`; `;
@ -54,7 +56,7 @@ class HassioSystem extends LitElement {
hassioStyle, hassioStyle,
css` css`
.content { .content {
margin: 4px; margin: 8px;
color: var(--primary-text-color); color: var(--primary-text-color);
} }
.title { .title {
@ -64,6 +66,14 @@ class HassioSystem extends LitElement {
padding-left: 8px; padding-left: 8px;
margin-bottom: 8px; margin-bottom: 8px;
} }
.side-by-side {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
grid-gap: 8px;
}
hassio-supervisor-log {
width: 100%;
}
`, `,
]; ];
} }