Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Ajustement de l'interface graphique sur le détail de l'enveloppe liée à la simulation #86

Draft
wants to merge 1 commit into
base: develop
Choose a base branch
from
Draft
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 23 additions & 0 deletions gsl_programmation/static/css/enveloppe_summary.css
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,30 @@
min-width: 90px;
width: 130px;
border-top: 1px solid var(--border-default-grey);
line-height: calc(1rem * 15/16);;
height: 42px;
}

.enveloppe-summary th div {
display: flex;
align-items: center;
gap: 4px;
justify-content: center;
}

.enveloppe-summary th .text {
width: min-content;
}

.enveloppe-summary th .text.min-width-90 {
min-width: 90px; /* Hack pour éviter que le texte ne se mette sur 3 lignes */
}

.enveloppe-summary th .icon {
flex-shrink: 0; /* Prevents icon from shrinking */
}


.enveloppe-summary tr {
border-bottom: 1px solid var(--border-default-grey);
}
Expand Down
108 changes: 88 additions & 20 deletions gsl_programmation/templates/includes/_enveloppe_summary.html
Original file line number Diff line number Diff line change
Expand Up @@ -7,35 +7,103 @@
<table>
<thead>
<tr>
<th class="fr-icon-money-euro-box-fill fr-icon--sm">
Dotation
<th>
<div>
<div class="icon">
<span class="fr-icon-money-euro-box-fill fr-icon--sm icon" />
</div>
<div class="text">
Dotation
</div>
</div>
</th>
<th class="fr-icon-road-map-fill fr-icon--sm">
Territoire
<th>
<div>
<div class="icon">
<span class="fr-icon-road-map-fill fr-icon--sm" />
</div>
<div class="text">
Territoire
</div>
</div>
</th>
<th class="fr-icon-map-pin-2-fill fr-icon--sm">
Nom territoire
<th>
<div>
<div class="icon">
<span class="fr-icon-map-pin-2-fill fr-icon--sm" />
</div>
<div class="text">
Nom territoire
</div>
</div>
</th>
<th class="fr-icon-mail-fill fr-icon--sm">
Enveloppe de dotation
<th>
<div>
<div class="icon">
<span class="fr-icon-coin-fill fr-icon--sm" />
</div>
<div class="text min-width-90">
Enveloppe de dotation
</div>
</div>
</th>
<th class="fr-icon-coin-fill fr-icon--sm">
Montant total demandé
<th>
<div>
<div class="icon">
<span class="fr-icon-coin-fill fr-icon--sm" />
</div>
Montant total demandé
</div>
</th>
<th class="fr-icon-money-euro-circle-fill fr-icon--sm">
Montant accepté
<th>
<div>
<div class="icon">
<span class="fr-icon-money-euro-circle-fill fr-icon--sm" />
</div>
<div class="text">
Montant accepté
</div>
</div>
</th>
<th class="fr-icon-success-fill fr-icon--sm color-icon-success">
Projets acceptés
<th>
<div>
<div class="icon">
<span class="fr-icon-success-fill fr-icon--sm color-icon-success" />
</div>
<div class="text">
Projets acceptés
</div>
</div>
</th>
<th class="fr-icon-close-circle-fill fr-icon--sm color-icon-error">
Projets refusés
<th>
<div>
<div class="icon">
<span class="fr-icon-close-circle-fill fr-icon--sm color-icon-error" />
</div>
<div class="text">
Projets refusés
</div>
</div>
</th>
<th class="fr-icon-folder-2-fill fr-icon--sm">
Demandeurs
<th>
<div>
<div class="icon">
<span class="fr-icon-folder-2-fill fr-icon--sm" />
</div>
<div class="text">
Demandeurs
</div>
</div>
</th>
<th class="fr-icon-folder-2-fill fr-icon--sm">
Projets déposés
<th>
<div>
<div class="icon">
<span class="fr-icon-folder-2-fill fr-icon--sm" />
</div>
<div class="text">
Projets déposés
</div>
</div>
</th>
</tr>
</thead>
Expand Down