diff --git a/src/routes/index.svelte b/src/routes/index.svelte index 17f2329455f8b7b76c4a05e313c9d710446b407d..7e1a970774906bc9189a2e2413e0fd99bc4e7e98 100644 --- a/src/routes/index.svelte +++ b/src/routes/index.svelte @@ -534,18 +534,35 @@ <title>Calculs | {$session.title}</title> </svelte:head> -<main class="fond flex"> - <!-- Panneau de gauche les zones éditables par l'utilisateur (amendement)--> - {#if displayMode.mode !== "single_test_case" || !displayMode.edit} +<main class="fond"> + <div class="flex justify-between h-10 z-50 md:hidden"> + <div class="w-1/2 flex items-center bg-le-jaune-dark justify-center"> + <button + class="tracking-wider uppercase text-base font-bold text-white border-b-2 border-white" + > + Loi + </button> + </div> <div - class="bg-white flex-none shadow-xl w-full md:w-1/2" - id="situation_left_part_law" + class="w-1/2 flex items-center bg-le-jaune-light justify-center shadow-inner" > - <div class="flex min-h-full "> - <!--Partie I Paramètres de la loi--> - <div class="z-40 w-2/3 bg-white shadow-xl"> - <div class="bg-white h-12 flex pr-4 pt-2 justify-end items-start"> - <!-- {#if displayMode.parametersVariableName !== undefined} + <button class="tracking-wider uppercase text-le-jaune-dark "> + Impacts + </button> + </div> + </div> + <div class="flex"> + <!-- Panneau de gauche les zones éditables par l'utilisateur (amendement)--> + {#if displayMode.mode !== "single_test_case" || !displayMode.edit} + <div + class="bg-white flex-none shadow-xl w-full md:w-1/2" + id="situation_left_part_law" + > + <div class="flex min-h-full"> + <!--Partie I Paramètres de la loi--> + <div class="z-40 w-2/3 bg-white shadow-xl"> + <div class="bg-white h-12 flex pr-4 pt-2 justify-end items-start"> + <!-- {#if displayMode.parametersVariableName !== undefined} Searchbar <div class="flex-col px-5 z-50 w-1/4 md:w-2/5 focus-within:w-full hover:w-full placeholdershown:w-full" @@ -599,47 +616,47 @@ {/if} --> - <!-- Bouton de fermeture du panneau de gauche --> - {#if displayMode.parameterName !== undefined || displayMode.parametersVariableName !== undefined} - <button class="h-10" on:click={closeParametersEditionPane}> - <svg - class="fill-current text-gray-500 hover:text-black" - 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="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" - /></svg - ></button - > - {/if} - </div> + <!-- Bouton de fermeture du panneau de gauche --> + {#if displayMode.parameterName !== undefined || displayMode.parametersVariableName !== undefined} + <button class="h-10" on:click={closeParametersEditionPane}> + <svg + class="fill-current text-gray-500 hover:text-black" + 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="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" + /></svg + ></button + > + {/if} + </div> - {#if displayMode.parameterName !== undefined} - <h1 - class="pt-1 md:pt-2 lg:pt-1 font-bold mb-5 ml-5 text-3xl md:text-2xl lg:text-3xl text-black border-b border-black pb-3" - > - Modifier la loi - </h1> + {#if displayMode.parameterName !== undefined} + <h1 + class="pt-1 md:pt-2 lg:pt-1 font-bold mb-5 ml-5 text-3xl md:text-2xl lg:text-3xl text-black border-b border-black pb-3" + > + Modifier la loi + </h1> - <div class="h-[calc(100vh-10.1rem)] overflow-y-auto"> - <div class="bg-white ml-5"> - <NonVariableReferredParameter - date={$date} - name={displayMode.parameterName} - /> + <div class="h-[calc(100vh-10.1rem)] overflow-y-auto"> + <div class="bg-white ml-5"> + <NonVariableReferredParameter + date={$date} + name={displayMode.parameterName} + /> + </div> </div> - </div> - {:else if displayMode.parametersVariableName !== undefined} - <h1 - class="pt-1 md:pt-2 lg:pt-1 font-bold mb-5 ml-5 text-3xl md:text-2xl lg:text-3xl text-black border-b border-black pb-3" - > - Modifier la loi - </h1> + {:else if displayMode.parametersVariableName !== undefined} + <h1 + class="pt-1 md:pt-2 lg:pt-1 font-bold mb-5 ml-5 text-3xl md:text-2xl lg:text-3xl text-black border-b border-black pb-3" + > + Modifier la loi + </h1> - <!-- Menu quand on aura la version abrégée + <!-- Menu quand on aura la version abrégée <div class="flex space-x-8 mb-8"> <div> <a class="text-le-bleu text-base lg:text-lg " href=""> @@ -656,66 +673,66 @@ </div> </div> --> - <div class="h-[calc(100vh-12.1rem)] overflow-y-auto"> - <div class="bg-white ml-5"> - <VariableReferredParameters - date={$date} - {displayMode} - name={displayMode.parametersVariableName} - /> + <div class="h-[calc(100vh-12.1rem)] overflow-y-auto"> + <div class="bg-white ml-5"> + <VariableReferredParameters + date={$date} + {displayMode} + name={displayMode.parametersVariableName} + /> + </div> </div> - </div> - {:else} - <h1 - class="pt-1 md:pt-2 lg:pt-1 font-bold mb-5 ml-5 text-3xl md:text-2xl lg:text-3xl text-black border-b border-black pb-3" - use:signalStaticTutorial - > - Modifier la loi - </h1> + {:else} + <h1 + class="pt-1 md:pt-2 lg:pt-1 font-bold mb-5 ml-5 text-3xl md:text-2xl lg:text-3xl text-black border-b border-black pb-3" + use:signalStaticTutorial + > + Modifier la loi + </h1> - <div class="h-[calc(100vh-13rem)]"> - <StartTutorial {displayMode} /> - </div> - {/if} - </div> - <!--Partie II modification de la loi--> - <div class="flex-col z-30 w-1/3 bg-gray-200 shadow-lg"> - <button - class="h-12 ml-2 lg:ml-4 justify-center pt-3 flex items-center text-gray-600 hover:text-black uppercase hover:underline" - on:click={reset} - > - <!-- Material Icon Restart Alt --> - <svg - class="fill-current mr-1 inline-flex" - xmlns="http://www.w3.org/2000/svg" - height="16px" - viewBox="0 0 24 24" - width="16px" - fill="#000000" - > - <path - d="M12,5V2L8,6l4,4V7c3.31,0,6,2.69,6,6c0,2.97-2.17,5.43-5,5.91v2.02c3.95-0.49,7-3.85,7-7.93C20,8.58,16.42,5,12,5z" - /> - <path - d="M6,13c0-1.65,0.67-3.15,1.76-4.24L6.34,7.34C4.9,8.79,4,10.79,4,13c0,4.08,3.05,7.44,7,7.93v-2.02 C8.17,18.43,6,15.97,6,13z" - /></svg + <div class="h-[calc(100vh-13rem)]"> + <StartTutorial {displayMode} /> + </div> + {/if} + </div> + <!--Partie II modification de la loi--> + <div class="flex-col z-30 w-1/3 bg-gray-200 shadow-lg"> + <button + class="h-12 ml-2 lg:ml-4 justify-center pt-3 flex items-center text-gray-600 hover:text-black uppercase hover:underline" + on:click={reset} > - <span class="text-xs md:text-sm"> Réinitialiser</span> - </button> - - <h3 - class="font-light mt-3 lg:mt-2 mr-2 text-xl lg:text-2xl text-black border-b border-black pb-3 " - use:signalStaticTutorial - > - <span class="ml-2 lg:ml-4"> Modifications </span> - </h3> + <!-- Material Icon Restart Alt --> + <svg + class="fill-current mr-1 inline-flex" + xmlns="http://www.w3.org/2000/svg" + height="16px" + viewBox="0 0 24 24" + width="16px" + fill="#000000" + > + <path + d="M12,5V2L8,6l4,4V7c3.31,0,6,2.69,6,6c0,2.97-2.17,5.43-5,5.91v2.02c3.95-0.49,7-3.85,7-7.93C20,8.58,16.42,5,12,5z" + /> + <path + d="M6,13c0-1.65,0.67-3.15,1.76-4.24L6.34,7.34C4.9,8.79,4,10.79,4,13c0,4.08,3.05,7.44,7,7.93v-2.02 C8.17,18.43,6,15.97,6,13z" + /></svg + > + <span class="text-xs md:text-sm"> Réinitialiser</span> + </button> - <div class="h-[calc(100vh-10rem)] overflow-y-auto"> - <div - class="mt-5 flex-col mx-2 rounded text-xs " - id="situation_color_code" + <h3 + class="font-light mt-3 lg:mt-2 mr-2 text-xl lg:text-2xl text-black border-b border-black pb-3 " + use:signalStaticTutorial > - <!-- + <span class="ml-2 lg:ml-4"> Modifications </span> + </h3> + + <div class="h-[calc(100vh-10rem)] overflow-y-auto"> + <div + class="mt-5 flex-col mx-2 rounded text-xs " + id="situation_color_code" + > + <!-- <p class="mr-1 italic">Légende :</p> <div class="flex-col"> <p class="mr-1 font-bold">Loi en vigueur</p> @@ -728,32 +745,33 @@ <p class="bg-le-jaune px-1">Votre réforme</p> </div> --> - </div> + </div> - <ReformsChanges {displayMode} /> + <ReformsChanges {displayMode} /> + </div> </div> </div> </div> - </div> - {/if} + {/if} - <!-- Panneau central pour les impacts --> - {#if displayMode.mode === "single_test_case"} - <div - class="{displayMode.parametersVariableName === 'csg_deductible_salaire' || - displayMode.parametersVariableName === 'csg_imposable_salaire' || - displayMode.parametersVariableName === 'irpp_economique' - ? 'h-[calc(100vh-3.5rem)]' - : 'h-[calc(100vh-3.5rem)]'} overflow-y-auto w-full md:w-1/2" - id="situation_right_part_impacts" - > - <div class="px-6 lg:px-8"> - <!-- + <!-- Panneau central pour les impacts --> + {#if displayMode.mode === "single_test_case"} + <div + class="{displayMode.parametersVariableName === + 'csg_deductible_salaire' || + displayMode.parametersVariableName === 'csg_imposable_salaire' || + displayMode.parametersVariableName === 'irpp_economique' + ? 'h-[calc(100vh-3.5rem)]' + : 'h-[calc(100vh-3.5rem)]'} overflow-y-auto w-full md:w-1/2" + id="situation_right_part_impacts" + > + <div class="px-6 lg:px-8"> + <!-- Note: When you change the height below (h-...), don't forget to adjust the height of the div enclosing the test cases below. --> - <div class="flex justify-end"> - <!-- <label + <div class="flex justify-end"> + <!-- <label ><input bind:checked={$adaptAmountsScale} type="checkbox" /> <span class="hidden text-xs lg:inline text-gray-600"> Échelle identique pour tous les cas types @@ -762,7 +780,7 @@ Échelle unique </span></label > --> - <!-- <select + <!-- <select class=" rounded border-1 text-xs " on:blur={changeBillName} on:change={changeBillName} @@ -774,8 +792,8 @@ {/each} </select> --> - <div class="h-10 flex pt-2"> - <!-- <button + <div class="h-10 flex pt-2"> + <!-- <button class="flex items-center text-gray-600 hover:text-black pr-3 mr-2 uppercase border-r border-gray-500 hover:underline" > Remix icon - layout-5-line @@ -793,40 +811,122 @@ <span class="text-xs">Focus</span> </button> --> - <button - class="flex items-center text-gray-600 hover:text-black uppercase hover:underline pr-2 mr-2 " - on:click={shareLink} - id="situation_savebutton" - > - <!-- Material Icon Share --> - <svg - class="fill-current mr-1 inline-flex" - xmlns="http://www.w3.org/2000/svg" - height="14px" - viewBox="0 0 24 24" - width="14px" - fill="#000000" - ><path d="M0 0h24v24H0z" fill="none" /><path - d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92 1.61 0 2.92-1.31 2.92-2.92s-1.31-2.92-2.92-2.92z" - /> - </svg> - <span class="text-xs md:text-sm"> Sauvegarder / partager</span> - </button> + <button + class="flex items-center text-gray-600 hover:text-black uppercase hover:underline pr-2 mr-2 " + on:click={shareLink} + id="situation_savebutton" + > + <!-- Material Icon Share --> + <svg + class="fill-current mr-1 inline-flex" + xmlns="http://www.w3.org/2000/svg" + height="14px" + viewBox="0 0 24 24" + width="14px" + fill="#000000" + ><path d="M0 0h24v24H0z" fill="none" /><path + d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92 1.61 0 2.92-1.31 2.92-2.92s-1.31-2.92-2.92-2.92z" + /> + </svg> + <span class="text-xs md:text-sm"> Sauvegarder / partager</span> + </button> + </div> </div> - </div> - {#if displayMode.parametersVariableName === "csg_deductible_salaire" || displayMode.parametersVariableName === "csg_imposable_salaire"} - <h2 - class="font-bold mb-3 pt-4 lg:pt-3 text-3xl md:text-2xl lg:text-3xl text-black" - > - Impacts recettes CSG de la Sécurité sociale - </h2> - <div class="flex-col justify-start"> - <div class="flex"> + {#if displayMode.parametersVariableName === "csg_deductible_salaire" || displayMode.parametersVariableName === "csg_imposable_salaire"} + <h2 + class="font-bold mb-3 pt-4 lg:pt-3 text-3xl md:text-2xl lg:text-3xl text-black" + > + Impacts recettes CSG de la Sécurité sociale + </h2> + <div class="flex-col justify-start"> + <div class="flex"> + <div + class="flex grow-0 bg-gray-300 text-black uppercase text-sm rounded-lg focus:outline-none hover:text-white shadow-md hover:bg-le-bleu items-center" + > + <a + href="https://budget.leximpact.an.fr/authentication/signin/leximpact?redirect=/budget" + title="Vers le simulateur CSG Budget de la Sécurité sociale" + > + <div class="m-1 flex items-center"> + <svg + class="ml-2" + width="30" + height="30" + viewBox="0 0 40 40" + fill="none" + xmlns="http://www.w3.org/2000/svg" + ><path + fill="#2A6797" + d="M2 11c-2 0-2 2-2 2v21s0 2 2 2h32c2 0 2-2 2-2V13s0-2-2-2H2z" + /><path + fill="#5DADEC" + d="M2 6C0 6 0 8 0 8v20s0 2 2 2h32c2 0 2-2 2-2V8s0-2-2-2H2z" + /><circle fill="#4289C1" cx="25" cy="18" r="6.5" /><path + fill="#2A6797" + d="M33 28.5H3c-.827 0-1.5-.673-1.5-1.5V9c0-.827.673-1.5 1.5-1.5h30c.827 0 1.5.673 1.5 1.5v18c0 .827-.673 1.5-1.5 1.5zM3 8.5a.5.5 0 0 0-.5.5v18c0 .275.225.5.5.5h30c.275 0 .5-.225.5-.5V9a.5.5 0 0 0-.5-.5H3z" + /><path fill="#FFE8B6" d="M14 6h8v24.062h-8z" /><path + fill="#FFAC33" + d="M14 30h8v6h-8z" + /><path + fill="#2A6797" + d="M12.764 21.84c0 .658-1.474 1.447-3.301 1.447c-2.42 0-3.877-1.681-4.361-3.742H3.808a.57.57 0 1 1 0-1.139h1.129c-.008-.136-.029-.27-.029-.406c0-.3.026-.597.063-.89H3.808a.57.57 0 1 1 0-1.14h1.416c.593-1.835 2.03-3.257 4.313-3.257c1.84 0 3.008.993 3.008 1.519c0 .336-.205.612-.526.612c-.584 0-.876-1.022-2.482-1.022c-1.51 0-2.428.942-2.891 2.147h3.327a.57.57 0 1 1 0 1.14H6.351a6.246 6.246 0 0 0-.072.891c0 .134.016.27.025.405h3.668a.57.57 0 1 1 0 1.139H6.485c.389 1.43 1.346 2.631 2.978 2.631c1.563 0 2.25-.934 2.79-.934c.307.001.511.235.511.599z" + /></svg + > + <div class="inline-block ml-2 text-center"> + Simulateur macro CSG + </div> + <!-- Material icon: key fill--> + <svg + class="fill-current inline-flex rounded mx-2" + xmlns="http://www.w3.org/2000/svg" + viewBox="0 0 24 24" + width="18" + height="18" + ><path fill="none" d="M0 0h24v24H0z" /><path + d="M17 14h-4.341a6 6 0 1 1 0-4H23v4h-2v4h-4v-4zM7 14a2 2 0 1 0 0-4 2 2 0 0 0 0 4z" + /></svg + > + </div> + </a> + </div> + </div> + </div> + <div class="mt-5 xl:flex justify-start items-center"> + <div> + <h2 + class="font-bold mb-3 pt-4 lg:pt-3 text-3xl md:text-2xl lg:text-3xl text-black" + > + Impacts cas type/an + </h2> + </div> + <div class="xl:ml-4 mb-3 xl:mb-0"> + <select + class="w-80 text-xs md:text-sm text-gray-600 hover:text-black border-b border-gray-600 hover:border-black bg-transparent " + on:blur={changeTestCaseIndex} + on:change={changeTestCaseIndex} + value={$testCaseIndex} + > + {#each $testCases as situation, situationIndex} + <option + class="w-80 bg-white py-1 text-sm" + value={situationIndex}>{situation.title}</option + > + {/each} + </select> + </div> + </div> + {:else if displayMode.parametersVariableName === "irpp_economique"} + <h2 + class="font-bold mb-3 pt-4 lg:pt-3 text-3xl md:text-2xl lg:text-3xl text-black" + > + Impacts recettes IR de l'État + </h2> + <div class="flex justify-start"> <div - class="flex grow-0 bg-gray-300 text-black uppercase text-sm rounded-lg focus:outline-none hover:text-white shadow-md hover:bg-le-bleu items-center" + class=" grow-0 bg-gray-300 text-black uppercase text-sm rounded-lg focus:outline-none hover:text-white shadow-md hover:bg-le-bleu items-center" > <a - href="https://budget.leximpact.an.fr/authentication/signin/leximpact?redirect=/budget" + href="https://leximpact.an.fr/ir?popin=connection" title="Vers le simulateur CSG Budget de la Sécurité sociale" > <div class="m-1 flex items-center"> @@ -855,7 +955,7 @@ /></svg > <div class="inline-block ml-2 text-center"> - Simulateur macro CSG + Simulateur macro IR </div> <!-- Material icon: key fill--> <svg @@ -872,248 +972,109 @@ </a> </div> </div> - </div> - <div class="mt-5 xl:flex justify-start items-center"> - <div> - <h2 - class="font-bold mb-3 pt-4 lg:pt-3 text-3xl md:text-2xl lg:text-3xl text-black" - > - Impacts cas type/an - </h2> - </div> - <div class="xl:ml-4 mb-3 xl:mb-0"> - <select - class="w-80 text-xs md:text-sm text-gray-600 hover:text-black border-b border-gray-600 hover:border-black bg-transparent " - on:blur={changeTestCaseIndex} - on:change={changeTestCaseIndex} - value={$testCaseIndex} - > - {#each $testCases as situation, situationIndex} - <option - class="w-80 bg-white py-1 text-sm" - value={situationIndex}>{situation.title}</option - > - {/each} - </select> - </div> - </div> - {:else if displayMode.parametersVariableName === "irpp_economique"} - <h2 - class="font-bold mb-3 pt-4 lg:pt-3 text-3xl md:text-2xl lg:text-3xl text-black" - > - Impacts recettes IR de l'État - </h2> - <div class="flex justify-start"> - <div - class=" grow-0 bg-gray-300 text-black uppercase text-sm rounded-lg focus:outline-none hover:text-white shadow-md hover:bg-le-bleu items-center" - > - <a - href="https://leximpact.an.fr/ir?popin=connection" - title="Vers le simulateur CSG Budget de la Sécurité sociale" - > - <div class="m-1 flex items-center"> - <svg - class="ml-2" - width="30" - height="30" - viewBox="0 0 40 40" - fill="none" - xmlns="http://www.w3.org/2000/svg" - ><path - fill="#2A6797" - d="M2 11c-2 0-2 2-2 2v21s0 2 2 2h32c2 0 2-2 2-2V13s0-2-2-2H2z" - /><path - fill="#5DADEC" - d="M2 6C0 6 0 8 0 8v20s0 2 2 2h32c2 0 2-2 2-2V8s0-2-2-2H2z" - /><circle fill="#4289C1" cx="25" cy="18" r="6.5" /><path - fill="#2A6797" - d="M33 28.5H3c-.827 0-1.5-.673-1.5-1.5V9c0-.827.673-1.5 1.5-1.5h30c.827 0 1.5.673 1.5 1.5v18c0 .827-.673 1.5-1.5 1.5zM3 8.5a.5.5 0 0 0-.5.5v18c0 .275.225.5.5.5h30c.275 0 .5-.225.5-.5V9a.5.5 0 0 0-.5-.5H3z" - /><path fill="#FFE8B6" d="M14 6h8v24.062h-8z" /><path - fill="#FFAC33" - d="M14 30h8v6h-8z" - /><path - fill="#2A6797" - d="M12.764 21.84c0 .658-1.474 1.447-3.301 1.447c-2.42 0-3.877-1.681-4.361-3.742H3.808a.57.57 0 1 1 0-1.139h1.129c-.008-.136-.029-.27-.029-.406c0-.3.026-.597.063-.89H3.808a.57.57 0 1 1 0-1.14h1.416c.593-1.835 2.03-3.257 4.313-3.257c1.84 0 3.008.993 3.008 1.519c0 .336-.205.612-.526.612c-.584 0-.876-1.022-2.482-1.022c-1.51 0-2.428.942-2.891 2.147h3.327a.57.57 0 1 1 0 1.14H6.351a6.246 6.246 0 0 0-.072.891c0 .134.016.27.025.405h3.668a.57.57 0 1 1 0 1.139H6.485c.389 1.43 1.346 2.631 2.978 2.631c1.563 0 2.25-.934 2.79-.934c.307.001.511.235.511.599z" - /></svg - > - <div class="inline-block ml-2 text-center"> - Simulateur macro IR - </div> - <!-- Material icon: key fill--> - <svg - class="fill-current inline-flex rounded mx-2" - xmlns="http://www.w3.org/2000/svg" - viewBox="0 0 24 24" - width="18" - height="18" - ><path fill="none" d="M0 0h24v24H0z" /><path - d="M17 14h-4.341a6 6 0 1 1 0-4H23v4h-2v4h-4v-4zM7 14a2 2 0 1 0 0-4 2 2 0 0 0 0 4z" - /></svg - > - </div> - </a> - </div> - </div> - <div class="mt-5 xl:flex justify-start items-center"> - <div> - <h2 - class="font-bold mb-3 pt-4 lg:pt-3 text-3xl md:text-2xl lg:text-3xl text-black" - > - Impacts cas type/an - </h2> - </div> - <div class="xl:ml-4 mb-3 xl:mb-0"> - <select - class="w-80 text-xs md:text-sm text-gray-600 hover:text-black border-b border-gray-600 hover:border-black bg-transparent " - on:blur={changeTestCaseIndex} - on:change={changeTestCaseIndex} - value={$testCaseIndex} - > - {#each $testCases as situation, situationIndex} - <option - class="w-80 bg-white py-1 text-sm" - value={situationIndex}>{situation.title}</option - > - {/each} - </select> - </div> - </div> - {:else} - <div class="xl:flex justify-start items-center"> - <div> - <h2 - class="font-bold mb-3 pt-4 lg:pt-3 text-3xl md:text-2xl lg:text-3xl text-black" - > - Impacts cas type/an - </h2> + <div class="mt-5 xl:flex justify-start items-center"> + <div> + <h2 + class="font-bold mb-3 pt-4 lg:pt-3 text-3xl md:text-2xl lg:text-3xl text-black" + > + Impacts cas type/an + </h2> + </div> + <div class="xl:ml-4 mb-3 xl:mb-0"> + <select + class="w-80 text-xs md:text-sm text-gray-600 hover:text-black border-b border-gray-600 hover:border-black bg-transparent " + on:blur={changeTestCaseIndex} + on:change={changeTestCaseIndex} + value={$testCaseIndex} + > + {#each $testCases as situation, situationIndex} + <option + class="w-80 bg-white py-1 text-sm" + value={situationIndex}>{situation.title}</option + > + {/each} + </select> + </div> </div> - <div class="xl:ml-4 mb-3 xl:mb-0"> - <select - class="w-80 text-xs md:text-sm text-gray-600 hover:text-black border-b border-gray-600 hover:border-black bg-transparent " - on:blur={changeTestCaseIndex} - on:change={changeTestCaseIndex} - value={$testCaseIndex} - > - {#each $testCases as situation, situationIndex} - <option - class="w-80 bg-white py-1 text-sm" - value={situationIndex}>{situation.title}</option - > - {/each} - </select> + {:else} + <div class="xl:flex justify-start items-center"> + <div> + <h2 + class="font-bold mb-3 pt-4 lg:pt-3 text-3xl md:text-2xl lg:text-3xl text-black" + > + Impacts cas type/an + </h2> + </div> + <div class="xl:ml-4 mb-3 xl:mb-0"> + <select + class="w-80 text-xs md:text-sm text-gray-600 hover:text-black border-b border-gray-600 hover:border-black bg-transparent " + on:blur={changeTestCaseIndex} + on:change={changeTestCaseIndex} + value={$testCaseIndex} + > + {#each $testCases as situation, situationIndex} + <option + class="w-80 bg-white py-1 text-sm" + value={situationIndex}>{situation.title}</option + > + {/each} + </select> + </div> </div> - </div> - {/if} + {/if} - <!-- Cas types avec leur waterfall --> - <div class=""> - <TestCaseView - decompositionByName={$decompositionByName} - displayMode={asSingleTestCaseDisplayMode(displayMode)} - on:changeDecompositionByName={({ detail }) => - changeDecompositionByName($testCaseIndex, detail)} - on:changeSituation={({ detail }) => - changeSituation($testCaseIndex, detail)} - on:toggleEdit={() => toggleEdit()} - situation={$testCases[$testCaseIndex]} - situationIndex={$testCaseIndex} - year={$year} - /> + <!-- Cas types avec leur waterfall --> + <div class=""> + <TestCaseView + decompositionByName={$decompositionByName} + displayMode={asSingleTestCaseDisplayMode(displayMode)} + on:changeDecompositionByName={({ detail }) => + changeDecompositionByName($testCaseIndex, detail)} + on:changeSituation={({ detail }) => + changeSituation($testCaseIndex, detail)} + on:toggleEdit={() => toggleEdit()} + situation={$testCases[$testCaseIndex]} + situationIndex={$testCaseIndex} + year={$year} + /> + </div> </div> </div> - </div> - {/if} + {/if} - <!-- Panneau de droite pour l'édition de cas types --> + <!-- Panneau de droite pour l'édition de cas types --> - {#if displayMode.mode === "single_test_case" && displayMode.edit} - <div class="w-full md:w-1/2 bg-gray-300 shadow-lg z-40"> - <div class="h-8 flex pt-3 justify-end mx-5"> - <button - class="flex items-center text-gray-600 hover:text-black uppercase hover:underline" - on:click={() => toggleEdit()} - title="Fermer l'édition du cas type" - > - <span class="text-xs">Quitter l'édition</span> - <!-- Material-icon : Close --> - <svg - class="fill-current inline-flex" - xmlns="http://www.w3.org/2000/svg" - height="18px" - viewBox="0 0 24 24" - width="18px" - fill="#000000" + {#if displayMode.mode === "single_test_case" && displayMode.edit} + <div class="w-full md:w-1/2 bg-gray-300 shadow-lg z-40"> + <div class="h-8 flex pt-3 justify-end mx-5"> + <button + class="flex items-center text-gray-600 hover:text-black uppercase hover:underline" + on:click={() => toggleEdit()} + title="Fermer l'édition du cas type" > - <path d="M0 0h24v24H0z" fill="none" /> - <path - d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" - /> - </svg> - </button> - </div> - - <div class="h-[calc(100vh-7.8rem)] overflow-y-auto"> - <TestCaseEdit - inputInstantsByVariableName={$inputInstantsByVariableNameArray[ - displayMode.testCaseIndex - ]} - on:changeInputInstantsByVariableName={({ detail }) => - changeInputInstantsByVariableName( - asDisplayModeWithTestCase(displayMode).testCaseIndex, - detail, - )} - on:changeSituation={({ detail }) => - changeSituation( - asDisplayModeWithTestCase(displayMode).testCaseIndex, - detail, - )} - situation={$testCases[displayMode.testCaseIndex]} - situationIndex={displayMode.testCaseIndex} - valuesByCalculationNameByVariableName={$valuesByCalculationNameByVariableNameArray[ - displayMode.testCaseIndex - ]} - year={$year} - /> - <div - class="bg-le-bleu-light text-gray-700 text-sm rounded p-2 shadow-md m-4" - > - <p class="px-2 pb-1"> - <span class="font-bold" - >Vous avez besoin de configurer plus précisemment votre cas type ?</span + <span class="text-xs">Quitter l'édition</span> + <!-- Material-icon : Close --> + <svg + class="fill-current inline-flex" + xmlns="http://www.w3.org/2000/svg" + height="18px" + viewBox="0 0 24 24" + width="18px" + fill="#000000" > - Contactez-nous sur - <a - class="underline hover:text-le-bleu" - href="mailto:leximpact@an.fr">leximpact@an.fr</a - >. - </p> - <div class="bg-white text-gray-700 text-xs m-1 p-2 rounded"> - <p> - ⚠️ Le mode d'édition avancée est fonctionnel mais encore difficile - d'accès. Si vous avez besoin d'utiliser votre cas type dans un - amendement, nous vous proposons une relecture. - </p> - <p class="mt-2"> - Pour cela, utilisez la fonctionnalité "Sauvegarder/Partager" et - transmettez-nous le lien de votre copie de travail ainsi qu'un - résumé du cas type que vous cherchez à concevoir. - </p> - </div> + <path d="M0 0h24v24H0z" fill="none" /> + <path + d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" + /> + </svg> + </button> </div> - {#if displayMode.variableName === undefined} - <h2 class="text-xl pt-3 ml-4 mb-2">Ajouter des caractéristiques :</h2> - <p class="text-sm mx-4 text-gray-700 mb-10"> - <span class="font-sm">↖️ Cliquez sur le nom d'un dispositif</span> - affiché sur le cas type pour éditer les variables entrant dans le calcul - de ce dispositif. - </p> - {:else} - <VariableReferredInputsPane - date={$date} + + <div class="h-[calc(100vh-7.8rem)] overflow-y-auto"> + <TestCaseEdit inputInstantsByVariableName={$inputInstantsByVariableNameArray[ displayMode.testCaseIndex ]} - name={displayMode.variableName} on:changeInputInstantsByVariableName={({ detail }) => changeInputInstantsByVariableName( asDisplayModeWithTestCase(displayMode).testCaseIndex, @@ -1131,10 +1092,71 @@ ]} year={$year} /> - {/if} + <div + class="bg-le-bleu-light text-gray-700 text-sm rounded p-2 shadow-md m-4" + > + <p class="px-2 pb-1"> + <span class="font-bold" + >Vous avez besoin de configurer plus précisemment votre cas type + ?</span + > + Contactez-nous sur + <a + class="underline hover:text-le-bleu" + href="mailto:leximpact@an.fr">leximpact@an.fr</a + >. + </p> + <div class="bg-white text-gray-700 text-xs m-1 p-2 rounded"> + <p> + ⚠️ Le mode d'édition avancée est fonctionnel mais encore + difficile d'accès. Si vous avez besoin d'utiliser votre cas type + dans un amendement, nous vous proposons une relecture. + </p> + <p class="mt-2"> + Pour cela, utilisez la fonctionnalité "Sauvegarder/Partager" et + transmettez-nous le lien de votre copie de travail ainsi qu'un + résumé du cas type que vous cherchez à concevoir. + </p> + </div> + </div> + {#if displayMode.variableName === undefined} + <h2 class="text-xl pt-3 ml-4 mb-2"> + Ajouter des caractéristiques : + </h2> + <p class="text-sm mx-4 text-gray-700 mb-10"> + <span class="font-sm">↖️ Cliquez sur le nom d'un dispositif</span> + affiché sur le cas type pour éditer les variables entrant dans le calcul + de ce dispositif. + </p> + {:else} + <VariableReferredInputsPane + date={$date} + inputInstantsByVariableName={$inputInstantsByVariableNameArray[ + displayMode.testCaseIndex + ]} + name={displayMode.variableName} + on:changeInputInstantsByVariableName={({ detail }) => + changeInputInstantsByVariableName( + asDisplayModeWithTestCase(displayMode).testCaseIndex, + detail, + )} + on:changeSituation={({ detail }) => + changeSituation( + asDisplayModeWithTestCase(displayMode).testCaseIndex, + detail, + )} + situation={$testCases[displayMode.testCaseIndex]} + situationIndex={displayMode.testCaseIndex} + valuesByCalculationNameByVariableName={$valuesByCalculationNameByVariableNameArray[ + displayMode.testCaseIndex + ]} + year={$year} + /> + {/if} + </div> </div> - </div> - {/if} + {/if} + </div> </main> <style> diff --git a/tailwind.config.cjs b/tailwind.config.cjs index 3ab19f744a3004f2f5a171427701efc01e1f33c1..5bd9b64c43236874ed7234229de4e781e674a4cb 100644 --- a/tailwind.config.cjs +++ b/tailwind.config.cjs @@ -43,6 +43,7 @@ const config = { gray: colors.neutral, "le-bleu": "#343bff", "le-bleu-light": "#d2dfff", + "le-jaune-light": "#EEEA8A", "le-jaune": "#ded500", "le-jaune-dark": "#a6a00c", "le-rouge-bill": "#ff6b6b",