Skip to content

Commit

Permalink
Safari UI Fixes (#532)
Browse files Browse the repository at this point in the history 
* fix focused question faq

* fix faq unfocused question

* fix desktop faq

* fix apps

* fix p cannot be a descendant of p error

* fix page 2 width on xl screens

* change partner blocks to be same height

* remove unnecessary empty tag
  • Loading branch information
@waalbert
waalbert authored Jan 6, 2025
1 parent 236a36c commit 6b7246e
Show file tree
Hide file tree
Showing 9 changed files with 145 additions and 162 deletions.
198 changes: 96 additions & 102 deletions apps/site/src/app/(main)/(home)/sections/FAQ/FAQAccordionDesktop.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,118 +18,112 @@ const FAQAccordionDesktop: React.FC<FAQAccordion> = ({ faq }) => {
const [focusedQuestion, setFocusedQuestion] = useState<null | FAQ>(null);

return (
<div className="flex flex-1 justify-center lg:h-auto mt-16 lg:mt-8 mb-[-250px] lg:mb-0">
{/* Desktop View */}
<div className="hidden lg:flex flex-1 justify-center lg:h-auto mt-16 lg:mt-8 mb-[-250px] lg:mb-0 lg:block">
<Image
src={SpeechDesktop}
alt="Dialogue box background"
className="hidden lg:block h-fit lg:max-w-[630px] lg:h-[310px] xl:max-w-[775px] xl:h-[350px]"
className="duration-300 h-fit lg:max-w-[630px] lg:h-[310px] xl:max-w-[775px] xl:h-[350px]"
/>
<div className="hidden lg:block absolute lg:w-[555px] xl:w-[685px] lg:text-[.85rem] xl:text-[1rem] mt-3">
{/* Page 1 focused */}
<div
className={`absolute w-full ${
page1Selected && !focusedQuestion
? "z-50"
: "hidden pointer-events-none"
}`}
>
{faqGroup1.map((F) => (
<ListItemButton
key={F._key}
onClick={() => setFocusedQuestion(F)}
text={F.question}
inverted={false}
className="mb-0 py-[2px]"
/>
))}
<div className="flex justify-end w-full ms-3">
<button
type="button"
onClick={() => {
setPage1Selected(false);
}}
className={`flex items-center opacity-100 hover:bg-white hover:text-black p-[1px] px-[3px] duration-200 group`}
>
Page 1/2
<TriangleIcon className="ms-2 opacity-0 lg:w-4 lg:h-4 xl:w-5 xl:h-5" />
<TriangleIcon
className={`ms-2 absolute hidden group-hover:block duration-200 right-[-7px] lg:w-4 lg:h-4 xl:w-5 xl:h-5`}
dark
<div className="absolute lg:w-[555px] xl:w-[685px] lg:text-[.85rem] xl:text-[1rem] mt-3">
{focusedQuestion ? (
<div className={"duration-300 absolute lg:h-[250px] xl:h-[285px]"}>
<div>
<ListItemButton
onClick={() => setFocusedQuestion(null)}
className="mb-2 py-[2px]"
text={focusedQuestion?.question}
rotate="rotate-90"
inverted
/>
<TriangleIcon
className={`ms-2 absolute group-hover:hidden duration-200 right-[-7px] lg:w-4 lg:h-4 xl:w-5 xl:h-5`}
/>
</button>
</div>
</div>

{/* Page 2 focused */}
<div
className={`absolute ${
!page1Selected && !focusedQuestion
? "z-50"
: "hidden pointer-events-none"
}`}
>
{faqGroup2.map((F) => (
<ListItemButton
key={F._key}
onClick={() => setFocusedQuestion(F)}
text={F.question}
inverted={false}
className="mb-0 py-[2px]"
/>
))}
<div className="flex justify-end ms-3 w-full">
<button
type="button"
onClick={() => {
setPage1Selected(true);
}}
className={`absolute flex items-center mt-4 group hover:bg-white hover:text-black p-[1px] px-[3px] xl:mt-4 duration-200 `}
>
<TriangleIcon className="ms-2 opacity-0 lg:w-4 lg:h-4 xl:w-5 xl:h-5" />
<TriangleIcon
className={`ms-2 absolute hidden group-hover:block duration-200 left-[-5px] rotate-180 lg:w-4 lg:h-4 xl:w-5 xl:h-5`}
dark
/>
<TriangleIcon
className={`ms-2 absolute group-hover:hidden duration-200 left-[-5px] rotate-180 lg:w-4 lg:h-4 xl:w-5 xl:h-5`}
<div className="ms-2">{focusedQuestion?.answer}</div>
</div>

<div className="absolute bottom-0">
<ListItemButton
onClick={() => setFocusedQuestion(null)}
className="py-[2px] min-w-[175px] xl:min-w-[200px]"
text="Ask another question"
rotate="rotate-180"
inverted={false}
/>
Page 2/2
</button>
</div>
</div>
</div>

{/* Question is focused. */}
<div
className={`${
focusedQuestion ? "z-50" : "hidden pointer-events-none"
} absolute lg:h-[250px] xl:h-[285px]`}
>
<div>
<ListItemButton
onClick={() => setFocusedQuestion(null)}
className="mb-2 py-[2px]"
text={focusedQuestion?.question}
rotate="rotate-90"
inverted
/>

<p className="ms-2">{focusedQuestion?.answer}</p>
) : page1Selected ? (
<div className="duration-300">
{faqGroup1.map((F) => (
<ListItemButton
key={F._key}
onClick={() => setFocusedQuestion(F)}
text={F.question}
inverted={false}
className="mb-0 py-[2px]"
/>
))}
<div className="flex justify-end w-full ms-3">
<button
type="button"
onClick={() => {
setPage1Selected(false);
}}
className={
"flex items-center opacity-100 hover:bg-white hover:text-black px-[3px] duration-300 group"
}
>
Page 1/2
<TriangleIcon className="ms-2 opacity-0 lg:w-4 lg:h-4 xl:w-5 xl:h-5" />
<TriangleIcon
className={
"ms-2 absolute hidden group-hover:block duration-300 right-[-7px] lg:w-4 lg:h-4 xl:w-5 xl:h-5"
}
dark
/>
<TriangleIcon
className={
"ms-2 absolute group-hover:hidden duration-300 right-[-7px] lg:w-4 lg:h-4 xl:w-5 xl:h-5"
}
/>
</button>
</div>
</div>

<div className="absolute bottom-0">
<ListItemButton
onClick={() => setFocusedQuestion(null)}
className="py-[2px] min-w-[175px] xl:min-w-[200px]"
text="Ask another question"
rotate="rotate-180"
inverted={false}
/>
) : (
<div className="duration-300">
{faqGroup2.map((F) => (
<ListItemButton
key={F._key}
onClick={() => setFocusedQuestion(F)}
text={F.question}
inverted={false}
className="mb-0 py-[2px]"
/>
))}
<div className="flex justify-end ms-3 w-full">
<button
type="button"
onClick={() => {
setPage1Selected(true);
}}
className={
"w-[100px] xl:w-[105px] absolute flex items-center mt-4 group hover:bg-white hover:text-black px-[3px] xl:mt-4 duration-300"
}
>
<TriangleIcon className="ms-2 opacity-0 lg:w-4 lg:h-4 xl:w-5 xl:h-5" />
<TriangleIcon
className={
"ms-2 absolute hidden group-hover:block duration-300 left-[-5px] rotate-180 lg:w-4 lg:h-4 xl:w-5 xl:h-5"
}
dark
/>
<TriangleIcon
className={
"ms-2 absolute group-hover:hidden duration-300 left-[-5px] rotate-180 lg:w-4 lg:h-4 xl:w-5 xl:h-5"
}
/>
Page 2/2
</button>
</div>
</div>
</div>
)}
</div>
</div>
);
Expand Down
82 changes: 38 additions & 44 deletions apps/site/src/app/(main)/(home)/sections/FAQ/FAQAccordionMobile.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,49 +12,25 @@ const FAQAccordionMobile: React.FC<FAQAccordion> = ({ faq }) => {
const [focusedQuestion, setFocusedQuestion] = useState<null | FAQ>(null);

return (
<div className="flex flex-1 justify-center lg:h-auto mt-60 lg:mt-8 mb-[-250px] lg:mb-0 sm:text-lg md:text-xl">
{/* Changes size of parent component */}
<div
className={`z-0 ${
focusedQuestion ? "h-[520px]" : "h-[965px] sm:h-[940px] md:h-[1030px]"
} duration-200 transition-transform lg:hidden`}
<div
className={`relative flex flex-1 justify-center sm:text-lg md:text-xl lg:hidden ${
focusedQuestion ? "h-[480px]" : "h-[965px] sm:h-[940px] md:h-[810px]"
}`}
>
<Image
src={SpeechMobile}
alt="Dialogue box background"
className={`duration-300 ${
focusedQuestion
? "w-[95%] h-[480px] sm:h-[375px] sm:max-h-[620px]"
: "w-[300px] sm:w-[480px] md:w-[600px] h-[920px] sm:h-[745px] md:h-[800px]"
}`}
/>
<div className="relative flex justify-center lg:hidden">
<Image
src={SpeechMobile}
alt="Dialogue box background"
className={`${
focusedQuestion
? "mt-[-160px] sm:mt-[-120px] sm:max-h-[620px]"
: "mt-[-275px] md:mt-[-300px]"
} min-w-[450px] sm:min-w-[600px] md:min-w-[750px] object-fill`}
layout="responsive"
/>

{/* No question is focused. */}
<div
className={`${
focusedQuestion ? "hidden pointer-events-none" : "z-50"
} duration-200 w-[325px] sm:w-[450px] md:w-[560px] absolute mx-4 mt-2 h-fit`}
>
<div>
{faq.map((F) => (
<ListItemButton
key={F._key}
onClick={() => setFocusedQuestion(F)}
text={F.question}
className="md:p-2"
inverted={false}
/>
))}
</div>
</div>

{/* Question is focused. */}
{focusedQuestion ? (
<div
className={`${
focusedQuestion ? "z-50" : "hidden pointer-events-none"
} duration-200 absolute w-[325px] sm:w-[450px] md:w-[570px] h-[350px] sm:h-[325px] mt-2 sm:mt-8`}
className={
"duration-300 absolute top-[35px] w-[85%] sm:w-[88%] h-[420px] sm:h-[325px]"
}
>
<ListItemButton
onClick={() => setFocusedQuestion(null)}
Expand All @@ -64,9 +40,9 @@ const FAQAccordionMobile: React.FC<FAQAccordion> = ({ faq }) => {
inverted
/>

<p>{focusedQuestion?.answer}</p>
{focusedQuestion?.answer}

<div className="-bottom-2 absolute">
<div className="-bottom-2 sm:bottom-0 absolute">
<ListItemButton
onClick={() => setFocusedQuestion(null)}
text="Ask another question"
Expand All @@ -75,7 +51,25 @@ const FAQAccordionMobile: React.FC<FAQAccordion> = ({ faq }) => {
/>
</div>
</div>
</div>
) : (
<div
className={
"duration-300 w-[250px] sm:w-[450px] md:w-[560px] absolute top-14 sm:top-12 mx-4 h-fit"
}
>
<div>
{faq.map((F) => (
<ListItemButton
key={F._key}
onClick={() => setFocusedQuestion(F)}
text={F.question}
className="md:p-2"
inverted={false}
/>
))}
</div>
</div>
)}
</div>
);
};
Expand Down
11 changes: 2 additions & 9 deletions apps/site/src/app/(main)/(home)/sections/FAQ/assets/speech-mobile.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion apps/site/src/app/(main)/(home)/sections/FAQ/components/ListItemButton.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ export default function ListItemButton({
<button
type="button"
onClick={onClick}
className={`flex items-center gap-3 duration-200 p-[5px] lg:p-[4px] xl:p-[4px] group ${
className={`flex items-center gap-3 duration-300 p-[5px] lg:p-[4px] xl:p-[4px] group ${
inverted ? "bg-white" : "hover:bg-white"
} ${className}`}
>
Expand Down
2 changes: 1 addition & 1 deletion apps/site/src/app/(main)/(home)/sections/Partners/Partners.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,7 @@ export default async function Partners() {
<img
src={builder.image(logo).format("webp").url()}
alt={`${name} logo`}
className="max-w-full max-h-full object-contain"
className="h-full max-w-full max-h-full object-contain"
/>
</a>
))}
Expand Down
4 changes: 2 additions & 2 deletions apps/site/src/lib/components/forms/MultipleSelect.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,7 @@ export default function MultipleSelect({
const inputId = `${name}-${i}`;
if (item.value === "other") {
return (
<div key={item.value} className="flex gap-2">
<div key={item.value} className="flex gap-2 items-center">
<input
id={inputId}
type={inputType}
Expand All @@ -90,7 +90,7 @@ export default function MultipleSelect({
);
}
return (
<div key={i} className="flex gap-2">
<div key={i} className="flex gap-2 items-center">
<input
id={inputId}
type={inputType}
Expand Down
2 changes: 1 addition & 1 deletion apps/site/src/lib/components/forms/Slider.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ export default function Slider({
<SliderTick leftPercentage="74%" label="4" />
<SliderTick leftPercentage="98.7%" label="5" />
<input
className="w-full h-2 bg-white appearance-none rounded-full z-10"
className="w-full h-1 bg-white appearance-none rounded-full z-10"
type="range"
min="1"
max="5"
Expand Down
2 changes: 1 addition & 1 deletion apps/site/src/lib/components/forms/shared/ApplyConfirmation/ApplyConfirm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ export default async function ApplyConfirm({
: ""; // eslint-disable-line

return (
<div className="flex items-center py-16">
<div className="flex items-center pt-24 pb-16">
<ConfirmationDetails
isLoggedIn={identity.uid !== null}
applicationURL={applicationURL}
Expand Down
Loading

0 comments on commit 6b7246e

Please sign in to comment.