Skip to content

setup: add accordion for optional steps #229

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

Open
adeebshihadeh wants to merge 1 commit into
base: master
Choose a base branch
from
Open

setup: add accordion for optional steps #229

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
124 changes: 87 additions & 37 deletions src/routes/setup/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
import LinkButton from "$lib/components/LinkButton.svelte";
import Faq from "$lib/components/Faq.svelte";
import HarnessSelector from "$lib/components/HarnessSelector/HarnessSelector.svelte";
import Accordion from "$lib/components/Accordion.svelte";
import CheckmarkIcon from "$lib/icons/ui/checkmark.svg?raw";

import { faq } from "$lib/constants/faq.svelte";
Expand Down Expand Up @@ -268,46 +269,55 @@
</div>

<hr />
<div class="step">
<Badge style="dark">OPTIONAL STEP</Badge>
<h2>Pair your device with comma connect</h2>
<Grid templateColumns="0.875fr 0.75fr">
<div>
<img src={StepSixImage} loading="lazy" alt="comma connect application logo" />
</div>
<div>
<p>
Pair your comma four with <a href="https://connect.comma.ai/" target="_blank" class="highlight">connect.comma.ai</a> on your phone to see your recorded drives.
</p>
<br />
<LinkButton href="https://connect.comma.ai/" target="_blank" style="primary" fullWidth={true}>comma Connect</LinkButton>
<div class="optional-steps">
<Accordion style="dark">
<div class="optional-steps-label" slot="label">
<h2>Optional Steps</h2>
</div>
</Grid>
</div>
<div class="optional-steps-content" slot="content">
<div class="step">
<Badge style="dark">OPTIONAL STEP</Badge>
<h2>Pair your device with comma connect</h2>
<Grid templateColumns="0.875fr 0.75fr">
<div>
<img src={StepSixImage} loading="lazy" alt="comma connect application logo" />
</div>
<div>
<p>
Pair your comma four with <a href="https://connect.comma.ai/" target="_blank" class="highlight">connect.comma.ai</a> on your phone to see your recorded drives.
</p>
<br />
<LinkButton href="https://connect.comma.ai/" target="_blank" style="primary" fullWidth={true}>comma Connect</LinkButton>
</div>
</Grid>
</div>

<hr />
<div class="step">
<Badge style="dark">OPTIONAL STEP</Badge>
<h2>Add the comma power</h2>
<Grid templateColumns="0.875fr 0.75fr">
<div>
<img src={CommaPowerImage} loading="lazy" alt="comma power" />
</div>
<div>
<p>
Installing the comma power is entirely optional and can be done at any time.
Simply connect one end to your car's OBD-II port and the other to the harness box.
</p>
<p>
With a comma power:
</p>
<ul>
<li>The start and end of every drive are recorded.</li>
<li>Your comma four remains powered and online while the car is off.</li>
<li>Your comma four downloads updates while the car is off.</li>
</ul>
<hr />
<div class="step">
<Badge style="dark">OPTIONAL STEP</Badge>
<h2>Add the comma power</h2>
<Grid templateColumns="0.875fr 0.75fr">
<div>
<img src={CommaPowerImage} loading="lazy" alt="comma power" />
</div>
<div>
<p>
Installing the comma power is entirely optional and can be done at any time.
Simply connect one end to your car's OBD-II port and the other to the harness box.
</p>
<p>
With a comma power:
</p>
<ul>
<li>The start and end of every drive are recorded.</li>
<li>Your comma four remains powered and online while the car is off.</li>
<li>Your comma four downloads updates while the car is off.</li>
</ul>
</div>
</Grid>
</div>
</div>
</Grid>
</Accordion>
</div>

</div>
Expand Down Expand Up @@ -566,4 +576,44 @@
}
}
}

.optional-steps {
margin-bottom: 3rem;

& .optional-steps-label {
color: white;
background-color: black;
padding: 1.5rem 2rem;

& h2 {
margin: 0;
font-size: 1.75rem;
font-weight: 600;
color: white;
}
}

& .optional-steps-content {
border: 1px solid #000;
border-top: none;
padding: 2rem;
color: black;

& .step {
margin-bottom: 0;

& p, & li, & h2 {
color: black;
}

&:last-child {
margin-bottom: 0;
}
}

& hr {
margin: 2rem 0;
}
}
}
</style>