Skip to content

Commit b6b01bc

Browse files
mopo922michaeltintiuc
mopo922
authored and
michaeltintiuc
committed
#155 #156 HTML formatting (#166)
1 parent 8cef9ca commit b6b01bc

12 files changed

+192
-71
lines changed

‎src/components/BaseModal.vue

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,23 @@
33
<ion-header>
44
<ion-toolbar :class="className">
55
<ion-buttons slot="start">
6-
<ion-button @click="closeModal" :class="className">
7-
<ion-icon size="large" name="close"/>
6+
<ion-button
7+
@click="closeModal"
8+
:class="className"
9+
>
10+
<ion-icon
11+
size="large"
12+
name="close"
13+
/>
814
</ion-button>
915
</ion-buttons>
1016
<ion-title>{{ title }}</ion-title>
1117
<ion-buttons slot="end">
12-
<ion-button clear @click="closeModal" :class="className">
18+
<ion-button
19+
clear
20+
:class="className"
21+
@click="closeModal"
22+
>
1323
Done
1424
</ion-button>
1525
</ion-buttons>

‎src/components/ModalReviewApp.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,11 @@
55
<h3>Please help us improve<br/>by leaving your feedback</h3>
66
<div class="bees-container">
77
<a @click="badExperience">
8-
<img src="../images/Bee-Not-Happy-Avatar@2x.svg"/>
8+
<img src="../images/Bee-Not-Happy-Avatar@2x.svg" />
99
<div>Not Really</div>
1010
</a>
1111
<a @click="goodExperience">
12-
<img src="../images/Bee-Happy-Avatar@2x.svg"/>
12+
<img src="../images/Bee-Happy-Avatar@2x.svg" />
1313
<div>Love It!</div>
1414
</a>
1515
</div>

‎src/components/PageAcc.vue

Lines changed: 14 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,13 @@
77
</ion-buttons>
88
<ion-title>Check Account</ion-title>
99
<ion-buttons slot="end">
10-
<ion-button :disabled="!isValidAccount" clear @click="checkAccount">
10+
<ion-button
11+
clear
12+
:disabled="!isValidAccount"
13+
@click="checkAccount"
14+
>
1115
<span v-if="requestPending">
12-
<ion-spinner/>
16+
<ion-spinner />
1317
</span>
1418
<span v-else>Check</span>
1519
</ion-button>
@@ -22,7 +26,10 @@
2226
we'll check if it's been hacked<br>
2327
</h1>
2428
<div class="input-holder">
25-
<form @submit.prevent="checkAccount" action="#">
29+
<form
30+
action="#"
31+
@submit.prevent="checkAccount"
32+
>
2633
<ion-item>
2734
<ion-label padding>Your username or email</ion-label>
2835
</ion-item>
@@ -36,7 +43,10 @@
3643
@keydown.enter="checkAccount"
3744
/>
3845
</ion-item>
39-
<input type="submit" class="form-submit-button"/>
46+
<input
47+
type="submit"
48+
class="form-submit-button"
49+
/>
4050
</form>
4151
</div>
4252
</ion-content>

‎src/components/PageBreach.vue

Lines changed: 18 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<ion-header>
44
<ion-toolbar>
55
<ion-buttons slot="start">
6-
<ion-back-button/>
6+
<ion-back-button />
77
</ion-buttons>
88
</ion-toolbar>
99
</ion-header>
@@ -12,19 +12,23 @@
1212
<ion-item>
1313
<ion-avatar slot="start">
1414
<div class="img-holder">
15-
<img :src="breach.LogoPath" :alt="breach.Title"/>
15+
<img
16+
:src="breach.LogoPath"
17+
:alt="breach.Title"
18+
/>
1619
</div>
17-
<div class="avatar-shadow"/>
20+
<div class="avatar-shadow" />
1821
</ion-avatar>
1922
<ion-label>
2023
<h1>
2124
{{ breach.Title }}&nbsp;
2225
<img
2326
v-show="breach.IsVerified"
2427
src="../images/Icon-Verified-Checkmark.svg"
25-
alt="Braech verified"/>
28+
alt="Braech verified"
29+
/>
2630
</h1>
27-
<h2 v-html="this.$breachesService.formatDomain(breach.Domain)"/>
31+
<h2 v-html="this.$breachesService.formatDomain(breach.Domain)" />
2832
</ion-label>
2933
</ion-item>
3034
</ion-list>
@@ -36,32 +40,36 @@
3640
<span
3741
slot="end"
3842
class="info-date"
39-
v-html="this.$breachesService.formatDate(breach.BreachDate)"/>
43+
v-html="this.$breachesService.formatDate(breach.BreachDate)"
44+
/>
4045
</ion-item>
4146
<ion-item class="info-item">
4247
<span slot="start">Date added</span>
4348
<span
4449
slot="end"
4550
class="info-date"
46-
v-html="this.$breachesService.formatDate(breach.AddedDate)"/>
51+
v-html="this.$breachesService.formatDate(breach.AddedDate)"
52+
/>
4753
</ion-item>
4854
<ion-item class="info-item">
4955
<span slot="start">Date of change</span>
5056
<span
5157
slot="end"
5258
class="info-date"
53-
v-html="this.$breachesService.formatDate(breach.ModifiedDate)"/>
59+
v-html="this.$breachesService.formatDate(breach.ModifiedDate)"
60+
/>
5461
</ion-item>
5562
<ion-item class="info-item">
5663
<span slot="start">Number of breached accounts</span>
5764
<span
5865
slot="end"
5966
class="info-date"
60-
v-html="breach.PwnCount"/>
67+
v-html="breach.PwnCount"
68+
/>
6169
</ion-item>
6270
</ion-list>
6371
<h1>Description</h1>
64-
<p v-html="breach.Description"/>
72+
<p v-html="breach.Description" />
6573
</div>
6674
</ion-content>
6775
</ion-page>

‎src/components/PageBreaches.vue

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,20 +5,22 @@
55
<ion-buttons slot="start">
66
<ion-back-button default-href="/acc" />
77
</ion-buttons>
8-
<ion-title v-html="account"/>
8+
<ion-title v-html="account" />
99
</ion-toolbar>
1010
<ion-searchbar
1111
:value="filter"
1212
type="email"
13-
@ionChange="filterChanged"/>
13+
@ionChange="filterChanged"
14+
/>
1415
</ion-header>
1516
<ion-content padding>
1617
<div class="counter">{{ breaches.length }} results found</div>
1718
<ion-list>
1819
<PageBreachesItem
1920
v-for="(breach, index) in breaches"
2021
:key="index"
21-
:breach="breach"/>
22+
:breach="breach"
23+
/>
2224
</ion-list>
2325
</ion-content>
2426
</ion-page>

‎src/components/PageBreachesItem.vue

Lines changed: 14 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,21 +2,29 @@
22
<ion-item @click="viewBreach">
33
<ion-avatar slot="start">
44
<div class="img-holder">
5-
<img :src="breach.LogoPath" :alt="breach.Title"/>
5+
<img
6+
:src="breach.LogoPath"
7+
:alt="breach.Title"
8+
/>
69
</div>
7-
<div class="avatar-shadow"/>
10+
<div class="avatar-shadow" />
811
</ion-avatar>
912
<ion-label>
1013
<h1>
1114
{{ breach.Title }}
12-
<img v-show="breach.IsVerified" src="../images/Icon-Verified-Checkmark.svg" alt="Verified breach"/>
15+
<img
16+
v-show="breach.IsVerified"
17+
src="../images/Icon-Verified-Checkmark.svg"
18+
alt="Verified breach"
19+
/>
1320
</h1>
14-
<p v-html="this.$breachesService.formatDate(breach.BreachDate)"/>
15-
<h2 v-html="this.$breachesService.formatDomain(breach.Domain)"/>
21+
<p v-html="this.$breachesService.formatDate(breach.BreachDate)" />
22+
<h2 v-html="this.$breachesService.formatDomain(breach.Domain)" />
1623
</ion-label>
1724
<ion-icon
1825
slot="end"
19-
name="arrow-forward"/>
26+
name="arrow-forward"
27+
/>
2028
</ion-item>
2129
</template>
2230

‎src/components/PageHome.vue

Lines changed: 50 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -2,47 +2,80 @@
22
<ion-page class="ion-page">
33
<ion-header>
44
<ion-toolbar>
5-
<img src="../images/Beep-Logo.svg" class="logo" alt="Beep logo">
5+
<img
6+
src="../images/Beep-Logo.svg"
7+
class="logo"
8+
alt="Beep logo"
9+
/>
610
</ion-toolbar>
711
</ion-header>
812
<ion-content class="content">
9-
<h1>Check if you've
10-
<br>been hacked
11-
</h1>
13+
<h1>Check if you've<br>been hacked</h1>
1214
<div class="buttons">
13-
<div class="btn-holder" @click="goToAcc">
15+
<div
16+
class="btn-holder"
17+
@click="goToAcc"
18+
>
1419
<div class="square-btn">
1520
<div class="square-btn-content">
1621
<div class="square-btn-icon">
17-
<img src="../images/Icon-Account.svg" alt="Account logo">
22+
<img
23+
src="../images/Icon-Account.svg"
24+
alt="Account logo"
25+
/>
1826
</div>
1927
<div class="square-btn-text">Account</div>
2028
</div>
21-
<div class="square-btn-shadow"/>
29+
<div class="square-btn-shadow" />
2230
</div>
2331
</div>
24-
<div class="btn-holder" @click="goToPwd">
32+
<div
33+
class="btn-holder"
34+
@click="goToPwd"
35+
>
2536
<div class="square-btn">
2637
<div class="square-btn-content">
2738
<div class="square-btn-icon">
28-
<img src="../images/Icon-Password.svg" alt="Password logo">
39+
<img
40+
src="../images/Icon-Password.svg"
41+
alt="Password logo"
42+
/>
2943
</div>
3044
<div class="square-btn-text">Password</div>
3145
</div>
32-
<div class="square-btn-shadow"/>
46+
<div class="square-btn-shadow" />
3347
</div>
3448
</div>
3549
</div>
3650
<div class="footer">
37-
<h2 @click="goToHelp"><span class="link">How does it work?</span></h2>
38-
<h2 @click="share" v-if="!$isWeb"><span>Share this app</span></h2>
51+
<h2 @click="goToHelp">
52+
<span class="link">How does it work?</span>
53+
</h2>
54+
<h2
55+
v-if="!$isWeb"
56+
@click="share"
57+
>
58+
<span>Share this app</span>
59+
</h2>
3960
</div>
40-
<div class="app-store-btns" v-if="$isWeb">
41-
<a href="https://mdus.co/beepios" target="_blank">
42-
<img src="../images/app-store-badge.svg" class="ios" />
61+
<div
62+
v-if="$isWeb"
63+
class="app-store-btns"
64+
>
65+
<a
66+
href="https://mdus.co/beepios"
67+
target="_blank"
68+
>
69+
<img
70+
src="../images/app-store-badge.svg"
71+
class="ios"
72+
/>
4373
</a>
44-
<a href="https://mdus.co/beepandroid" target="_blank">
45-
<img src="../images/google-play-badge.png" />
74+
<a
75+
href="https://mdus.co/beepandroid"
76+
target="_blank"
77+
>
78+
<img src="../images/google-play-badge.png" />
4679
</a>
4780
</div>
4881
</ion-content>

‎src/components/PageHomeModalHowItWorks.vue

Lines changed: 25 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,27 +3,45 @@
33
<div>
44
<p>
55
Every day, over 4 million online data records are stolen or lost.
6-
<a href="https://labs.moduscreate.com/beep-vue-ionic-hybrid-mobile-app" class="link">Beep</a> tells you if your online accounts have been stolen in any of these data breaches.
6+
<a
7+
href="https://labs.moduscreate.com/beep-vue-ionic-hybrid-mobile-app"
8+
class="link"
9+
>Beep</a> tells you if your online accounts have been stolen in any of these data breaches.
710
Just enter your email address, username, or password, and we’ll tell you if it's been hacked.
811
</p>
912

1013
<img
1114
src="../images/Icon-Character-Swarm.svg"
1215
class="bee"
13-
alt="Swarm Character"/>
16+
alt="Swarm Character"
17+
/>
1418

1519
<h1>Pioneering Vue.js as a New Backend for Ionic</h1>
1620
<p>
17-
<a href="https://labs.moduscreate.com/beep-vue-ionic-hybrid-mobile-app" class="link">Beep</a> is one of the first apps built on <a href="https://github.com/ionic-team/ionic/pull/15801" class="link">Vue.JS and Ionic Framework</a>.
21+
<a
22+
href="https://labs.moduscreate.com/beep-vue-ionic-hybrid-mobile-app"
23+
class="link"
24+
>Beep</a> is one of the first apps built on
25+
<a
26+
href="https://github.com/ionic-team/ionic/pull/15801"
27+
class="link"
28+
>Vue.JS and Ionic Framework</a>.
1829
With this combination, PHP developers no longer have to struggle with
1930
Angular to build cross platform Ionic apps. We even built our own router.
2031
</p>
2132
<h1 class="hash-protected">
22-
<img src="../images/Icon-Hash-Protected.svg" alt="Hash protected"/>
33+
<img
34+
src="../images/Icon-Hash-Protected.svg"
35+
alt="Hash protected"
36+
/>
2337
<span>Hash Protected</span>
2438
</h1>
2539
<p>
26-
We've made sure that <a href="https://labs.moduscreate.com/beep-vue-ionic-hybrid-mobile-app" class="link">Beep</a> won't end up yet another name on the list of data breaches.&nbsp;
40+
We've made sure that
41+
<a
42+
href="https://labs.moduscreate.com/beep-vue-ionic-hybrid-mobile-app"
43+
class="link"
44+
>Beep</a> won't end up yet another name on the list of data breaches.&nbsp;
2745
How? We hash all of your passwords and account information.
2846
In other words, we never store your passwords in plain text.
2947
Instead, we transform your password into a really, really long code and then, we send only the first five characters of that code to a server.
@@ -33,7 +51,8 @@
3351
<img
3452
src="../images/Modus-Labs-Logo.svg"
3553
class="modus-labs-logo"
36-
alt="Modus Labs Logo"/>
54+
alt="Modus Labs Logo"
55+
/>
3756
</a>
3857
</div>
3958
</BaseModal>

0 commit comments

Comments
 (0)