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>
<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 v-for="(el, i) in values" :class="itemClass" v-if="allShown || i < showLimit">
<slot v-bind:el="el" v-bind:i="i">
{{ el }}
</slot>
</li>
<li v-if="!allShown && hiddenCount > 0" class="small">
<li v-if="!allShown && hiddenCount > 0" :class="[itemClass, 'small']">
<span v-if="static">
<Icon v="plus-circle"/>
<T :params="{count: hiddenCount}">profile.expendableList.more</T>
@ -15,8 +13,10 @@
<a v-else href="#" @click.prevent="allShown = true">
<Icon v="plus-circle"/>
<T :params="{count: hiddenCount}">profile.expendableList.more</T>
<br/>
<Icon v="spacer"/>
<template v-if="!(itemClass || '').includes('list-inline-item')">
<br/>
<Icon v="spacer"/>
</template>
<T>profile.expendableList.show</T>
</a>
</li>
@ -30,8 +30,10 @@ export default {
props: {
values: { required: true },
limit: { required: true },
reducedLimit: { 'default': 4 },
static: { type: Boolean },
expand: { type: Boolean },
itemClass: {},
},
data() {
return this.calcData();
@ -40,7 +42,7 @@ export default {
calcData() {
let showLimit = this.values.length;
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) {
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']">
<ClientOnly>
<ul class="list-inline">
<li v-for="flag in profile.flags" v-if="allFlags[flag]" class="list-inline-item p-1">
<Flag :termkey="allFlags[flag]"
:name="flag.startsWith('-') ? allFlags[flag] : $translateForPronoun(allFlags[flag], mainPronoun)"
:alt="$t('flags_alt.' + flag.replace(/'/g, '*').replace(/ /g, '_'))"
:img="`/flags/${flag}.png`"
:terms="terms || []"
:asterisk="flagsAsterisk.includes(flag)"
/>
</li>
<li v-for="{value: flag, name, description, alt, link} in profile.customFlags" class="list-inline-item p-1">
<Flag :termkey="name"
:name="name"
:alt="alt || ''"
:img="buildImageUrl(flag, 'flag')"
:terms="terms|| []"
custom
:description="description"
:customlink="link"
/>
</li>
</ul>
<ExpandableList :values="[...profile.flags.filter(flag => allFlags[flag]), ...profile.customFlags]"
:limit="32" :reducedLimit="8" class="list-inline" itemClass="list-inline-item p-1" :static="static" :expand="expandLinks">
<template v-slot="s">
<Flag v-if="typeof(s.el) === 'string'"
:termkey="allFlags[s.el]"
:name="s.el.startsWith('-') ? allFlags[s.el] : $translateForPronoun(allFlags[s.el], mainPronoun)"
:alt="$t('flags_alt.' + s.el.replace(/'/g, '*').replace(/ /g, '_'))"
:img="`/flags/${s.el}.png`"
:terms="terms || []"
:asterisk="flagsAsterisk.includes(s.el)"
/>
<Flag v-else
:termkey="s.el.name"
:name="s.el.name"
:alt="s.el.alt || ''"
:img="buildImageUrl(s.el.value, 'flag')"
:terms="terms|| []"
custom
:description="s.el.description"
:customlink="s.el.link"
/>
</template>
</ExpandableList>
</ClientOnly>
</div>
</section>