add base structure for card text as textref

src/assets/scss/main.scss

@@ -6,3 +6,31 @@
 html, body, #app {
   height: 100%;
 }
+
+main {
+  height: calc(100vh - 56px);
+}
+
+// Layouts
+
+.view {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.split-screen {
+  display: flex;
+  height: 100%;
+
+  & > * {
+    flex-basis: 50%;
+  }
+}
+
+.container-fill {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+}

src/components/text/TextCard.vue

@@ -1,5 +1,54 @@
 <template>
-  <component-debug :component="this" />
+  <b-card no-body tag="article" class="text-card">
+    <b-overlay class="h-100" :show="loading">
+      <div v-if="text" class="container-fill">
+        <b-card-header header-tag="header">
+          <h4>
+            <span>{{ text.authors | list }},</span>
+            <span>{{ text.title }},</span>
+            <span>{{ text.edition }}</span>
+          </h4>
+
+          <b-nav class="ml-auto flex-nowrap">
+            <b-nav-item v-for="prod in text.prods" :key="prod.id">
+              {{ prod.id }}
+            </b-nav-item>
+
+            <b-nav-item>
+              x
+            </b-nav-item>
+          </b-nav>
+        </b-card-header>
+
+        <b-card-body v-html="text.content" />
+
+        <b-card-footer>
+          <b-badge
+            v-for="tag in text.tags" :key="tag.id"
+            variant="dark" pill
+          >
+            {{ tag.name }}
+          </b-badge>
+
+          <b-button
+            v-if="text.bounces"
+            :id="'bounces-' + text.id"
+          >
+            Textes rebonds
+          </b-button>
+          <b-popover :target="'bounces-' + text.id" triggers="click" placement="top">
+            <div v-for="bounce in text.bounces" :key="bounce.id">
+              <h6>
+                <span>{{ bounce.authors | list }},</span>
+                <span>{{ bounce.title }},</span>
+                <span>{{ bounce.edition }}</span>
+              </h6>
+            </div>
+          </b-popover>
+        </b-card-footer>
+      </div>
+    </b-overlay>
+  </b-card>
 </template>
 
 <script>
@@ -10,11 +59,35 @@ export default {
     id: { type: Number, required: true }
   },
 
+  data () {
+    return {
+      loading: true,
+      text: null
+    }
+  },
+
+  filters: {
+    list (arr) {
+      return arr.map(({ name }) => name).join(', ')
+    }
+  },
+
   created () {
-    console.log('CREATED TEXTCARD', this.id)
+    this.$store.dispatch('GET_TEXT', { id: this.id }).then((text) => {
+      this.text = text
+      this.loading = false
+    })
   }
 }
 </script>
 
 <style lang="scss" scoped>
+header {
+  display: flex;
+
+  h4 {
+    display: flex;
+    flex-direction: column;
+  }
+}
 </style>

src/main.js

@@ -9,7 +9,9 @@ import App from './App'
 
 
 Vue.use(BootstrapVue, {
-  BButton: { pill: true }
+  BButton: { pill: true },
+  BCardHeader: { headerBgVariant: 'white' },
+  BCardFooter: { footerBgVariant: 'white' }
 })
 Vue.use(Meta)
 Vue.use(Vue2TouchEvents)

src/pages/Library.vue

@@ -1,13 +1,21 @@
 <template>
-  <component-debug :component="this">
+  <component-debug :component="this" class="view">
     <div class="py-3">
       <b-button @click="openText">
         add text 50
       </b-button>
     </div>
 
+    <!-- BACKGROUND (mode) -->
     <component :is="mode" />
-    <text-card v-for="group in groups" :key="group.id" :id="group.id" />
+
+    <!-- FOREGROUND (texts) -->
+    <section v-for="group in groups" :key="group.id" class="split-screen">
+      <text-card :id="group.id" />
+      <div>
+        <text-card v-for="id in group.prod" :key="id" :id="id" />
+      </div>
+    </section>
   </component-debug>
 </template>