update Cards with new styles and buttons

src/assets/scss/base/_root.scss

@@ -32,23 +32,9 @@ main {
 
 
 // TEMP
-.text-authors {
-  font: {
-    size: 1.2em;
-  }
-}
-
-.text-title {
-  font: {
-    size: 1em;
-    style: italic;
-    weight: normal;
-  }
-}
-
 .text-edition {
   font: {
-    size: .8em;
+    size: .57em;
     weight: normal;
   }
 }
@@ -57,10 +43,6 @@ main {
   cursor: pointer;
 }
 
-.card-footer {
-  display: flex;
-  justify-content: space-between;
-}
 
 .tags {
   > :not(:last-of-type) {

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>
+      <nav class="nav-list ml-auto">
-        <template v-if="children">
+        <ul>
-          <b-nav-item
+          <template v-if="children">
-            v-for="child in text.children" :key="child.id"
+            <li v-for="child in text.children" :key="child.id">
-            @click="onChildOpen($event, text.id, child.id)"
+              <dot-button
-            :active="children.includes(child.id)"
+                @click="onChildOpen($event, text.id, child.id)"
-          >
+                :active="children.includes(child.id)" :variant="child.variant"
-            {{ child.id }}
+              >
-          </b-nav-item>
+                {{ child.families[0].name }}
-        </template>
+              </dot-button>
+            </li>
+          </template>
 
-        <b-nav-item>
+          <li>
-          <b-button-close @click="onSelfClose($event, text.id)" />
+            <b-button-close size="sm" @click="onSelfClose($event, text.id)" />
-        </b-nav-item>
+          </li>
-      </b-nav>
+        </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">
+        <b-card-header header-tag="header" :header-bg-variant="null">
-          <h4>
+          <div class="d-flex w-100">
-            <template v-if="text.type === 'Textref'">
+            <h4 class="mr-auto">
-              <span class="text-authors d-block">{{ toCommaList(text.authors) }},</span>
+              <template v-if="text.type === 'Textref'">
-              <span class="text-title d-block">{{ text.title }},</span>
+                <div class="text-authors">
-              <span class="text-edition d-block">{{ text.edition ? text.edition.name : text.edition }}</span>
+                  {{ toCommaList(text.authors) }},
-            </template>
+                </div>
-            <template v-else>
+              </template>
-              {{ text.families[0].name }}
+              <template v-else>
-            </template>
+                {{ text.families[0].name }}
-          </h4>
+              </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 {
+.card-header {
-  display: flex;
+  background-color: transparent;
 
   h4 {
-    display: flex;
+    margin: 0;
-    flex-direction: column;
+    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>

src/pages/Library.vue

@@ -9,12 +9,12 @@
         v-for="(parent, i) in parents" :key="parent.id"
         class="main-text-container text-break"
         :style="`--n: ${i};`"
+        :class="{ 'text-blur': i !== parents.length - 1 }"
       >
         <text-card
           :id="parent.id"
           :children="parent.children"
-          :class="{ 'text-blur': i !== parents.length - 1 }"
+          class="text-card-main"
-          class="text-card"
           @open="openText" @close="closeText"
           @click.native="onMainTextClick(i)"
         />
@@ -23,12 +23,12 @@
           <text-card
             v-for="(id, j) in parent.children" :key="id"
             :id="id"
-            class="text-card text-break"
+            class="text-card-sub text-break"
-            :class="{ 'text-blur': i !== parents.length - 1 || j !== parent.children.length - 1 }"
             :style="`--n: ${j};`"
             @close="closeText(parent.id, $event)"
             @click.native="onSubTextClick(i, j)"
           />
+          <!-- :class="{ 'text-blur': i !== parents.length - 1 || j !== parent.children.length - 1 }" -->
         </section>
       </section>
     </div>
@@ -140,16 +140,13 @@ export default {
 }
 
 .main-text-container {
+  border-top: 2px solid $black;
   display: flex;
   width: 100%;
 
   > * {
     flex-basis: 50%;
   }
-
-  // &:not(:last-of-type) .sub-texts-container {
-  //   background-color: rgba($white, .5);
-  // }
 }
 
 .sub-texts-container {

src/pages/library/CardList.vue

@@ -1,15 +1,17 @@
 <template>
   <div class="card-list">
-    <div v-for="(parents, char) in orderedParents" :key="char">
+    <div class="card-list-container">
-      <h3>{{ char }}</h3>
+      <div v-for="(parents, char) in orderedParents" :key="char">
-      <b-card-group deck>
+        <h3>{{ char }}</h3>
-        <text-mini-card
+        <div class="text-group">
-          v-for="parent in parents" :key="parent.id"
+          <text-mini-card
-          :id="parent.id"
+            v-for="parent in parents" :key="parent.id"
-          :text-data="parent"
+            :id="parent.id"
-          @open="$emit('open', $event)"
+            :text-data="parent"
-        />
+            @open="$emit('open', $event)"
-      </b-card-group>
+          />
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -30,30 +32,53 @@ export default {
 
   computed: {
     ...mapGetters(['orderedParents'])
-  },
-
-  created () {
-    this.$store.dispatch('GET_TEXTS_DEPART')
   }
 }
 </script>
 
 <style lang="scss" scoped>
 .card-list {
-  overflow: auto;
+  overflow-y: auto;
   height: 100%;
+
+  &-container {
+    overflow-x: hidden;
+    padding: 0 1.5rem;
+  }
+
+  h3 {
+    font-family: $font-family-text;
+    line-height: 1;
+    font-size: 16.5rem;
+  }
 }
 
-.card-deck {
+.text-group {
+  display: flex;
+  flex-wrap: wrap;
+
   .card {
-    flex-basis: auto;
+    margin-bottom: 3.4375rem;
-    @include media-breakpoint-up(md) {
+    $marg: 4.6875rem;
-      flex-basis: 50%;
+    width: 100%;
-      max-width: calc(50% - 30px);
+    height: 20rem;
+
+    @include media-breakpoint-only(md) {
+      max-width: calc(50% - #{($marg / 2)});
+      margin-right: $marg;
+
+      &:nth-of-type(2n) {
+        margin-right: 0;
+      }
     }
+
     @include media-breakpoint-up(lg) {
-      flex-basis: 33%;
+      margin-right: $marg;
-      max-width: calc(33.3% - 30px);
+      max-width: calc(33.33% - #{(($marg * 2) / 3)});
+
+      &:nth-of-type(3n) {
+        margin-right: 0;
+      }
     }
   }
 }