Skip to content

Commit 4986230

Browse files
khoadnguyenkhoadnguyen
authored
Merge pull request #193 from SoftStackFactory/183-wizard-update-demo-imgs
183 wizard update demo imgs
2 parents cba7c9c + 99fa514 commit 4986230

2 files changed

Lines changed: 76 additions & 83 deletions

File tree

‎src/pages/wizard/wizard.html‎

Lines changed: 21 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -45,46 +45,48 @@ <h1 class="h1">Home Dasboard</h1>
4545
<p class="h2">Here you will find links to the timeline and self assessment section.
4646
Usefull tips and links are also available to check out.</p>
4747
</ion-list>
48-
<img id='dashImg' src='../../assets/imgs/dashboard.png'>
48+
<img class= "demo-img" src='../../assets/imgs/dashboard.png'>
4949
</div>
5050
</ion-slide>
5151

5252
<ion-slide class="demo-slide">
5353
<div class='top-demo'>
54-
<ion-list class="demo-header list list-ios" >
54+
<ion-list class="demo-header list list-ios">
5555
<ion-list-header class='item item-ios list-header list-header-ios'>
56-
<h1 class="h1">Self Assessment</h1>
56+
<h1 class="h1">Life Balance Wheel</h1>
5757
</ion-list-header>
58-
<p class='h2'>Here you will be promted to take your self assessment to assess your finances, relationships, family, and
59-
more!
60-
</p>
58+
<p class='h2'>Here you will be promted to take your self assessment for your finances, health, family, and
59+
more. This chart will display the results of your self assesment.</p>
6160
</ion-list>
62-
<img id="self" src='../../assets/imgs/asssesment.png'>
61+
<img class='demo-img' src='../../assets/imgs/assessment.png'>
6362
</div>
6463
</ion-slide>
6564

6665
<ion-slide class="demo-slide">
6766
<div class='top-demo'>
68-
<ion-list class="demo-header list list-ios">
69-
<ion-list-header class='item item-ios list-header list-header-ios'>
70-
<h1 class="h1">Life Balance Wheel</h1>
67+
<ion-list class="demo-header list list-ios" >
68+
<ion-list-header class='item item-ios list-header list-header-ios'>
69+
<h1 class="h1">Timeline</h1>
7170
</ion-list-header>
72-
<p class='h2'>This chart will display the results of your self assesment by category.</p>
71+
<p class='h2'>This is a timeline that will make your transition to the civilian life smoother. Each section has a to-do
72+
item that you need to accomplish.
73+
</p>
7374
</ion-list>
74-
<img src='../../assets/imgs/whell.png'>
75+
<img class='demo-img' src='../../assets/imgs/timeline.png'>
7576
</div>
7677
</ion-slide>
7778

7879
<ion-slide class="demo-slide">
7980
<div class='top-demo'>
80-
<ion-list class="demo-header list list-iosr" >
81-
<ion-list-header class='item item-ios list-header list-header-ios'>
82-
<h1 class="h1">Timeline</h1>
81+
<ion-list class="demo-header list list-ios" >
82+
<ion-list-header class='item item-ios list-header list-header-ios'>
83+
<h1 class="h1">Profile</h1>
8384
</ion-list-header>
84-
<p class='h2'>This is a timeline that will make your transition to the civilian life smoother. Each section has a to-do
85-
item that you need to accomplish.</p>
86-
</ion-list >
87-
<img id="time" src='../../assets/imgs/timeline.png'>
85+
<p class='h2'>
86+
In your profile page you can see your information or update it at any time .
87+
</p>
88+
</ion-list>
89+
<img class= 'demo-img'src='../../assets/imgs/profile.png'>
8890
</div>
8991
</ion-slide>
9092

‎src/pages/wizard/wizard.scss‎

Lines changed: 55 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -56,10 +56,7 @@ page-wizard {
5656
}
5757
.top-question{
5858
position: relative;
59-
//display: block;
60-
// width: 70%;
6159
margin: auto auto 50px auto;
62-
// font-size: 2.5vw;
6360
top: 12vw;
6461
}
6562
.list-header-md {
@@ -76,12 +73,12 @@ page-wizard {
7673
padding: 5px;
7774
margin: 0px !important;
7875
top: -5px;
79-
8076
}
8177
.h1{
8278
font-weight: bold;
8379
font-size: 20px;
8480
margin-right: 5px;
81+
white-space: normal;
8582
}
8683
.h2 {
8784
white-space: normal;
@@ -90,22 +87,15 @@ page-wizard {
9087
margin: 15px auto auto auto;
9188
top: 20px;
9289
}
93-
#dashImg {
94-
width: 60%;
95-
//height: 80%;
96-
}
97-
#self {
98-
width: 60%;
99-
// height: 70%;
100-
}
101-
#timeline {
102-
width: 80%;
103-
}
10490
img {
10591
// margin-top: 10px auto auto auto;
10692
display: inline;
10793
box-shadow: 0px 1px 66px -4px rgba(0,0,0,0.68);
10894
}
95+
.demo-img{
96+
width: 60%;
97+
98+
}
10999
.select-placeholder, .select-text{
110100
font-size: 20px;
111101
}
@@ -124,7 +114,6 @@ page-wizard {
124114
.date {
125115
float: left;
126116
}
127-
128117
.question-header {
129118
position: relative;
130119
}
@@ -212,33 +201,29 @@ page-wizard {
212201
height: 55px;
213202
margin: auto
214203
}
215-
}
216-
@media screen and (min-width: 1024px) {
217204
.h1 {
218205
font-size: 40px;
219206
}
220207
.h2 {
221208
font-size: 28px;
222-
}
209+
}
210+
211+
}
212+
@media screen and (min-width: 1024px) {
223213
@media screen and(orientation: portrait){
224214
.button1{
225215
width: 230px;
226216
height: 70px;
227217
}
218+
.h1 {
219+
font-size: 50px;
220+
}
221+
.h2 {
222+
font-size: 38px;
223+
}
228224
}
229225
}
230-
@media screen and (max-width: 812px) and (orientation: landscape){
231-
.question-header{
232-
margin: 0px;
233-
top: -30px;
234-
}
235-
.form {
236-
margin-top: -25px;
237-
}
238-
.inner-question-header {
239-
margin: 7px auto 0px auto;
240-
}
241-
}
226+
242227
@media screen and (max-width: 767px){
243228
ion-badge{
244229
font-size: 15px;
@@ -254,24 +239,7 @@ page-wizard {
254239
}
255240
}
256241
}
257-
@media screen and (max-width: 824px) and (orientation: landscape){
258-
ion-badge{
259-
font-size: 15px;
260-
padding: 3px;
261-
}
262-
.top-simple {
263-
top: auto;
264-
width: 80%!important;
265-
}
266-
}
267-
@media screen and (min-width: 700px) and (orientation: portrait){
268-
.h1 {
269-
font-size: 40px;
270-
}
271-
.h2 {
272-
font-size: 28px;
273-
}
274-
}
242+
275243
@media screen and (orientation:landscape) {
276244
.demo-slide .slide-zoom {
277245
display: flex;
@@ -291,20 +259,10 @@ page-wizard {
291259
.demo-header {
292260
width: 40%;
293261
}
294-
img {
295-
width: 100px;
296-
}
297-
#dashImg {
298-
width: 30%;
299-
height: 80%;
300-
}
301-
#self {
302-
width: 30%;
303-
height: 70%;
304-
}
305-
#timeline {
306-
width: 35%;
307-
}
262+
.demo-img{
263+
width: 37%;
264+
margin-left: 2.2vw;
265+
}
308266
.top-question {
309267
position: relative;
310268
top: 80px;
@@ -316,8 +274,41 @@ page-wizard {
316274
height: 70px;
317275
font-size: 30px;
318276
}
319-
}
277+
.h1 {
278+
font-size: 50px;
279+
}
280+
.h2 {
281+
font-size: 38px;
282+
}
283+
}
284+
@media screen and (max-width: 850px) {
285+
ion-badge{
286+
font-size: 15px;
287+
padding: 3px;
288+
}
289+
.top-simple {
290+
top: auto;
291+
width: 80%;
292+
}
293+
.demo-img{
294+
width: 25%;
295+
}
296+
.demo-header {
297+
width: 55%;
298+
}
299+
.question-header{
300+
margin: 0px;
301+
top: -30px;
302+
}
303+
.form {
304+
margin-top: -25px;
305+
}
306+
.inner-question-header {
307+
margin: 7px auto 0px auto;
308+
}
309+
}
320310
}
311+
321312
.invalid {
322313
box-shadow: 0px 0px 10px 3px#ea6153;
323314
}

0 commit comments

Comments
 (0)