KayFaraday
/
Zaimki
Archived
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

[profile] (hopefully) fix the flags interface on mobile

This commit is contained in:
Avris 2020-11-10 15:09:30 +01:00
parent 31bf0b5ac5
commit 8fcf96040e
1 changed files with 21 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
components/ButtonList.vue
View File

@ -3,33 +3,31 @@
<draggable tag="ul" v-model="iVal" ghostClass="ghost" @end="$emit('input', iVal)" :group="ulid" <draggable tag="ul" v-model="iVal" ghostClass="ghost" @end="$emit('input', iVal)" :group="ulid"
class="list-inline border rounded drop-empty px-3 py-2"> class="list-inline border rounded drop-empty px-3 py-2">
<li v-for="val in iVal" class="list-inline-item py-1"> <li v-for="val in iVal" class="list-inline-item py-1">
<a href="#" class="badge badge-light border p-2" @click.prevent> <a href="#" class="badge badge-light border p-2" @click.prevent="$emit('input', iVal.filter(v => v !== val))">
<slot v-bind:v="val" v-bind:desc="options[val]"> <slot v-bind:v="val" v-bind:desc="options[val]">
{{ val }} {{ val }}
</slot> </slot>
<a href="#" class="text-danger" @click.prevent="$emit('input', iVal.filter(v => v !== val))"> <span class="text-danger">
<Icon v="times"/> <Icon v="times"/>
</a> </span>
</a> </a>
</li> </li>
<li slot="footer" class="list-inline-item py-1">
<div class="input-group">
<input v-model="search" class="form-control form-control-sm" :placeholder="$t('crud.search')"/>
<div class="input-group-append">
<button v-if="search" type="button" class="btn btn-light btn-sm border text-danger" @click.prevent="search = ''">
<Icon v="times"/>
</button>
<button v-if="all" type="button" class="btn btn-light btn-sm border" @click.prevent="all = false">
<Icon v="caret-up"/>
</button>
<button v-else type="button" class="btn btn-light btn-sm border" @click.prevent="all = true">
<Icon v="caret-down"/>
</button>
</div>
</div>
</li>
</draggable> </draggable>
<div class="input-group py-1">
<input v-model="search" class="form-control form-control-sm" :placeholder="$t('crud.search')"/>
<div class="input-group-append">
<button v-if="search" type="button" class="btn btn-light btn-sm border text-danger" @click.prevent="search = ''">
<Icon v="times"/>
</button>
<button v-if="all" type="button" class="btn btn-light btn-sm border" @click.prevent="all = false">
<Icon v="caret-up"/>
</button>
<button v-else type="button" class="btn btn-light btn-sm border" @click.prevent="all = true">
<Icon v="caret-down"/>
</button>
</div>
</div>
<draggable tag="ul" v-model="remainingOptions" ghostClass="ghost" @end="$emit('input', iVal)" class="list-inline" :group="ulid"> <draggable tag="ul" v-model="remainingOptions" ghostClass="ghost" @end="$emit('input', iVal)" class="list-inline" :group="ulid">
<li v-for="val in remainingOptions" v-if="all || (search && options[val].toLowerCase().includes(search))" class="list-inline-item py-1"> <li v-for="val in remainingOptions" v-if="all || (search && options[val].toLowerCase().includes(search))" class="list-inline-item py-1">
@ -37,6 +35,9 @@
<slot v-bind:v="val" v-bind:desc="options[val]"> <slot v-bind:v="val" v-bind:desc="options[val]">
{{ val }} {{ val }}
</slot> </slot>
<span class="text-success">
<Icon v="plus"/>
</span>
</a> </a>
</li> </li>
</draggable> </draggable>