Skip to content

Commit

Permalink
update schedule style and page
Browse files Browse the repository at this point in the history
  • Loading branch information
@bhansa
bhansa committed Sep 13, 2024
1 parent 1258483 commit 6e07119
Show file tree
Hide file tree
Showing 3 changed files with 206 additions and 88 deletions.
44 changes: 16 additions & 28 deletions src/_data/schedule.json
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
[
{
"id": "sep20",
"title": "September 20 | Friday",
"title": "September 20th | Friday",
"description": "Workshop",
"type": "workshop",
"schedule": [
Expand All @@ -20,25 +20,19 @@
"end_time": "13:00",
"tracks": [
{
"title": {
"session": "Chat with Tables: Developing Q&A system on Tabular data using Code Generative LLMs (AI and Machine Learning)",
"link": "https://in.pycon.org/cfp/2024/proposals/chat-with-tables-developing-qa-system-on-tabular-data-using-code-generative-llms~e31wM/",
"speaker": "Abhijeet Kumar"
}
"speaker": "Abhijeet Kumar",
"title": "Chat with Tables: Developing Q&A system on Tabular data using Code Generative LLMs (AI and Machine Learning)"
},
{
"title": {
"session": "Creating Low Cost Sensor dataloggers with Python and Microcontrollers (Hardware)",
"link": "https://in.pycon.org/cfp/2024/proposals/creating-low-cost-sensor-dataloggers-with-python-and-microcontrollers~e1wYj/",
"speaker": "Jithin"
}
"speaker": "Jithin",
"title": "Creating Low Cost Sensor dataloggers with Python and Microcontrollers (Hardware)"
},
{
"title": {
"session": "Python-Powered Algorithmic Trading: From Theory to Practice (Other)",
"link": "https://in.pycon.org/cfp/2024/proposals/python-powered-algorithmic-trading-from-theory-to-practice~dNk5L/",
"speaker": "Mohit Khandelwal"
}
"speaker": "Mohit Khandelwal",
"title": "Python-Powered Algorithmic Trading: From Theory to Practice (Other)"
}
]
},
Expand All @@ -57,33 +51,27 @@
"end_time": "17:00",
"tracks": [
{
"title": {
"session": "Introduction to data-driven AI applications and multi-modal search (AI and Machine Learning)",
"link": "https://in.pycon.org/cfp/2024/proposals/introduction-to-data-driven-ai-applications-and-multi-modal-search~axk8n/",
"speaker": "Ramya Oruganti"
}
"speaker": "Ramya Oruganti",
"title": "Introduction to data-driven AI applications and multi-modal search (AI and Machine Learning)"
},
{
"title": {
"session": "Hands-on exercises to experience how compiler technology can be useful to speedup data processing in python (Platform Engg.)",
"link": "https://in.pycon.org/cfp/2024/proposals/hands-on-exercises-to-experience-how-compiler-technology-can-be-useful-to-speedup-data-processing-in-python~aOYLG/",
"speaker": "Sourav Saha"
}
"speaker": "Sourav Saha",
"title": "Hands-on exercises to experience how compiler technology can be useful to speedup data processing in python (Platform Engg.)"
},
{
"title": {
"session": "From Zero to Backend Hero: Creating Full-Featured Apps with FastAPI (Web Applications)",
"link": "https://in.pycon.org/cfp/2024/proposals/from-zero-to-backend-hero-creating-full-featured-apps-with-fastapi~aADQz/",
"speaker": "Vivek Keshore"
}
"speaker": "Vivek Keshore",
"title": "From Zero to Backend Hero: Creating Full-Featured Apps with FastAPI (Web Applications)"
}
]
}
]
},
{
"id": "sep21",
"title": "September 21ST | Saturday",
"title": "September 21st | Saturday",
"description": "CONFERENCE DAY 1",
"type": "conference",
"schedule": [
Expand Down Expand Up @@ -328,7 +316,7 @@
},
{
"id": "sep22",
"title": "September 22ND | Sunday",
"title": "September 22nd | Sunday",
"description": "CONFERENCE DAY 2",
"type": "conference",
"schedule": [
Expand Down Expand Up @@ -573,4 +561,4 @@
}
]
}
]
]
113 changes: 53 additions & 60 deletions src/_includes/components/schedule.liquid
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,77 +6,70 @@
class="title-1 text-center mb-5"
data-aos="fade-up"
data-aos-duration="1000">Schedule</h2>
<div class="tab-box">
<ul
class="nav nav-pills mb-3"
id="pills-tab"
role="tablist">
{% for day in schedule %}
<li class="nav-item" role="presentation">
<button
class="nav-link {% if day.id == 'sep21' %}active{% endif %}"
id="pills-{{ day.id }}-tab"
data-bs-toggle="pill"
data-bs-target="#pills-{{ day.id }}"
type="button"
role="tab"
aria-controls="pills-{{ day.id }}"
aria-selected="{% if day.id == 'sep21' %}true{% else %}false{% endif %}">
<h3>{{ day.title | upcase }}</h3>
<p class="tpb-para">{{ day.description }}</p>
</button>
</li>
{% endfor %}
</ul>
<ul class="schedule-tabs-menu nav nav-pills" role="tablist" id="pills-tab">
{% for day in schedule %}
<li class="nav-item" role="tab">
<a
class="schedule-tab-link pt-2 {% if day.id == 'sep21' %}active{% endif %}"
id="pills-{{ day.id }}-tab"
data-bs-toggle="pill"
data-bs-target="#pills-{{ day.id }}"
type="button"
role="tab"
aria-controls="pills-{{ day.id }}"
aria-selected="{% if day.id == 'sep21' %}true{% else %}false{% endif %}">
<div class="subtitle schedule-tab">{{ day.description | capitalize }}</div>
<div class="schedule-tab-link-text schedule-tab">{{ day.title }}</div>
</a>
</li>
{% endfor %}

</ul>
<div class="tab-content" id="pills-tabContent">
{% for day in schedule %}
{% assign eventType = day.type %}
<div
class="tab-pane fade {% if day.id == 'sep21' %}show active{% endif %}"
id="pills-{{ day.id }}"
role="tabpanel"
aria-labelledby="pills-{{ day.id }}-tab">
<ul class="list pt-4 pb-4 mt-2" style="display: grid; grid-template-columns: repeat(4, 1fr); list-style:none; justify-items: center; font-size: 1.2em; background-color: rgba(237, 40, 30, 0.2); font-weight: 400;">
<li>Track 1</li>
<li>Track 2</li>
<li>Track 3</li>
<li>Open Spaces</li>
</ul>
<!-- Schedule Table for the Day -->
<div class="tab-con pt-5 mt-3">
<table class="table table-bordered">
<thead>
<tr class="text-center">
<th scope="col">TIME</th>
<th scope="col">Track 1</th>
<th scope="col">Track 2</th>
<th scope="col">Track 3</th>
<th scope="col">Open Space</th>
</tr>
</thead>
<tbody>
{% assign eventType = day.type %}
{% for session in day.schedule %}
<tr>
<th scope="row">{{ session.start_time }} - {{ session.end_time }}</th>
{% if session.tracks.length == 1 %}
<td colspan="3">{{ session.tracks[0].title }}</td>
{% else %}
{% for track in session.tracks %}
{% if eventType == "workshop" %}
<td>{{ track.title.session }}</td>
{% else %}
<div class="schedule schedule-container">
{% for session in day.schedule %}
{% if session.tracks.length == 1 %}
<div class="schedule__card card" style="grid-column: 1 / 5;">
<div class="card-body">
<h5 class="card-title">{{session.tracks[0].title}}</h5>
<h6 class="card-subtitle mb-2 text-muted">{{session.start_time}} - {{session.end_time}}</h6>
{% if track.link %}
<td>
<a href={{ track.link }} title="{{track.link}}" target="_blank" rel="noopener noreferrer">
{{ track.title }}
</a>
</td>
{% else %}
<td>
{{ track.title }}
</td>
<a href={{session.tracks[0].link}} class="card-link">Talk details <span class="fa fa-arrow-right"></span></a>
{% endif %}
{% endif %}
{% endfor %}
{% endif %}
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
{% else %}
<div class="schedule__row" style="grid-column: 1/5; grid-template-columns: repeat({{session.tracks.length}}, 1fr)">
{% for track in session.tracks %}
<div class="schedule__card card" style="text-align: left;">
<div class="card-body">
<h5 class="card-title">{{track.title}}</h5>
<h6 class="card-subtitle mb-2 text-muted">{{session.start_time}} - {{session.end_time}}</h6>
{% if track.link %}
<a href={{track.link}} target="_blank" rel="noopener noreffer" class="card-link">Talk details</a>
{% endif %}
</div>
</div>
{% endfor %}
</div>
{% endif %}
{% endfor %}
</div>
</div>
</div>
{% endfor %}
Expand Down
137 changes: 137 additions & 0 deletions src/css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1389,3 +1389,140 @@ path {
padding: 0 1em;
}
}

/* schedule page styles */

.subtitle {
color: #fff;
letter-spacing: .16em;
text-transform: uppercase;
margin-bottom: 17px;
font-size: 24px;
font-weight: 500;
line-height: 1.037em;
}

.subtitle.schedule-tab{
color: #4e4e4e;
margin-bottom: 10px;
font-size: 14px;
line-height: 1.429em;
}

.schedule-tabs-menu{
border-bottom: 1px solid #f3f3f3;
justify-content: center;
display: flex;
list-style: none;
}

.schedule-tab-link {
color: #4e4e4e;
text-align: center;
background-color: rgba(0, 0, 0, 0);
border-bottom: 4px solid rgba(0, 0, 0, 0);
padding-bottom: 20px;
padding-left: 38px;
padding-right: 38px;
font-weight: 500;
text-decoration: none;
transition: border-color .35s, color .35s;
bottom: -1px;
border-radius: 2px;
}

.schedule-tab-link-text{
color: #1a1a1a;
letter-spacing: -.01em;
font-size: 24px;
line-height: 1.063em;
}

.schedule-tab-link:hover {
border-bottom-color: #ff724b;
}

.schedule-tab-link.active {
color: #1a1a1a;
background-color: rgba(255, 114, 75, 0.2);
border-bottom: 4px solid #ff724b;
padding-bottom: 20px;
transition: color .3s;
}

.schedule.schedule-container{
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-column-gap: 30px;
grid-row-gap: 30px;
text-align: center;
}

.schedule.schedule-container .schedule__row{
display: grid;
justify-content: center;
align-items: stretch;
gap: 2em;
}

.schedule.schedule-container .schedule__card, .card{
width: 100%;
border: 1px solid rgba(0, 0, 0, .1);
border-radius: 0;
padding: 0;
transition: box-shadow .35s, transform .35s;
box-shadow: 0 8px 30px rgba(161, 161, 161, .08);
}
.schedule.schedule-container .schedule__card:hover, .card:hover{
transform: scale(1.02);
box-shadow: 0 1px 3px rgba(50, 53, 130, .08);
}

@media only screen and (max-width: 768px){
.schedule.schedule-container .schedule__row{
display: flex;
flex-wrap: wrap;
width: 100%;
}
.schedule.schedule-container .schedule__card{
text-align: center !important;
}
}

/* speakers-page */

.speakers{
display: grid;
grid-template-columns: auto auto;
grid-column-gap: 2em;
grid-row-gap: 2em;
justify-items: center;
align-items: center;

}

@media screen and (max-width: 768px){
.speakers{
display: flex;
flex-wrap: wrap;
width: 100%;
justify-items: center;
flex-grow: 1;
}
}

/* individual speaker page styles */

.speaker-page .speaker{
display: grid;
grid-template-columns: 1fr 1fr;
grid-auto-flow: column;
align-items: center;
min-height: 60vh;
}

.speaker-page .speaker .speaker-details{
display: flex;
align-items: center;
flex-direction: column;
}

0 comments on commit 6e07119

Please sign in to comment.