|
@@ -1,214 +0,0 @@
|
|
|
-<template>
|
|
|
- <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" :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>
|
|
|
- {{ $t('variants.' + text.variant) }}
|
|
|
- </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.preTitle" v-html="text.field_titre_regular + ','" />
|
|
|
- <span v-html="(text.title || '<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 v-if="text.type === 'Textref'" class="debug">
|
|
|
- <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 ?' }}
|
|
|
- </p>
|
|
|
-
|
|
|
- <p class="m-0 font-weight-bold">
|
|
|
- Contenu :
|
|
|
- </p>
|
|
|
- <div v-if="note.content" v-html="note.content" />
|
|
|
- <div v-else>
|
|
|
- Aucun ?
|
|
|
- </div>
|
|
|
-
|
|
|
- <p class="m-0 font-weight-bold">
|
|
|
- Liens :
|
|
|
- </p>
|
|
|
- <ul v-if="note.links">
|
|
|
- <li v-for="link in note.links" :key="link.id" class="">
|
|
|
- <span class="text-authors">{{ toCommaList(link.authors) }}</span>,
|
|
|
- <span class="text-title">{{ link.title }}</span> —
|
|
|
- <span>{{ link.families[0].name }}</span>
|
|
|
- (id: {{ link.id }})
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
- <div v-else>
|
|
|
- Aucun
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </b-card-body>
|
|
|
-
|
|
|
- <b-card-footer>
|
|
|
- <div class="tags">
|
|
|
- <b-badge
|
|
|
- v-for="tag in text.tags" :key="tag.id"
|
|
|
- variant="dark" pill
|
|
|
- >
|
|
|
- {{ tag.name }}
|
|
|
- </b-badge>
|
|
|
- </div>
|
|
|
-
|
|
|
- <slot name="footer-extra" v-bind="{ text, toCommaList }" />
|
|
|
- </b-card-footer>
|
|
|
- </div>
|
|
|
- </b-overlay>
|
|
|
- </b-card>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
-export default {
|
|
|
- name: 'TextCardBase',
|
|
|
-
|
|
|
- props: {
|
|
|
- id: { type: Number, required: true },
|
|
|
- textData: { type: Object, default: null },
|
|
|
- ellipsis: { type: Boolean, default: false }
|
|
|
- },
|
|
|
-
|
|
|
- data () {
|
|
|
- return {
|
|
|
- loading: this.textData === null,
|
|
|
- text: this.textData
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
- methods: {
|
|
|
- toCommaList (arr) {
|
|
|
- // FIXME TEMP some texts doesn't have authors
|
|
|
- try {
|
|
|
- return arr.map(({ name }) => name).join(', ')
|
|
|
- } catch {
|
|
|
- return arr
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
- created () {
|
|
|
- if (this.text !== null) return
|
|
|
- this.$store.dispatch('GET_NODE', { id: this.id }).then((text) => {
|
|
|
- this.text = text
|
|
|
- this.loading = false
|
|
|
- })
|
|
|
- }
|
|
|
-}
|
|
|
-</script>
|
|
|
-
|
|
|
-<style lang="scss" scoped>
|
|
|
-.card {
|
|
|
- height: 100%;
|
|
|
-}
|
|
|
-
|
|
|
-.card-header {
|
|
|
- background-color: transparent;
|
|
|
-
|
|
|
- h4 {
|
|
|
- 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;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-.ellipsis {
|
|
|
- max-height: 10rem;
|
|
|
- overflow: hidden;
|
|
|
-}
|
|
|
-
|
|
|
-::v-deep img {
|
|
|
- font-size: .5rem;
|
|
|
-}
|
|
|
-
|
|
|
-.debug {
|
|
|
- font-family: monospace;
|
|
|
- font-size: 1rem;
|
|
|
- margin: 2rem 0;
|
|
|
-}
|
|
|
-</style>
|