update Cards with new styles and buttons

src/components/text/TextCard.vue

@@ -1,21 +1,24 @@
 <template>
   <text-card-base v-bind="$attrs">
     <template v-slot:header-extra="{ text }">
-      <b-nav class="ml-auto flex-nowrap" pills>
-        <template v-if="children">
-          <b-nav-item
-            v-for="child in text.children" :key="child.id"
-            @click="onChildOpen($event, text.id, child.id)"
-            :active="children.includes(child.id)"
-          >
-            {{ child.id }}
-          </b-nav-item>
-        </template>
+      <nav class="nav-list ml-auto">
+        <ul>
+          <template v-if="children">
+            <li v-for="child in text.children" :key="child.id">
+              <dot-button
+                @click="onChildOpen($event, text.id, child.id)"
+                :active="children.includes(child.id)" :variant="child.variant"
+              >
+                {{ child.families[0].name }}
+              </dot-button>
+            </li>
+          </template>
 
-        <b-nav-item>
-          <b-button-close @click="onSelfClose($event, text.id)" />
-        </b-nav-item>
-      </b-nav>
+          <li>
+            <b-button-close size="sm" @click="onSelfClose($event, text.id)" />
+          </li>
+        </ul>
+      </nav>
     </template>
 
     <template v-slot:footer-extra="{ text, toCommaList }">

src/components/text/TextCardBase.vue

@@ -1,26 +1,53 @@
 <template>
-  <b-card no-body tag="article" class="text-card">
+  <b-card
+    no-body tag="article"
+    class="text-card rounded-0"
+    :class="text ? 'text-card-'+ text.variant : ''"
+  >
     <b-overlay class="h-100" :show="loading">
       <div v-if="text" class="container-fill">
-        <b-card-header header-tag="header">
-          <h4>
-            <template v-if="text.type === 'Textref'">
-              <span class="text-authors d-block">{{ toCommaList(text.authors) }},</span>
-              <span class="text-title d-block">{{ text.title }},</span>
-              <span class="text-edition d-block">{{ text.edition ? text.edition.name : text.edition }}</span>
-            </template>
-            <template v-else>
-              {{ text.families[0].name }}
-            </template>
-          </h4>
+        <b-card-header header-tag="header" :header-bg-variant="null">
+          <div class="d-flex w-100">
+            <h4 class="mr-auto">
+              <template v-if="text.type === 'Textref'">
+                <div class="text-authors">
+                  {{ toCommaList(text.authors) }},
+                </div>
+              </template>
+              <template v-else>
+                {{ text.families[0].name }}
+              </template>
+            </h4>
+            <slot name="header-extra" :text="text" />
+          </div>
 
-          <slot name="header-extra" :text="text" />
+          <div v-if="text.type === 'Textref'">
+            <div class="text-title font-weight-normal">
+              <span v-if="text.field_titre_regular" v-html="text.field_titre_regular + ','" />
+              <span v-html="(text.field_titre_italique || '<em>pas de titre ital</em>') + ','" />
+            </div>
+            <div class="text-edition">
+              {{ text.edition ? text.edition.name : text.edition }}
+            </div>
+          </div>
         </b-card-header>
 
         <b-card-body :class="ellipsis ? 'ellipsis' : 'overflow-auto'">
           <div class="text-content" v-html="text.content" />
 
-          <div class="text-notes mt-5" v-if="text.notes">
+          <div v-if="text.type === 'Textref'" class="debug">
+            <div class="">
+              'titre_regular': {{ text.field_titre_regular }}
+            </div>
+            <div class="">
+              'titre_italique: {{ text.field_titre_italique }}
+            </div>
+            <div class="">
+              'lien_reference': {{ text.lien_reference }}
+            </div>
+          </div>
+          <div class="debug" v-if="text.notes">
+            Notes:
             <div v-for="note in text.notes" :key="note.number" class="mb-4 border border-dark p-2">
               <p class="m-0">
                 <span class="font-weight-bold">Numéro de note :</span> {{ note.number || 'aucun ?' }}
@@ -108,16 +135,71 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-article {
+.card {
   height: 100%;
 }
 
-header {
-  display: flex;
+.card-header {
+  background-color: transparent;
 
   h4 {
-    display: flex;
-    flex-direction: column;
+    margin: 0;
+    font-size: 2rem;
+  }
+}
+
+.card-header,
+.card-body {
+  font-family: $font-family-text;
+  font-size: 2rem;
+}
+
+.card-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+}
+
+@each $color, $value in $theme-colors {
+  .text-card-#{$color} {
+    background-color: lighten($value, 3.25%);
+
+    &.text-card-sub header {
+      color: darken($value, 32%);
+    }
+  }
+}
+
+.text-card-main {
+  border-right: 2px solid $black;
+
+  .card-header,
+  .card-body {
+    padding: 1.625rem 1.625rem 1.625rem 2.5rem;
+  }
+
+  .card-header,
+  .card-header h4,
+  .card-body {
+    font-size: 2.625rem;
+  }
+}
+
+.text-card-sub {
+  border-left: none;
+
+  .card-header {
+    padding: 1.625rem 1.875rem;
+    font-size: 1.5rem !important;
+
+    h4 {
+      margin: 0;
+    }
+  }
+
+  .card-body {
+    padding: 0 1.875rem 1.625rem;
+    font-size: 1.5rem !important;
   }
 }
 
@@ -125,4 +207,14 @@ header {
   max-height: 10rem;
   overflow: hidden;
 }
+
+::v-deep img {
+  font-size: .5rem;
+}
+
+.debug {
+  font-family: monospace;
+  font-size: 1rem;
+  margin: 2rem 0;
+}
 </style>

src/components/text/TextMiniCard.vue

@@ -1,7 +1,7 @@
 <template>
   <text-card-base v-bind="$attrs" ellipsis>
     <template v-slot:footer-extra="{ text }">
-      <b-button @click="$emit('open', text.id)" size="sm">
+      <b-button @click="$emit('open', text.id)" variant="outline-dark">
         {{ $t('text.read') }}
       </b-button>
     </template>
@@ -22,4 +22,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.text-card {
+  box-shadow: .5rem .5rem 1rem rgba($black, .25);
+}
 </style>