From d748314a7ab029390e225b99e5071c6ea674dc7d Mon Sep 17 00:00:00 2001
From: Romulus21 <romain@delanoe.me>
Date: Sun, 29 Mar 2020 11:27:15 +0200
Subject: [PATCH] css memos show

---
 resources/js/views/Memo/MemoShow.vue | 88 +++++++---------------------
 resources/sass/pages/memos.scss      | 33 +++++++++++
 2 files changed, 54 insertions(+), 67 deletions(-)

diff --git a/resources/js/views/Memo/MemoShow.vue b/resources/js/views/Memo/MemoShow.vue
index 801176f..424788d 100755
--- a/resources/js/views/Memo/MemoShow.vue
+++ b/resources/js/views/Memo/MemoShow.vue
@@ -1,74 +1,28 @@
 <template>
-  <div class="p-2">
-    <div
-      v-if="loading"
-    >
-      > Loading...
-    </div>
-    <div v-else>
-      <div class="flex-between flex-center mb-1">
-        <a
-          href="#"
-          class="link"
-          @click="$router.back()"
-        >< Back</a>
-        <div class="relative">
-          <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
-            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 class="p-2">
+        <div v-if="loading" >> Loading...</div>
+        <div v-else>
+            <div class="flex-between flex-center mb-1">
+                <a href="#" class="link" @click="$router.back()">< Back</a>
+                <div class="relative">
+                    <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 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>
+                <div v-if="modal" class="modal-background" @click="modal = ! modal" />
             </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
-          v-if="modal"
-          class="modal-background"
-          @click="modal = ! modal"
-         />
     </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>
 
 <script>
diff --git a/resources/sass/pages/memos.scss b/resources/sass/pages/memos.scss
index 0f879cf..12f87bb 100644
--- a/resources/sass/pages/memos.scss
+++ b/resources/sass/pages/memos.scss
@@ -27,6 +27,12 @@
         opacity: 0.6;
     }
 
+    &-change {
+        text-align: right;
+        background: $greyLight;
+        padding: 0.5rem 1rem;
+    }
+
 }
 
 .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%;
+    }
+}