From 497235af36aee643786c61a00fe1986351f6c14f Mon Sep 17 00:00:00 2001
From: Aulia Adila <13519100@std.stei.itb.ac.id>
Date: Fri, 15 Apr 2022 20:51:14 +0700
Subject: [PATCH] fix ui modals
---
src/components/Modal.vue | 26 ++++----------------------
src/components/header.vue | 22 ++++++++++++++++++++--
src/views/DepartemenIndex.vue | 17 +++++++++++++----
3 files changed, 37 insertions(+), 28 deletions(-)
diff --git a/src/components/Modal.vue b/src/components/Modal.vue
index f7ce799..68c6883 100644
--- a/src/components/Modal.vue
+++ b/src/components/Modal.vue
@@ -32,16 +32,6 @@
This is body
</slot>
</section>
-
- <!-- <footer class="modal-footer">
- <slot name="footer">
- This is footer
- </slot>
- <button type="button" class="btn-green" @click="close">
- Close Modal
- </button>
- </footer> -->
-
</div>
</div>
</template>
@@ -58,6 +48,7 @@
display: flex;
justify-content: center;
align-items: center;
+ overflow: hidden;
}
.modal {
@@ -74,7 +65,7 @@
top: 50%;
bottom: 0;
left: 50%;
- right: 0;
+ right: 0;
transform: translate(-50%, -50%);
}
@@ -82,25 +73,16 @@
.modal-header {
padding: 15px;
display: flex;
- }
-
-
- .modal-header {
position: relative;
border-bottom: 1px solid #eeeeee;
color: #6992b4;
justify-content: space-between;
+ font-weight: bold;
}
- /* .modal-footer {
- border-top: 1px solid #eeeeee;
- flex-direction: column;
- justify-content: flex-end;
- } */
-
.modal-body {
position: relative;
- padding: 20px 10px;
+ padding: 18px 10px;
}
.btn-close {
diff --git a/src/components/header.vue b/src/components/header.vue
index 079006c..6f2ed12 100644
--- a/src/components/header.vue
+++ b/src/components/header.vue
@@ -51,9 +51,9 @@
<template v-slot:header>Menu Pilihan</template>
<template v-slot:body>
<!-- warna biru, link ke halaman profil -->
- <button @click="toProfile">Lihat Profil</button>
+ <button class="btn-blue mb-2 ms-2" @click="toProfile">Lihat Profil</button>
<!-- warna merah -->
- <button @click="toLogout">Keluar</button>
+ <button class="btn-red ms-4" @click="toLogout">Keluar</button>
</template>
</Modal>
@@ -157,5 +157,23 @@ export default {
.profile-modal{
width: 20em;
height: 35em;
+ transform: translate(110%, -80%);
}
+
+.btn-red {
+ background: #f4476b;
+ border-radius: 15px;
+ color: white;
+ border: none;
+ padding: 4% 15% 4% 15%;
+}
+
+.btn-blue {
+ background: #6992b4;
+ border-radius: 15px;
+ color: white;
+ border: none;
+ padding: 4% 15% 4% 15%;
+}
+
</style>
diff --git a/src/views/DepartemenIndex.vue b/src/views/DepartemenIndex.vue
index b08c10d..feaa39c 100644
--- a/src/views/DepartemenIndex.vue
+++ b/src/views/DepartemenIndex.vue
@@ -70,15 +70,15 @@
<template v-if="type === 'addDept'">
<form @submit="insert" autocomplete="off" id="formAddDept">
<label for="deptInput">Nama Departemen</label>
- <input v-model="deptnameadd" type="text" id="deptInput" class="form-control">
- <button type="submit" class="btn-blue p-1" >Simpan</button>
+ <input v-model="deptnameadd" type="text" id="deptInput" class="form-control mb-3">
+ <button type="submit" class="btn-blue" >Simpan</button>
</form>
</template>
<template v-if="type === 'editDept'">
<form @submit="edit" autocomplete="off" id="formEditDept">
<label for="deptEdit">Nama Departemen</label>
- <input v-model="deptnameedit" type="text" id="deptEdit" class="form-control">
- <button type="submit" class="btn-blue p-1" >Simpan</button>
+ <input v-model="deptnameedit" type="text" id="deptEdit" class="form-control mb-3">
+ <button type="submit" class="btn-blue" >Simpan</button>
</form>
</template>
</template>
@@ -262,4 +262,13 @@ export default {
transform: translate(-50%, -50%);
margin: auto;
}
+
+.btn-blue {
+ background: #6992b4;
+ border-radius: 15px;
+ color: white;
+ border: none;
+ padding: 1% 5% 1% 5%;
+}
+
</style>
--
GitLab