Skip to content

Commit e253d57

Browse files
cxs7700chris7700peterkos
authored
Implemented FAQ section (#1000)
* layout and content with some initial styling * added js for accordion * finishing touches on icons * removed noopener * contact url, question and answer styles * Refactored :) Signed-off-by: Peter Kos <pkos91@icloud.com> * Animations working!! Signed-off-by: Peter Kos <pkos91@icloud.com> * cleaning up unnecessary styles * Added question content, fixed link color in card Signed-off-by: Peter Kos <pkos91@icloud.com> * Tweak panel p styling Make margin styling a bit better but messier Signed-off-by: Peter Kos <pkos91@icloud.com> * Remove unnesesecary outline none Signed-off-by: Peter Kos <pkos91@icloud.com> Co-authored-by: cxs7700 <cxs7700@g.rit.edu> Co-authored-by: Peter Kos <pkos91@icloud.com>
1 parent 17e7276 commit e253d57

3 files changed

Lines changed: 190 additions & 2 deletions

File tree

‎index.html‎

Lines changed: 71 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -202,9 +202,79 @@ <h6 class="name">SUNDAY</h6>
202202
</div>
203203
</div>
204204
</div>
205-
206205
</section>
207206
<section id="faq">
207+
<div id="faq-wrapper">
208+
<h1>Frequently Asked Questions</h1>
209+
<div id="faq-cards">
210+
<div id="faq-cards-left">
211+
<div class="card">
212+
<button class="accordion-header">
213+
<i class="fa fa-plus fa-plus-pink" aria-hidden="true"></i>
214+
Who can participate in BrickHack?
215+
</button>
216+
<div class="panel">
217+
<p>Anyone currently enrolled as a student can attend!</p>
218+
<p>If you don't fit that description, you're
219+
absolutely welcome to attend as a mentor or volunteer. All attendees must be 18 years or older.</p>
220+
</div>
221+
</div>
222+
<div class="card">
223+
<button class="accordion-header">
224+
<i class="fa fa-plus fa-plus-red" aria-hidden="true"></i>
225+
Do I need a team to join?
226+
</button>
227+
<div class="panel">
228+
<p>Nope! If you have an existing team, that's great &mdash; otherwise, we'll provide time to form new teams with other hackers at the start of the event.</p>
229+
</div>
230+
</div>
231+
<div class="card">
232+
<button class="accordion-header">
233+
<i class="fa fa-plus fa-plus-orange" aria-hidden="true"></i>
234+
Do RIT students need to apply?
235+
</button>
236+
<div class="panel">
237+
<p>Yes. All students, RIT or not, need to apply to the event.</p>
238+
<p>Our main limitation is space. Even though we're a digtial event, we need to provide judging, chat moderation, interpreting services, and more. All of these require staff, and we only have so many resources to run the event.</p>
239+
<p>Maybe next year we'll have AI run the event...</p>
240+
</div>
241+
</div>
242+
</div>
243+
<div id="faq-cards-right">
244+
<div class="card">
245+
<button class="accordion-header">
246+
<i class="fa fa-plus fa-plus-red" aria-hidden="true"></i>
247+
How accessible is the online event?
248+
</button>
249+
<div class="panel">
250+
<p>We've put a lot of thought into making sure all of BrickHack can be enjoyed by everyone. We're planning to have intepreting services and audio captioning to boot, with more accomodations to come in the future.</p>
251+
<p>During registration, put services that you require in the "special needs" field, and we'll do our best to meet them!</p>
252+
<p>For any outstanding questions, email <a href="mailto:hello@coderit.org">hello@coderit.org</a>.</p>
253+
</div>
254+
</div>
255+
<div class="card">
256+
<button class="accordion-header">
257+
<i class="fa fa-plus fa-plus-pink" aria-hidden="true"></i>
258+
When will I know if I got in?
259+
</button>
260+
<div class="panel">
261+
<p>Soon!</p>
262+
<p>(We'll send an email out if you are accepted.)</p>
263+
</div>
264+
</div>
265+
<div class="card">
266+
<button class="accordion-header">
267+
<i class="fa fa-plus fa-plus-orange" aria-hidden="true"></i>
268+
Should I bring my own bricks?
269+
</button>
270+
<div class="panel">
271+
<p>We've got you covered.</p>
272+
</div>
273+
</div>
274+
</div>
275+
</div>
276+
<p id="contact">Don't see your question here? <a href="mailto:hello@coderit.org">Contact Us</a></p>
277+
</div>
208278
</section>
209279
<section id="leadership">
210280
<h1>Leadership Team</h1>

‎index.js‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,29 @@ $(document).ready(function() {
2323
});
2424
});
2525

26+
let card = document.getElementsByClassName("card");
27+
for (let i = 0; i < card.length; i++) {
28+
let accordion = card[i].getElementsByClassName("accordion-header")[0];
29+
// Click should only work on accordion-header of each card
30+
accordion.addEventListener("click", function() {
31+
32+
card[i].classList.toggle("active");
33+
34+
let panel = card[i].getElementsByClassName("panel")[0];
35+
let fa = this.getElementsByTagName("i")[0];
36+
37+
// Toggle panel and plus/minus on click of header
38+
if ($(card[i]).hasClass("active")) {
39+
$(panel).slideDown(200);
40+
} else {
41+
$(panel).slideUp(200);
42+
}
43+
44+
$(fa).toggleClass("fa-plus");
45+
$(fa).toggleClass("fa-minus");
46+
});
47+
}
48+
2649
// Schedule toggle code
2750
$('.day-second-events').hide();
2851
$('.day-first').click(function() {

‎sass/main.scss‎

Lines changed: 96 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -84,7 +84,7 @@ a {
8484
}
8585

8686
p {
87-
font-size: 1.2em;
87+
font-size: 1.3em;
8888
}
8989

9090
// Nav
@@ -364,6 +364,101 @@ nav {
364364
}
365365
}
366366

367+
#faq {
368+
padding: $section-padding;
369+
background-color: $dark-blue;
370+
#faq-wrapper {
371+
h1 {
372+
font-size: $title-size;
373+
margin-bottom: 4rem;
374+
}
375+
#faq-cards {
376+
display: flex;
377+
flex-flow: row wrap;
378+
justify-content: space-between;
379+
380+
// TODO: This can be cleaner.
381+
$card-m: 20px;
382+
&-left {
383+
width: calc(50% - (#{$card-m} / 2));
384+
margin-right: $card-m / 2;
385+
}
386+
&-right {
387+
width: calc(50% - (#{$card-m} / 2));
388+
margin-left: $card-m / 2;
389+
}
390+
.card {
391+
width: 100%;
392+
margin-bottom: $card-m;
393+
border-radius: 7px;
394+
background-color: $light-blue;
395+
&:hover {
396+
background-color: lighten($light-blue, 5%);
397+
}
398+
.accordion-header {
399+
background-color: transparent;
400+
cursor: pointer;
401+
text-align: left;
402+
padding: 20px 30px;
403+
border: none;
404+
width: 100%;
405+
font-size: $nav-fontsize;
406+
407+
.fa-plus, .fa-minus {
408+
margin-right: 10px;
409+
}
410+
.fa-plus {
411+
&-red { color: $red; }
412+
&-pink { color: $pink; }
413+
&-orange { color: $orange; }
414+
}
415+
.fa-minus {
416+
color: $blue;
417+
}
418+
}
419+
.panel {
420+
display: none; // Toggled in JS
421+
margin-top: -30px;
422+
padding: 20px 30px;
423+
font-size: 0.8em;
424+
// Align w/ header text, not sure if this can be made cleaner.
425+
margin-left: 35px;
426+
427+
p {
428+
color: $dark-blue;
429+
line-height: 23px;
430+
margin-bottom: 10px;
431+
}
432+
a {
433+
color: $red;
434+
}
435+
}
436+
}
437+
.active {
438+
background-color: white;
439+
440+
// Need to explicitly set for some reason
441+
.accordion-header, .panel {
442+
color: $dark-blue;
443+
}
444+
&:hover {
445+
background-color: white;
446+
}
447+
}
448+
}
449+
#contact {
450+
a {
451+
text-transform: uppercase;
452+
color: $red;
453+
font-weight: $font-bold;
454+
&:hover {
455+
text-decoration: underline;
456+
}
457+
}
458+
}
459+
}
460+
}
461+
367462
#schedule {
368463
padding: $section-padding;
369464
background-color: $blue;

0 commit comments

Comments
 (0)