Romain/portal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix modal

Browse Source
This commit is contained in:
Romulus21
2020-04-25 16:02:42 +02:00
parent c71f3ca4d8
commit 659ef1c944
2 changed files with 25 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
resources/js/views/Memo/MemoShow.vue
View File

@@ -2,6 +2,14 @@
<div> <div>
<Loader v-if="loading" /> <Loader v-if="loading" />
<div v-else> <div v-else>
<div v-if="modal" class="modal-container" @click="modal = ! modal"></div>
<div v-if="modal" class="modal">
<p class="m-1 text-center">Are you sure you want to delete this record ?</p>
<div class="flex-center m-1 mt-2">
<button class="btn-secondary mr-2" @click="modal = ! modal">Cancel</button>
<button class="btn-alert" @click="destroy"> Delete</button>
</div>
</div>
<div class="relative"> <div class="relative">
<img <img
v-if="!loading" v-if="!loading"
@@ -11,15 +19,6 @@
<div class="flex-col flex-between absolute memo-cover"> <div class="flex-col flex-between absolute memo-cover">
<div class="flex-between px-2 py-1"> <div class="flex-between px-2 py-1">
<router-link to="/memos/" class="btn-secondary">< Back</router-link> <router-link to="/memos/" class="btn-secondary">< Back</router-link>
<div v-if="modal" class="modal-container" @click="modal = ! modal">
<div class="modal">
<p class="m-1 text-center">Are you sure you want to delete this record ?</p>
<div class="flex-center m-1 mt-2">
<button class="btn-secondary mr-2" @click="modal = ! modal">Cancel</button>
<button class="btn-alert" @click="destroy"> Delete</button>
</div>
</div>
</div>
<div class="flex-middle"> <div class="flex-middle">
<router-link :to="'/memos/' + memo.memo_id + '/edit'" class="btn-secondary mr-1" >Edit</router-link> <router-link :to="'/memos/' + memo.memo_id + '/edit'" class="btn-secondary mr-1" >Edit</router-link>
<a href="#" class="btn-alert" @click="modal = ! modal">Delete</a> <a href="#" class="btn-alert" @click="modal = ! modal">Delete</a>

7
resources/sass/components/modal.scss vendored
View File

@@ -2,18 +2,20 @@ $modal-duration: 1s;
.modal-container { .modal-container {
background-color: rgba(0,0,0,0.6); background-color: rgba(0,0,0,0.6);
//display: none;
position: fixed; position: fixed;
z-index: 10;
top: 0; top: 0;
bottom: 0; bottom: 0;
left: 0; left: 0;
right: 0; right: 0;
}
.modal { .modal {
background-color: #fff; background-color: #fff;
border-radius: 5px; border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
position: absolute; position: absolute;
z-index: 20;
overflow: hidden; overflow: hidden;
top: 50%; top: 50%;
left: 50%; left: 50%;
@@ -22,5 +24,4 @@ $modal-duration: 1s;
width: 400px; width: 400px;
animation-name: modalopen; animation-name: modalopen;
animation-duration: $modal-duration; animation-duration: $modal-duration;
}
} }