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

refact theme todo with bug drag

Browse Source
This commit is contained in:
Romulus21
2020-07-26 22:15:30 +02:00
parent 8f66aee23d
commit 18fbf2f601
15 changed files with 99 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
resources/js/components/App.vue
View File

@@ -4,7 +4,7 @@
<div v-if="authUser" class="w-full overflow-y-auto">
<TopBar />
<main>
<router-view :key="$route.fullPath" class="mx-2 p-2 bg-gray-200"></router-view>
<router-view :key="$route.fullPath" class="bg-gray-200"></router-view>
</main>
</div>
</div>

46
resources/js/views/CssTesteur.vue
View File

@@ -1,5 +1,5 @@
<template>
<div>
<div class="mx-2 p-2">
<div class="flex flex-wrap -mx-2">
<div class="w-full sm:w-1/2 md:w-1/3 lg:w-1/4 mb-4">
<div class="card bg-marine text-white shadow">
@@ -59,6 +59,50 @@
<div class="text-2xl font-bold">1 m 32 s</div>
</div>
</div>
<div class="flex-initial sm:w-1/2 md:w-1/3 lg:w-1/4 mb-4">
<div class="card">
<div class="flex justify-between">
<span>Session duration best of</span>
<span class="flex-none text-green text-sm">189 %</span>
</div>
<div class="text-2xl font-bold">1 m 32 s</div>
</div>
</div>
<div class="flex-initial sm:w-1/2 md:w-1/3 lg:w-1/4 mb-4">
<div class="card">
<div class="-m-4">
<img src="https://portal.bricooli.fr/storage/images/default-cover.jpg" alt="" class="w-full rounded rounded-b-none">
</div>
<div class="h-full flex flex-col mt-6">
<h1 class="text-xl text-marine">Memo Name test</h1>
<span class="mt-auto self-end bg-gray-400 text-white tag">Il y a 3 mois</span>
</div>
</div>
</div>
<div class="flex-initial sm:w-1/2 md:w-1/3 lg:w-1/4 mb-4">
<div class="card">
<div class="-m-4">
<img src="https://portal.bricooli.fr/storage/images/default-cover.jpg" alt="" class="w-full rounded rounded-b-none">
</div>
<div class="h-full flex flex-col mt-6">
<h1 class="text-xl text-marine">Memo Name test</h1>
<p class="no-indent">Anim consequat duis culpa in anim aliquip dolore amet laboris eu fugiat commodo reprehenderit aute amet velit sit culpa et proident irure pariatur</p>
<span class="mt-auto self-end bg-gray-400 text-white tag">Il y a 3 mois</span>
</div>
</div>
</div>
<div class="flex-initial sm:w-1/2 md:w-1/3 lg:w-1/4 mb-4">
<div class="card">
<div class="-m-4">
<img src="https://portal.bricooli.fr/storage/images/default-cover.jpg" alt="" class="w-full rounded rounded-b-none">
</div>
<div class="h-full flex flex-col mt-6">
<h1 class="text-xl text-marine">Memo Name test</h1>
<p class="no-indent">Anim consequat duis culpa in anim aliquip dolore amet laboris eu fugiat commodo reprehenderit</p>
<span class="mt-auto self-end bg-gray-400 text-white tag">Il y a 3 mois</span>
</div>
</div>
</div>
</div>
<div class="box">

2
resources/js/views/DashBoard.vue
View File

@@ -1,5 +1,5 @@
<template>
<div>
<div class="mx-2 p-2">
<div class="box">
<div class="flex justify-between">
<h1 class="page-title">Administration</h1>

2
resources/js/views/Home.vue
View File

@@ -1,5 +1,5 @@
<template>
<div>
<div class="mx-2 p-2">
<div class="flex flex-wrap -mx-2">
<OpenWeatherCard class="w-full sm:w-1/2 md:w-1/3 lg:w-1/4 mb-4" />
<MemoHome class="w-full sm:w-1/2 md:w-1/3 lg:w-1/3 mb-4" />

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

@@ -1,12 +1,12 @@
<template>
<div class="p-4">
<form @submit.prevent="submitForm">
<div class="flex justify-between flex-center mb-4">
<router-link to="/memos/" class="btn">Back</router-link>
<button class="btn-primary">Add New Memo</button>
</div>
<div class="mx-2 p-2">
<div class="flex justify-between flex-center mb-4">
<router-link to="/memos/" class="btn">Back</router-link>
<button class="btn-primary">Add New Memo</button>
</div>
<form @submit.prevent="submitForm" class="box">
<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" />
<TextAreaField name="memo" placeholder="Your Memo" required @update:field="form.memo = $event" :errors="errors" />
</form>
</div>
</template>

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

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

16
resources/js/views/Memo/MemoIndex.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="p-4">
<div class="mx-2 p-2">
<div class="flex justify-between flex-center mb-4">
<a href="#" class="btn" @click="$router.back()">Back</a>
<router-link :to="'/memos/create'" class="btn-primary">Add New Memo</router-link>
@@ -9,14 +9,14 @@
<div v-if="memos.lenght === 0">
<p>No memos yet. <router-link to="/memos/create">Get Started ></router-link></p>
</div>
<router-link v-for="memo in memos" :key="memo.data.memo_id" :to="'/memos/' + memo.data.memo_id" class="w-full sm:w-1/2 md:w-1/3 lg:w-1/4">
<div class="m-2 max-w-lg rounded overflow-hidden shadow-lg bg-white">
<img :src="memo.data.attributes.thumbnail_cover_image.data.attributes.path" alt="" class="w-full">
<div class="px-6 py-4">
<h1 class="text-gray-700">{{ memo.data.name }}</h1>
<router-link v-for="memo in memos" :key="memo.data.memo_id" :to="'/memos/' + memo.data.memo_id" class="flex-initial sm:mx-auto md:w-1/2 md:mx-0 lg:w-1/3 xl:w-1/4 mb-4 no-underline">
<div class="card">
<div class="-m-4">
<img :src="memo.data.attributes.thumbnail_cover_image.data.attributes.path" alt="" class="w-full rounded rounded-b-none">
</div>
<div class="flex justify-end py-2">
<span class="inline-block bg-gray-400 text-white rounded-full px-3 py-1 text-sm font-semibold mr-2">{{ memo.data.last_updated }}</span>
<div class="h-full flex flex-col mt-6">
<h1 class="text-xl text-marine">{{ memo.data.name }}</h1>
<span class="mt-auto self-end bg-gray-400 text-white tag">{{ memo.data.last_updated }}</span>
</div>
</div>
</router-link>

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

@@ -30,7 +30,7 @@
<!-- <TagBox :memo="memo" />-->
<div class="p-4">
<div class="memo-style rounded-t-sm p-4 pb-3 -mb-1 bg-white" v-html="memoMarkdown"></div>
<div class="box memo-style rounded-t-sm p-4 pb-3 -mb-1 bg-white" v-html="memoMarkdown"></div>
<div class="bg-gray-400 text-white rounded-b-sm px-2 py-1 flex justify-end">@last update<span class="font-semibold ml-1">{{ memo.last_updated }}</span></div>
</div>
</div>

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

@@ -15,7 +15,7 @@
<input type="text"
v-model="toDo.data.attributes.data.name"
@keypress.enter="updateToDo"
class="flex-1 rounded-sm border border-primary-600 pl-1">
class="flex-1 rounded-sm border border-primary-600 p-0 pl-1">
<span @click="edit = !edit">
<svg-vue icon="close" class="inline w-4 fill-current cursor-pointer mx-2" />
</span>

6
resources/js/views/ToDoLists/ToDoListIndex.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="p-4">
<div class="mx-2 p-2">
<div v-if="modal" class="modal-container" @click="modal = ! modal"></div>
<div v-if="modal" class="modal px-2">
<p class="m-2 text-center">Add a new to-do list ?</p>
@@ -22,8 +22,8 @@
:key="index"
:to="'/to-do-lists/' + toDoList.data.to_do_list_id"
:to-do-list="toDoList"
class="w-full sm:w-1/2 md:w-1/3 lg:w-1/4" >
<div class="bg-gray-300 rounded text-black m-2 p-2">
class="w-full sm:w-1/2 md:w-1/3 lg:w-1/4 no-underline" >
<div class="rounded bg-white text-black m-2 p-2">
<div class="flex justify-between">
<span class="font-bold">{{ toDoList.data.attributes.data.name }}</span>
<span>

13
resources/js/views/ToDoLists/ToDoListShow.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="px-4 py-2">
<div class="mx-2 p-2">
<div v-if="modal" class="modal-container" @click="modal = ! modal"></div>
<div v-if="modal" class="modal">
<p class="m-2 text-center">Are you sure you want to delete this list ?</p>
@@ -12,15 +12,18 @@
<router-link to="/to-do-lists/" class="btn">Back</router-link>
<a href="#" class="btn-alert" @click="modal = ! modal">Delete</a>
</div>
<div v-if="!loading" class="bg-gray-400 rounded p-1">
<h1 class="mb-2 ml-2 todo" >
<div v-if="!loading" class="bg-marine-medium rounded p-1">
<h1 class="mb-2 ml-2 h-10 todo text-white flex items-center" >
<span v-if="!listNameEdit" class="text-2xl font-bold flex items-center">{{ toDoList.data.attributes.data.name }}
<span @click="listNameEdit = !listNameEdit">
<svg-vue icon="edit" class="edit-icon inline w-4 fill-current cursor-pointer ml-2" />
</span>
</span>
<span v-else class="flex items-center">
<input type="text" class="p-1 rounded-sm mt-1 -ml-1" v-model="listName" @keydown.enter="updateList">
<input type="text"
class="px-1 py-0 text-2xl text-white font-bold bg-marine-medium rounded-sm -ml-1"
v-model="listName"
@keydown.enter="updateList">
<span @click="listNameEdit = !listNameEdit">
<svg-vue icon="close" class="inline w-4 fill-current cursor-pointer ml-2" />
</span>
@@ -96,12 +99,14 @@ export default {
},
methods: {
startDrag: (evt, item) => {
console.log('start', item)
evt.dataTransfer.dropEffect = 'move'
evt.dataTransfer.effectAllowed = 'move'
evt.dataTransfer.setData('toDoID', item.data.to_do_id)
evt.dataTransfer.setData('toDoOrder', item.data.attributes.data.order)
},
onDrop (evt, toDoEnd) {
console.log('drop', evt, toDoEnd)
const toDoID = parseInt(evt.dataTransfer.getData('toDoID'), 10)
const toDoOrder = parseInt(evt.dataTransfer.getData('toDoOrder'), 10)
let toDoMove = this.toDoList.data.attributes.data.to_dos.data.find(toDo => toDo.data.to_do_id === toDoID)

2
resources/js/views/User/ProfileUser.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="-mx-2 -mt-2">
<div>
<div class="relative">
<UploadableImage
:image-width=1500

2
resources/js/views/User/ShowUser.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="-mx-2 -mt-2">
<div>
<div class="relative">
<img
class="cover"

15
resources/sass/components/_base.scss vendored
View File

@@ -26,10 +26,15 @@ p {
text-indent: 2rem;
}
input {
input,
textarea {
@apply border py-2 px-4 rounded;
}
textarea {
@apply ;
}
.text-shadow {
text-shadow: 1px 1px 2px #000;
}
@@ -65,3 +70,11 @@ input {
.min-h-16 {
min-height: 4rem;
}
.indent {
text-indent: 2rem;
}
.no-indent {
text-indent: unset;
}

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

@@ -66,3 +66,7 @@ a {
.box {
@apply bg-white rounded p-4 my-2;
}
.tag {
@apply inline-block rounded-full px-3 py-1 text-sm font-semibold;
}