Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add faq section #24

Merged
merged 5 commits into from
Jun 6, 2024
Merged

feat: add faq section #24

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
a29e777
feat: add accordions
Jun 6, 2024
7abafd9
feat: add animation to accordion items
Jun 6, 2024
fa17432
feat: update content
Jun 6, 2024
3ae1fc5
fix: implement cross browser testing, close on resize
Jun 6, 2024
2ed273a
fix: do not listen to resize, add gutter for scrolling
Jun 6, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
<meta name="description" content="Die Projektwebsite zum Forschungsprojekt »Green Ecolution« für smartes Grünflächenmanagement der HS Flensburg.">
<meta name="theme-color" content="#659858">
</head>
<body class="bg-white antialiased font-nunito-sans text-base text-grey-900 w-screen overflow-x-hidden lg:text-lg selection:bg-green-light-900/20 selection:text-grey-900">
<body class="bg-white antialiased font-nunito-sans text-base text-grey-900 w-full overflow-x-hidden lg:text-lg selection:bg-green-light-900/20 selection:text-grey-900">
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
Expand Down
11 changes: 11 additions & 0 deletions src/css/components/general.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
html {
scrollbar-gutter: stable;
}

details > summary {
@apply list-none;
}

details > summary::-webkit-details-marker {
@apply hidden;
}
1 change: 1 addition & 0 deletions src/css/frontend.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,2 @@
@import './components/fonts.css';
@import './components/general.css';
4 changes: 3 additions & 1 deletion src/main.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,9 @@ import './css/site.css'
ReactDOM.createRoot(document.getElementById('root')!).render(
<React.StrictMode>
<Header />
<App />
<main>
<App />
</main>
<Footer />
</React.StrictMode>,
)
6 changes: 5 additions & 1 deletion src/tsx/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,10 @@
import Faq from "./components/Faq";
import FakeProgress from "./FakeProgress";

function App() {
return (
<div className="bg-gray-100 min-h-screen w-full flex flex-col justify-between">
<div>
<div className="bg-gray-100 min-h-screen w-full flex flex-col justify-between">
<div className="flex flex-col justify-center items-center flex-grow">
<div className="flex flex-col justify-center items-center gap-4 w-full px-4">
<img
Expand All @@ -21,6 +23,8 @@ function App() {
<div className="w-full flex justify-center mb-10">
<FakeProgress />
</div>
</div>
<Faq />
</div>
);
}
Expand Down
53 changes: 53 additions & 0 deletions src/tsx/components/Accordion.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
import React, { ReactNode, useState, useRef, useEffect } from 'react';

interface AccordionProps {
label: string;
children: ReactNode;
}

const Accordion: React.FC<AccordionProps> = ({ label, children }) => {
const [open, setOpen] = useState(false);
const [maxHeight, setMaxHeight] = useState('auto');
const accordionPanel = useRef<HTMLDivElement>(null);

const toggleAccordion = () => {
setOpen(!open);
};

useEffect(() => {
if (! accordionPanel.current) return;
setMaxHeight(`${accordionPanel.current.scrollHeight + 40}px`);

if (! open) {
setTimeout(() => setMaxHeight('0px'), 0);
}
}, [open]);

return (
<li className={`cursor-pointer border border-green-dark-900 rounded-2xl shadow-md ${open ? 'border-green-light-900' : 'border-green-dark-900'}`}>
<summary
aria-expanded={open}
className={`px-4 py-3 rounded-t-2xl cursor-pointer flex items-center justify-between gap-x-4 font-semibold font-lato transition-color ease-in-out duration-300 md:px-6 md:py-4 hover:bg-green-dark-900/10 ${open ? 'bg-green-light-900/10' : ''}`}
onClick={toggleAccordion}
>
<h3 className="w-[85%] lg:text-lg">{label}</h3>
<figure
className={`w-7 h-7 rounded-full text-white flex items-center justify-center transition-all ease-in-out duration-300 ${open ? 'bg-green-light-900 rotate-180' : 'bg-green-dark-900'}`}
>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="size-6">
<path strokeLinecap="round" strokeLinejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
</svg>
</figure>
</summary>
<div
ref={accordionPanel}
style={{maxHeight}}
className={`text-base leading-relaxed overflow-hidden px-4 transition-all ease-in-out duration-300 border-t md:px-6 ${open ? 'border-t-green-light-900 pt-3 py-4 md:pb-6' : 'border-t-transparent'}`}
>
{children}
</div>
</li>
);
};

export default Accordion;
61 changes: 61 additions & 0 deletions src/tsx/components/Faq.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@
import Accordion from "./Accordion";

function Faq() {
return (
<section className="px-4 max-w-208 mx-auto my-28 md:px-6 lg:my-36 xl:my-44">
<h2 className="font-lato font-bold text-center text-2xl mb-6 lg:mb-10 lg:text-3xl">
Oft gestellte Fragen zu Green Ecolution
</h2>
<ul className="flex flex-col gap-y-4 md:gap-y-6">
<Accordion label="Wer steckt hinter dem Projekt Green Ecolution?">
<p className="mb-4">
Do do ex aliquip est voluptate Lorem est fugiat amet consectetur veniam irure enim id.
Officia deserunt dolor sint aliquip.
Cupidatat consequat consequat aute sint. Cupidatat fugiat tempor cupidatat cillum in officia anim voluptate cillum mollit.
Est minim fugiat amet non.
</p>
<p>
Tempor amet consectetur in eiusmod quis adipisicing nulla incididunt incididunt tempor.
Do est esse pariatur qui. Laboris non aute Lorem amet minim elit fugiat aliqua ipsum sint fugiat ipsum cillum ad ipsum.
Qui eu irure reprehenderit anim sint deserunt consequat elit in excepteur aliquip excepteur tempor.
Velit adipisicing Lorem nostrud consectetur proident ut. Tempor deserunt laboris tempor dolor dolore ad voluptate.
In culpa commodo commodo aute cillum ex elit. Esse aliquip labore elit consequat.
</p>
</Accordion>
<Accordion label="Welchen Mehrwert bietet das Projekt?">
<p>
Do do ex aliquip est voluptate Lorem est fugiat amet consectetur veniam irure enim id.
Officia deserunt dolor sint aliquip.
Cupidatat consequat consequat aute sint. Cupidatat fugiat tempor cupidatat cillum in officia anim voluptate cillum mollit.
Est minim fugiat amet non.
</p>
</Accordion>
<Accordion label="Was bedeutet das, dass das Projekt öffentlich zugänglich ist?">
<p className="mb-4">
Do do ex aliquip est voluptate Lorem est fugiat amet consectetur veniam irure enim id.
Officia deserunt dolor sint aliquip.
Cupidatat consequat consequat aute sint. Cupidatat fugiat tempor cupidatat cillum in officia anim voluptate cillum mollit.
Est minim fugiat amet non.
</p>
<p>
Tempor amet consectetur in eiusmod quis adipisicing nulla incididunt incididunt tempor.
Do est esse pariatur qui. Laboris non aute Lorem amet minim elit fugiat aliqua ipsum sint fugiat ipsum cillum ad ipsum.
Qui eu irure reprehenderit anim sint deserunt consequat elit in excepteur aliquip excepteur tempor.
Velit adipisicing Lorem nostrud consectetur proident ut. Tempor deserunt laboris tempor dolor dolore ad voluptate.
In culpa commodo commodo aute cillum ex elit. Esse aliquip labore elit consequat.
</p>
</Accordion>
<Accordion label="Welche Sensoren werden verwendet?">
<p>
Do do ex aliquip est voluptate Lorem est fugiat amet consectetur veniam irure enim id.
Officia deserunt dolor sint aliquip.
Cupidatat consequat consequat aute sint. Cupidatat fugiat tempor cupidatat cillum in officia anim voluptate cillum mollit.
Est minim fugiat amet non.
</p>
</Accordion>
</ul>
</section>
);
}

export default Faq;
7 changes: 4 additions & 3 deletions tailwind.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,9 +37,9 @@ export default {
'xl': ['1.25rem', '1.55'], // 20px
'2xl': ['1.5rem', '1.35'], // 24px
'3xl': ['1.75rem', '1.43'], // 28px
'5xl': ['2rem', '1.33'], // 32px
'6xl': ['2.25rem', '1.33'], // 36px
'7xl': ['3rem', '1.25'], // 48px
'4xl': ['2rem', '1.33'], // 32px
'5xl': ['2.25rem', '1.33'], // 36px
'6xl': ['3rem', '1.25'], // 48px
},
extend: {
backgroundImage: {
Expand All @@ -51,6 +51,7 @@ export default {
},
spacing: {
'18': '4.5rem',
'208': '52rem',
},
boxShadow: {
'mainNav': '-4px 0px 20px 8px rgba(0,0,0,0.1)',
Expand Down