UX: don't show bold in options that can be chosen as answer, see usertest

This commit is contained in:
Pieter Vander Vennet 2024-08-27 19:38:27 +02:00
parent 065f03691f
commit b79835074f
3 changed files with 18 additions and 14 deletions

View file

@ -993,10 +993,6 @@ video {
margin-right: 4rem; margin-right: 4rem;
} }
.mb-4 {
margin-bottom: 1rem;
}
.mt-4 { .mt-4 {
margin-top: 1rem; margin-top: 1rem;
} }
@ -1029,6 +1025,10 @@ video {
margin-right: 0.25rem; margin-right: 0.25rem;
} }
.mb-4 {
margin-bottom: 1rem;
}
.ml-1 { .ml-1 {
margin-left: 0.25rem; margin-left: 0.25rem;
} }
@ -1073,10 +1073,6 @@ video {
margin-left: -1.5rem; margin-left: -1.5rem;
} }
.mt-12 {
margin-top: 3rem;
}
.mb-3 { .mb-3 {
margin-bottom: 0.75rem; margin-bottom: 0.75rem;
} }
@ -2043,10 +2039,6 @@ video {
column-gap: 0px; column-gap: 0px;
} }
.gap-x-4 {
column-gap: 1rem;
}
.gap-y-8 { .gap-y-8 {
row-gap: 2rem; row-gap: 2rem;
} }
@ -4887,6 +4879,10 @@ a.link-underline {
background-color: #f2f2f2; background-color: #f2f2f2;
} }
.no-bold b {
font-weight: normal;
}
/************************* MISC ELEMENTS *************************/ /************************* MISC ELEMENTS *************************/
.selected svg:not(.noselect *) path.selectable { .selected svg:not(.noselect *) path.selectable {

View file

@ -352,6 +352,7 @@
{/if} {/if}
</legend> </legend>
<!-- Search menu -->
{#if config.mappings?.length >= 8 || hideMappingsUnlessSearchedFor} {#if config.mappings?.length >= 8 || hideMappingsUnlessSearchedFor}
<div class="sticky flex w-full" aria-hidden="true"> <div class="sticky flex w-full" aria-hidden="true">
<Search class="h-6 w-6" /> <Search class="h-6 w-6" />
@ -369,6 +370,7 @@
{/if} {/if}
{/if} {/if}
<!-- Actual options-->
{#if config?.freeform?.key && !(config?.mappings?.filter((m) => m.hideInAnswer != true)?.length > 0)} {#if config?.freeform?.key && !(config?.mappings?.filter((m) => m.hideInAnswer != true)?.length > 0)}
<!-- There are no options to choose from, simply show the input element: fill out the text field --> <!-- There are no options to choose from, simply show the input element: fill out the text field -->
<FreeformInput <FreeformInput
@ -384,7 +386,7 @@
/> />
{:else if config.mappings !== undefined && !config.multiAnswer} {:else if config.mappings !== undefined && !config.multiAnswer}
<!-- Simple radiobuttons as mapping --> <!-- Simple radiobuttons as mapping -->
<div class="flex flex-col"> <div class="flex flex-col no-bold">
{#each config.mappings as mapping, i (mapping.then)} {#each config.mappings as mapping, i (mapping.then)}
<!-- Even though we have a list of 'mappings' already, we still iterate over the list as to keep the original indices--> <!-- Even though we have a list of 'mappings' already, we still iterate over the list as to keep the original indices-->
<TagRenderingMappingInput <TagRenderingMappingInput
@ -432,7 +434,7 @@
</div> </div>
{:else if config.mappings !== undefined && config.multiAnswer} {:else if config.mappings !== undefined && config.multiAnswer}
<!-- Multiple answers can be chosen: checkboxes --> <!-- Multiple answers can be chosen: checkboxes -->
<div class="flex flex-col"> <div class="flex flex-col no-bold">
{#each config.mappings as mapping, i (mapping.then)} {#each config.mappings as mapping, i (mapping.then)}
<TagRenderingMappingInput <TagRenderingMappingInput
{mapping} {mapping}
@ -475,6 +477,8 @@
{/if} {/if}
</div> </div>
{/if} {/if}
<!-- Save and cancel buttons, in a logintoggle -->
<LoginToggle {state}> <LoginToggle {state}>
<Loading slot="loading" /> <Loading slot="loading" />
<SubtleButton slot="not-logged-in" on:click={() => state?.osmConnection?.AttemptLogin()}> <SubtleButton slot="not-logged-in" on:click={() => state?.osmConnection?.AttemptLogin()}>

View file

@ -538,6 +538,10 @@ a.link-underline {
background-color: #f2f2f2; background-color: #f2f2f2;
} }
.no-bold b {
font-weight: normal;
}
/************************* MISC ELEMENTS *************************/ /************************* MISC ELEMENTS *************************/
.selected svg:not(.noselect *) path.selectable { .selected svg:not(.noselect *) path.selectable {