📱 made more responsive

Co-authored-by: Sindre Kjelsrud <kjelsrudsindre@gmail.com>
This commit is contained in:
haraldnilsen 2024-01-13 16:09:34 +01:00
parent 15ce277167
commit 4a93ac4552
13 changed files with 42 additions and 37 deletions

View file

@ -14,8 +14,8 @@
import Select from "./inputs/Select.svelte";
</script>
<div class="flex justify-start items-center h-1/4 w-full ">
<p class="text-primary font-bold w-1/5">{label}:</p>
<div class="flex flex-col md:flex-row justify-between md:justify-start items-start gap-3 md:gap-0 md:h-1/4 w-full">
<p class="text-primary font-bold w-auto">{label}:</p>
{#if inputType == "radio"}
<RadioButtons on:update={(e) => handleFormChange(e.detail)} selected={formData} options={options}/>
{/if}

View file

@ -9,7 +9,7 @@
export let selected: string
</script>
<div class="flex justify-between w-full">
<div class="flex justify-between w-full md:pl-5">
{#each options as data, index (data)}
<button name={data} on:click={() => handleButtonClick(data)} class="flex flex-col justify-start items-center w-12 text-center hover:cursor-pointer">
<div class={`${selected == data && "bg-primary"} flex justify-center items-center h-6 w-6 rounded-full border-2 border-primary hover:bg-primary`}>

View file

@ -7,7 +7,7 @@
export let options:string[]
</script>
<select class="ml-6 pl-2 pr-16 py-2 rounded-xl text-primary border-primary border-2 text-start hover:cursor-pointer ">
<select class="md:ml-6 pl-2 pr-16 py-2 rounded-xl text-primary border-primary border-2 text-start hover:cursor-pointer ">
{#each options as data, index (data)}
<option on:click={() => handleButtonClick(data)} id={data}>{data}</option>
{/each}