Skip to content
Snippets Groups Projects
Commit cd90f1da authored by Dorine Lambinet's avatar Dorine Lambinet Committed by Emmanuel Raviart
Browse files

Permettre de retourner au simulateur affaires sociales depuis la nav bar en...

Permettre de retourner au simulateur affaires sociales depuis la nav bar en cliquant sur le logo "LexImpact affaires sociales"
parent 809c8778
No related branches found
No related tags found
Loading
Showing with 414 additions and 365 deletions
......@@ -109,15 +109,17 @@
<!-- Deuxième div pour le logo Affaires sociales-->
<div class="hidden sm:flex">
<div
class="space-y-1 flex items-center h-14 gap-2 rounded text-white p-1"
>
<div class="row-span-3 text-4xl font-light uppercase">LexImpact</div>
<div class="space-y-0">
<div class="text-xs font-bold uppercase">Affaires</div>
<div class=" text-xs font-bold uppercase">sociales</div>
<a href="/simulation">
<div
class="space-y-1 flex items-center h-14 gap-2 rounded text-white p-1"
>
<div class="row-span-3 text-4xl font-light uppercase">LexImpact</div>
<div class="space-y-0">
<div class="text-xs font-bold uppercase">Affaires</div>
<div class=" text-xs font-bold uppercase">sociales</div>
</div>
</div>
</div>
</a>
</div>
<!-- Troisième div pour les commandes avancées-->
......@@ -337,3 +339,19 @@
{/if}
</div>
</nav>
<div
class=" flex fond-bandeau-en-construction h-8 w-full items-center justify-center shadow-lg border-b border-t border-black"
>
<div>
<p class="text-center text-black tracking-wider font-base uppercase">
🚧 Simulateur en construction
</p>
</div>
</div>
<style>
.fond-bandeau-en-construction {
background-color: #ffffff;
background-image: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ece322' fill-opacity='0.4' fill-rule='evenodd'%3E%3Cpath d='M0 40L40 0H20L0 20M40 40V20L20 40'/%3E%3C/g%3E%3C/svg%3E");
}
</style>
......@@ -6,14 +6,16 @@
{#if referencesByInstant != null}
<section class="border-b border-t my-1 py-1">
<h1 class="text-lg">Références</h1>
<h1 class="text-base font-bold">Références législatives</h1>
<dl>
{#each Object.entries(referencesByInstant).sort( ([instant1], [instant2]) => instant2.localeCompare(instant1), ) as [instant, references]}
<dt>{instant}</dt>
<dd class="ml-4">
<dt><p class="text-xs text-gray-500">{instant}</p></dt>
<dd>
<ul class="list-inside" class:list-disc={references.length > 1}>
{#each references as { href, title }}
<li class="overflow-ellipsis overflow-hidden whitespace-nowrap">
<li
class="overflow-ellipsis overflow-hidden whitespace-nowrap text-sm text-gray-600"
>
{#if href === undefined}
{title}
{:else}
......
......@@ -67,144 +67,194 @@
}
</script>
<main class="bg-white container m-10 max-w-prose mx-auto">
<h1 class="font-serif text-3xl pt-7 pb-3">
Paramètre
{#each [...iterParameterAncestors(parameter.parent)] as ancestor}
<!-- svelte-ignore a11y-missing-attribute -->
<a
class="link text-gray-500"
{...newSelfTargetAProps(`/parameters/${ancestor.name}`)}
>{ancestor.title}</a
>
&gt;
{/each}
{parameter.title}
</h1>
{#if parameter.documentation !== undefined}
<div>{parameter.documentation}</div>
{/if}
{#if parameter.unit !== undefined}
<div>Unité : {parameter.unit}</div>
{/if}
{#if parameter.reference !== undefined}
<ParameterReferences referencesByInstant={parameter.reference} />
{/if}
{#if parameterRepositoryUrl !== undefined}
<div>
Source : <a class="link" href={parameterRepositoryUrl}
>{parameterRepositoryUrl}</a
>
<main class="flex items-center justify-center fond">
<div class="bg-white container p-10 max-w-prose mx-auto ">
<div class="flex items-end pb-10">
<div class="w-7/8">
<h1 class=" font-light text-3xl pt-7 ">
<p class="font">Information détaillée du paramètre :</p>
{#each [...iterParameterAncestors(parameter.parent)] as ancestor}
<p class="inline font-serif text-sm">
<!-- svelte-ignore a11y-missing-attribute -->
<a
class="link text-gray-500"
{...newSelfTargetAProps(`/parameters/${ancestor.name}`)}
>{ancestor.title}</a
>
&gt;
</p>
{/each}
<p class="font-serif text-3xl">
{parameter.title}
</p>
</h1>
</div>
<div>
<button
class=" bg-gray-400 shadow-md hover:bg-gray-600 rounded p-1 text-white uppercase text-sm"
href="/parameters/{parameter.name}/edit"
>
Proposer une modification
</button>
</div>
</div>
{/if}
{#if parameter.class === ParameterClass.Node}
{#if parameter.children !== undefined}
<ul class="ml-4">
{#each Object.entries(parameter.children) as [childId, child]}
<li class="my-2">
<!-- svelte-ignore a11y-missing-attribute -->
<a
class="link"
{...newSelfTargetAProps(`/parameters/${child.name}`)}
>
{child.title}
</a>
</li>
{/each}
</ul>
{#if parameter.documentation !== undefined}
<div>{parameter.documentation}</div>
{/if}
{#if parameter.reference !== undefined}
<ParameterReferences referencesByInstant={parameter.reference} />
{/if}
{#if parameter.unit !== undefined}
<div class="flex border-b my-1 py-1 font-base ">
<p class="font-bold mr-1">Unité du paramètre :</p>
{parameter.unit}
</div>
{/if}
{:else if parameter.class === ParameterClass.Parameter}
{#if parameter.values !== undefined}
{#if parameter.class === ParameterClass.Node}
{#if parameter.children !== undefined}
<ul class="ml-4">
{#each Object.entries(parameter.children) as [childId, child]}
<li class="my-2">
<!-- svelte-ignore a11y-missing-attribute -->
<a
class="link"
{...newSelfTargetAProps(`/parameters/${child.name}`)}
>
{child.title}
</a>
</li>
{/each}
</ul>
{/if}
{:else if parameter.class === ParameterClass.Parameter}
{#if parameter.values !== undefined}
<div>
<div class="font-bold mr-1 mb-2">Dernières valeurs en date :</div>
<table class="w-full border-collapse table-fixed ">
<thead>
<tr>
<th class="border p-1 text-center font-light bg-gray-100"
>Date</th
>
<!-- <th class="border p-1 text-center">Nom</th> -->
<th class="border p-1 text-center font-light bg-gray-100"
>Valeur</th
>
<th class="border p-1 text-center font-light bg-gray-100"
>Unité</th
>
<th class="border p-1 text-center font-light bg-gray-100"
>Source</th
>
</tr>
</thead>
<tbody>
{#each parameter.values as { instant, /* name, */ source, unit, value }}
<tr>
<td class="border p-1 text-center">{instant}</td>
<!-- <td class= "border p-1 text-center">{name}</td> -->
<td class="border p-1 text-center">{value ?? ""}</td>
<td class="border p-1 text-center">{unit ?? ""}</td>
<td class="border p-1 text-center"
>{#if source !== undefined}<a class="link" href={source}
>source</a
>{/if}</td
>
</tr>
{/each}
</tbody>
</table>
</div>
{/if}
{:else if parameter.class === ParameterClass.Scale}
<div>
<div>Valeurs :</div>
<table class="border border-collapse table-auto">
<div class="flex border-t border-b my-1 py-2 font-base ">
<p class="font-bold mr-1">Barème de type :</p>
{parameter.type}
</div>
<div class="font-bold mr-1 mb-2">Dernières valeurs en date&nbsp;:</div>
<table
class="w-full border-2 border-gray-100 border-collapse table-auto"
>
<thead>
<tr>
<th class="border p-1 text-center">Date</th>
<!-- <th class="border p-1 text-center">Nom</th> -->
<th class="border p-1 text-center">Valeur</th>
<th class="border p-1 text-center">Unité</th>
<th class="border p-1 text-center">Source</th>
<th class="bg-gray-100 border p-1 text-center font-light">Date</th
>
<th class="bg-gray-100 border p-1 text-center font-light"
>Seuil</th
>
<th class="bg-gray-100 border p-1 text-center font-light"
>Unité de seuil</th
>
<th class="bg-gray-100 border p-1 text-center font-light"
>Value</th
>
</tr>
</thead>
<tbody>
{#each parameter.values as { instant, /* name, */ source, unit, value }}
<tr>
<td class="border p-1 text-center">{instant}</td>
<!-- <td class= "border p-1 text-center">{name}</td> -->
<td class="border p-1 text-center">{value ?? ""}</td>
<td class="border p-1 text-center">{unit ?? ""}</td>
<td class="border p-1 text-center"
>{#if source !== undefined}<a class="link" href={source}
>source</a
>{/if}</td
>
</tr>
{#each Object.entries(parameter.brackets) as [instant, bracket]}
{#if bracket === null}
<tr>
<td class="border p-1 text-center">{instant}</td>
<td class="border p-1 text-center" colspan="3" />
</tr>
{:else}
{#each Object.entries(bracket) as [threshold, value], index}
<tr>
{#if index === 0}
<td
class="border p-1 text-center"
rowspan={Object.keys(bracket).length}>{instant}</td
>
{/if}
<td class="border p-1 text-center">{threshold}</td>
<td class="border p-1 text-center"
>{parameter.rate_unit ??
parameter.threshold_unit ??
""}</td
>
<td class="border p-1 text-center">{value ?? ""}</td>
</tr>
{/each}
{/if}
{/each}
</tbody>
</table>
</div>
{/if}
{:else if parameter.class === ParameterClass.Scale}
<div>
<div>Barème de type {parameter.type}:</div>
<table class="border border-collapse table-auto">
<thead>
<tr>
<th class="border p-1 text-center">Date</th>
<th class="border p-1 text-center">Seuil</th>
<th class="border p-1 text-center">Unité de seuil</th>
<th class="border p-1 text-center">Value</th>
</tr>
</thead>
<tbody>
{#each Object.entries(parameter.brackets) as [instant, bracket]}
{#if bracket === null}
<tr>
<td class="border p-1 text-center">{instant}</td>
<td class="border p-1 text-center" colspan="3" />
</tr>
{:else}
{#each Object.entries(bracket) as [threshold, value], index}
<tr>
{#if index === 0}
<td
class="border p-1 text-center"
rowspan={Object.keys(bracket).length}>{instant}</td
>
{/if}
<td class="border p-1 text-center">{threshold}</td>
<td class="border p-1 text-center"
>{parameter.rate_unit ?? parameter.threshold_unit ?? ""}</td
>
<td class="border p-1 text-center">{value ?? ""}</td>
</tr>
{/each}
{/if}
{#if parameter.referring_variables !== undefined}
<section>
<h1 class="font-bold mr-1 mt-3">Variables dépendantes :</h1>
<ul class="list-disc list-inside">
{#each parameter.referring_variables as variableName}
<li>
<!-- svelte-ignore a11y-missing-attribute -->
<a
class="link"
{...newSelfTargetAProps(`/variables/${variableName}`)}
>{variableName}</a
>
</li>
{/each}
</tbody>
</table>
</div>
{/if}
{#if parameter.referring_variables !== undefined}
<section>
<h1>Variables dépendantes</h1>
<ul class="list-disc list-inside">
{#each parameter.referring_variables as variableName}
<li>
<!-- svelte-ignore a11y-missing-attribute -->
<a
class="link"
{...newSelfTargetAProps(`/variables/${variableName}`)}
>{variableName}</a
>
</li>
{/each}
</ul>
</section>
{/if}
<!--
{#if parameterRepositoryUrl !== undefined}
<div class=" border-b border-t my-3 py-1 font-base ">
<p class="font-bold mr-1">
Fichier du moteur de calcul OpenFisca où le paramètre est édité
:
</p>
<a class="link" href={parameterRepositoryUrl}
>{parameterRepositoryUrl}
</a>
</div>
{/if}
</ul>
</section>
{/if}
<!--
<hr class="my-4" />
<section>
......@@ -213,11 +263,21 @@
<pre>{JSON.stringify(parameter, null, 2)}</pre>
</section> -->
<div class="my-4 flex justify-end">
<a
class="bg-le-bleu text-white shadow-md hover:bg-blue-900 px-10 rounded p-2 uppercase text-sm"
href="/parameters/{parameter.name}/edit"
>Éditer
</a>
<div class="my-4 flex justify-end">
<button
class=" bg-le-bleu shadow-md hover:bg-blue-900 rounded p-1 px-6 text-white uppercase text-sm"
href="/parameters/{parameter.name}/edit"
>
Proposer<br />une modification
</button>
</div>
</div>
</main>
<style>
.fond {
background-color: #ffffff;
/* Graph paper - Heropatterns.com échelle réduite */
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='50' viewBox='0 0 100 100'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23ded500' fill-opacity='0.4'%3E%3Cpath opacity='.5' d='M96 95h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9z'/%3E%3Cpath d='M6 5V0H5v5H0v1h5v94h1V6h94V5H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
</style>
......@@ -260,6 +260,7 @@
</script>
<div class="bg-gray-100 border-b-2 border-gray-200 p-2 my-2 rounded-sm">
<h3 class="font-bold pb-2">Personnes composant le cas type</h3>
<label>
Nombre d'adultes
<input
......@@ -279,7 +280,7 @@
{#each [...iterVariablesDefinition(false)] as { allowSlider, name, label, max, min }}
{#if allowSlider && isAxis(axisDescription, false, index, name)}
<label>
{label}
{label} /an
<input
class="rounded m-1 p-1 focus:border-le-bleu focus:text-le-bleu"
max="99"
......@@ -294,7 +295,7 @@
>
{:else}
<label>
{label}
{label} /an
<input
class="w-24 rounded m-1 p-1 focus:border-le-bleu focus:text-le-bleu"
{max}
......
......@@ -225,10 +225,10 @@
<div class="place-self-start w-full shadow-md rounded-t-sm bg-white mb-5 ">
<div
class="bg-gray-100 border border-gray-200 border-b-2 p-4 pb-2 rounded-t-md"
class="bg-gray-100 border border-gray-200 border-b-2 p-4 pb-2 h-40 rounded-t-md"
>
<div class="flex justify-between space-x-2">
<h1 class="font-bold text-gray-600">Salariée travaillant dans une PME</h1>
<h1 class="font-bold text-gray-600">Salariée</h1>
<button on:click={() => dispatch("edit")}>
<!-- Material-icon : Edit mode -->
<svg
......@@ -243,137 +243,140 @@
></button
>
</div>
<div class="grid grid-cols-2">
<div>
<div class="flex">
<div>
<!--Composition du foyer-->
<div class="flex space-x-2 mt-2">
<div class="flex">
<!-- Localité du cas type-->
<PictoArbreMetropole />
</div>
<div class="flex">
<!-- Nombre adultes et salaires-->
<p>
{adultes.length}
</p>
<PictoFemme />
</div>
<div class="flex">
<!-- Nombre Enfant et âge et salaires-->
<p>
{enfants.length}
</p>
<PictoEnfant />
</div>
</div>
<div
class="grid grid-cols-3 grid-rows-2 gap-2 grid-flow-col h-16 content-start mt-1"
>
<!-- Element 1 de la grille-->
<div class="h-8 flex">
<!--Composition du foyer-->
<div class="flex space-x-2">
<div class="flex">
<!-- Localité du cas type-->
<PictoArbreMetropole />
</div>
<!-- Salaire brut-->
<ul>
{#each adultes as _adulte, index}
<li>
{#each [...iterVariablesDefinition(false)] as { allowSlider, name, label, max, min }}
{#if allowSlider && isAxis(axisDescription, false, index, name)}
<label class="font-light text-sm">
{label}
<input
class="mt-2 mx-2"
max="99"
min="0"
step="1"
type="range"
bind:value={vectorIndex}
/>
</label>
<span class="leading-6 px-3 py-2 text-base"
>{Math.round(vectorIndex * stepValue)}</span
>
{:else}
<p class="font-light text-sm pt-2">
{label} :
</p>
<p>{getVariableValue(false, index, name)}</p>
{/if}
{#if allowSlider}
<label class="text-xs">
<input
checked={isAxis(axisDescription, false, index, name)}
on:click={() => toggleAxis(false, index, name)}
type="radio"
/>
Faire varier
</label>
{/if}
{/each}
</li>
{/each}
</ul>
<div class="flex">
<!-- Nombre adultes et salaires-->
<p>
{adultes.length}
</p>
<PictoFemme />
</div>
<!-- Age des enfants-->
<ul>
{#each enfants as _enfant, index}
<li>
{#each [...iterVariablesDefinition(true)] as { allowSlider, name, label, max, min }}
{#if allowSlider && isAxis(axisDescription, true, index, name)}
<label>
{label}
<input
class="mt-2 mx-2"
max="99"
min="0"
step="1"
type="range"
bind:value={vectorIndex}
/>
</label>
{:else}
<p>
{label} : {getVariableValue(true, index, name)}
</p>
{/if}
{#if allowSlider}
<label>
<input
checked={isAxis(axisDescription, true, index, name)}
on:click={() => toggleAxis(true, index, name)}
type="radio"
/>
Faire varier
</label>
{/if}
{/each}
</li>
{/each}
</ul>
<div class="flex">
<!-- Nombre Enfant et âge et salaires-->
<p>
{enfants.length}
</p>
<PictoEnfant />
</div>
</div>
</div>
<!-- Element 2 de la grille -->
<div class="h-8 flex">
<!-- Salaire brut-->
<ul>
{#each adultes as _adulte, index}
<li>
{#each [...iterVariablesDefinition(false)] as { allowSlider, name, label, max, min }}
{#if allowSlider && isAxis(axisDescription, false, index, name)}
<label class="font-light text-sm">
{label} /an
<input
class="mt-2 mx-2"
max="99"
min="0"
step="1"
type="range"
bind:value={vectorIndex}
/>
</label>
<span class="leading-6 px-3 text-base"
>{Math.round(vectorIndex * stepValue)}</span
>
{:else}
<p class="font-light text-sm">
{label} /an :
</p>
<p>{getVariableValue(false, index, name)}</p>
{/if}
{#if allowSlider}
<label class="text-xs">
<input
checked={isAxis(axisDescription, false, index, name)}
on:click={() => toggleAxis(false, index, name)}
type="radio"
/>
Faire varier
</label>
{/if}
{/each}
</li>
{/each}
</ul>
<!--Identité de l'entreprise
<div class="flex space-x-2 mt-2">
<div class="flex">
<PictoEntreprise />
</div>
<div class="flex ">
<div class="flex space-x-1">
<div>
<p class="text-xs">100</p>
<p class="text-xs">50</p>
</div>
<PictoNombreSalaries />
</div>
<div class="flex">
<PictoArbreMetropole />
<!-- Age des enfants-->
<ul>
{#each enfants as _enfant, index}
<li>
{#each [...iterVariablesDefinition(true)] as { allowSlider, name, label, max, min }}
{#if allowSlider && isAxis(axisDescription, true, index, name)}
<label>
{label}
<input
class="mt-2 mx-2"
max="99"
min="0"
step="1"
type="range"
bind:value={vectorIndex}
/>
</label>
{:else}
<p>
{label} : {getVariableValue(true, index, name)}
</p>
{/if}
{#if allowSlider}
<label>
<input
checked={isAxis(axisDescription, true, index, name)}
on:click={() => toggleAxis(true, index, name)}
type="radio"
/>
Faire varier
</label>
{/if}
{/each}
</li>
{/each}
</ul>
</div>
<!--Identité de l'entreprise - Element 3 de la grid -->
<div class="flex h-8">
<!--
<PictoEntreprise />
<div class="flex space-x-1">
<div>
<p class="text-xs">100</p>
<p class="text-xs">50</p>
</div>
<PictoNombreSalaries />
</div>
<div class="flex">
<PictoArbreMetropole />
</div>
-->
</div>
<!--Element 4 de la grid -->
<div class="h-8 flex-col">
<p class="font-light text-sm">Autres revenus :</p>
<p>0 €</p>
</div>
-->
<!--Element 5 de la grid -->
<div class="h-8 flex" />
<!--Element 6 de la grid -->
<div class="h-8 flex" />
</div>
</div>
<div class="flex-wrap ">
......@@ -408,12 +411,12 @@
</div>
<div class="px-4 py-2 grid grid-cols-2 space-x-2 items-start bg-gray-100 ">
<div class="p-1">
<p class="text-sm leading-none pb-3">Tous revenus disponibles /mois</p>
<p class="text-sm leading-none pb-3">Revenus disponibles /an</p>
<PictoFemme />
<p class="text-2xl font-bold ">1000 €</p>
</div>
<div class="p-1">
<p class="text-sm leading-none pb-3">Budget écosystème /mois</p>
<p class="text-sm leading-none pb-3">Somme /an</p>
<div class="grid grid-cols-2 space-x-2 ">
<div class="w-1/2 ">
<PictoEntreprise />
......
......@@ -52,30 +52,32 @@
</script>
<section>
<h1 class="font-serif px-2 sm:px-1 md:px-2 py-1 text-lg">
{variable.label ?? variable.name}
</h1>
{#if variable.documentation !== undefined}
<div>{variable.documentation}</div>
{/if}
<div
class="bg-gray-100 flex items-baseline text-gray-600 text-xs p-2 sm:p-1 md:p-2"
class="bg-gray-100 flex-col items-baseline text-black text-xs my-2 py-2 sm:p-1 md:p-2"
>
<div class="flex">
<div class="bg-gray-100 flex items-baseline text-gray-600 text-sm">
<a
class="mx-1 underline hover:text-gray-700"
href="/variables/{variable.name}"
target="_blank">En savoir plus</a
>
</div>
<div class="flex items-center justify-between">
<h1 class="w-3/5 py-1 text-base">
{variable.label ?? variable.name}
</h1>
<a
class="mx-1 underline hover:text-gray-700 bg text-gray-600 text-sm pl-5"
href="/variables/{variable.name}"
target="_blank">En savoir plus</a
>
{#if variable.documentation !== undefined}
<div>{variable.documentation}</div>
{/if}
</div>
<div class="flex items-center">
<ul>
{#each Object.keys(entitySituation ?? {}) as itemName}
<li>
{itemName} :
<p class="text-xs text-gray-500">
{itemName}
</p>
{#if variable.possible_values !== undefined}
<select
class="p-1 pr-8 rounded my-1 focus:border-le-bleu focus:text-le-bleu"
on:blur={(event) => changeValue(event, itemName)}
on:change={(event) => changeValue(event, itemName)}
value={entitySituationComplement?.[itemName]?.[variable.name] ??
......@@ -87,6 +89,7 @@
</select>
{:else}
<input
class="p-1 rounded my-1 focus:border-le-bleu focus:text-le-bleu"
on:change={(event) => changeValue(event, itemName)}
type="number"
value={entitySituationComplement?.[itemName]?.[variable.name] ??
......
......@@ -31,76 +31,16 @@
$: openAllInputs = directInputs.length === 0
</script>
<h2 class="font-bold text-xl pt-3 pb-2">
Définir d'autres caractéristiques <br />
influentes sur :
</h2>
<h1
class="bg-le-bleu-light p-2 sm:p-1 md:p-2 font-serif font-light rounded-t-lg text-2xl"
class="bg-le-gris-dispositif-light font-serif text-center mb-3 p-2 sm:p-1 md:p-2 rounded-md "
>
{variable.label ?? variable.name}
<p class="font-medium">{variable.label ?? variable.name}</p>
</h1>
{#if latestFormulaDate !== null}
<div class="bg-gray-100 flex text-sm p-2 sm:p-1 md:p-2">
{#if latestFormulaDate < "2020"}
<!-- Inspired from Material Icons name: Warning / whith white symbol inside -->
<svg
aria-hidden="true"
class="block h-12 w-12 text-white pl-2"
viewBox="0 0 24 22"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M0.124322 18.4377C-0.240619 19.1041 0.241623 19.918 1.00142 19.918H20.6259C21.3857 19.918 21.868 19.1041 21.503 18.4377L11.6908 0.519686C11.3113 -0.173228 10.316 -0.173229 9.93658 0.519685L0.124322 18.4377ZM11.8591 16.8375C11.8591 17.3898 11.4114 17.8375 10.8591 17.8375H10.7682C10.2159 17.8375 9.76822 17.3898 9.76822 16.8375V16.627C9.76822 16.0747 10.2159 15.627 10.7682 15.627H10.8591C11.4114 15.627 11.8591 16.0747 11.8591 16.627V16.8375ZM11.8591 12.7416C11.8591 13.2938 11.4114 13.7416 10.8591 13.7416H10.7682C10.2159 13.7416 9.76822 13.2938 9.76822 12.7416V7.3298C9.76822 6.77751 10.2159 6.3298 10.7682 6.3298H10.8591C11.4114 6.3298 11.8591 6.77751 11.8591 7.3298V12.7416Z"
fill="#FFAC33"
/>
<path
d="M10.7686 17.8378H10.8595C11.4117 17.8378 11.8595 17.3901 11.8595 16.8378V16.6273C11.8595 16.075 11.4117 15.6273 10.8595 15.6273H10.7686C10.2163 15.6273 9.76855 16.075 9.76855 16.6273V16.8378C9.76855 17.3901 10.2163 17.8378 10.7686 17.8378Z"
fill="white"
/>
<path
d="M10.7686 13.7418H10.8595C11.4117 13.7418 11.8595 13.2941 11.8595 12.7418V7.33008C11.8595 6.77779 11.4117 6.33008 10.8595 6.33008H10.7686C10.2163 6.33008 9.76855 6.77779 9.76855 7.33008V12.7418C9.76855 13.2941 10.2163 13.7418 10.7686 13.7418Z"
fill="white"
/>
</svg>
{:else}
<!-- Inspired from Material Icons name: New Releases / whith white symbol inside -->
<svg
aria-hidden="true"
class="block h-12 w-12 text-white pl-2 "
viewBox="0 0 24 23"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M22 10.5L19.56 7.71L19.9 4.02L16.29 3.2L14.4 0L11 1.46L7.6 0L5.71 3.19L2.1 4L2.44 7.7L0 10.5L2.44 13.29L2.1 16.99L5.71 17.81L7.6 21L11 19.53L14.4 20.99L16.29 17.8L19.9 16.98L19.56 13.29L22 10.5ZM9.09 15.22L5.29 11.41L6.77 9.93L9.09 12.26L14.94 6.39L16.42 7.87L9.09 15.22Z"
fill="#13CC03"
/>
<path
d="M9.09004 15.2187L5.29004 11.4087L6.77004 9.92867L9.09004 12.2587L14.94 6.38867L16.42 7.86867L9.09004 15.2187Z"
fill="white"
/>
</svg>
{/if}
<div class="ml-4">
<p>
La dernière formule permettant de chiffrer ce dispositif sur Leximpact
date de
<b>{latestFormulaDate.split("-")[0]}</b>.
</p>
<div class="text-sm">
<a
class="underline text-gray-500 hover:text-gray-700"
href="/variables/{variable.name}"
target="_blank">En savoir plus</a
>
|
<a
class="underline text-gray-500 hover:text-gray-700 hover:font-semibold"
href=" {newVariableRepositoryUrl(metadata, variable)}"
target="_blank">Contribuer</a
>
</div>
</div>
</div>
{/if}
{#if directInputs.length > 0}
<section>
<h2
......
......@@ -94,13 +94,7 @@
<a
class="underline text-gray-500 hover:text-gray-700"
href="/variables/{variable.name}"
target="_blank">En savoir plus</a
>
|
<a
class="underline text-gray-500 hover:text-gray-700 hover:font-semibold"
href=" {newVariableRepositoryUrl(metadata, variable)}"
target="_blank">Contribuer</a
target="_blank">En savoir plus sur la formule</a
>
</div>
</div>
......
......@@ -88,6 +88,25 @@
>
</p>
</div>
<a
href="/cgu"
class="inline-flex items-center bg-gray-200 my-5 p-1 pr-2 text-xs rounded
text-black shadow-md hover:bg-gray-400"
>
<!-- material icons - Arrow Back -->
<svg
class="flex mr-2 items-center"
xmlns="http://www.w3.org/2000/svg"
height="24px"
viewBox="0 0 24 24"
width="24px"
fill="#000000"
><path d="M0 0h24v24H0z" fill="none" /><path
d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"
/></svg
>
Retour au simulateur Affaires sociales
</a>
</div>
</div>
</main>
......
......@@ -448,7 +448,7 @@
</h2>
<p class="py-2 px-4">
Pour amender la loi, rendez-vous sur un des cas types à droite et
cliquez sur le nom d'un dispositif législatif.
cliquez sur le nom d'un dispositif.
</p>
<div class="m-4">
<img
......@@ -496,9 +496,11 @@
>
</div>
<h1 class="text-3xl font-bold text-gray-600 pb-5 md:mt-10">
Modifier le cas type
Configurer le cas type
</h1>
<h2 class="font-bold text-xl">Paramètres actifs du cas type</h2>
<h2 class="font-bold text-xl">
Caractéristiques actives du cas type
</h2>
<TestCaseEdit
on:changeAxes
on:changeSituation
......@@ -508,7 +510,9 @@
{year}
/>
<h2 class="font-bold text-xl">Définir d'autres paramètres</h2>
<h2 class="font-bold text-xl pt-3">
Définir d'autres caractéristiques
</h2>
<p class="italic">
Depuis le cas type concerné, cliquez sur le nom d'une mesure à
droite pour éditer les variables entrant dans le calcul de cette
......@@ -532,8 +536,11 @@
>
</div>
<h1 class="text-3xl font-bold text-gray-600 pb-5 md:mt-10">
Modifier le cas type
Configurer le cas type
</h1>
<h2 class="font-bold text-xl">
Caractéristiques actives du cas type
</h2>
<TestCaseEdit
on:changeAxes
on:changeSituation
......
......@@ -28,6 +28,8 @@ module.exports = {
"le-jaune": "#ded500",
"le-jaune-dark": "#a6a00c",
"le-rouge-pjl": "#ff6b6b",
"le-gris-dispositif": "#5E709E",
"le-gris-dispositif-light": "#CCD3E7",
white: colors.white,
},
},
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment