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 {
width: 400px;
margin: 16px;
margin: 0 16px;
overflow: auto;
color: var(--primary-text-color);
}
@media only screen and (max-width: 800px) {
.root {
flex-direction: column;
}
pre {
margin-left: 0;
margin: 16px 0;
}
}
</style>

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

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

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

@ -61,7 +61,6 @@ class HaGallery extends PolymerElement {
color: var(--primary-text-color);
text-decoration: none;
}
</style>
<app-header-layout>
@ -70,32 +69,42 @@ class HaGallery extends PolymerElement {
<ha-icon-button
icon="hass:arrow-left"
on-click="_backTapped"
class$='[[_computeHeaderButtonClass(_demo)]]'
class$="[[_computeHeaderButtonClass(_demo)]]"
></ha-icon-button>
<div main-title>[[_withDefault(_demo, "Home Assistant Gallery")]]</div>
<div main-title>
[[_withDefault(_demo, "Home Assistant Gallery")]]
</div>
</app-toolbar>
</app-header>
<div class='content'>
<div id='demo'></div>
<template is='dom-if' if='[[!_demo]]'>
<div class='pickers'>
<ha-card header="Lovelace card demos">
<div class='card-content intro'>
<div class="content">
<div id="demo"></div>
<template is="dom-if" if="[[!_demo]]">
<div class="pickers">
<ha-card header="Lovelace Card Demos">
<div class="card-content intro">
<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>
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>
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>
</div>
<template is='dom-repeat' items='[[_lovelaceDemos]]'>
<a href='#[[item]]'>
<template is="dom-repeat" items="[[_lovelaceDemos]]">
<a href="#[[item]]">
<paper-item>
<paper-item-body>{{ item }}</paper-item-body>
<ha-icon icon="hass:chevron-right"></ha-icon>
@ -104,14 +113,14 @@ class HaGallery extends PolymerElement {
</template>
</ha-card>
<ha-card header="More Info demos">
<div class='card-content intro'>
<ha-card header="More Info Demos">
<div class="card-content intro">
<p>
More info screens show up when an entity is clicked.
</p>
</div>
<template is='dom-repeat' items='[[_moreInfoDemos]]'>
<a href='#[[item]]'>
<template is="dom-repeat" items="[[_moreInfoDemos]]">
<a href="#[[item]]">
<paper-item>
<paper-item-body>{{ item }}</paper-item-body>
<ha-icon icon="hass:chevron-right"></ha-icon>
@ -120,14 +129,14 @@ class HaGallery extends PolymerElement {
</template>
</ha-card>
<ha-card header="Util demos">
<div class='card-content intro'>
<ha-card header="Util Demos">
<div class="card-content intro">
<p>
Test pages for our utility functions.
</p>
</div>
<template is='dom-repeat' items='[[_utilDemos]]'>
<a href='#[[item]]'>
<template is="dom-repeat" items="[[_utilDemos]]">
<a href="#[[item]]">
<paper-item>
<paper-item-body>{{ item }}</paper-item-body>
<ha-icon icon="hass:chevron-right"></ha-icon>
@ -139,7 +148,10 @@ class HaGallery extends PolymerElement {
</template>
</div>
</app-header-layout>
<notification-manager hass=[[_fakeHass]] id='notifications'></notification-manager>
<notification-manager
hass="[[_fakeHass]]"
id="notifications"
></notification-manager>
`;
}