diff --git a/src/routes/calculator/_resin.svelte b/src/routes/calculator/_resin.svelte index 28c648a2..d9633edb 100644 --- a/src/routes/calculator/_resin.svelte +++ b/src/routes/calculator/_resin.svelte @@ -41,6 +41,7 @@ let condensedResin = { id: 'condensed_resin', + image: '/images/condensed_resin.png', label: 'Condensed Resin', value: 40, }; @@ -126,16 +127,66 @@ {/if} </p> </div> - <div class="md:col-span-2 xl:col-span-2"> + <div class="md:col-span-1 xl:col-span-2"> <Button disabled={!canCalculate} className="block w-full md:w-auto" on:click={calculate} >{$t('calculator.resin.calculate')}</Button > {#if !changed} <div transition:fade={{ duration: 100 }} class="bg-background rounded-xl p-4 mt-2 block xl:inline-block"> - <table class="table w-full"> + <table class="w-full"> <tr> - <td /> - <td class="text-red-400"> + <td class="text-right border-b border-gray-700 py-1"> + <span class="text-white mr-2 whitespace-no-wrap" + >{resinOutput.resin} + <Icon size={0.5} path={mdiClose} /></span + > + </td> + <td class="border-b border-gray-700 py-1"> + <span class="text-white"> + <span class="w-6 inline-block"> + <img class="h-6 inline-block mr-1" src={originalResin.image} alt={originalResin.label} /> + </span> + {originalResin.label} + </span> + </td> + </tr> + {#if resinOutput.condensed.condensedResin !== 0} + <tr><td colspan="2" class="text-white text-center pt-2">{$t('calculator.resin.or')}</td></tr> + <tr> + <td class="text-right border-b border-gray-700 py-1"> + <span class="text-white mr-2 whitespace-no-wrap" + >{resinOutput.condensed.resin} + <Icon size={0.5} path={mdiClose} /></span + > + </td> + <td class="border-b border-gray-700 py-1"> + <span class="text-white"> + <span class="w-6 inline-block"> + <img class="h-6 inline-block mr-1" src={originalResin.image} alt={originalResin.label} /> + </span> + {originalResin.label} + </span> + </td> + </tr> + <tr> + <td class="text-right border-b border-gray-700 py-1"> + <span class="text-white mr-2 whitespace-no-wrap" + >{resinOutput.condensed.condensedResin} + <Icon size={0.5} path={mdiClose} /></span + > + </td> + <td class="border-b border-gray-700 py-1"> + <span class="text-white"> + <span class="w-6 inline-block"> + <img class="h-6 inline-block mr-1" src={condensedResin.image} alt={condensedResin.label} /> + </span> + {condensedResin.label} + </span> + </td> + </tr> + {/if} + <tr> + <td class="text-red-400" colspan="2"> {$t('calculator.resin.fullTime')}: {#if $t('calculator.resin.timeFormat') === 'en'} {fullTime.locale('en').format('dddd HH:mm:ss')} ({fullTime.locale('en').fromNow()}) @@ -150,16 +201,3 @@ </div> </div> </div> - -<style> - td { - @apply py-1; - @apply border-b; - @apply border-gray-700; - } - tr:last-child { - td { - @apply border-b-0; - } - } -</style> diff --git a/static/images/condensed_resin.png b/static/images/condensed_resin.png new file mode 100644 index 00000000..5c164de1 Binary files /dev/null and b/static/images/condensed_resin.png differ