Skip to content

Commit ec34d86

Browse files
zorexsalvozorexsalvo
authored
Merge pull request #50 from zorexsalvo/enhance/embedded-pretalx-widget
feat: improve Pretalx schedule embed
2 parents 12a1299 + 524a422 commit ec34d86

File tree

2 files changed

+135
-21
lines changed

2 files changed

+135
-21
lines changed

‎app/home/templates/internal/pages/schedule.html‎

Lines changed: 26 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -32,33 +32,38 @@
3232
{% endblock header %}
3333

3434

35-
<div class="w-full px-[4%] pt-40 pb-18 mx-auto max-w-[1440px]">
36-
<div class="w-full" id="schedule-container">
35+
<div class="w-full pt-40 pb-18">
36+
<div class="w-full px-[4%] mx-auto max-w-[1440px]" id="schedule-container">
3737
<h2 class="text-5xl my-10 font-bold font-td_pinoy text-orange-2 text-center sm:text-left max-w-7xl mx-auto">Schedule</h2>
3838
<div class="content-body font-nunito text-brown-2 text-lg leading-relaxed w-full">
39-
<p class="text-brown-2 font-nunito text-center sm:text-left max-w-7xl mx-auto mb-6 italic">Note: This schedule is subject to change. Please check back regularly for updates.</p>
40-
41-
<div class="min-w-0 w-full">
42-
<pretalx-schedule event-url="https://pretalx.com/python-asia-2026/" locale="en" format="grid"></pretalx-schedule>
43-
</div>
44-
<noscript>
45-
<div class="pretalx-widget">
46-
<div class="pretalx-widget-info-message">
47-
JavaScript is disabled in your browser. To access our schedule without JavaScript, please <a target="_blank" href="https://pretalx.com/python-asia-2026/schedule/nojs">click here</a>.
48-
</div>
49-
</div>
50-
</noscript>
39+
<p class="text-brown-2 font-nunito text-center sm:text-left max-w-7xl mx-auto mb-6 italic">
40+
The schedule is still taking shape — sessions and times may shift as we finalize the program.
41+
Check back closer to the event for the latest updates, or view it directly on <a href="https://pretalx.com/python-asia-2026/schedule/" target="_blank" rel="noopener" class="text-orange-2 underline">pretalx.com</a>.
42+
</p>
5143
</div>
5244
</div>
45+
46+
<div id="schedule-widget-wrapper" class="w-full px-[2%]" style="overflow: auto; height: 90dvh;">
47+
<pretalx-schedule event-url="https://pretalx.com/python-asia-2026/" locale="en" format="grid"></pretalx-schedule>
48+
</div>
49+
50+
<noscript>
51+
<p class="px-[4%] font-nunito text-brown-2 mt-4">
52+
JavaScript is disabled in your browser. To access our schedule without JavaScript, please
53+
<a class="text-orange-2 underline" target="_blank" href="https://pretalx.com/python-asia-2026/schedule/nojs">click here</a>.
54+
</p>
55+
</noscript>
5356
</div>
5457

5558
<script>
56-
document.addEventListener('DOMContentLoaded', function() {
57-
setTimeout(() => {
58-
const scheduleContainer = document.getElementById('schedule-container');
59-
if (scheduleContainer) {
60-
scheduleContainer.style.overflowX = 'auto';
61-
}
62-
}, 1000);
59+
document.addEventListener('DOMContentLoaded', function () {
60+
const wrapper = document.getElementById('schedule-widget-wrapper');
61+
const widget = document.querySelector('pretalx-schedule');
62+
63+
if (widget) widget.style.height = '100%';
64+
65+
wrapper.addEventListener('mouseenter', () => {
66+
wrapper.scrollIntoView({ behavior: 'smooth', block: 'start' });
67+
});
6368
});
6469
</script>

‎static/css/app.css‎

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -263,6 +263,92 @@
263263
}
264264
}
265265
}
266+
.tab {
267+
@layer daisyui.l1.l2.l3 {
268+
position: relative;
269+
display: inline-flex;
270+
cursor: pointer;
271+
appearance: none;
272+
flex-wrap: wrap;
273+
align-items: center;
274+
justify-content: center;
275+
text-align: center;
276+
webkit-user-select: none;
277+
user-select: none;
278+
&:hover {
279+
@media (hover: hover) {
280+
color: var(--color-base-content);
281+
}
282+
}
283+
--tab-p: 0.75rem;
284+
--tab-bg: var(--color-base-100);
285+
--tab-border-color: var(--color-base-300);
286+
--tab-radius-ss: 0;
287+
--tab-radius-se: 0;
288+
--tab-radius-es: 0;
289+
--tab-radius-ee: 0;
290+
--tab-order: 0;
291+
--tab-radius-min: calc(0.75rem - var(--border));
292+
--tab-radius-limit: min(var(--radius-field), var(--tab-radius-min));
293+
--tab-radius-grad: #0000 calc(69% - var(--border)),
294+
var(--tab-border-color) calc(69% - var(--border) + 0.25px),
295+
var(--tab-border-color) 69%,
296+
var(--tab-bg) calc(69% + 0.25px);
297+
border-color: #0000;
298+
order: var(--tab-order);
299+
height: var(--tab-height);
300+
font-size: 0.875rem;
301+
padding-inline: var(--tab-p);
302+
&:is(input[type="radio"]) {
303+
min-width: fit-content;
304+
&:after {
305+
--tw-content: attr(aria-label);
306+
content: var(--tw-content);
307+
}
308+
}
309+
&:is(label) {
310+
position: relative;
311+
input {
312+
position: absolute;
313+
inset: calc(0.25rem * 0);
314+
cursor: pointer;
315+
appearance: none;
316+
opacity: 0%;
317+
}
318+
}
319+
&:checked, &:is(label:has(:checked)), &:is(.tab-active, [aria-selected="true"], [aria-current="true"], [aria-current="page"]) {
320+
& + .tab-content {
321+
display: block;
322+
}
323+
}
324+
&:not( :checked, label:has(:checked), :hover, .tab-active, [aria-selected="true"], [aria-current="true"], [aria-current="page"] ) {
325+
color: var(--color-base-content);
326+
@supports (color: color-mix(in lab, red, red)) {
327+
color: color-mix(in oklab, var(--color-base-content) 50%, transparent);
328+
}
329+
}
330+
&:not(input):empty {
331+
flex-grow: 1;
332+
cursor: default;
333+
}
334+
&:focus {
335+
--tw-outline-style: none;
336+
outline-style: none;
337+
@media (forced-colors: active) {
338+
outline: 2px solid transparent;
339+
outline-offset: 2px;
340+
}
341+
}
342+
&:focus-visible, &:is(label:has(:checked:focus-visible)) {
343+
outline: 2px solid currentColor;
344+
outline-offset: -5px;
345+
}
346+
&[disabled] {
347+
pointer-events: none;
348+
opacity: 40%;
349+
}
350+
}
351+
}
266352
.menu {
267353
@layer daisyui.l1.l2.l3 {
268354
display: flex;
@@ -2376,6 +2462,26 @@
23762462
.z-\[999\] {
23772463
z-index: 999;
23782464
}
2465+
.tab-content {
2466+
@layer daisyui.l1.l2.l3 {
2467+
order: var(--tabcontent-order);
2468+
display: none;
2469+
border-color: transparent;
2470+
--tabcontent-radius-ss: var(--radius-box);
2471+
--tabcontent-radius-se: var(--radius-box);
2472+
--tabcontent-radius-es: var(--radius-box);
2473+
--tabcontent-radius-ee: var(--radius-box);
2474+
--tabcontent-order: 1;
2475+
width: 100%;
2476+
height: calc(100% - var(--tab-height) + var(--border));
2477+
margin: var(--tabcontent-margin);
2478+
border-width: var(--border);
2479+
border-start-start-radius: var(--tabcontent-radius-ss);
2480+
border-start-end-radius: var(--tabcontent-radius-se);
2481+
border-end-start-radius: var(--tabcontent-radius-es);
2482+
border-end-end-radius: var(--tabcontent-radius-ee);
2483+
}
2484+
}
23792485
.hero {
23802486
@layer daisyui.l1.l2.l3 {
23812487
display: grid;
@@ -3284,6 +3390,9 @@
32843390
.px-8 {
32853391
padding-inline: calc(var(--spacing) * 8);
32863392
}
3393+
.px-\[2\%\] {
3394+
padding-inline: 2%;
3395+
}
32873396
.px-\[4\%\] {
32883397
padding-inline: 4%;
32893398
}

0 commit comments

Comments
 (0)