From e9b4fb573f59349d6884789e8ce9ca6f90e83c06 Mon Sep 17 00:00:00 2001
From: Romulus21 <romain@delanoe.me>
Date: Wed, 15 Apr 2020 18:39:07 +0200
Subject: [PATCH] finish modal

---
 resources/js/components/Modal.vue        | 13 ------------
 resources/js/views/Memo/MemoEdit.vue     |  2 --
 resources/js/views/Memo/MemoShow.vue     | 21 ++++++++++---------
 resources/sass/app.scss                  |  1 +
 resources/sass/components/_elements.scss |  4 ++++
 resources/sass/components/modal.scss     | 26 ++++++++++++++++++++++++
 resources/sass/setup/_containers.scss    |  2 ++
 7 files changed, 44 insertions(+), 25 deletions(-)
 delete mode 100644 resources/js/components/Modal.vue

diff --git a/resources/js/components/Modal.vue b/resources/js/components/Modal.vue
deleted file mode 100644
index 3417335..0000000
--- a/resources/js/components/Modal.vue
+++ /dev/null
@@ -1,13 +0,0 @@
-<template>
-    $END$
-</template>
-
-<script>
-    export default {
-        name: "Modal"
-    }
-</script>
-
-<style scoped>
-
-</style>
diff --git a/resources/js/views/Memo/MemoEdit.vue b/resources/js/views/Memo/MemoEdit.vue
index 6f23e54..b968c40 100755
--- a/resources/js/views/Memo/MemoEdit.vue
+++ b/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>
diff --git a/resources/js/views/Memo/MemoShow.vue b/resources/js/views/Memo/MemoShow.vue
index 815944e..64e9bf1 100755
--- a/resources/js/views/Memo/MemoShow.vue
+++ b/resources/js/views/Memo/MemoShow.vue
@@ -2,20 +2,21 @@
     <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">
-                    <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 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 v-if="modal" class="modal-background" @click="modal = ! modal" />
+                <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>
             </div>
     <!--           <TagBox :memo="memo" />-->
             <h1 class="memo-title flex-center">{{ memo.name }}</h1>
diff --git a/resources/sass/app.scss b/resources/sass/app.scss
index e3cb039..2e91e1c 100644
--- a/resources/sass/app.scss
+++ b/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";
diff --git a/resources/sass/components/_elements.scss b/resources/sass/components/_elements.scss
index f6095ab..dfa71dd 100644
--- a/resources/sass/components/_elements.scss
+++ b/resources/sass/components/_elements.scss
@@ -36,3 +36,7 @@ a {
         color: $dark;
     }
 }
+
+pre {
+
+}
diff --git a/resources/sass/components/modal.scss b/resources/sass/components/modal.scss
index e69de29..b32ff51 100644
--- a/resources/sass/components/modal.scss
+++ b/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;
+    }
+}
diff --git a/resources/sass/setup/_containers.scss b/resources/sass/setup/_containers.scss
index 7735c30..219617d 100644
--- a/resources/sass/setup/_containers.scss
+++ b/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;