PronounsPage/components/AcademicReference.vue

<template>
    <div>
        <p class="reference">
            <LinkedText :text="entry.reference" />
            <span v-for="lang in entry.lang || []" class="badge bg-light text-dark border">{{ lang }}</span>
            <a v-if="!details" href="#" class="badge text-bg-light border ms-2" @click.prevent="details = true">
                <Icon v="angle-right" /> <T>links.translinguistics.details</T>
            </a>
            <a v-else href="#" class="badge text-bg-primary ms-2" @click.prevent="details = false">
                <Icon v="angle-down" /> <T>links.translinguistics.details</T>
            </a>
        </p>
        <div v-if="details" class="my-2">
            <p v-for="p in entry.abstract" class="abstract">
                <LinkedText :text="p" />
            </p>
        </div>
        <ul v-if="details" class="list-inline abstract">
            <li class="list-inline-item">
                <T>links.translinguistics.tags</T><T>quotation.colon</T>
            </li>
            <li v-for="tag in entry.tags" class="list-inline-item">
                <span class="badge text-bg-primary">{{ tag }}</span>
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    props: {
        entry: { required: true },
    },
    data() {
        return {
            details: false,
        };
    },
};
</script>


<style lang="scss">
$reference-indent: 3rem;
.reference {
    padding-left: $reference-indent;
    text-indent: -$reference-indent;
    a:not(.badge) {
        font-weight: bold;
    }
    .badge {
        text-indent: 0;
        user-select: none;
    }
}
.abstract {
    padding-left: $reference-indent !important;
}
</style>