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

[profile][bug] fix <ExpendableList> / reducedItems

Browse Source
This commit is contained in:
Andrea Vos 2023-03-11 12:30:08 +01:00
parent 81b7c7696a
commit be4b4f3382
2 changed files with 35 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
components/ExpandableList.vue
View File

@ -1,13 +1,11 @@
<template> <template>
<ul> <ul>
<li v-for="(el, i) in values"> <li v-for="(el, i) in values" :class="itemClass" v-if="allShown || i < showLimit">
<template v-if="allShown || i < showLimit"> <slot v-bind:el="el" v-bind:i="i">
<slot v-bind:el="el" v-bind:i="i"> {{ el }}
{{ el }} </slot>
</slot>
</template>
</li> </li>
<li v-if="!allShown && hiddenCount > 0" class="small"> <li v-if="!allShown && hiddenCount > 0" :class="[itemClass, 'small']">
<span v-if="static"> <span v-if="static">
<Icon v="plus-circle"/> <Icon v="plus-circle"/>
<T :params="{count: hiddenCount}">profile.expendableList.more</T> <T :params="{count: hiddenCount}">profile.expendableList.more</T>
@ -15,8 +13,10 @@
<a v-else href="#" @click.prevent="allShown = true"> <a v-else href="#" @click.prevent="allShown = true">
<Icon v="plus-circle"/> <Icon v="plus-circle"/>
<T :params="{count: hiddenCount}">profile.expendableList.more</T> <T :params="{count: hiddenCount}">profile.expendableList.more</T>
<br/> <template v-if="!(itemClass || '').includes('list-inline-item')">
<Icon v="spacer"/> <br/>
<Icon v="spacer"/>
</template>
<T>profile.expendableList.show</T> <T>profile.expendableList.show</T>
</a> </a>
</li> </li>
@ -30,8 +30,10 @@ export default {
props: { props: {
values: { required: true }, values: { required: true },
limit: { required: true }, limit: { required: true },
reducedLimit: { 'default': 4 },
static: { type: Boolean }, static: { type: Boolean },
expand: { type: Boolean }, expand: { type: Boolean },
itemClass: {},
}, },
data() { data() {
return this.calcData(); return this.calcData();
@ -40,7 +42,7 @@ export default {
calcData() { calcData() {
let showLimit = this.values.length; let showLimit = this.values.length;
let hiddenCount = 0; let hiddenCount = 0;
const limit = this.reducedItems ? 4 : this.limit; const limit = (this.reducedItems === undefined || this.reducedItems) ? this.reducedLimit : this.limit;
if (this.values.length > limit) { if (this.values.length > limit) {
showLimit = limit; showLimit = limit;

45
components/Profile.vue
View File

@ -39,28 +39,29 @@
<div v-if="profile.flags.length || profile.customFlags.length" :class="['col-12', manyFlagsLayout ? '' : 'col-lg-6']"> <div v-if="profile.flags.length || profile.customFlags.length" :class="['col-12', manyFlagsLayout ? '' : 'col-lg-6']">
<ClientOnly> <ClientOnly>
<ul class="list-inline"> <ExpandableList :values="[...profile.flags.filter(flag => allFlags[flag]), ...profile.customFlags]"
<li v-for="flag in profile.flags" v-if="allFlags[flag]" class="list-inline-item p-1"> :limit="32" :reducedLimit="8" class="list-inline" itemClass="list-inline-item p-1" :static="static" :expand="expandLinks">
<Flag :termkey="allFlags[flag]" <template v-slot="s">
:name="flag.startsWith('-') ? allFlags[flag] : $translateForPronoun(allFlags[flag], mainPronoun)" <Flag v-if="typeof(s.el) === 'string'"
:alt="$t('flags_alt.' + flag.replace(/'/g, '*').replace(/ /g, '_'))" :termkey="allFlags[s.el]"
:img="`/flags/${flag}.png`" :name="s.el.startsWith('-') ? allFlags[s.el] : $translateForPronoun(allFlags[s.el], mainPronoun)"
:terms="terms || []" :alt="$t('flags_alt.' + s.el.replace(/'/g, '*').replace(/ /g, '_'))"
:asterisk="flagsAsterisk.includes(flag)" :img="`/flags/${s.el}.png`"
/> :terms="terms || []"
</li> :asterisk="flagsAsterisk.includes(s.el)"
<li v-for="{value: flag, name, description, alt, link} in profile.customFlags" class="list-inline-item p-1"> />
<Flag :termkey="name" <Flag v-else
:name="name" :termkey="s.el.name"
:alt="alt || ''" :name="s.el.name"
:img="buildImageUrl(flag, 'flag')" :alt="s.el.alt || ''"
:terms="terms|| []" :img="buildImageUrl(s.el.value, 'flag')"
custom :terms="terms|| []"
:description="description" custom
:customlink="link" :description="s.el.description"
/> :customlink="s.el.link"
</li> />
</ul> </template>
</ExpandableList>
</ClientOnly> </ClientOnly>
</div> </div>
</section> </section>