TheCloud/PronounsPage
1
0
Fork 0
mirror of https://gitlab.com/PronounsPage/PronounsPage.git synced 2025-09-27 15:05:38 -04:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'expandable-list'

Browse Source
This commit is contained in:
Andrea Vos 2022-12-10 11:12:32 +01:00
commit a040b50487
2 changed files with 74 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
components/ExpandableList.vue Normal file
View File

@ -0,0 +1,53 @@
<template>
<ul>
<li v-for="(el, i) in values">
<template v-if="allShown || i < showLimit">
<slot v-bind:el="el" v-bind:i="i">
{{ el }}
</slot>
</template>
</li>
<li v-if="!allShown && hiddenCount > 0" class="small">
<span v-if="static">
<Icon v="plus-circle"/>
<T :params="{count: hiddenCount}">profile.expendableList.more</T>
</span>
<a v-else href="#" @click.prevent="allShown = true">
<Icon v="plus-circle"/>
<T :params="{count: hiddenCount}">profile.expendableList.more</T>
<br/>
<Icon v=""/>
<T>profile.expendableList.show</T>
</a>
</li>
</ul>
</template>
<script>
export default {
props: {
values: { required: true },
limit: { required: true },
static: { type: Boolean },
},
data() {
let showLimit = this.values.length;
let hiddenCount = 0;
if (this.values.length > this.limit) {
showLimit = this.limit;
hiddenCount = this.values.length - this.limit;
}
if (hiddenCount === 1) {
showLimit--;
hiddenCount++;
}
return {
allShown: false,
showLimit,
hiddenCount,
}
},
}
</script>

37
components/Profile.vue
View File

@ -63,9 +63,11 @@
<T>profile.names</T> <T>profile.names</T>
</h3> </h3>
<ul class="list-unstyled"> <ExpandableList :values="profile.names" :limit="16" class="list-unstyled" :static="expandLinks">
<li v-for="{value: name, opinion} in profile.names"><Opinion :word="convertName(name)" :opinion="opinion" :escape="false" :customOpinions="profile.opinions"/></li> <template v-slot="s">
</ul> <Opinion :word="convertName(s.el.value)" :opinion="s.el.opinion" :escape="false" :customOpinions="profile.opinions"/>
</template>
</ExpandableList>
</div> </div>
<div v-if="profile.pronouns.length" :class="['col-6', mainRowCount === 3 ? 'col-lg-4' : 'col-lg-6']"> <div v-if="profile.pronouns.length" :class="['col-6', mainRowCount === 3 ? 'col-lg-4' : 'col-lg-6']">
<h3> <h3>
@ -73,11 +75,11 @@
<T>profile.pronouns</T> <T>profile.pronouns</T>
</h3> </h3>
<ul class="list-unstyled"> <ExpandableList :values="pronounOpinions" :limit="16" class="list-unstyled" :static="expandLinks">
<li v-for="{link, pronoun, opinion} in pronounOpinions"> <template v-slot="s">
<Opinion :word="typeof pronoun === 'string' ? pronoun : pronoun.name(glue)" :opinion="opinion" :link="`/${link}`" :customOpinions="profile.opinions"/> <Opinion :word="typeof s.el.pronoun === 'string' ? s.el.pronoun : s.el.pronoun.name(glue)" :opinion="s.el.opinion" :link="`/${s.el.link}`" :customOpinions="profile.opinions"/>
</li> </template>
</ul> </ExpandableList>
</div> </div>
<div v-if="profile.links.length" :class="['col-12', mainRowCount === 3 ? 'col-lg-4' : 'col-lg-6']"> <div v-if="profile.links.length" :class="['col-12', mainRowCount === 3 ? 'col-lg-4' : 'col-lg-6']">
<h3> <h3>
@ -85,11 +87,11 @@
<T>profile.links</T> <T>profile.links</T>
</h3> </h3>
<ul class="list-unstyled"> <ExpandableList :values="profile.links" :limit="16" class="list-unstyled" :static="expandLinks">
<li v-for="link in profile.links"> <template v-slot="s">
<ProfileLink :link="link" :expand="expandLinks" :verifiedLinks="profile.verifiedLinks || {}"/> <ProfileLink :link="s.el" :expand="expandLinks" :verifiedLinks="profile.verifiedLinks || {}"/>
</li> </template>
</ul> </ExpandableList>
</div> </div>
</section> </section>
@ -102,9 +104,12 @@
<div class="row"> <div class="row">
<div v-for="column in profile.words" v-if="column.values.length" class="col-6 col-lg-3"> <div v-for="column in profile.words" v-if="column.values.length" class="col-6 col-lg-3">
<h4 v-if="column.header" class="h6">{{ column.header }}</h4> <h4 v-if="column.header" class="h6">{{ column.header }}</h4>
<ul class="list-unstyled">
<li v-for="{value: word, opinion} in column.values"><Opinion :word="word" :opinion="opinion" :customOpinions="profile.opinions"/></li> <ExpandableList :values="column.values" :limit="16" class="list-unstyled" :static="expandLinks">
</ul> <template v-slot="s">
<Opinion :word="s.el.value" :opinion="s.el.opinion" :customOpinions="profile.opinions"/>
</template>
</ExpandableList>
</div> </div>
</div> </div>
</section> </section>