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

finish modal

Browse Source
This commit is contained in:
Romulus21
2020-04-15 18:39:07 +02:00
parent 1e56daf807
commit e9b4fb573f
7 changed files with 44 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
resources/js/components/Modal.vue
View File

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

2
resources/js/views/Memo/MemoEdit.vue
View File

@@ -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>

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

@@ -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>

1
resources/sass/app.scss vendored
View File

@@ -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";

4
resources/sass/components/_elements.scss vendored
View File

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

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

@@ -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;
}
}

2
resources/sass/setup/_containers.scss vendored
View File

@@ -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;