added instruction gifs to the ota wizard

development
Thiemann96 5 years ago
parent 2ac250c837
commit c7c70d30dd

@ -57,4 +57,5 @@ code {
color:#c7254e;
background-color: #f9f2f4;
border-radius: 4px;
}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 10 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.3 MiB

@ -23,7 +23,7 @@
</ion-item>
<ion-item>
<ion-label>{{'Password'|translate}}</ion-label>
<ion-input [(ngModel)]="pw" ></ion-input>
<ion-input type="password" [(ngModel)]="pw" ></ion-input>
</ion-item>
</ion-card-content>
</ion-card>

@ -1,9 +1,3 @@
<!--
Generated template for the ErrorPage page.
See http://ionicframework.com/docs/components/#navigation for more info on
Ionic pages and navigation.
-->
<ion-header>
<ion-navbar>

@ -42,16 +42,17 @@
<ion-row align-items-center>
<ion-col col-12 col-md-6>
<h2 translate>OTAWIZ.OTAMODE.TITLE</h2>
<img class="tutorial_gif" src="../../assets/imgs/ota_modus.gif" />
<p [innerHTML]="'OTAWIZ.OTAMODE.TEXT' | translate"></p>
<p translate>OTAWIZ.OTAMODE.STEPS</p>
</ion-col>
<ion-col col-12 col-md-6>
<ol style="text-align: left">
<li [innerHTML]="'OTAWIZ.OTAMODE.STEP1' | translate"></li>
<li [innerHTML]="'OTAWIZ.OTAMODE.STEP2' | translate"></li>
<li [innerHTML]="'OTAWIZ.OTAMODE.STEP3' | translate"></li>
</ol>
</ion-col>
<ion-col col-12 col-md-6>
<!-- @TODO: diagram! -->
<button ion-button large clear icon-end color="primary" (click)="slides.slideNext()">
{{ 'OTAWIZ.BTN_NEXT' | translate }}
@ -93,14 +94,21 @@
<ion-slide id="wifi-slide">
<ion-grid>
<div id="wifi-manual" *ngIf="state.wifiSelection == 'manual'">
<h2 translate>OTAWIZ.WIFI.MANUAL.TITLE</h2>
<p translate>OTAWIZ.WIFI.MANUAL.TEXT</p>
<button ion-button large clear icon-end color="primary" (click)="slides.slideNext()">
{{ 'OTAWIZ.BTN_NEXT' | translate }}
<ion-icon name="arrow-forward"></ion-icon>
</button>
<ion-row align-items-center>
<ion-col col-12 col-md-6>
<h2 translate>OTAWIZ.WIFI.MANUAL.TITLE</h2>
<img src="../../assets/imgs/wifiselection.gif" class="tutorial_gif"/>
<p translate>OTAWIZ.WIFI.MANUAL.TEXT</p>
</ion-col>
<ion-col col-12 col-md-6>
<button ion-button large clear icon-end color="primary" (click)="slides.slideNext()">
{{ 'OTAWIZ.BTN_NEXT' | translate }}
<ion-icon name="arrow-forward"></ion-icon>
</button>
</ion-col>
</ion-row>
</div>
<ion-row id="wifi-automatic" *ngIf="state.wifiSelection != 'manual'">
<ion-col col-12 col-md-6>
<ion-icon class="hidden-xs hidden-sm" name="wifi" style="font-size: 160px"></ion-icon>
@ -178,4 +186,4 @@
</ion-slide>
</ion-slides>
</ion-content>
</ion-content>

@ -5,6 +5,11 @@ page-ota-wizard {
background: map-get($colors, primary);
}
.tutorial_gif {
border-radius: 25px;
box-shadow: 10px 10px 8px #888888;
}
ion-slide {
h4 {
margin-bottom: 40px;

Loading…
Cancel
Save