suggest-list: picto is managedby css

This commit is contained in:
Mathieu Jaumotte 2021-12-17 00:03:27 +01:00
parent a6cc6221d6
commit 395920bd51
8 changed files with 42 additions and 64 deletions

View File

@ -7,6 +7,7 @@ and this project adheres to
* [Semantic Versioning](https://semver.org/spec/v2.0.0.html) for stable releases;
* date versioning for test releases
* [accompanyingCourse_work] fix styles conflicts
## Unreleased

View File

@ -397,7 +397,6 @@ Créer une liste de suggestions à enlever (avec une croix rouge cliquable, l'an
<li>
<span>
item
<a></a>
</span>
</li>
</ul>
@ -405,8 +404,8 @@ Créer une liste de suggestions à enlever (avec une croix rouge cliquable, l'an
Créer un titre enlevable (avec une croix rouge cliquable, l'ancre a est vide)
```html
<div class="item-title">
title
<a></a>
<span>title</span>
</div>
```
Les classes `cols` ou `inline` peuvent être ajoutées à côté de `list-suggest` pour modifier la disposition de la liste.
Dans le dernier exemple, on met une classe `removable` sur le span, si on veut pouvoir enlever l'élément.

View File

@ -8,6 +8,10 @@
content: "\f00d"; // fa-times
color: var(--bs-danger);
text-decoration: none;
position: absolute;
display: block;
top: calc(50% - 7px);
right: 10px;
}
}
@ -36,12 +40,24 @@ ul.list-suggest {
}
&.add-items {
li {
position: relative;
span {
cursor: pointer;
padding-left: 2rem;
}
& > span:before {
font: normal normal normal 14px/1 ForkAwesome;
margin-right: 0.5em;
content: "\f067"; // fa-plus
color: var(--bs-success);
position: absolute;
display: block;
top: 50%;
left: .75rem;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
& span:hover {
color: $chill-l-gray;
@ -50,7 +66,10 @@ ul.list-suggest {
}
&.remove-items {
li {
a {
position: relative;
span {
display: block;
padding-right: .75rem;
@include remove_link;
}
}
@ -60,7 +79,14 @@ ul.list-suggest {
/// manage remove link if it isn't a list but a title
/// (cfr. in Vue AccompanyingCourseWorkEdit)
div.item-title {
a {
span {
display: block;
position: relative;
padding: 0.5em 0.8em;
background-color: $chill-llight-gray;
border-radius: .25rem;
&.removable {
@include remove_link;
}
}
}

View File

@ -52,7 +52,7 @@
<!-- results which **are** attached to an objective -->
<div v-for="g in goalsPicked" :key="g.id">
<div class="item-title" @click="removeGoal(g)">
<span>{{ g.goal.title.fr }}</span>
<span class="removable">{{ g.goal.title.fr }}</span>
</div>
<div>
<add-result :goal="g.goal" destination="goal"></add-result>

View File

@ -1,63 +1,14 @@
<template>
<div>
<div class="item-title">
<span class="evaluation-title">{{ evaluation.evaluation.title.fr }}</span>
<span>{{ evaluation.evaluation.title.fr }}</span>
</div>
<div v-if="!evaluation.editEvaluation">
<dl class="item-details definition-inline">
<dt v-if="evaluation.startDate">{{ $t('startDate') }} :</dt>
<dd v-if="evaluation.startDate">{{ $d(evaluation.startDate, 'short') }}</dd>
<dt v-if="evaluation.endDate">{{ $t('endDate') }} :</dt>
<dd v-if="evaluation.endDate">{{ $d(evaluation.endDate, 'short') }}</dd>
<dt v-if="evaluation.maxDate">{{ $t('maxDate') }} :</dt>
<dd v-if="evaluation.maxDate">{{ $d(evaluation.maxDate, 'short') }}</dd>
<dt v-if="evaluation.warningInterval">{{ $t('warningInterval') }} :</dt>
<dd v-if="evaluation.warningInterval">{{ evaluation.warningInterval }}</dd>
<template v-if="evaluation.documents.length > 0">
<dt>{{ $t('documents') }} :</dt>
<dd>
<ul>
<li v-for="d in evaluation.documents" :key="d.id">
{{ d.template.name.fr }}
<a :href="buildEditLink(d.storedObject)" class="btn btn-action btn-sm">
<i class="fa fa-edit"></i>
</a>
</li>
</ul>
</dd>
</template>
</dl>
<dl class="item-details">
<dt v-if="evaluation.comment">{{ $t('comment') }} :</dt>
<dd v-if="evaluation.comment">
<blockquote class="chill-user-quote">
{{ evaluation.comment }}
</blockquote>
</dd>
</dl>
<ul class="record_actions">
<li>
<a class="btn btn-sm btn-update" @click="toggleEditEvaluation(e)">{{ $t('action.edit') }}</a>
</li>
<li>
<a class="btn btn-sm btn-delete" @click="modal.showModal = true">{{ $t('action.delete') }}</a>
</li>
</ul>
</div>
<div v-if="evaluation.editEvaluation">
<div>
<form-evaluation ref="FormEvaluation" :key="evaluation.key" :evaluation="evaluation"></form-evaluation>
<ul class="record_actions">
<li>
<button class="btn btn-sm btn-update" @click="submitForm">{{ $t('action.save') }}</button>
<a class="btn btn-delete" @click="modal.showModal = true" :title="$t('action.delete')"></a>
</li>
</ul>
</div>

View File

@ -60,6 +60,7 @@
</template>
<script>
const i18n = {
messages: {
fr: {

View File

@ -50,8 +50,8 @@
</div>
<div class="row mb-3">
<label class="col-sm-4 col-form-label">{{ $t('evaluation_public_comment') }}</label>
<div class="col-sm-8">
<label class="col-sm-4 col-form-label visually-hidden">{{ $t('evaluation_public_comment') }}</label>
<div class="col-sm-12">
<ckeditor
:editor="editor"
:placeholder="$t('evaluation_comment_placeholder')"

View File

@ -192,7 +192,7 @@ const store = createStore({
type: "accompanying_period_work_evaluation",
key: state.evaluationsPicked.length + 1,
evaluation: evaluation,
startDate: null,
startDate: new Date(),
endDate: null,
maxDate: null,
warningInterval: null,