remove text cards
This commit is contained in:
axolotle
@@ -1,82 +0,0 @@
|
|||||||
<template>
|
|
||||||
<text-card-base v-bind="$attrs">
|
|
||||||
<template v-slot:header-extra="{ text }">
|
|
||||||
<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"
|
|
||||||
>
|
|
||||||
{{ $t('variants.' + child.variant) }}
|
|
||||||
</dot-button>
|
|
||||||
</li>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<li>
|
|
||||||
<button-close @click="onSelfClose($event, text.id)" />
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</nav>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<template v-slot:footer-extra="{ text, toCommaList }">
|
|
||||||
<b-button
|
|
||||||
v-if="text.siblings"
|
|
||||||
:id="'siblings-' + text.id"
|
|
||||||
size="sm"
|
|
||||||
>
|
|
||||||
{{ $t('siblings') }}
|
|
||||||
</b-button>
|
|
||||||
<b-popover
|
|
||||||
v-if="text.siblings"
|
|
||||||
:target="'siblings-' + text.id" triggers="hover" placement="top"
|
|
||||||
>
|
|
||||||
<div v-for="sibling in text.siblings" :key="sibling.id">
|
|
||||||
<h6 @click="onSiblingOpen($event, sibling.id)" class="clickable">
|
|
||||||
<span class="text-authors d-block">{{ toCommaList(sibling.authors) }},</span>
|
|
||||||
<span class="text-title d-block">{{ sibling.title }},</span>
|
|
||||||
<span class="text-edition d-block">{{ text.edition ? text.edition.name : text.edition }}</span>
|
|
||||||
</h6>
|
|
||||||
</div>
|
|
||||||
</b-popover>
|
|
||||||
</template>
|
|
||||||
</text-card-base>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import TextCardBase from './TextCardBase'
|
|
||||||
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'TextCard',
|
|
||||||
|
|
||||||
components: {
|
|
||||||
TextCardBase
|
|
||||||
},
|
|
||||||
|
|
||||||
props: {
|
|
||||||
children: { type: Array, default: null }
|
|
||||||
},
|
|
||||||
|
|
||||||
methods: {
|
|
||||||
onChildOpen (_, id, childId) {
|
|
||||||
this.$emit('open', id, childId)
|
|
||||||
},
|
|
||||||
|
|
||||||
onSiblingOpen (_, id) {
|
|
||||||
this.$emit('open', id)
|
|
||||||
},
|
|
||||||
|
|
||||||
onSelfClose (e, id) {
|
|
||||||
// stop the click event propagation to avoid other listeners to interact with a soon to be deleted element.
|
|
||||||
e.stopPropagation()
|
|
||||||
this.$emit('close', id)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
</style>
|
|
||||||
@@ -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>
|
|
||||||
@@ -1,28 +0,0 @@
|
|||||||
<template>
|
|
||||||
<text-card-base v-bind="$attrs" ellipsis>
|
|
||||||
<template v-slot:footer-extra="{ text }">
|
|
||||||
<b-button @click="$emit('open', text.id)" variant="outline-dark">
|
|
||||||
{{ $t('text.read') }}
|
|
||||||
</b-button>
|
|
||||||
</template>
|
|
||||||
</text-card-base>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import TextCardBase from './TextCardBase'
|
|
||||||
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'TextMiniCard',
|
|
||||||
|
|
||||||
components: {
|
|
||||||
TextCardBase
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.text-card {
|
|
||||||
box-shadow: .5rem .5rem 1rem rgba($black, .25);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
Reference in New Issue
Block a user