jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-27 19:26:36 +00:00
Code Issues Packages Projects Releases Wiki Activity

Make gallery config visible in dark mode + fix config alignment (#7741)

Browse Source
This commit is contained in:
Philip Allgaier 2020-11-20 15:13:19 +01:00 committed by GitHub
parent 97023921b8
commit 38ba85e89d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 76 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
gallery/src/components/demo-card.js
View File

@ -21,15 +21,16 @@ class DemoCard extends PolymerElement {
} }
pre { pre {
width: 400px; width: 400px;
margin: 16px; margin: 0 16px;
overflow: auto; overflow: auto;
color: var(--primary-text-color);
} }
@media only screen and (max-width: 800px) { @media only screen and (max-width: 800px) {
.root { .root {
flex-direction: column; flex-direction: column;
} }
pre { pre {
margin-left: 0; margin: 16px 0;
} }
} }
</style> </style>

5
gallery/src/components/demo-more-info.js
View File

@ -26,8 +26,9 @@ class DemoMoreInfo extends PolymerElement {
pre { pre {
width: 400px; width: 400px;
margin: 16px; margin: 0 16px;
overflow: auto; overflow: auto;
color: var(--primary-text-color);
} }
@media only screen and (max-width: 800px) { @media only screen and (max-width: 800px) {
@ -35,7 +36,7 @@ class DemoMoreInfo extends PolymerElement {
flex-direction: column; flex-direction: column;
} }
pre { pre {
margin-left: 0; margin: 16px 0;
} }
} }
</style> </style>

128
gallery/src/ha-gallery.js
View File

@ -20,48 +20,47 @@ class HaGallery extends PolymerElement {
static get template() { static get template() {
return html` return html`
<style include="iron-positioning ha-style"> <style include="iron-positioning ha-style">
:host { :host {
-ms-user-select: initial; -ms-user-select: initial;
-webkit-user-select: initial; -webkit-user-select: initial;
-moz-user-select: initial; -moz-user-select: initial;
} }
app-header-layout { app-header-layout {
min-height: 100vh; min-height: 100vh;
} }
ha-icon-button.invisible { ha-icon-button.invisible {
visibility: hidden; visibility: hidden;
} }
.pickers { .pickers {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: center; justify-content: center;
align-items: start; align-items: start;
} }
.pickers ha-card { .pickers ha-card {
width: 400px; width: 400px;
display: block; display: block;
margin: 16px 8px; margin: 16px 8px;
} }
.pickers ha-card:last-child { .pickers ha-card:last-child {
margin-bottom: 16px; margin-bottom: 16px;
} }
.intro { .intro {
margin: -1em 0; margin: -1em 0;
} }
p a { p a {
color: var(--primary-color); color: var(--primary-color);
} }
a {
color: var(--primary-text-color);
text-decoration: none;
}
a {
color: var(--primary-text-color);
text-decoration: none;
}
</style> </style>
<app-header-layout> <app-header-layout>
@ -70,32 +69,42 @@ class HaGallery extends PolymerElement {
<ha-icon-button <ha-icon-button
icon="hass:arrow-left" icon="hass:arrow-left"
on-click="_backTapped" on-click="_backTapped"
class$='[[_computeHeaderButtonClass(_demo)]]' class$="[[_computeHeaderButtonClass(_demo)]]"
></ha-icon-button> ></ha-icon-button>
<div main-title>[[_withDefault(_demo, "Home Assistant Gallery")]]</div> <div main-title>
[[_withDefault(_demo, "Home Assistant Gallery")]]
</div>
</app-toolbar> </app-toolbar>
</app-header> </app-header>
<div class='content'> <div class="content">
<div id='demo'></div> <div id="demo"></div>
<template is='dom-if' if='[[!_demo]]'> <template is="dom-if" if="[[!_demo]]">
<div class='pickers'> <div class="pickers">
<ha-card header="Lovelace card demos"> <ha-card header="Lovelace Card Demos">
<div class='card-content intro'> <div class="card-content intro">
<p> <p>
Lovelace has many different cards. Each card allows the user to tell a different story about what is going on in their house. These cards are very customizable, as no household is the same. Lovelace has many different cards. Each card allows the user
to tell a different story about what is going on in their
house. These cards are very customizable, as no household is
the same.
</p> </p>
<p> <p>
This gallery helps our developers and designers to see all the different states that each card can be in. This gallery helps our developers and designers to see all
the different states that each card can be in.
</p> </p>
<p> <p>
Check <a href='https://www.home-assistant.io/lovelace'>the official website</a> for instructions on how to get started with Lovelace.</a>. Check
<a href="https://www.home-assistant.io/lovelace"
>the official website</a
>
for instructions on how to get started with Lovelace.
</p> </p>
</div> </div>
<template is='dom-repeat' items='[[_lovelaceDemos]]'> <template is="dom-repeat" items="[[_lovelaceDemos]]">
<a href='#[[item]]'> <a href="#[[item]]">
<paper-item> <paper-item>
<paper-item-body>{{ item }}</paper-item-body> <paper-item-body>{{ item }}</paper-item-body>
<ha-icon icon="hass:chevron-right"></ha-icon> <ha-icon icon="hass:chevron-right"></ha-icon>
@ -104,14 +113,14 @@ class HaGallery extends PolymerElement {
</template> </template>
</ha-card> </ha-card>
<ha-card header="More Info demos"> <ha-card header="More Info Demos">
<div class='card-content intro'> <div class="card-content intro">
<p> <p>
More info screens show up when an entity is clicked. More info screens show up when an entity is clicked.
</p> </p>
</div> </div>
<template is='dom-repeat' items='[[_moreInfoDemos]]'> <template is="dom-repeat" items="[[_moreInfoDemos]]">
<a href='#[[item]]'> <a href="#[[item]]">
<paper-item> <paper-item>
<paper-item-body>{{ item }}</paper-item-body> <paper-item-body>{{ item }}</paper-item-body>
<ha-icon icon="hass:chevron-right"></ha-icon> <ha-icon icon="hass:chevron-right"></ha-icon>
@ -120,14 +129,14 @@ class HaGallery extends PolymerElement {
</template> </template>
</ha-card> </ha-card>
<ha-card header="Util demos"> <ha-card header="Util Demos">
<div class='card-content intro'> <div class="card-content intro">
<p> <p>
Test pages for our utility functions. Test pages for our utility functions.
</p> </p>
</div> </div>
<template is='dom-repeat' items='[[_utilDemos]]'> <template is="dom-repeat" items="[[_utilDemos]]">
<a href='#[[item]]'> <a href="#[[item]]">
<paper-item> <paper-item>
<paper-item-body>{{ item }}</paper-item-body> <paper-item-body>{{ item }}</paper-item-body>
<ha-icon icon="hass:chevron-right"></ha-icon> <ha-icon icon="hass:chevron-right"></ha-icon>
@ -139,7 +148,10 @@ class HaGallery extends PolymerElement {
</template> </template>
</div> </div>
</app-header-layout> </app-header-layout>
<notification-manager hass=[[_fakeHass]] id='notifications'></notification-manager> <notification-manager
hass="[[_fakeHass]]"
id="notifications"
></notification-manager>
`; `;
} }