@@ -274,44 +274,45 @@ body {
274
274
</p>
275
275
</div>
276
276
</div>
277
- <div class="row mb-4">
278
- <div class="col-md-12">
279
- <h5 class="section-title">Speakers</h5>
280
- <div class="row">
277
+ <!-- Speakers Section -->
278
+ <div class =" row mb-4 " >
279
+ <div class="col-md-12">
280
+ <h5 class="section-title">Speakers</h5>
281
+ <div class="row speaker-cards">
281
282
{% for speaker in site.data.winter_school_speakers %}
282
- <div class="col-md-3 mb-3">
283
- <div class="custom-card" data-speaker-id="{{ forloop.index }}">
284
- <div class="card-body text-center">
285
- {% if speaker.picture %}
286
- <img src="{{ speaker.picture }}" class="img-fluid rounded-circle speaker-image mb-3" alt="{{ speaker.name }}">
287
- {% else %}
288
- <i class="fas fa-user-circle icon-feature"></i>
289
- {% endif %}
290
- <h6>{{ speaker.name }}</h6>
291
- <p class="text-muted">{{ speaker.affiliation }}</p>
283
+ <div class="col-md-3 mb-3">
284
+ <div class="custom-card" data-speaker-id="{{ speaker.id }}">
285
+ <div class="card-body text-center">
286
+ {% if speaker.picture %}
287
+ <img src="{{ speaker.picture }}" class="img-fluid rounded-circle speaker-image mb-3" alt="{{ speaker.name }}">
288
+ {% else %}
289
+ <i class="fas fa-user-circle icon-feature"></i>
290
+ {% endif %}
291
+ <h6>{{ speaker.name }}</h6>
292
+ <p class="text-muted">{{ speaker.affiliation }}</p>
293
+ </div>
292
294
</div>
293
295
</div>
294
- </div>
295
296
{% endfor %}
296
- </div>
297
297
</div>
298
298
<!-- Speaker Details Section -->
299
299
{% for speaker in site.data.winter_school_speakers %}
300
- <div id="speaker-details-{{ forloop.index }}" class="speaker-details">
301
- <h4>{{ speaker.name }}</h4>
302
- <p class="text-muted">{{ speaker.affiliation }}</p>
303
- <div class="mt-4">
304
- <p>{{ speaker.bio }}</p>
305
- {% if speaker.title %}
306
- <h5 class="mt-4">{{ speaker.title }}</h5>
307
- {% endif %}
308
- {% if speaker.abstract %}
309
- <p class="mt-3">{{ speaker.abstract }}</p>
310
- {% endif %}
300
+ <div id="speaker-details-{{ speaker.id }}" class="speaker-details">
301
+ <h4>{{ speaker.name }}</h4>
302
+ <p class="text-muted">{{ speaker.affiliation }}</p>
303
+ <div class="mt-4">
304
+ <p>{{ speaker.bio }}</p>
305
+ {% if speaker.title %}
306
+ <h5 class="mt-4">{{ speaker.title }}</h5>
307
+ {% endif %}
308
+ {% if speaker.abstract %}
309
+ <p class="mt-3">{{ speaker.abstract }}</p>
310
+ {% endif %}
311
+ </div>
311
312
</div>
312
- </div>
313
313
{% endfor %}
314
314
</div>
315
+ </div >
315
316
<div class="row mb-4">
316
317
<div class="col-md-12">
317
318
<h5 class="section-title">Sponsors</h5>
@@ -359,113 +360,109 @@ body {
359
360
</div>
360
361
</div>
361
362
</div>
362
- <div class =" row mb-4 " >
363
+ <div class="row mb-4">
363
364
<div class="col-md-12">
364
- <div class="card-body">
365
- <section id="schedule">
366
- <h5 class="section-title">Schedule</h5>
367
- {% for day in site.data.winter_school_schedule %}
368
- <div class="schedule-day">
369
- <div class="schedule-day-header">
370
- <h5>{{ day.date }}</h5>
371
- <span class="expand-icon">▼</span>
372
- </div>
373
- <div class="schedule-day-content">
374
- {% for session in day.sessions %}
375
- <div class="schedule-session">
376
- <p class="schedule-time">{{ session.time }}</p>
377
- <h6>{{ session.title }}</h6>
378
- {% for item in session.items %}
379
- <p>
380
- {% assign processed_item = item %}
381
- {% for speaker in site.data.winter_school_speakers %}
382
- {% assign speaker_name = speaker.name | remove: "Prof. Dr. " %}
383
- {% if item contains speaker_name %}
384
- {% assign processed_item = processed_item | replace: speaker_name, '<a href="javascript:void(0)" class="speaker-link" data-speaker-id="' | append: forloop.index | append: '">' | append: speaker_name | append: '</a>' %}
385
- {% endif %}
365
+ <section id="schedule">
366
+ <h5 class="section-title">Schedule</h5>
367
+ {% for day in site.data.winter_school_schedule %}
368
+ <div class="schedule-day">
369
+ <div class="schedule-day-header">
370
+ <h5>{{ day.date }}</h5>
371
+ <span class="expand-icon">▼</span>
372
+ </div>
373
+ <div class="schedule-day-content" style="display: none;">
374
+ {% for session in day.sessions %}
375
+ <div class="schedule-session">
376
+ <p class="schedule-time">{{ session.time }}</p>
377
+ <h6>{{ session.title }}</h6>
378
+ {% for item in session.items %}
379
+ <p>
380
+ {% assign processed_item = item %}
381
+ {% for speaker in site.data.winter_school_speakers %}
382
+ {% assign speaker_full_name = speaker.name %}
383
+ {% assign speaker_short_name = speaker.name | remove: "Prof. Dr. " %}
384
+ {% if item contains speaker_full_name %}
385
+ {% capture speaker_link %}
386
+ <a href="#" class="speaker-link" data-speaker-id="{{ speaker.id }}">{{ speaker_full_name }}</a>
387
+ {% endcapture %}
388
+ {% assign processed_item = processed_item | replace: speaker_full_name, speaker_link %}
389
+ {% elsif item contains speaker_short_name %}
390
+ {% capture speaker_link %}
391
+ <a href="#" class="speaker-link" data-speaker-id="{{ speaker.id }}">{{ speaker_short_name }}</a>
392
+ {% endcapture %}
393
+ {% assign processed_item = processed_item | replace: speaker_short_name, speaker_link %}
394
+ {% endif %}
395
+ {% endfor %}
396
+ {{ processed_item }}
397
+ </p>
398
+ {% endfor %}
399
+ </div>
386
400
{% endfor %}
387
- {{ processed_item }}
388
- </p>
389
- {% endfor %}
401
+ </div>
390
402
</div>
391
403
{% endfor %}
392
- </div>
393
- </div>
394
- {% endfor %}
395
- </section >
396
- </div>
404
+ </section>
397
405
</div>
398
406
</div>
399
407
</div >
400
408
<br >
401
-
402
409
<script >
403
410
document .addEventListener (' DOMContentLoaded' , function () {
404
- const dayHeaders = document .querySelectorAll (' .schedule-day-header' );
405
-
406
- dayHeaders .forEach (header => {
407
- header .addEventListener (' click' , function () {
408
- this .classList .toggle (' active' );
409
- const content = this .nextElementSibling ;
410
- content .classList .toggle (' show' );
411
- const icon = this .querySelector (' .expand-icon' );
412
- icon .textContent = icon .textContent === ' ▼' ? ' ▲' : ' ▼' ;
411
+ // Toggle schedule day content
412
+ const dayHeaders = document .querySelectorAll (' .schedule-day-header' );
413
+ dayHeaders .forEach (header => {
414
+ header .addEventListener (' click' , function () {
415
+ this .classList .toggle (' active' );
416
+ const content = this .nextElementSibling ;
417
+ if (content) {
418
+ if (content .style .display === " none" || content .style .display === " " ) {
419
+ content .style .display = " block" ;
420
+ } else {
421
+ content .style .display = " none" ;
422
+ }
423
+ const icon = this .querySelector (' .expand-icon' );
424
+ if (icon) {
425
+ icon .textContent = icon .textContent === ' ▼' ? ' ▲' : ' ▼' ;
426
+ }
427
+ }
428
+ });
413
429
});
414
- });
415
- });
416
- document .addEventListener (' DOMContentLoaded' , function () {
430
+ // Event delegation for speaker links in schedule
431
+ document .addEventListener (' click' , function (e ) {
432
+ if (e .target .classList .contains (' speaker-link' )) {
433
+ e .preventDefault ();
434
+ const speakerId = e .target .getAttribute (' data-speaker-id' );
435
+ if (speakerId) {
436
+ showSpeakerDetails (speakerId);
437
+ }
438
+ }
439
+ });
440
+ // Click event listeners for speaker cards
417
441
const speakerCards = document .querySelectorAll (' .custom-card' );
418
-
419
442
speakerCards .forEach (card => {
420
443
card .addEventListener (' click' , function () {
421
- const speakerId = this .dataset .speakerId ;
422
-
423
- // Remove active state from all cards
424
- speakerCards .forEach (c => c .classList .remove (' active' ));
425
-
426
- // Hide all speaker details
427
- document .querySelectorAll (' .speaker-details' ).forEach (detail => {
428
- detail .classList .remove (' show' );
429
- });
430
-
431
- // Show selected speaker details
432
- const speakerDetails = document .getElementById (` speaker-details-${ speakerId} ` );
433
- if (speakerDetails) {
434
- this .classList .add (' active' );
435
- speakerDetails .classList .add (' show' );
436
- speakerDetails .scrollIntoView ({ behavior: ' smooth' , block: ' nearest' });
444
+ const speakerId = this .getAttribute (' data-speaker-id' );
445
+ if (speakerId) {
446
+ showSpeakerDetails (speakerId);
437
447
}
438
448
});
439
449
});
440
- });
441
- document .addEventListener (' DOMContentLoaded' , function () {
442
- const speakerLinks = document .querySelectorAll (' .speaker-link' );
443
-
444
- speakerLinks .forEach (link => {
445
- link .addEventListener (' click' , function (e ) {
446
- e .preventDefault ();
447
- const speakerId = this .dataset .speakerId ;
448
-
449
- // Remove active state from all cards
450
- document .querySelectorAll (' .custom-card' ).forEach (card => {
451
- card .classList .remove (' active' );
452
- });
453
-
454
- // Hide all speaker details
455
- document .querySelectorAll (' .speaker-details' ).forEach (detail => {
456
- detail .classList .remove (' show' );
457
- });
458
-
459
- // Show selected speaker details
460
- const speakerCard = document .querySelector (` .custom-card[data-speaker-id="${ speakerId} "]` );
461
- const speakerDetails = document .getElementById (` speaker-details-${ speakerId} ` );
462
-
463
- if (speakerCard && speakerDetails) {
464
- speakerCard .classList .add (' active' );
465
- speakerDetails .classList .add (' show' );
466
- speakerDetails .scrollIntoView ({ behavior: ' smooth' , block: ' nearest' });
467
- }
450
+ function showSpeakerDetails (speakerId ) {
451
+ // Remove active class from all cards
452
+ document .querySelectorAll (' .custom-card' ).forEach (card => {
453
+ card .classList .remove (' active' );
468
454
});
469
- });
470
- });
471
- </script >
455
+ // Hide all speaker details
456
+ document .querySelectorAll (' .speaker-details' ).forEach (detail => {
457
+ detail .classList .remove (' show' );
458
+ });
459
+ // Show selected speaker details
460
+ const speakerCard = document .querySelector (` .custom-card[data-speaker-id="${ speakerId} "]` );
461
+ const speakerDetails = document .getElementById (` speaker-details-${ speakerId} ` );
462
+ if (speakerCard && speakerDetails) {
463
+ speakerCard .classList .add (' active' );
464
+ speakerDetails .classList .add (' show' );
465
+ speakerDetails .scrollIntoView ({ behavior: ' smooth' , block: ' start' });
466
+ }
467
+ }
468
+ });
0 commit comments