feat(ui): list & editor v1

src/components/StoryArticle.vue

@@ -33,8 +33,8 @@ defineProps<{ story: Story }>()
 <style lang="scss">
 .story-article {
   p {
-    .display-mode-EDITOR &,
-    .display-mode-PLAYER & {
+    .mode-EDITOR &,
+    .mode-PLAYER & {
       @apply inline-block text-white;
       text-shadow: black 2px 2px 3px;
     }

src/components/StoryContainer.vue

@@ -1,5 +1,5 @@
 <template>
-  <section :class="'story display-mode-' + story.displayMode">
+  <section :class="'story mode-' + story.displayMode">
     <aside
       v-if="story.displayMode === 'EDITOR'"
       class="story-tools fixed inline-block bg-white bg-opacity-50 m-10 z-10 top-0 left-0 w-7 h-7 md:w-auto md:h-auto overflow-hidden"
@@ -56,20 +56,21 @@ onMounted(() => {
 .story {
   transition: padding 0.5s ease-in-out;
   @apply p-8;
-  &.display-mode-EDITOR,
-  &.display-mode-PLAYER {
-    @apply p-0;
+  &.mode-EDITOR,
+  &.mode-PLAYER {
+    @apply p-0 z-50;
     .story-openseadragon {
       @apply top-0 left-0 w-screen;
       position: relative !important;
     }
   }
 
-  &.display-mode-HIDDEN {
+  &.mode-HIDDEN {
     @apply p-0 h-0;
+    width: 0% !important;
   }
 
-  &.display-mode-ARTICLE {
+  &.mode-ARTICLE {
     @apply w-full bg-white hover:bg-slate-200 hover:cursor-pointer;
     .openseadragon-canvas {
       pointer-events: none !important;
@@ -81,11 +82,11 @@ onMounted(() => {
 .story-openseadragon {
   transition: height 0.5s ease-in-out;
   height: 33vh;
-  .display-mode-EDITOR &,
-  .display-mode-PLAYER & {
+  .mode-EDITOR &,
+  .mode-PLAYER & {
     @apply h-screen;
   }
-  .display-mode-HIDDEN & {
+  .mode-HIDDEN & {
     @apply h-0;
   }
 }
@@ -93,17 +94,17 @@ onMounted(() => {
 .story-article {
   position: relative;
   top: 0;
-  .display-mode-PLAYER & {
+  .mode-PLAYER & {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
   }
-  .display-mode-EDITOR & {
+  .mode-EDITOR & {
     @apply p-0 h-0 w-0 overflow-hidden opacity-0;
   }
 
-  .display-mode-HIDDEN & {
+  .mode-HIDDEN & {
     @apply p-0 h-0 w-0 overflow-hidden;
   }
 }

src/components/StoryList.vue

@@ -1,4 +1,12 @@
 <template>
+  <div class="story-list">
+    <StoryContainer
+      v-for="story in stories"
+      :key="story.id"
+      :story="story"
+      @click="setOpenStory(story)"
+    />
+  </div>
   <button
     v-if="isAppModeFullscreen"
     @click="closeStories()"
@@ -6,18 +14,12 @@
   >
     x
   </button>
-  <StoryCanvas
-    v-for="story in stories"
-    :key="story.id"
-    :story="story"
-    @click="setOpenStory(story)"
-  />
 </template>
 
 <script setup lang="ts">
 import { onMounted, ref } from 'vue'
 import type { Story } from '@/types/virages'
-import StoryCanvas from './StoryContainer.vue'
+import StoryContainer from './StoryContainer.vue'
 import datas from '@/assets/stories.json'
 
 const stories = ref<Story[]>(datas)
@@ -29,12 +31,14 @@ const setOpenStory = (story: Story) => {
   })
   story.displayMode = 'EDITOR'
   isAppModeFullscreen.value = true
+  document.body.classList.add('app-fullscreen')
 }
 const closeStories = () => {
   stories.value.forEach((story) => {
     story.displayMode = 'ARTICLE'
   })
   isAppModeFullscreen.value = false
+  document.body.classList.remove('app-fullscreen')
 }
 
 const keyboardShortcut = () => {
@@ -49,3 +53,18 @@ onMounted(() => {
   keyboardShortcut()
 })
 </script>
+
+<style lang="scss">
+.story-list {
+  @apply flex flex-wrap;
+  .app-fullscreen & {
+    @apply block;
+  }
+  .story {
+    @apply grow lg:w-1/3;
+    &:nth-child(3) {
+      @apply w-full;
+    }
+  }
+}
+</style>