Improve responsivity

This commit is contained in:
Ondřej 2024-02-27 17:24:54 +01:00
parent db0e7fbd2d
commit 589dd0c328
3 changed files with 26 additions and 24 deletions

View file

@ -44,7 +44,7 @@ const letterText = renderText(lang, {
</div>
<div>
<Button
class="flex w-full md:w-auto md:mx-auto lg:mx-0"
class="flex w-full md:w-auto md:mx-auto lg:mx-0 md:min-w-[260px]"
type="button"
disabled={!result.success}
onclick="document.querySelector('#contact-details-dialog')?.showModal()"

View file

@ -33,9 +33,31 @@ const genderOptions: Record<Lang, Array<"f" | "n" | "m">> = {
const genders = genderOptions[lang];
---
<form id="letter-options" class="grid gap-8" novalidate>
<form id="letter-options" class="grid md:grid-cols-2 lg:grid-cols-1 gap-8" novalidate>
<Field required label={t("form.first_name")} name="firstName" />
<Field required label={t("form.last_name")} name="lastName" />
<div>
<Label required class="mb-2" for="branch-input">
{t("form.branch")}
</Label>
<Select name="branch" id="branch-input" class="mb-6">
{
branches.map((branch) => {
return (
<option value={branch.id} selected={branch.id === defaultBranchId}>
{branch.data.name}
{lang === "en" ? <span> {countries[branch.data.lang as Lang]}</span> : null}
</option>
);
})
}
</Select>
<Checkbox name="isClient">
{t("form.is_client")}
</Checkbox>
</div>
{
genders && genders.length > 0 && (
<RadioGroup required label={t("form.gender")}>
@ -50,24 +72,4 @@ const genders = genderOptions[lang];
</RadioGroup>
)
}
<div>
<Label required class="mb-2" for="branch-input">
{t("form.branch")}
</Label>
<Select name="branch" id="branch-input">
{
branches.map((branch) => {
return (
<option value={branch.id} selected={branch.id === defaultBranchId}>
{branch.data.name}
{lang === "en" ? <span> {countries[branch.data.lang as Lang]}</span> : null}
</option>
);
})
}
</Select>
</div>
<Checkbox name="isClient">
{t("form.is_client")}
</Checkbox>
</form>

View file

@ -3,11 +3,11 @@ import type { HTMLAttributes } from "astro/types";
interface Props extends HTMLAttributes<"select"> {}
const { ...props } = Astro.props;
const { class: c, ...props } = Astro.props;
---
<div class="relative text-black">
<select class="block w-full px-3 py-2 appearance-none text-xl" {...props}>
<select class:list={["block w-full px-3 py-2 appearance-none text-xl", c]} {...props}>
<slot />
</select>
<svg