list-suggest: add classes to change list disposition

This commit is contained in:
Mathieu Jaumotte 2021-12-09 14:33:08 +01:00
parent 10f276e48c
commit 5b321dfb81
7 changed files with 15 additions and 5 deletions

View File

@ -409,3 +409,4 @@ Créer un titre enlevable (avec une croix rouge cliquable, l'ancre a est vide)
<a></a>
</div>
```
Les classes `cols` ou `inline` peuvent être ajoutées à côté de `list-suggest` pour modifier la disposition de la liste.

View File

@ -11,7 +11,7 @@
</persons-bloc>
</div>
<div v-if="getContext === 'accompanyingCourse' && suggestedEntities.length > 0">
<ul class="list-suggest add-items">
<ul class="list-suggest add-items inline">
<li v-for="p in suggestedEntities" @click="addSuggestedEntity(p)">
<span>{{ p.text }}</span>
</li>

View File

@ -25,6 +25,15 @@ ul.list-suggest {
text-align: start;
margin-bottom: 3px;
}
&.cols {
columns: 3;
}
&.inline {
li {
display: inline-block;
margin-right: 0.2em;
}
}
&.add-items {
li {
cursor: pointer;

View File

@ -48,7 +48,7 @@
</div>
<div v-if="suggestedPersons.length > 0">
<ul class="list-suggest add-items">
<ul class="list-suggest add-items inline">
<li v-for="p in suggestedPersons" :key="p.id" @click="addSuggestedPerson(p)">
<span>{{ p.text }}</span>
</li>

View File

@ -20,7 +20,7 @@
</VueMultiselect>
<template v-if="referrersSuggested.length > 0">
<ul class="list-suggest add-items">
<ul class="list-suggest add-items inline">
<li v-for="u in referrersSuggested" @click="updateReferrer(u)">
<span>
<user-render-box-badge :user="u"></user-render-box-badge>

View File

@ -134,7 +134,7 @@
</div>
<div v-if="accompanyingCourse.requestor === null && suggestedEntities.length > 0">
<ul class="list-suggest add-items">
<ul class="list-suggest add-items inline">
<li v-for="p in suggestedEntities" :key="uniqueId(p)" @click="addSuggestedEntity(p)">
<span>{{ p.text }}</span>
</li>

View File

@ -20,7 +20,7 @@
</div>
<div v-if="suggestedEntities.length > 0">
<ul class="list-suggest add-items">
<ul class="list-suggest add-items inline">
<li v-for="p in suggestedEntities" :key="uniqueId(p)" @click="addSuggestedEntity(p)">
<span>{{ p.text }}</span>
</li>