Skip to content

Implemented FAQ section #1000

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

Merged
merged 14 commits into from
Dec 11, 2020
Merged

Implemented FAQ section #1000

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
35b4dca
layout and content with some initial styling
chris7700 Dec 10, 2020
126c7e6
added js for accordion
chris7700 Dec 10, 2020
6dde94b
finishing touches on icons
chris7700 Dec 10, 2020
8a9504f
merging font styles
chris7700 Dec 10, 2020
d9d2e76
removed noopener
chris7700 Dec 10, 2020
2c2cfc3
merged changes from develop, some code cleanup
chris7700 Dec 10, 2020
688eca2
contact url, question and answer styles
chris7700 Dec 11, 2020
052dd87
Refactored :)
peterkos Dec 11, 2020
259a609
Animations working!!
peterkos Dec 11, 2020
4a866c2
cleaning up unnecessary styles
chris7700 Dec 11, 2020
b39cabb
Added question content, fixed link color in card
peterkos Dec 11, 2020
510cfd5
Merge branch 'develop' into bh-993
peterkos Dec 11, 2020
f85b77a
Tweak panel p styling
peterkos Dec 11, 2020
a2d157c
Remove unnesesecary outline none
peterkos Dec 11, 2020
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
72 changes: 71 additions & 1 deletion index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -202,9 +202,79 @@ <h6 class="name">SUNDAY</h6>
</div>
</div>
</div>

</section>
<section id="faq">
<div id="faq-wrapper">
<h1>Frequently Asked Questions</h1>
<div id="faq-cards">
<div id="faq-cards-left">
<div class="card">
<button class="accordion-header">
<i class="fa fa-plus fa-plus-pink" aria-hidden="true"></i>
Who can participate in BrickHack?
</button>
<div class="panel">
<p>Anyone currently enrolled as a student can attend!</p>
<p>If you don't fit that description, you're
absolutely welcome to attend as a mentor or volunteer. All attendees must be 18 years or older.</p>
</div>
</div>
<div class="card">
<button class="accordion-header">
<i class="fa fa-plus fa-plus-red" aria-hidden="true"></i>
Do I need a team to join?
</button>
<div class="panel">
<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>
</div>
</div>
<div class="card">
<button class="accordion-header">
<i class="fa fa-plus fa-plus-orange" aria-hidden="true"></i>
Do RIT students need to apply?
</button>
<div class="panel">
<p>Yes. All students, RIT or not, need to apply to the event.</p>
<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>
<p>Maybe next year we'll have AI run the event...</p>
</div>
</div>
</div>
<div id="faq-cards-right">
<div class="card">
<button class="accordion-header">
<i class="fa fa-plus fa-plus-red" aria-hidden="true"></i>
How accessible is the online event?
</button>
<div class="panel">
<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>
<p>During registration, put services that you require in the "special needs" field, and we'll do our best to meet them!</p>
<p>For any outstanding questions, email <a href="mailto:hello@coderit.org">hello@coderit.org</a>.</p>
</div>
</div>
<div class="card">
<button class="accordion-header">
<i class="fa fa-plus fa-plus-pink" aria-hidden="true"></i>
When will I know if I got in?
</button>
<div class="panel">
<p>Soon!</p>
<p>(We'll send an email out if you are accepted.)</p>
</div>
</div>
<div class="card">
<button class="accordion-header">
<i class="fa fa-plus fa-plus-orange" aria-hidden="true"></i>
Should I bring my own bricks?
</button>
<div class="panel">
<p>We've got you covered.</p>
</div>
</div>
</div>
</div>
<p id="contact">Don't see your question here? <a href="mailto:hello@coderit.org">Contact Us</a></p>
</div>
</section>
<section id="leadership">
<h1>Leadership Team</h1>
Expand Down
23 changes: 23 additions & 0 deletions index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,29 @@ $(document).ready(function() {
});
});

let card = document.getElementsByClassName("card");
for (let i = 0; i < card.length; i++) {
let accordion = card[i].getElementsByClassName("accordion-header")[0];
// Click should only work on accordion-header of each card
accordion.addEventListener("click", function() {

card[i].classList.toggle("active");

let panel = card[i].getElementsByClassName("panel")[0];
let fa = this.getElementsByTagName("i")[0];

// Toggle panel and plus/minus on click of header
if ($(card[i]).hasClass("active")) {
$(panel).slideDown(200);
} else {
$(panel).slideUp(200);
}

$(fa).toggleClass("fa-plus");
$(fa).toggleClass("fa-minus");
});
}

// Schedule toggle code
$('.day-second-events').hide();
$('.day-first').click(function() {
Expand Down
97 changes: 96 additions & 1 deletion sass/main.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,7 +84,7 @@ a {
}

p {
font-size: 1.2em;
font-size: 1.3em;
}

// Nav
Expand Down Expand Up @@ -364,6 +364,101 @@ nav {
}
}

#faq {
padding: $section-padding;
background-color: $dark-blue;
#faq-wrapper {
h1 {
font-size: $title-size;
margin-bottom: 4rem;
}
#faq-cards {
display: flex;
flex-flow: row wrap;
justify-content: space-between;

// TODO: This can be cleaner.
$card-m: 20px;
&-left {
width: calc(50% - (#{$card-m} / 2));
margin-right: $card-m / 2;
}
&-right {
width: calc(50% - (#{$card-m} / 2));
margin-left: $card-m / 2;
}
.card {
width: 100%;
margin-bottom: $card-m;
border-radius: 7px;
background-color: $light-blue;
&:hover {
background-color: lighten($light-blue, 5%);
}
.accordion-header {
background-color: transparent;
cursor: pointer;
text-align: left;
padding: 20px 30px;
border: none;
width: 100%;
font-size: $nav-fontsize;

.fa-plus, .fa-minus {
margin-right: 10px;
}
.fa-plus {
&-red { color: $red; }
&-pink { color: $pink; }
&-orange { color: $orange; }
}
.fa-minus {
color: $blue;
}
}
.panel {
display: none; // Toggled in JS
margin-top: -30px;
padding: 20px 30px;
font-size: 0.8em;
// Align w/ header text, not sure if this can be made cleaner.
margin-left: 35px;

p {
color: $dark-blue;
line-height: 23px;
margin-bottom: 10px;
}
a {
color: $red;
}
}
}
.active {
background-color: white;

// Need to explicitly set for some reason
.accordion-header, .panel {
color: $dark-blue;
}
&:hover {
background-color: white;
}
}
}
#contact {
a {
text-transform: uppercase;
color: $red;
font-weight: $font-bold;
&:hover {
text-decoration: underline;
}
}
}
}
}

#schedule {
padding: $section-padding;
background-color: $blue;
Expand Down