style: mobile, sidebar, editor

app.vue

@@ -9,4 +9,8 @@
 body {
   margin: 0;
 }
+
+p {
+  margin: 12px 0;
+}
 </style>

components/editor.vue

@@ -52,8 +52,8 @@ function formatDate(d: string): string {
       </div>
     </div>
     <div class="date"> {{ formatDate(data.updatedAt || data.createdAt) }} </div>
-    <div v-show="isMarked" class="textarea-wrap">
-      <div v-html="formatedTitle"></div>
+    <div v-show="isMarked" class="textarea-wrap textarea-mark">
+      <div v-html="formatedTitle" class="title"></div>
       <div v-html="formatedText"></div>
     </div>
     <div v-show="!isMarked" class="textarea-wrap">
@@ -101,21 +101,30 @@ function formatDate(d: string): string {
   color: #838280;
 }
 
+.title {
+  font-weight: bold;
+}
+
 .textarea-wrap {
-  padding: 15px 10px;
+  font-size: 14px;
+  padding: 10px;
   height: 100%;
 }
 
+.textarea-mark {
+  padding: 0px 12px;
+}
+
 .textarea {
   font-family: 'Roboto', sans-serif;
   font-size: 14px;
-  width: 100% !important;
+  width: 100%;
   border: none;
   outline: none;
 }
 
 .textarea.title {
-  font-weight: bold;
+  height: 22px;
 }
 
 .textarea.text {

components/sidebar.vue

@@ -6,6 +6,10 @@ let notes: Ref<Array<Note.TNote>> = ref([]);
 let noteToEdit: Ref<Note.TNote | null> = ref(null);
 let q: Ref<string> = ref("");
 
+onBeforeMount(async () => {
+  notes.value = await Note.getAll();
+});
+
 const filteredNotes = computed<Array<Note.TNote>>(() => {
   return notes.value.filter(
     (n: Note.TNote) => (
@@ -15,10 +19,6 @@ const filteredNotes = computed<Array<Note.TNote>>(() => {
   );
 });
 
-onBeforeMount(async () => {
-  notes.value = await Note.getAll();
-});
-
 const removeNote = async () => {
   const note = notes.value.find(n => n.isActive);
   if (!note) return;
@@ -91,7 +91,7 @@ function formatDate(d: string): string {
         :class="['note', { _active: note.isActive }]">
         <div class="border">
           <div class="title">{{ note.title }}</div>
-          <div>
+          <div class="note-content">
             <span class="time">{{ formatDate(note.updatedAt || note.createdAt) }}</span>
             <span class="text">{{ truncateText(note.text) }}</span>
           </div>
@@ -122,6 +122,9 @@ function formatDate(d: string): string {
 
 .border {
   padding: 16px 0;
+}
+
+.note:not(:last-child) .border {
   border-bottom: 1px solid #e5e5e5;
 }
 

pages/index.vue

@@ -21,4 +21,29 @@
   width: 14px;
   cursor: pointer;
 }
+
+@media screen and (max-width: 400px) {
+  .sidebar {
+    padding: 5px;
+    width: 30%;
+  }
+
+  .note-content {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .editor {
+    padding: 10px;
+    width: 70%;
+  }
+
+  .icon {
+    margin: 5px 10px;
+  }
+
+  .editor .date {
+    margin-top: 15px;
+  }
+}
 </style>