opensensemap/blockly-app
1
0
Fork 0
mirror of https://github.com/sensebox/blockly-app synced 2025-04-06 10:30:28 +02:00
Code Issues Releases Wiki Activity

ota-wizard: nice layout for first step

Browse source
This commit is contained in:
Norwin 2018-11-07 01:41:57 +01:00
parent 776cd0dc85
commit b623d53971
2 changed files with 55 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

44
src/pages/ota-wizard/ota-wizard.html
View file

@ -8,26 +8,34 @@
</ion-header> </ion-header>
<ion-content padding="false"> <!-- FIXME: remove padding --> <ion-content padding="false"> <!-- FIXME: remove padding -->
<ion-slides pager> <ion-slides #slides pager (ionSlideDidChange)="onSlideChange()">
<!-- intro -->
<ion-slide> <ion-slide>
<h1>Welcome</h1> <ion-grid>
<ion-row>
<ion-col col-lg-6>
<ion-icon name="wifi" style="font-size: 160px"></ion-icon>
<h2>Welcome</h2>
<p>
To <b>program your senseBox</b> wirelessly, please follow these steps.
We will help you connect to your senseBox via <b>WiFi</b>.
</p>
</ion-col>
<img src="TODO-nice-wifi-sensebox-pictrogram>" /> <ion-col col-lg-6>
<p>First, please make sure that your senseBox...</p>
<p> <ul style="text-align: left">
To program your senseBox wirelessly, please follow these steps. <li>has the <b>WiFi shield</b> plugged in</li>
We will help you connect to your senseBox via WiFi. <li>has the initial <b>OTA sketch</b> installed</li>
<br/> </ul>
Please make sure that your senseBox.. <button ion-button large clear icon-end color="primary" (click)="slides.slideNext()">
Continue
<ion-icon name="arrow-forward"></ion-icon>
</p> </button>
</ion-col>
<ul style="text-align: left"> </ion-row>
<li>has the WiFi shield plugged in</li> </ion-grid>
<li>has the initial OTA sketch installed</li>
<li>TODO review this list foo bar lorem ipsum</li>
</ul>
</ion-slide> </ion-slide>
<ion-slide> <ion-slide>

29
src/pages/ota-wizard/ota-wizard.scss
View file

@ -4,4 +4,33 @@ page-ota-wizard {
.swiper-pagination-bullet-active { .swiper-pagination-bullet-active {
background: map-get($colors, primary); background: map-get($colors, primary);
} }
ion-slide {
img {
max-height: 50%;
max-width: 60%;
margin: 18px 0;
& ~ h2 {
margin-top: 2.8rem;
}
}
p, ul {
padding: 0 20px;
font-size: 16px;
line-height: 1.4;
color: #60646B;
b {
color: #000000;
font-weight: 500;
}
}
ul {
margin-left: 3%;
list-style-type: disc;
}
}
} }