From c9d82f7244e9f99a2e129b26f99f3b526e717775 Mon Sep 17 00:00:00 2001
From: Ntkskwk <natsukawa247@outlook.com>
Date: Tue, 10 Sep 2024 15:16:06 +0800
Subject: feat: improve css styles for better layout

---
 src/views/index/Notepad/changelog.ts |  2 +-
 src/views/index/Notepad/index.vue    | 21 ++++++++++++++-------
 2 files changed, 15 insertions(+), 8 deletions(-)

(limited to 'src/views/index/Notepad')

diff --git a/src/views/index/Notepad/changelog.ts b/src/views/index/Notepad/changelog.ts
index 9d2b523..00ff4a4 100644
--- a/src/views/index/Notepad/changelog.ts
+++ b/src/views/index/Notepad/changelog.ts
@@ -6,7 +6,7 @@ export const changelog = async ():Promise<NotepadContent> =>
     const title = "Changelog"
     return http.get('https://api.github.com/repos/HydroRoll-Team/HydroRoll/releases/latest')
       .then(res => {
-        const message = "## " + res.data['tag_name'] + "\n" + res.data['body'];
+        const message = "## " + res.data['tag_name'] + "\n" + res.data['body'].trimEnd();
         return new NotepadContent(title,message)
       })
       .catch(err => {
diff --git a/src/views/index/Notepad/index.vue b/src/views/index/Notepad/index.vue
index 2d4f037..4dcde33 100644
--- a/src/views/index/Notepad/index.vue
+++ b/src/views/index/Notepad/index.vue
@@ -14,35 +14,42 @@ export default {
 
 
 <template>
-  <div class="details" style="overflow-y:hidden;overflow-x:hidden;height:100%">
+  <div class="details" style="height:100%">
     <h3>
       {{ content.title }}
     </h3>
-    <v-md-preview :text="content.message" ></v-md-preview>
+    <div class="content">
+      <v-md-preview :text="content.message"></v-md-preview>
+    </div>  
   </div>
 </template>
 
 
 <style scoped>
 
+.details {
+  flex: 1;
+  float: right;
+  height: 100%;
+  padding: 0 10dvw;
+}
 
 h3 {
-  font-size: 1.8rem;
+  font-size: 1.5rem;
   font-weight: 500;
   margin-bottom: 0.4rem;
   color: var(--color-heading);
 }
 
-.details {
-  flex: 1;
-  width: 60dvw;
-  float: right;
+.content {
+  overflow-x: auto;
 }
 
 @media screen and (orientation:landscape) {
   .details {
     flex: 1;
     width: 32dvw;
+    padding: 0;
   }
 }
 </style>
-- 
cgit v1.2.3-70-g09d2