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