Skip to content

Commit a5a20aa

Browse files
duro06duro06
committed
selesai membuat component level, perbaikan padding agar ketika login viewnya tidak bentrok
1 parent fcc1456 commit a5a20aa

File tree

11 files changed

+236
-124
lines changed

11 files changed

+236
-124
lines changed

‎src/App.vue

Lines changed: 22 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,16 @@
11
<template>
22
<div id="app">
3-
<Navbar v-if="loggedIn" />
4-
<transition :name="ngiri">
5-
<router-view />
6-
</transition>
7-
<Footer v-if="loggedIn" />
3+
<div>
4+
<Navbar v-if="loggedIn" />
5+
</div>
6+
<div>
7+
<transition class="slideInLeft" v-wow data-wow-duration="1s">
8+
<router-view class="route" />
9+
</transition>
10+
</div>
11+
<div>
12+
<Footer v-if="loggedIn" />
13+
</div>
814
</div>
915
</template>
1016
<script>
@@ -25,20 +31,24 @@ export default {
2531
loggedIn() {
2632
return this.$store.getters.loggedIn;
2733
}
28-
},
29-
watch: {
30-
$route(to, from) {
31-
const toDepth = to.path.split("/").length;
32-
const fromDepth = from.path.split("/").length;
33-
this.ngiri = toDepth < fromDepth ? "slide-right" : "slide-left";
34-
}
3534
}
35+
// watch: {
36+
// $route(to, from) {
37+
// const toDepth = to.path.split("/").length;
38+
// const fromDepth = from.path.split("/").length;
39+
// this.ngiri = toDepth < fromDepth ? "slide-right" : "slide-left";
40+
// }
41+
// }
3642
};
3743
</script>
3844

3945
<style lang="scss">
4046
@import "./assets/css/animate.css";
4147
@import "~bulma";
48+
.route {
49+
padding-top: 55px;
50+
padding-bottom: 55px;
51+
}
4252
#app {
4353
font-family: Avenir, Helvetica, Arial, sans-serif;
4454
-webkit-font-smoothing: antialiased;

‎src/components/Level3.vue

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<template>
2+
<div
3+
id="lev3"
4+
class="field slideInDown"
5+
v-wow
6+
data-wow-duration="1s"
7+
data-wow-delay="0.4s"
8+
>
9+
<article class="message is-danger">
10+
<div class="message-body">
11+
Halaman ini hanya bisa d akses oleh
12+
<strong>User level 3 </strong>
13+
<a>Jika link ini bisa di akses bukan oleh level 3</a>
14+
maka ada yang salah dengan <em>Program saya</em>
15+
demikian permberitahuan ini diberitahukan agar anda tahu
16+
</div>
17+
</article>
18+
</div>
19+
</template>
20+
<script>
21+
export default {
22+
name: "level3"
23+
};
24+
</script>

‎src/components/Level4.vue

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<template>
2+
<div
3+
class="field slideInDown"
4+
v-wow
5+
data-wow-duration="1s"
6+
data-wow-delay="0.4s"
7+
>
8+
<article class="message is-danger">
9+
<div class="message-body">
10+
Halaman ini hanya bisa d akses oleh
11+
<strong>User level 4</strong>
12+
<a>Jika link ini bisa di akses bukan oleh level 4</a>
13+
maka ada yang salah dengan <em>Program saya</em>
14+
demikian permberitahuan ini diberitahukan agar anda tahu
15+
</div>
16+
</article>
17+
</div>
18+
</template>
19+
<script>
20+
export default {
21+
name: "level 4"
22+
};
23+
</script>

‎src/components/Level5.vue

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<template>
2+
<div
3+
class="field slideInDown"
4+
v-wow
5+
data-wow-duration="1s"
6+
data-wow-delay="0.4s"
7+
>
8+
<article class="message is-danger">
9+
<div class="message-body">
10+
Halaman ini hanya bisa d akses oleh
11+
<strong>User level 5</strong>
12+
<a>Jika link ini bisa di akses bukan oleh level 5</a>
13+
maka ada yang salah dengan <em>Program saya</em>
14+
demikian permberitahuan ini diberitahukan agar anda tahu
15+
</div>
16+
</article>
17+
</div>
18+
</template>
19+
<script>
20+
export default {
21+
name: "level 5"
22+
};
23+
</script>

‎src/components/Level6.vue

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<template>
2+
<div
3+
class="field slideInDown"
4+
v-wow
5+
data-wow-duration="1s"
6+
data-wow-delay="0.4s"
7+
>
8+
<article class="message is-danger">
9+
<div class="message-body">
10+
Halaman ini hanya bisa d akses oleh
11+
<strong>User level 6</strong>
12+
<a>Jika link ini bisa di akses bukan oleh level 6</a>
13+
maka ada yang salah dengan <em>Program saya</em>
14+
demikian permberitahuan ini diberitahukan agar anda tahu
15+
</div>
16+
</article>
17+
</div>
18+
</template>
19+
<script>
20+
export default {
21+
name: "level 6"
22+
};
23+
</script>

‎src/components/Navbar.vue

Lines changed: 78 additions & 101 deletions
Original file line numberDiff line numberDiff line change
@@ -1,117 +1,89 @@
11
<template>
2-
<div
3-
id="navbar"
4-
class="message-body field fadeInUp"
2+
<nav
3+
class="navbar is-fixed-top is-danger fadeInUp"
4+
role="navigation"
5+
aria-label="main navigation"
56
v-wow
67
data-wow-delay="0s"
78
data-wow-duration="2s"
89
>
9-
<div
10-
class="holder fadeInUp"
11-
v-wow="{ 'animation-name': 'fadeInUp', 'animation-duration': '1s' }"
12-
>
13-
<nav
14-
class="navbar is-fixed-top is-danger"
15-
role="navigation"
16-
aria-label="main navigation"
10+
<div class="navbar-brand">
11+
<router-link
12+
class="navbar-item wow slideInLeft"
13+
to="/"
14+
data-wow-duration="1s"
15+
v-wow
16+
>Home</router-link
1717
>
18-
<div class="navbar-brand">
19-
<router-link
20-
class="navbar-item wow slideInLeft"
21-
to="/"
22-
data-wow-duration="1s"
23-
v-wow
24-
>Home</router-link
25-
>
26-
<!-- <a><?= app_name()?></!-->
27-
<div class="column wow slideInRight" v-wow>
28-
<span
29-
class="has-badge-rounded has-badge-success has-badge-outlined"
30-
data-badge="0"
31-
>
32-
<i class="far fa-bell"></i>
33-
</span>
34-
</div>
35-
<a
36-
role="button"
37-
v-wow
38-
class="navbar-burger has-text-white slideInRight"
39-
:class="{ 'is-active': isActive }"
40-
aria-label="menu"
41-
aria-expanded="false"
42-
@click="switchMenu"
43-
>
44-
<span aria-hidden="true"></span>
45-
<span aria-hidden="true"></span>
46-
<span aria-hidden="true"></span>
47-
</a>
48-
</div>
49-
50-
<div
51-
class="navbar-menu wow fadeInDown"
52-
:class="{ 'is-active': isActive }"
53-
data-wow-duration="1s"
54-
v-wow
18+
<!-- <a><?= app_name()?></!-->
19+
<div class="column wow slideInRight" v-wow>
20+
<span
21+
class="has-badge-rounded has-badge-success has-badge-outlined"
22+
data-badge="0"
5523
>
56-
<!-- <div class="navbar-start">
57-
<div class="navbar-item wow slideInDown" data-wow-duration="1s">
58-
<div class="field is-grouped">
59-
<p class="control">
60-
<router-link class="button is-ligth" to="/">
61-
<span class="icon">
62-
<i class="fas fa-sign-in-alt"></i>
63-
</span>
64-
<span>
65-
<router-link to="/login" msg="Login">Login</router-link>
66-
Login
67-
</span>
68-
</router-link>
69-
</p>
24+
<i class="far fa-bell"></i>
25+
</span>
7026
</div>
71-
</div>
72-
</div>-->
27+
<a
28+
role="button"
29+
v-wow
30+
class="navbar-burger has-text-white slideInRight"
31+
:class="{ 'is-active': isActive }"
32+
aria-label="menu"
33+
aria-expanded="false"
34+
@click="switchMenu"
35+
>
36+
<span aria-hidden="true"></span>
37+
<span aria-hidden="true"></span>
38+
<span aria-hidden="true"></span>
39+
</a>
40+
</div>
7341

74-
<div class="navbar-end">
75-
<a
76-
class="navbar-item wow slideInDown <?= (isset($menu) && $menu === 'home' ? 'is-active' : ''); ?>"
77-
to="/"
78-
v-wow
79-
data-wow-duration="1s"
80-
data-wow-delay="0.4s"
81-
>Beranda</a
82-
>
42+
<div
43+
class="navbar-menu wow fadeInDown"
44+
:class="{ 'is-active': isActive }"
45+
data-wow-duration="1s"
46+
v-wow
47+
>
48+
<div class="navbar-end">
49+
<a
50+
class="navbar-item wow slideInDown"
51+
to="/level3"
52+
v-wow
53+
data-wow-duration="1s"
54+
data-wow-delay="0.4s"
55+
>Level 3</a
56+
>
8357

84-
<a
85-
class="navbar-item wow slideInDown <?= (isset($menu) && $menu === 'puskesmas' ? 'is-active' : ''); ?>"
86-
to="/"
87-
v-wow
88-
data-wow-duration="1s"
89-
data-wow-delay="0.4s"
90-
>Puskesmas</a
91-
>
58+
<a
59+
class="navbar-item wow slideInDown"
60+
to="/level 4"
61+
v-wow
62+
data-wow-duration="1s"
63+
data-wow-delay="0.4s"
64+
>Level 4</a
65+
>
9266

93-
<a
94-
class="navbar-item wow slideInDown <?= (isset($menu) && $menu === 'rsk' ? 'is-active' : ''); ?>"
95-
to="/"
96-
v-wow
97-
data-wow-duration="1s"
98-
data-wow-delay="0.6s"
99-
>Rumah Sakit Khusus</a
100-
>
67+
<a
68+
class="navbar-item wow slideInDown"
69+
to="/level 5"
70+
v-wow
71+
data-wow-duration="1s"
72+
data-wow-delay="0.6s"
73+
>Level 5</a
74+
>
10175

102-
<a
103-
class="navbar-item wow slideInDown <?= (isset($menu) && $menu === 'rsu' ? 'is-active' : ''); ?>"
104-
to="/"
105-
v-wow
106-
data-wow-duration="1s"
107-
data-wow-delay="0.8s"
108-
>Rumah Sakit Umum</a
109-
>
110-
</div>
111-
</div>
112-
</nav>
76+
<a
77+
class="navbar-item wow slideInDown"
78+
to="/level 6"
79+
v-wow
80+
data-wow-duration="1s"
81+
data-wow-delay="0.8s"
82+
>Level 6</a
83+
>
84+
</div>
11385
</div>
114-
</div>
86+
</nav>
11587
</template>
11688
<script>
11789
// import '/assets/js/bulma.js'
@@ -132,6 +104,11 @@ export default {
132104
};
133105
</script>
134106
<style scoped>
107+
#navbar {
108+
padding-left: 1px;
109+
padding-right: 5px;
110+
padding-top: 5px;
111+
}
135112
@keyframes fadeInUp {
136113
0% {
137114
opacity: 0;

‎src/components/Welcome.vue

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
<template>
2-
<div class="section" name="welcome"></div>
2+
<div class="section" name="welcome">
3+
<img src="../assets/logocapcin.png" />
4+
</div>
35
</template>
46
<script>
57
export default {

‎src/components/auth/Logout.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,8 @@ export default {
66
created() {
77
this.$store
88
.dispatch("destroyToken")
9-
.then(this.$router.replace(this.$route.query.redirect || "/"))
10-
.catch(this.$router.replace(this.$route.query.redirect || "/"));
9+
.then(this.$router.replace(this.$route.query.redirect || "/login"))
10+
.catch(this.$router.replace(this.$route.query.redirect || "/login"));
1111
}
1212
};
1313
</script>

0 commit comments

Comments
 (0)