From e80ab6e3756809adb979aa53efa1e1a34d20e782 Mon Sep 17 00:00:00 2001
From: Julien Calixte <juliencalixte@gmail.com>
Date: Thu, 13 May 2021 16:57:04 +0200
Subject: [PATCH] :lipstick: (note) fix share note display

---
 src/components/FluxNote.vue |  1 -
 src/views/ShareNotes.vue    | 22 +++++++++++++++++++++-
 2 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/src/components/FluxNote.vue b/src/components/FluxNote.vue
index 170d2c8..63389be 100644
--- a/src/components/FluxNote.vue
+++ b/src/components/FluxNote.vue
@@ -218,7 +218,6 @@ $header-height: 40px;
     .note {
       min-width: var(--note-width);
       max-width: var(--note-width);
-      height: auto;
     }
   }
 
diff --git a/src/views/ShareNotes.vue b/src/views/ShareNotes.vue
index 668239c..10dfd4e 100644
--- a/src/views/ShareNotes.vue
+++ b/src/views/ShareNotes.vue
@@ -7,6 +7,7 @@
     </article>
     <flux-note
       key="share-notes"
+      class="notes"
       :user="user"
       :repo="repo"
       :content="content"
@@ -16,7 +17,8 @@
 </template>
 
 <script lang="ts">
-import { defineAsyncComponent, defineComponent, ref } from 'vue'
+import { useQueryStackedNotes } from '@/hooks/useQueryStackedNotes.hook'
+import { defineAsyncComponent, defineComponent, onMounted, ref } from 'vue'
 
 const FluxNote = defineAsyncComponent(() => import('@/components/FluxNote.vue'))
 
@@ -32,6 +34,11 @@ export default defineComponent({
   },
   setup() {
     const content = ref('Getting stacked notes...')
+    const { resetStackedNotes } = useQueryStackedNotes()
+
+    onMounted(() => {
+      resetStackedNotes()
+    })
 
     return {
       content
@@ -42,8 +49,21 @@ export default defineComponent({
 
 <style scoped lang="scss">
 .share-notes {
+  background-color: var(--background-color);
+  min-width: 100vw;
+  margin: auto;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
   article {
     margin: 1rem;
   }
 }
+
+@media print {
+  article {
+    display: none;
+  }
+}
 </style>