From 18fbf2f601046b176930ba60707882f62c5c521d Mon Sep 17 00:00:00 2001
From: Romulus21 <romain@delanoe.me>
Date: Sun, 26 Jul 2020 22:15:30 +0200
Subject: [PATCH] refact theme todo with bug drag

---
 resources/js/components/App.vue               |  2 +-
 resources/js/views/CssTesteur.vue             | 46 ++++++++++++++++++-
 resources/js/views/DashBoard.vue              |  2 +-
 resources/js/views/Home.vue                   |  2 +-
 resources/js/views/Memo/MemoCreate.vue        | 14 +++---
 resources/js/views/Memo/MemoEdit.vue          |  4 +-
 resources/js/views/Memo/MemoIndex.vue         | 16 +++----
 resources/js/views/Memo/MemoShow.vue          |  2 +-
 resources/js/views/ToDoLists/ToDo.vue         |  2 +-
 .../js/views/ToDoLists/ToDoListIndex.vue      |  6 +--
 resources/js/views/ToDoLists/ToDoListShow.vue | 13 ++++--
 resources/js/views/User/ProfileUser.vue       |  2 +-
 resources/js/views/User/ShowUser.vue          |  2 +-
 resources/sass/components/_base.scss          | 15 +++++-
 resources/sass/components/_elements.scss      |  4 ++
 15 files changed, 99 insertions(+), 33 deletions(-)

diff --git a/resources/js/components/App.vue b/resources/js/components/App.vue
index 72621c0..2527fc7 100644
--- a/resources/js/components/App.vue
+++ b/resources/js/components/App.vue
@@ -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>
diff --git a/resources/js/views/CssTesteur.vue b/resources/js/views/CssTesteur.vue
index c64d7f4..697d244 100644
--- a/resources/js/views/CssTesteur.vue
+++ b/resources/js/views/CssTesteur.vue
@@ -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">
diff --git a/resources/js/views/DashBoard.vue b/resources/js/views/DashBoard.vue
index e45996f..ad326e0 100644
--- a/resources/js/views/DashBoard.vue
+++ b/resources/js/views/DashBoard.vue
@@ -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>
diff --git a/resources/js/views/Home.vue b/resources/js/views/Home.vue
index edef07a..9d25755 100644
--- a/resources/js/views/Home.vue
+++ b/resources/js/views/Home.vue
@@ -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" />
diff --git a/resources/js/views/Memo/MemoCreate.vue b/resources/js/views/Memo/MemoCreate.vue
index b340166..e68ee0c 100755
--- a/resources/js/views/Memo/MemoCreate.vue
+++ b/resources/js/views/Memo/MemoCreate.vue
@@ -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>
diff --git a/resources/js/views/Memo/MemoEdit.vue b/resources/js/views/Memo/MemoEdit.vue
index 735b641..a72ba63 100755
--- a/resources/js/views/Memo/MemoEdit.vue
+++ b/resources/js/views/Memo/MemoEdit.vue
@@ -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>
diff --git a/resources/js/views/Memo/MemoIndex.vue b/resources/js/views/Memo/MemoIndex.vue
index ad99b7d..0cad847 100755
--- a/resources/js/views/Memo/MemoIndex.vue
+++ b/resources/js/views/Memo/MemoIndex.vue
@@ -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>
diff --git a/resources/js/views/Memo/MemoShow.vue b/resources/js/views/Memo/MemoShow.vue
index 78ff544..5d1607d 100755
--- a/resources/js/views/Memo/MemoShow.vue
+++ b/resources/js/views/Memo/MemoShow.vue
@@ -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>
diff --git a/resources/js/views/ToDoLists/ToDo.vue b/resources/js/views/ToDoLists/ToDo.vue
index dd19373..eae126f 100644
--- a/resources/js/views/ToDoLists/ToDo.vue
+++ b/resources/js/views/ToDoLists/ToDo.vue
@@ -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>
diff --git a/resources/js/views/ToDoLists/ToDoListIndex.vue b/resources/js/views/ToDoLists/ToDoListIndex.vue
index 05508e8..63ef920 100644
--- a/resources/js/views/ToDoLists/ToDoListIndex.vue
+++ b/resources/js/views/ToDoLists/ToDoListIndex.vue
@@ -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>
diff --git a/resources/js/views/ToDoLists/ToDoListShow.vue b/resources/js/views/ToDoLists/ToDoListShow.vue
index e1f26ec..e1f7899 100644
--- a/resources/js/views/ToDoLists/ToDoListShow.vue
+++ b/resources/js/views/ToDoLists/ToDoListShow.vue
@@ -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)
diff --git a/resources/js/views/User/ProfileUser.vue b/resources/js/views/User/ProfileUser.vue
index 461096e..34938d5 100644
--- a/resources/js/views/User/ProfileUser.vue
+++ b/resources/js/views/User/ProfileUser.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="-mx-2 -mt-2">
+    <div>
         <div class="relative">
             <UploadableImage
                 :image-width=1500
diff --git a/resources/js/views/User/ShowUser.vue b/resources/js/views/User/ShowUser.vue
index 859ee81..d420919 100644
--- a/resources/js/views/User/ShowUser.vue
+++ b/resources/js/views/User/ShowUser.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="-mx-2 -mt-2">
+    <div>
         <div class="relative">
             <img
                 class="cover"
diff --git a/resources/sass/components/_base.scss b/resources/sass/components/_base.scss
index f43a565..c99e067 100644
--- a/resources/sass/components/_base.scss
+++ b/resources/sass/components/_base.scss
@@ -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;
+}
diff --git a/resources/sass/components/_elements.scss b/resources/sass/components/_elements.scss
index 4035e69..a1b4222 100644
--- a/resources/sass/components/_elements.scss
+++ b/resources/sass/components/_elements.scss
@@ -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;
+}