css memos show
This commit is contained in:
@@ -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>
|
||||||
|
|||||||
33
resources/sass/pages/memos.scss
vendored
33
resources/sass/pages/memos.scss
vendored
@@ -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%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user