jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-28 03:36:44 +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) {
return html`
<div class="card-group">
<div class="title">
<div class="description">
No results found in "${repo.name}"
</div>
</div>
<div class="content">
<p class="description">
No results found in "${repo.name}"
</p>
</div>
`;
}
return html`
<div class="card-group">
<div class="title">
<div class="content">
<h1>
${repo.name}
<div class="description">
Maintained by ${repo.maintainer}<br />
<a class="repo" href=${repo.url} target="_blank">${repo.url}</a>
</div>
</h1>
<p class="description">
Maintained by ${repo.maintainer}<br />
<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>
${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>
`;
}

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

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

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

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

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

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

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

@ -123,7 +123,7 @@ class HassioPagesWithTabs extends LitElement {
}
paper-tabs {
margin-left: 12px;
--paper-tabs-selection-bar-color: #fff;
--paper-tabs-selection-bar-color: var(--text-primary-color, #fff);
text-transform: uppercase;
}
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;");
export const hassioStyle = css`
.card-group {
margin-top: 24px;
.content {
margin: 8px;
}
.card-group .title {
h1 {
color: var(--primary-text-color);
font-size: 2em;
padding-left: 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 {
font-size: 0.5em;
font-weight: 500;
.description {
margin-top: 4px;
padding-left: 16px;
}
.card-group paper-card {
--card-group-columns: 4;
width: calc(
(100% - 12px * var(--card-group-columns)) / var(--card-group-columns)
);
margin: 4px;
vertical-align: top;
.card-group {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
grid-gap: 8px;
}
@media screen and (max-width: 1200px) and (min-width: 901px) {
.card-group paper-card {
--card-group-columns: 3;
}
.card-group > * {
max-width: 450px;
}
@media screen and (max-width: 900px) and (min-width: 601px) {
.card-group paper-card {
--card-group-columns: 2;
}
}
@media screen and (max-width: 600px) and (min-width: 0) {
.card-group paper-card {
width: 100%;
margin: 4px 0;
}
.content {
padding: 0;
@media screen and (max-width: 800px) {
.card-group > * {
max-width: 100%;
}
}
ha-call-api-button {

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

@ -79,14 +79,14 @@ class HassioSnapshots extends LitElement {
protected render(): TemplateResult {
return html`
<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="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>
<div class="card-content">
<paper-input
@ -173,8 +173,8 @@ class HassioSnapshots extends LitElement {
</paper-card>
</div>
<h1>Available snapshots</h1>
<div class="card-group">
<div class="title">Available snapshots</div>
${this._snapshots === undefined
? undefined
: this._snapshots.length === 0

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

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

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

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

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

@ -50,6 +50,9 @@ class HassioSupervisorLog extends LitElement {
hassioStyle,
ANSI_HTML_STYLE,
css`
paper-card {
width: 100%;
}
pre {
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 {
return html`
<div class="content">
<div class="title">Information</div>
<hassio-supervisor-info
.hass=${this.hass}
.supervisorInfo=${this.supervisorInfo}
></hassio-supervisor-info>
<hassio-host-info
.hass=${this.hass}
.hostInfo=${this.hostInfo}
.hassOsInfo=${this.hassOsInfo}
></hassio-host-info>
<div class="title">System log</div>
<h1>Information</h1>
<div class="side-by-side">
<hassio-supervisor-info
.hass=${this.hass}
.supervisorInfo=${this.supervisorInfo}
></hassio-supervisor-info>
<hassio-host-info
.hass=${this.hass}
.hostInfo=${this.hostInfo}
.hassOsInfo=${this.hassOsInfo}
></hassio-host-info>
</div>
<h1>System log</h1>
<hassio-supervisor-log .hass=${this.hass}></hassio-supervisor-log>
</div>
`;
@ -54,7 +56,7 @@ class HassioSystem extends LitElement {
hassioStyle,
css`
.content {
margin: 4px;
margin: 8px;
color: var(--primary-text-color);
}
.title {
@ -64,6 +66,14 @@ class HassioSystem extends LitElement {
padding-left: 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%;
}
`,
];
}