finish modal

resources/js/components/Modal.vue

@@ -1,13 +0,0 @@
-<template>
-    $END$
-</template>
-
-<script>
-    export default {
-        name: "Modal"
-    }
-</script>
-
-<style scoped>
-
-</style>

resources/js/views/Memo/MemoEdit.vue

@@ -2,12 +2,10 @@
     <div class="memo-edit p-2">
         <div class="flex-between mb-1">
             <router-link :to="'/memos/' + this.$route.params.id" class="btn">< Back</router-link>
-            <button class="btn-alert mr-1">Cancel</button>
         </div>
         <form @submit.prevent="submitForm">
             <InputField name="name" :data="form.name" label="Title" placeholder="Your Title" required @update:field="form.name = $event" :errors="errors" />
             <TextAreaField class="memo-text-area" name="memo" :data="form.memo" placeholder="Your Memo" required @update:field="form.memo = $event" :errors="errors" />
-
             <div class="flex-end mt-1">
                 <button class="btn-primary">Save</button>
             </div>

resources/js/views/Memo/MemoShow.vue

@@ -2,21 +2,22 @@
     <div class="p-2">
         <Loader v-if="loading" />
         <div v-else>
-            <div class="flex-between flex-center mb-1">
+            <div class="flex-between flex-center mb-1 relative">
                 <router-link to="/memos/" class="btn">< Back</router-link>
-                <div class="relative">
+                <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">
                     <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>
-                    <div v-if="modal" class="absolute modal mt-2">
-                        <p>Are you sure you want to delete this record ?</p>
-                        <div class="flex-end flex-center mt-2">
-                            <button class="btn mr-2" @click="modal = ! modal">Cancel</button>
-                            <button class="btn-alert-strong" @click="destroy"> Delete</button>
                 </div>
             </div>
-                </div>
-                <div v-if="modal" class="modal-background" @click="modal = ! modal" />
-            </div>
     <!--           <TagBox :memo="memo" />-->
             <h1 class="memo-title flex-center">{{ memo.name }}</h1>
             <p class="memo-style pt-1" v-html="memoMarkdown"></p>

resources/sass/app.scss

@@ -14,6 +14,7 @@
 @import "components/main";
 @import "components/nav";
 @import "components/topbar";
+@import "components/modal";
 @import "components/avatar";
 @import "components/alert_box";
 @import "components/search_box";

resources/sass/components/_elements.scss

@@ -36,3 +36,7 @@ a {
         color: $dark;
     }
 }
+
+pre {
+
+}

resources/sass/components/modal.scss

@@ -0,0 +1,26 @@
+$modal-duration: 1s;
+
+.modal-container {
+    background-color: rgba(0,0,0,0.6);
+    //display: none;
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+
+    .modal {
+        background-color: #fff;
+        border-radius: 5px;
+        box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
+        position: absolute;
+        overflow: hidden;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        max-width: 100%;
+        width: 400px;
+        animation-name: modalopen;
+        animation-duration: $modal-duration;
+    }
+}

resources/sass/setup/_containers.scss

@@ -14,6 +14,7 @@
     text-decoration: none;
     flex-direction: column;
     justify-content: space-between;
+    cursor: pointer;
 
     img,
     svg {
@@ -58,6 +59,7 @@
         background-color: $light;
         padding: 0.5rem 1rem;
         border-radius: 0.2rem;
+        cursor: pointer;
 
         svg {
             width: 2rem;