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

todo & memo style

Browse Source
This commit is contained in:
Romulus21
2020-04-30 23:36:40 +02:00
parent ebb1c58f90
commit d56857bf43
7 changed files with 87 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
resources/js/views/Memo/MemoCreate.vue
View File

@@ -2,15 +2,11 @@
<div class="p-4">
<div class="flex justify-between flex-center mb-4">
<router-link to="/memos/" class="btn">Back</router-link>
<button @click="$router.back()" class="btn-alert">Cancel</button>
<button class="btn-primary">Add New Memo</button>
</div>
<form @submit.prevent="submitForm">
<InputField name="name" label="Title" placeholder="Your Title" required @update:field="form.name = $event" :errors="errors" />
<TextAreaField class="" name="memo" placeholder="Your Memo" required @update:field="form.memo = $event" :errors="errors" />
<div class="flex justify-end mt-2">
<button class="btn-primary">Add New Memo</button>
</div>
</form>
</div>
</template>

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

@@ -14,16 +14,13 @@
:alt="form.name"/>
</div>
<div class="p-4">
<form @submit.prevent="submitForm">
<div class="flex justify-between mb-4">
<router-link :to="'/memos/' + this.$route.params.id" class="btn">Back</router-link>
</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 justify-end mt-2">
<button class="btn-primary">Save</button>
</div>
<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" />
</form>
</div>

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

@@ -30,8 +30,8 @@
<!-- <TagBox :memo="memo" />-->
<div class="p-4">
<p class="pt-2" v-html="memoMarkdown"></p>
<div class="bg-orange-400 rounded mt-2 px-2 py-1 flex justify-end">@last update {{ memo.last_updated }}</div>
<div class="memo-style p-4 pb-3 -mb-1 bg-white" v-html="memoMarkdown"></div>
<div class="bg-orange-400 px-2 py-1 flex justify-end">@last update {{ memo.last_updated }}</div>
</div>
</div>
</div>

2
resources/js/views/ToDoLists/ToDo.vue
View File

@@ -1,7 +1,7 @@
<template>
<li class="todo flex justify-between items-center bg-white rounded mb-1 px-2 py-1"
>
<div class="flex flex-1" draggable="true">
<div class="flex flex-1">
<svg-vue icon="draggable" class="w-4 block mr-2 cursor-move" />
{{ toDo.data.attributes.data.name }}
</div>

33
resources/js/views/ToDoLists/ToDoList.vue
View File

@@ -3,7 +3,11 @@
<div class="m-2 px-2 pt-2 bg-orange-400 rounded flex flex-col justify-between shadow">
<div>
<h1 class="text-2xl font-bold mb-2">{{ toDoList.data.attributes.data.name }}</h1>
<ul class="draggable-list">
<ul class="draggable-list drop-zone"
@drop='onDrop($event, toDoList)'
@dragover.prevent
@dragenter.prevent
>
<div v-if="toDoList.data.attributes.data.to_dos.to_dos_count < 1">
------- no to Do -------
</div>
@@ -11,7 +15,11 @@
v-for="(toDo, indexToDo) in toDoList.data.attributes.data.to_dos.data"
:key="indexToDo"
:toDo="toDo"
:position="indexToDo" />
:position="indexToDo"
draggable
@dragstart='startDrag($event, toDo)'
class='drag-el'
/>
</ul>
</div>
<div class="flex items-center mt-2">
@@ -25,6 +33,7 @@
<script>
import InputField from '../../components/InputField'
import ToDo from './ToDo'
//https://learnvue.co/2020/01/how-to-add-drag-and-drop-to-your-vuejs-project/
export default {
name: 'ToDoList',
@@ -35,7 +44,7 @@ export default {
return {
name: '',
errors: null,
list: null,
dragStartIndex: null,
edit: false,
}
},
@@ -45,10 +54,6 @@ export default {
require: true
}
},
mounted() {
this.list = this.$el.querySelector('.draggable-list')
console.log(this.list)
},
methods: {
addToDo: function () {
// eslint-disable-next-line no-undef
@@ -70,7 +75,19 @@ export default {
.catch(errorRes => {
console.log('Internal Error, Unable to delete contact.' + errorRes)
})
}
},
startDrag: (evt, item) => {
console.log('StartDrag', evt, item)
evt.dataTransfer.dropEffect = 'move'
evt.dataTransfer.effectAllowed = 'move'
evt.dataTransfer.setData('itemID', item.id)
},
onDrop (evt, list) {
console.log('onDrop', evt, list, this.toDoList)
const itemID = evt.dataTransfer.getData('itemID')
const item = this.toDoList.data.attributes.data.to_dos.data.find(item => item.id == itemID)
item.list = list
},
}
}
</script>

2
resources/sass/app.scss vendored
View File

@@ -26,7 +26,7 @@
//
//@import "pages/auth";
//@import "pages/users";
//@import "pages/memos";
@import "pages/memos";
//@import "pages/meteo";
//@import "pages/games";
//

55
resources/sass/pages/memos.scss vendored
View File

@@ -1,3 +1,4 @@
/*
.memo {
&-list {
@@ -81,3 +82,57 @@
width: 100%;
}
}
*/
.memo-style {
h1,
h2,
h3,
h4 {
@apply font-bold;
}
h1 {
@apply text-4xl;
}
h2 {
@apply text-3xl;
}
h3 {
@apply text-2xl;
}
h4 {
@apply text-xl;
}
p {
@apply mb-2 mt-1;
text-indent: 2rem;
}
pre,
code {
@apply bg-gray-700 text-white p-1;
}
pre {
@apply my-2;
}
blockquote {
@apply bg-gray-300 italic p-2 mx-4 my-2;
}
ul {
@apply list-disc ml-8;
}
ol {
@apply list-decimal ml-8;
}
}