finish memos cover

resources/js/components/UploadableImage.vue

@@ -0,0 +1,89 @@
+<template>
+    <div>
+        <img
+            v-if="image"
+            :class="classes"
+            :src="imageObject.data.attributes.path"
+            ref="image"
+            :alt="alt">
+    </div>
+</template>
+
+<script>
+    import Dropzone from 'dropzone'
+    import { mapGetters } from 'vuex'
+
+    export default {
+        name: "UploadableImage",
+        props: {
+            imageWidth: {
+                type: Number,
+                required: true,
+            },
+            imageHeight: {
+                type: Number,
+                required: true,
+            },
+            location: {
+                type: String,
+                required: true
+            },
+            image: {
+                type: Object,
+                default: null,
+            },
+            author: {
+                type: Object,
+                required: true
+            },
+            id: {
+                type: Number,
+                required: true
+            },
+            model: {
+                type: String,
+                required: true
+            },
+            classes: String,
+            alt: String
+        },
+        data: () => {
+            return {
+                dropzone: null,
+                dropImage: null,
+            }
+        },
+        mounted() {
+            if(this.authUser.data.user_id === this.author.data.user_id) {
+                this.dropzone = new Dropzone(this.$refs.image, this.settings)
+            }
+        },
+        computed: {
+            ...mapGetters({
+                authUser: 'authUser'
+            }),
+            settings() {
+                let url = '/api/images/' + this.model + '/' + this.id
+                return {
+                    paramName: 'image',
+                    url: url,
+                    acceptedFiles: 'image/*',
+                    params: {
+                        'width': this.imageWidth,
+                        'height': this.imageHeight,
+                        'location': this.location,
+                    },
+                    headers: {
+                        'X-CSRF-TOKEN': document.head.querySelector('meta[name=csrf-token]').content
+                    },
+                    success: (e, res) => {
+                        this.dropImage = res
+                    }
+                }
+            },
+            imageObject() {
+                return this.dropImage || this.image
+            }
+        }
+    }
+</script>

resources/js/router.js

@@ -1,7 +1,7 @@
 import Vue from 'vue'
 import VueRouter from 'vue-router'
 import Home from "./views/Home"
-import Profil from "./views/User/UserProfil";
+import Profil from "./views/User/UserProfile";
 import DashBoard from "./views/DashBoard";
 import CssTesteur from "./views/CssTesteur";
 import MemoIndex from "./views/Memo/MemoIndex";

resources/js/views/Memo/MemoEdit.vue

@@ -1,33 +1,51 @@
 <template>
-    <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>
-        </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 class="memo-edit">
+        <div class="relative">
+            <UploadableImage
+                v-if="!loading"
+                :image-width=1500
+                :image-height=500
+                location="cover"
+                :image="form.attributes.cover_image"
+                :author="form.attributes.posted_by"
+                :id="form.memo_id"
+                :model="form.type"
+                classes="cover"
+                :alt="form.name"/>
+            <div class="flex-between ml-2 mt-1 absolute t-0">
+                <router-link :to="'/memos/' + this.$route.params.id" class="btn-secondary">< Back</router-link>
             </div>
+        </div>
+        <div class="p-2">
+            <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>
+
+            </form>
+        </div>
 
-        </form>
     </div>
 </template>
 
 <script>
     import InputField from "../../components/InputField";
     import TextAreaField from "../../components/TextAreaField";
+    import UploadableImage from "../../components/UploadableImage";
 
     export default {
         name: "MemoEdit",
         components: {
-            InputField, TextAreaField
+            InputField, TextAreaField, UploadableImage
         },
         data: function () {
             return {
                 form: {
                     'name': '',
                     'memo': '',
+                    'attributes': {}
                 },
                 errors: null,
                 loading: true,

resources/js/views/Memo/MemoIndex.vue

@@ -10,8 +10,11 @@
                 <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="card">
-                <h1>{{ memo.data.name }}</h1>
-                <div class="memo-date">{{ memo.data.last_updated }}</div>
+                <div>
+                    <img :src="memo.data.attributes.cover_image.data.attributes.path" alt="" class="cover">
+                    <h1 class="p-1">{{ memo.data.name }}</h1>
+                </div>
+                <div class="memo-date p-1">{{ memo.data.last_updated }}</div>
             </router-link>
         </div>
     </div>

resources/js/views/Memo/MemoShow.vue

@@ -1,27 +1,39 @@
 <template>
-    <div class="p-2">
+    <div>
         <Loader v-if="loading" />
         <div v-else>
-            <div class="flex-between flex-center mb-1 relative">
-                <router-link to="/memos/" class="btn">< Back</router-link>
-                <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 class="relative">
+                <img
+                    v-if="!loading"
+                    class="cover"
+                    :src="memo.attributes.cover_image.data.attributes.path"
+                />
+                <div class="flex-col flex-between absolute memo-cover">
+                    <div class="flex-between px-2 py-1">
+                        <router-link to="/memos/" class="btn-secondary">< Back</router-link>
+                        <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 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>
-                </div>
-                <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>
+                    <h1 class="memo-title flex-center">{{ memo.name }}</h1>
                 </div>
             </div>
     <!--           <TagBox :memo="memo" />-->
-            <h1 class="memo-title flex-center">{{ memo.name }}</h1>
-            <p class="memo-style pt-1" v-html="memoMarkdown"></p>
-            <div class="memo-change">@last update : {{ memo.last_updated }}</div>
+            <div class="p-2">
+
+                <p class="memo-style pt-1" v-html="memoMarkdown"></p>
+                <div class="memo-change">@last update : {{ memo.last_updated }}</div>
+            </div>
         </div>
     </div>
 </template>

resources/sass/app.scss

@@ -15,6 +15,7 @@
 @import "components/nav";
 @import "components/topbar";
 @import "components/modal";
+@import "components/images";
 @import "components/avatar";
 @import "components/alert_box";
 @import "components/search_box";

resources/sass/components/images.scss

@@ -0,0 +1,10 @@
+.cover {
+    width: 100%;
+    //height: 100%;
+    object-fit: cover;
+    object-position: 50% 50%;
+}
+
+.test {
+    height: 30rem;
+}

resources/sass/pages/memos.scss

@@ -33,6 +33,18 @@
         padding: 0.5rem 1rem;
     }
 
+    &-title {
+        color: $white;
+        text-shadow: 1px 1px 2px $dark;
+        background-image: linear-gradient(transparent, rgba(0,0,0,0.7));
+    }
+
+    &-cover {
+        height: calc(100% - 5px);
+        top: 0;
+        width: 100%;
+    }
+
 }
 
 .memo-edit {

resources/sass/setup/_containers.scss

@@ -8,7 +8,7 @@
 .card {
     background-color: $light;
     display: flex;
-    padding: 1rem;
+    //padding: 1rem;
     box-shadow: 1px 1px 2px $grey;
     border-radius: 2px;
     text-decoration: none;

resources/sass/setup/_positions.scss

@@ -55,6 +55,10 @@ $base: 1rem;
     width: 100%;
 }
 
+.h-100{
+    height: 100%;
+}
+
 .m-auto {
     margin-left: auto;
     margin-right: auto;
@@ -127,6 +131,22 @@ $base: 1rem;
     }
 }
 
+.t-0 {
+    top: 0;
+}
+
+.l-0 {
+    left: 0;
+}
+
+.r-0 {
+    right: 0;
+}
+
+.b-0 {
+    bottom: 0;
+}
+
 .z-10 {
     z-index: 10;
 }