|
@@ -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>
|
|
|
-
|
|
|
- <slot name="header-extra" :text="text" />
|
|
|
+ <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>
|
|
|
+
|
|
|
+ <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>
|