mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-23 17:26:42 +00:00
Add alt to img, fix styling issue voice (#23024)
This commit is contained in:
parent
164944ceff
commit
f9118a4b87
@ -7,7 +7,7 @@ export const AssistantSetupStyles = [
|
|||||||
:host {
|
:host {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
min-height: 300px;
|
min-height: 400px;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
@ -22,6 +22,10 @@ export const AssistantSetupStyles = [
|
|||||||
width: 120px;
|
width: 120px;
|
||||||
}
|
}
|
||||||
@media all and (max-width: 450px), all and (max-height: 500px) {
|
@media all and (max-width: 450px), all and (max-height: 500px) {
|
||||||
|
:host {
|
||||||
|
min-height: 100%;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
.content img {
|
.content img {
|
||||||
margin-top: 68px;
|
margin-top: 68px;
|
||||||
margin-bottom: 68px;
|
margin-bottom: 68px;
|
||||||
|
@ -17,7 +17,10 @@ export class HaVoiceAssistantSetupStepArea extends LitElement {
|
|||||||
const device = this.hass.devices[this.deviceId];
|
const device = this.hass.devices[this.deviceId];
|
||||||
|
|
||||||
return html`<div class="content">
|
return html`<div class="content">
|
||||||
<img src="/static/images/voice-assistant/area.png" />
|
<img
|
||||||
|
src="/static/images/voice-assistant/area.png"
|
||||||
|
alt="Casita Home Assistant logo"
|
||||||
|
/>
|
||||||
<h1>Select area</h1>
|
<h1>Select area</h1>
|
||||||
<p class="secondary">
|
<p class="secondary">
|
||||||
When you voice assistant knows where it is, it can better control the
|
When you voice assistant knows where it is, it can better control the
|
||||||
|
@ -21,7 +21,10 @@ export class HaVoiceAssistantSetupStepChangeWakeWord extends LitElement {
|
|||||||
|
|
||||||
protected override render() {
|
protected override render() {
|
||||||
return html`<div class="padding content">
|
return html`<div class="padding content">
|
||||||
<img src="/static/images/voice-assistant/change-wake-word.png" />
|
<img
|
||||||
|
src="/static/images/voice-assistant/change-wake-word.png"
|
||||||
|
alt="Casita Home Assistant logo"
|
||||||
|
/>
|
||||||
<h1>Change wake word</h1>
|
<h1>Change wake word</h1>
|
||||||
<p class="secondary">
|
<p class="secondary">
|
||||||
Some wake words are better for
|
Some wake words are better for
|
||||||
|
@ -36,7 +36,10 @@ export class HaVoiceAssistantSetupStepCheck extends LitElement {
|
|||||||
protected override render() {
|
protected override render() {
|
||||||
return html`<div class="content">
|
return html`<div class="content">
|
||||||
${this._status === "timeout"
|
${this._status === "timeout"
|
||||||
? html`<img src="/static/images/voice-assistant/error.png" />
|
? html`<img
|
||||||
|
src="/static/images/voice-assistant/error.png"
|
||||||
|
alt="Casita Home Assistant error logo"
|
||||||
|
/>
|
||||||
<h1>The voice assistant is unable to connect to Home Assistant</h1>
|
<h1>The voice assistant is unable to connect to Home Assistant</h1>
|
||||||
<p class="secondary">
|
<p class="secondary">
|
||||||
To play audio, the voice assistant device has to connect to Home
|
To play audio, the voice assistant device has to connect to Home
|
||||||
@ -53,7 +56,10 @@ export class HaVoiceAssistantSetupStepCheck extends LitElement {
|
|||||||
>
|
>
|
||||||
<ha-button @click=${this._testConnection}>Retry</ha-button>
|
<ha-button @click=${this._testConnection}>Retry</ha-button>
|
||||||
</div>`
|
</div>`
|
||||||
: html`<img src="/static/images/voice-assistant/hi.png" />
|
: html`<img
|
||||||
|
src="/static/images/voice-assistant/hi.png"
|
||||||
|
alt="Casita Home Assistant hi logo"
|
||||||
|
/>
|
||||||
<h1>Hi</h1>
|
<h1>Hi</h1>
|
||||||
<p class="secondary">
|
<p class="secondary">
|
||||||
Over the next couple steps we're going to personalize your voice
|
Over the next couple steps we're going to personalize your voice
|
||||||
|
@ -44,7 +44,10 @@ export class HaVoiceAssistantSetupStepLocal extends LitElement {
|
|||||||
protected override render() {
|
protected override render() {
|
||||||
return html`<div class="content">
|
return html`<div class="content">
|
||||||
${this._state === "INSTALLING"
|
${this._state === "INSTALLING"
|
||||||
? html`<img src="/static/images/voice-assistant/update.png" />
|
? html`<img
|
||||||
|
src="/static/images/voice-assistant/update.png"
|
||||||
|
alt="Casita Home Assistant loading logo"
|
||||||
|
/>
|
||||||
<h1>Installing add-ons</h1>
|
<h1>Installing add-ons</h1>
|
||||||
<p>
|
<p>
|
||||||
The Whisper and Piper add-ons are being installed and configured.
|
The Whisper and Piper add-ons are being installed and configured.
|
||||||
@ -54,7 +57,10 @@ export class HaVoiceAssistantSetupStepLocal extends LitElement {
|
|||||||
${this._detailState || "Installation can take several minutes"}
|
${this._detailState || "Installation can take several minutes"}
|
||||||
</p>`
|
</p>`
|
||||||
: this._state === "ERROR"
|
: this._state === "ERROR"
|
||||||
? html` <img src="/static/images/voice-assistant/error.png" />
|
? html` <img
|
||||||
|
src="/static/images/voice-assistant/error.png"
|
||||||
|
alt="Casita Home Assistant error logo"
|
||||||
|
/>
|
||||||
<h1>Failed to install add-ons</h1>
|
<h1>Failed to install add-ons</h1>
|
||||||
<p>
|
<p>
|
||||||
We could not automatically install a local TTS and STT provider
|
We could not automatically install a local TTS and STT provider
|
||||||
@ -75,7 +81,10 @@ export class HaVoiceAssistantSetupStepLocal extends LitElement {
|
|||||||
>
|
>
|
||||||
</a>`
|
</a>`
|
||||||
: this._state === "NOT_SUPPORTED"
|
: this._state === "NOT_SUPPORTED"
|
||||||
? html`<img src="/static/images/voice-assistant/error.png" />
|
? html`<img
|
||||||
|
src="/static/images/voice-assistant/error.png"
|
||||||
|
alt="Casita Home Assistant error logo"
|
||||||
|
/>
|
||||||
<h1>Installation of add-ons is not supported on your system</h1>
|
<h1>Installation of add-ons is not supported on your system</h1>
|
||||||
<p>
|
<p>
|
||||||
Your system is not supported to automatically install a local
|
Your system is not supported to automatically install a local
|
||||||
|
@ -68,7 +68,10 @@ export class HaVoiceAssistantSetupStepSuccess extends LitElement {
|
|||||||
: undefined;
|
: undefined;
|
||||||
|
|
||||||
return html`<div class="content">
|
return html`<div class="content">
|
||||||
<img src="/static/images/voice-assistant/heart.png" />
|
<img
|
||||||
|
src="/static/images/voice-assistant/heart.png"
|
||||||
|
alt="Casita Home Assistant logo"
|
||||||
|
/>
|
||||||
<h1>Ready to Assist!</h1>
|
<h1>Ready to Assist!</h1>
|
||||||
<p class="secondary">
|
<p class="secondary">
|
||||||
Make any final customizations here. You can always change these in the
|
Make any final customizations here. You can always change these in the
|
||||||
|
@ -65,7 +65,10 @@ export class HaVoiceAssistantSetupStepUpdate extends LitElement {
|
|||||||
const progressIsNumeric = stateObj && updateUsesProgress(stateObj);
|
const progressIsNumeric = stateObj && updateUsesProgress(stateObj);
|
||||||
|
|
||||||
return html`<div class="content">
|
return html`<div class="content">
|
||||||
<img src="/static/images/voice-assistant/update.png" />
|
<img
|
||||||
|
src="/static/images/voice-assistant/update.png"
|
||||||
|
alt="Casita Home Assistant loading logo"
|
||||||
|
/>
|
||||||
<h1>
|
<h1>
|
||||||
${stateObj &&
|
${stateObj &&
|
||||||
(stateObj.state === "unavailable" || updateIsInstalling(stateObj))
|
(stateObj.state === "unavailable" || updateIsInstalling(stateObj))
|
||||||
|
@ -90,14 +90,17 @@ export class HaVoiceAssistantSetupStepWakeWord extends LitElement {
|
|||||||
return html`<div class="content">
|
return html`<div class="content">
|
||||||
${!this._detected
|
${!this._detected
|
||||||
? html`
|
? html`
|
||||||
<img src="/static/images/voice-assistant/sleep.png" />
|
<img src="/static/images/voice-assistant/sleep.png" alt="Casita Home Assistant logo"/>
|
||||||
<h1>
|
<h1>
|
||||||
Say “${this._activeWakeWord(this.assistConfiguration)}” to wake the
|
Say “${this._activeWakeWord(this.assistConfiguration)}” to wake the
|
||||||
device up
|
device up
|
||||||
</h1>
|
</h1>
|
||||||
<p class="secondary">Setup will continue once the device is awake.</p>
|
<p class="secondary">Setup will continue once the device is awake.</p>
|
||||||
</div>`
|
</div>`
|
||||||
: html`<img src="/static/images/voice-assistant/ok-nabu.png" />
|
: html`<img
|
||||||
|
src="/static/images/voice-assistant/ok-nabu.png"
|
||||||
|
alt="Casita Home Assistant logo"
|
||||||
|
/>
|
||||||
<h1>
|
<h1>
|
||||||
Say “${this._activeWakeWord(this.assistConfiguration)}” again
|
Say “${this._activeWakeWord(this.assistConfiguration)}” again
|
||||||
</h1>
|
</h1>
|
||||||
|
Loading…
x
Reference in New Issue
Block a user