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 { ul.list-suggest {
list-style-type: none; list-style-type: none;
padding-left: 0; padding-left: 0;
li > span {
white-space: normal;
text-align: start;
margin-bottom: 3px;
}
&.add-items { &.add-items {
li { li {
cursor: pointer; cursor: pointer;

View File

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