css memos show

This commit is contained in:
2020-03-29 11:27:15 +02:00
parent 0b3183a7fb
commit d748314a7a
2 changed files with 54 additions and 67 deletions

View File

@@ -1,74 +1,28 @@
<template> <template>
<div class="p-2"> <div class="p-2">
<div <div v-if="loading" >> Loading...</div>
v-if="loading" <div v-else>
> <div class="flex-between flex-center mb-1">
> Loading... <a href="#" class="link" @click="$router.back()">< Back</a>
</div> <div class="relative">
<div v-else> <router-link :to="'/memos/' + memo.memo_id + '/edit'" class="btn-secondary mr-1" >Edit</router-link>
<div class="flex-between flex-center mb-1"> <a href="#" class="btn-alert" @click="modal = ! modal">Delete</a>
<a <div v-if="modal" class="absolute modal mt-2">
href="#" <p>Are you sure you want to delete this record ?</p>
class="link" <div class="flex-end flex-center mt-2">
@click="$router.back()" <button class="btn mr-2" @click="modal = ! modal">Cancel</button>
>< Back</a> <button class="btn-alert-strong" @click="destroy"> Delete</button>
<div class="relative"> </div>
<router-link </div>
:to="'/memos/' + memo.memo_id + '/edit'" </div>
class="btn-secondary mr-1" <div v-if="modal" class="modal-background" @click="modal = ! modal" />
>
Edit
</router-link>
<a
href="#"
class="btn-alert"
@click="modal = ! modal"
>
Delete
</a>
<div
v-if="modal"
class="absolute modal mt-2"
>
<p>Are you sure you want to delete this record ?</p>
<div class="flex-end flex-center mt-2">
<button
class="btn mr-2"
@click="modal = ! modal"
>
Cancel
</button>
<button
class="btn-alert-strong"
@click="destroy"
>
Delete
</button>
</div> </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> </div>
<div
v-if="modal"
class="modal-background"
@click="modal = ! modal"
/>
</div> </div>
<!-- <TagBox :memo="memo" />-->
<p class="title-section pt-3">
Memo
</p>
<h1 class="memo-title">
{{ memo.name }}
</h1>
<p
class="memo-style pt-1"
v-html="memoMarkdown"
></p>
<div class="memo-change my-2 p-1">
@last update : {{ memo.last_updated }}
</div>
</div>
</div>
</template> </template>
<script> <script>

View File

@@ -27,6 +27,12 @@
opacity: 0.6; opacity: 0.6;
} }
&-change {
text-align: right;
background: $greyLight;
padding: 0.5rem 1rem;
}
} }
.memo-edit { .memo-edit {
@@ -36,3 +42,30 @@
} }
} }
.memo-style {
p {
margin: 0.25rem 0 0.5rem;
}
code,
pre {
background-color: $greyLight;
}
pre {
padding: 0.5rem;
}
a {
color: $greyLight;
&:hover {
text-decoration: underline;
}
}
img {
width: 100%;
}
}