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,6 +13,33 @@
</span> </span>
</li> </li>
</ul> </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"> <template v-if="isExpanded">
<ul class="list-suggest add-items"> <ul class="list-suggest add-items">
<li v-for="r in availableForCheckResults" @click="addResult(r)"> <li v-for="r in availableForCheckResults" @click="addResult(r)">
@ -18,19 +47,11 @@
</li> </li>
</ul> </ul>
</template> </template>
<ul class="record_actions">
<li v-if="isExpanded"> </div>
<button class="btn btn-hide" @click="toggleSelect"> </div>
<i class="fa fa-eye-slash"></i> </div>
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> </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">