vue_accourseWorkEdit: improve show/hide button + list-suggest improve hyphens on badge too large

This commit is contained in:
Mathieu Jaumotte 2021-11-25 19:04:13 +01:00
parent 8ac3dab0a2
commit 37cc540970
2 changed files with 46 additions and 20 deletions

View File

@ -17,6 +17,11 @@
ul.list-suggest {
list-style-type: none;
padding-left: 0;
li > span {
white-space: normal;
text-align: start;
margin-bottom: 3px;
}
&.add-items {
li {
cursor: pointer;

View File

@ -1,8 +1,10 @@
<template>
<div v-if="hasResult" class="addResult">
<p v-if="pickedResults.length ===0" class="chill-no-data-statement">
Aucun résultat associé
</p>
<ul class="list-suggest remove-items">
<li v-for="r in pickedResults">
<span>
@ -11,26 +13,45 @@
</span>
</li>
</ul>
<template v-if="isExpanded">
<ul class="list-suggest add-items">
<li v-for="r in availableForCheckResults" @click="addResult(r)">
<span>{{ r.title.fr }}</span>
</li>
</ul>
</template>
<ul class="record_actions">
<li v-if="isExpanded">
<button class="btn btn-hide" @click="toggleSelect">
<i class="fa fa-eye-slash"></i>
Masquer résultats et orientations disponibles
</button>
</li>
<li v-else>
<button class="btn btn-show" @click="toggleSelect">
Afficher résultats et orientations disponibles
</button>
</li>
</ul>
<div class="accordion" id="expandedSuggestions">
<div class="accordion-item">
<h2 class="accordion-header" id="heading_expanded_suggestions">
<button v-if="isExpanded"
class="accordion-button"
type="button"
data-bs-toggle="collapse"
aria-expanded="true"
@click="toggleSelect">
Masquer résultats et orientations disponibles
</button>
<button v-else
class="accordion-button collapsed"
type="button"
data-bs-toggle="collapse"
aria-expanded="false"
@click="toggleSelect">
Afficher résultats et orientations disponibles
</button>
</h2>
<div class="accordion-collapse" id="collapse_expanded_suggestions"
aria-labelledby="heading_expanded_suggestions" data-bs-parent="#expandedSuggestions">
<template v-if="isExpanded">
<ul class="list-suggest add-items">
<li v-for="r in availableForCheckResults" @click="addResult(r)">
<span>{{ r.title.fr }}</span>
</li>
</ul>
</template>
</div>
</div>
</div>
</div>
<div v-if="!hasResult" class="noResult">
<div class="chill-no-data-statement">