Chill-project/chill-bundles
6
0
Fork 0
mirror of https://gitlab.com/Chill-Projet/chill-bundles.git synced 2025-06-07 18:44:08 +00:00
Code Issues Actions Projects Releases Wiki Activity

Add hover effect and slim class to dev assets and apply in signature list

Browse Source 
Introduced a new SCSS file to handle hover effects on rows and added the ability to remove bottom margins with a "slim" class. Updated various twig templates to utilize these new styles for better visual feedback and alignment.
This commit is contained in:
Julien Fastré 2024-09-04 17:55:01 +02:00
parent 20f2bc6c35
commit d0031e82e8
Signed by: julienfastre
GPG Key ID: BDE2190974723FCB
5 changed files with 109 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/Bundle/ChillMainBundle/Resources/public/chill/chillmain.scss
View File

@ -31,6 +31,8 @@
// Specific templates
@import './scss/notification';
@import './scss/hover.scss';
/*
* BASE LAYOUT POSITION
*/

11
src/Bundle/ChillMainBundle/Resources/public/chill/scss/hover.scss Normal file
View File

@ -0,0 +1,11 @@
.row.row-hover {
padding: 0.3rem;
&:hover {
background-color: $gray-100;
border-top: 1px solid $gray-400;
border-bottom: 1px solid $gray-400;
}
}

4
src/Bundle/ChillMainBundle/Resources/public/chill/scss/record_actions.scss
View File

@ -17,6 +17,10 @@ ul.record_actions {
display: inline-block;
}
&.slim {
margin-bottom: 0;
}
&.column {
flex-direction: column;
}

89
src/Bundle/ChillMainBundle/Resources/views/Dev/dev.assets.html.twig
View File

@ -300,7 +300,96 @@
</ul>
</div>
<h3><code>slim</code></h3>
<p>Ajouter <code>slim</code> enlève la marge inférieure. Permet un meilleur alignement horizontal dans une <code>row</code></p>
<div class="container">
<div class="row row-hover">
<div class="col-8">
Some text, ul_record_actions sans slim
</div>
<div class="col-4">
<ul class="record_actions">
<li><button class="btn">Some action</button></li>
</ul>
</div>
</div>
<div class="row row-hover">
<div class="col-8">
Some text, ul_record_actions avec slim
</div>
<div class="col-4">
<ul class="record_actions slim">
<li><button class="btn">Some action</button></li>
</ul>
</div>
</div>
</div>
<xmp><a class="btn btn-submit">Text</a></xmp>
Toutes les classes btn-* de bootstrap sont fonctionnelles
<h2>Hover</h2>
<p>Ajouter <code>.row-hover</code> sur une class <code>.row</code> provoque un changement de background au survol</p>
<div class="container">
<div class="row row-hover align-items-center">
<div class="col-sm-12 col-md-8">
<span class="onthefly-container" data-target-name="person" data-target-id="329" data-action="show" data-button-text="Fatoumata Binta DIALLO (33 ans)" data-display-badge="true" data-v-app=""><a data-v-0c1a1125=""><span data-v-0c1a1125="" class="chill-entity entity-person badge-person">Fatoumata Binta DIALLO (33 ans)<!--v-if--></span></a><!--teleport start--><!--teleport end--></span>
</div>
<div class="col-sm-12 col-md-4">
<span class="text-end">A signé le 04/09/2024 à 13:55</span>
</div>
</div>
<div class="row row-hover align-items-center">
<div class="col-sm-12 col-md-8">
<span class="onthefly-container" data-target-name="person" data-target-id="330" data-action="show" data-button-text="Abdoulaye DIALLO (9 ans)" data-display-badge="true" data-v-app=""><a data-v-0c1a1125=""><span data-v-0c1a1125="" class="chill-entity entity-person badge-person">Abdoulaye DIALLO (9 ans)<!--v-if--></span></a><!--teleport start--><!--teleport end--></span>
</div>
<div class="col-sm-12 col-md-4">
<ul class="record_actions">
<li>
<a class="btn btn-misc" href="/fr/main/workflow/signature/6/metadata?returnPath=/fr/main/workflow/15/show"><i class="fa fa-pencil-square-o"></i> Signer</a>
</li>
</ul>
</div>
</div>
<div class="row row-hover align-items-center">
<div class="col-sm-12 col-md-8">
<span class="onthefly-container" data-target-name="person" data-target-id="332" data-action="show" data-button-text="Mohamed DIALLO (44 ans)" data-display-badge="true" data-v-app=""><a data-v-0c1a1125=""><span data-v-0c1a1125="" class="chill-entity entity-person badge-person">Mohamed DIALLO (44 ans)<!--v-if--></span></a><!--teleport start--><!--teleport end--></span>
</div>
<div class="col-sm-12 col-md-4">
<span class="text-end">A signé le 04/09/2024 à 13:57</span>
</div>
</div>
<div class="row row-hover align-items-center">
<div class="col-sm-12 col-md-8">
<span class="onthefly-container" data-target-name="person" data-target-id="333" data-action="show" data-button-text="Fatou DIALLO (37 ans)" data-display-badge="true" data-v-app=""><a data-v-0c1a1125=""><span data-v-0c1a1125="" class="chill-entity entity-person badge-person">Fatou DIALLO (37 ans)<!--v-if--></span></a><!--teleport start--><!--teleport end--></span>
</div>
<div class="col-sm-12 col-md-4">
<ul class="record_actions">
<li>
<a class="btn btn-misc" href="/fr/main/workflow/signature/8/metadata?returnPath=/fr/main/workflow/15/show"><i class="fa fa-pencil-square-o"></i> Signer</a>
</li>
</ul>
</div>
</div>
<div class="row row-hover align-items-center">
<div class="col-sm-12 col-md-8">
<span class="onthefly-container" data-target-name="person" data-target-id="334" data-action="show" data-button-text="Fanta DIALLO (7 ans)" data-display-badge="true" data-v-app=""><a data-v-0c1a1125=""><span data-v-0c1a1125="" class="chill-entity entity-person badge-person">Fanta DIALLO (7 ans)<!--v-if--></span></a><!--teleport start--><!--teleport end--></span>
</div>
<div class="col-sm-12 col-md-4">
<ul class="record_actions">
<li>
<a class="btn btn-misc" href="/fr/main/workflow/signature/9/metadata?returnPath=/fr/main/workflow/15/show"><i class="fa fa-pencil-square-o"></i> Signer</a>
</li>
</ul>
</div>
</div>
</div>
</div>
{% endblock %}

6
src/Bundle/ChillMainBundle/Resources/views/Workflow/_signature.html.twig
View File

@ -2,7 +2,7 @@
<div class="container">
{% for s in signatures %}
<div class="row align-items-center">
<div class="row row-hover align-items-center">
<div class="col-sm-12 col-md-8">
{% include '@ChillMain/OnTheFly/_insert_vue_onthefly.html.twig' with {
action: 'show', displayBadge: true,
@ -13,9 +13,9 @@
</div>
<div class="col-sm-12 col-md-4">
{% if s.isSigned %}
<p class="text-end">{{ 'workflow.signature_zone.has_signed_statement'|trans({ 'datetime' : s.stateDate }) }}</p>
<span class="text-end">{{ 'workflow.signature_zone.has_signed_statement'|trans({ 'datetime' : s.stateDate }) }}</span>
{% else %}
<ul class="record_actions">
<ul class="record_actions slim">
<li>
<a class="btn btn-misc" href="{{ chill_path_add_return_path('chill_main_workflow_signature_metadata', { 'signature_id': s.id}) }}"><i class="fa fa-pencil-square-o"></i> {{ 'workflow.signature_zone.button_sign'|trans }}</a>
{% if s.state is same as('signed') %}