Skip to content

Commit 398aa74

Browse files
peterkospeterkos
authored
New schedule design with pre-event workshop support (no mobile) (#1160)
* Start new schedule; add binder ringz * tabs animation * tabs :) * tabs toggle hell yeah * tab toggling works fully * Schedule contnet layout fixed * Pre-event layout prog; 2 other pages work * Pre events work * color pre event thing * full schedule toggle done * Fix bug * More space on top and fix other bug * fix things * fix js range * no pointer * beeg tabs
1 parent 8ad29dc commit 398aa74

File tree

3 files changed

+404
-106
lines changed

3 files changed

+404
-106
lines changed

‎index.html

Lines changed: 86 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -165,23 +165,96 @@ <h1>What is a Hackathon?</h1>
165165
<h1>Schedule</h1>
166166
<p>Times are listed in your local time zone.</p>
167167
<div id="schedule-block">
168-
<div id="schedule-tapes">
169-
<div class="tape"></div>
170-
<div class="tape"></div>
168+
169+
<!-- Binder rings -->
170+
<div id="binder-container">
171+
<div class="binder-rings">
172+
<div class="binder-ring"></div>
173+
<div class="binder-ring"></div>
174+
</div>
175+
<div class="binder-rings">
176+
<div class="binder-ring"></div>
177+
<div class="binder-ring"></div>
178+
</div>
171179
</div>
172-
<div id="schedule-content">
173-
<div id="days">
174-
<div class="day day-first day-active">
175-
<h2 class="number">20</h2>
176-
<h6 class="name">SATURDAY</h6>
180+
181+
<div id="schedule-tabs">
182+
<div class="schedule-tab pre-event schedule-tab-active">
183+
<p>Pre-Event</p>
184+
</div>
185+
<div class="schedule-tab feb-20">
186+
<p>Feb 20th</p>
187+
</div>
188+
<div class="schedule-tab feb-21">
189+
<p>Feb 21st</p>
190+
</div>
191+
</div>
192+
193+
<div id="schedule-content-wrapper">
194+
<div id="pre-event-content" class="schedule-content">
195+
<div class="day-row pre-16">
196+
<div class="day">
197+
<h2 class="number">16</h2>
198+
<h6 class="name">TUESDAY</h6>
199+
</div>
200+
<div class="events pre-event-16-events"></div>
201+
</div>
202+
<div class="day-row pre-17">
203+
<div class="day">
204+
<h2 class="number">17</h2>
205+
<h6 class="name">WEDNESDAY</h6>
206+
</div>
207+
<div class="events pre-event-17-events"></div>
208+
</div>
209+
<div class="day-row pre-18">
210+
<div class="day">
211+
<h2 class="number">18</h2>
212+
<h6 class="name">THURSDAY</h6>
213+
</div>
214+
<div class="events pre-event-18-events"></div>
215+
</div>
216+
<div class="day-row pre-19">
217+
<div class="day">
218+
<h2 class="number">19</h2>
219+
<h6 class="name">FRIDAY</h6>
220+
</div>
221+
<div class="events pre-event-19-events"></div>
222+
</div>
223+
</div>
224+
<div id="feb-20-content">
225+
<div class="schedule-content">
226+
<div class="days">
227+
<div class="day">
228+
<h2 class="number">20</h2>
229+
<h6 class="name">SATURDAY</h6>
230+
</div>
231+
</div>
232+
<div class="events feb-20-events"></div>
233+
</div>
234+
<div class="show-full-schedule">
235+
<p>Show full schedule</p><i class="fas fa-plus-circle"></i>
236+
</div>
237+
<div class="hide-full-schedule">
238+
<p>Hide full schedule</p><i class="fas fa-minus-circle"></i>
239+
</div>
240+
</div>
241+
<div id="feb-21-content">
242+
<div class="schedule-content">
243+
<div class="days">
244+
<div class="day">
245+
<h2 class="number">21</h2>
246+
<h6 class="name">SUNDAY</h6>
247+
</div>
248+
</div>
249+
<div class="events feb-21-events"></div>
250+
</div>
251+
<div class="show-full-schedule">
252+
<p>Show full schedule</p><i class="fas fa-plus-circle"></i>
177253
</div>
178-
<div class="day day-second">
179-
<h2 class="number">21</h2>
180-
<h6 class="name">SUNDAY</h6>
254+
<div class="hide-full-schedule">
255+
<p>Hide full schedule</p><i class="fas fa-minus-circle"></i>
181256
</div>
182257
</div>
183-
<div class="events day-first-events"></div>
184-
<div class="events day-second-events"></div>
185258
</div>
186259
</div>
187260
</section>

‎index.js

Lines changed: 53 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -130,22 +130,46 @@ for (let i = 0; i < card.length; i++) {
130130

131131
// Schedule toggle code
132132

133-
// Created as named function so that we can show the correct day
134-
function showSecondDayEvents() {
135-
$('.day-first-events').hide();
136-
$('.day-first').removeClass('day-active');
137-
$('.day-second-events').show();
138-
$('.day-second').addClass('day-active');
139-
}
133+
$('.pre-event').click(function() {
134+
$('.pre-event').addClass('schedule-tab-active');
135+
$('.feb-20').removeClass('schedule-tab-active');
136+
$('.feb-21').removeClass('schedule-tab-active');
137+
$('#pre-event-content').css('display', 'flex');
138+
$('#feb-20-content').hide();
139+
$('#feb-21-content').hide();
140+
});
141+
142+
$('.feb-20').click(function() {
143+
$('.pre-event').removeClass('schedule-tab-active');
144+
$('.feb-20').addClass('schedule-tab-active');
145+
$('.feb-21').removeClass('schedule-tab-active');
146+
$('#pre-event-content').hide();
147+
$('#feb-20-content').show();
148+
$('#feb-21-content').hide();
149+
});
150+
151+
$('.feb-21').click(function() {
152+
$('.pre-event').removeClass('schedule-tab-active');
153+
$('.feb-20').removeClass('schedule-tab-active');
154+
$('.feb-21').addClass('schedule-tab-active');
155+
$('#pre-event-content').hide();
156+
$('#feb-20-content').hide();
157+
$('#feb-21-content').show();
158+
});
140159

141-
$('.day-second-events').hide();
142-
$('.day-first').click(function() {
143-
$('.day-first-events').show();
144-
$('.day-first').addClass('day-active');
145-
$('.day-second-events').hide();
146-
$('.day-second').removeClass('day-active');
160+
$('.show-full-schedule').click(function() {
161+
$('#feb-20-content .events').css('height', 'auto'); // Easier w/o conditional
162+
$('#feb-21-content .events').css('height', 'auto');
163+
$('.hide-full-schedule').css('display', 'flex');
164+
$('.show-full-schedule').hide();
165+
});
166+
167+
$('.hide-full-schedule').click(function() {
168+
$('#feb-20-content .events').css('height', '370px'); // Easier w/o conditional
169+
$('#feb-21-content .events').css('height', '370px');
170+
$('.hide-full-schedule').hide();
171+
$('.show-full-schedule').css('display', 'flex');
147172
});
148-
$('.day-second').click(showSecondDayEvents);
149173

150174
// Dynamic schedule code
151175

@@ -231,10 +255,22 @@ function handleEventData(events) {
231255
}
232256

233257
// add event to DOM
234-
let eventContainer = $('.day-first-events');
235-
if (startDate.getDate() === 21) {
236-
eventContainer = $('.day-second-events');
258+
var eventContainer;
259+
260+
switch (startDate.getDate()) {
261+
case 16: eventContainer = $('.pre-event-16-events'); break;
262+
case 17: eventContainer = $('.pre-event-17-events'); break;
263+
case 18: eventContainer = $('.pre-event-18-events'); break;
264+
case 19: eventContainer = $('.pre-event-19-events'); break;
265+
case 20: eventContainer = $('.feb-20-events'); break;
266+
case 21: eventContainer = $('.feb-21-events'); break;
237267
}
268+
269+
if (!eventContainer) {
270+
console.log("Event " + event.title + " date " + startDate + " out of range.");
271+
return; // skip current iteration https://stackoverflow.com/a/31399448/1431900
272+
}
273+
238274
const eventDiv = eventContainer.append(`<div class="${divClasses}"><p class="time">${dateString}</p><p class="title">${event.title}</p></div>`);
239275

240276
// add time indicator for the current event

0 commit comments

Comments
 (0)