finish memos cover

This commit is contained in:
2020-04-18 15:58:48 +02:00
parent e9b4fb573f
commit a12af09102
27 changed files with 661 additions and 32 deletions

View File

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

View File

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

View File

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