Full view for schedule.

Author: nikoshell

src/components/schedule/day.astro

@@ -6,6 +6,7 @@ import Session from "@components/schedule/session.astro";
 import { addMinutes, differenceInMinutes, parseISO } from "date-fns";
 //import { Title } from "@components/typography/title";
 import Headline from "@components/ui/Headline.astro";
+import Button from "@ui/Button.astro";
 import { Select } from "@components/form/select";
 import { formatInTimeZone } from "date-fns-tz";
 
@@ -335,6 +336,7 @@ const dateText = format(date, "eeee - do MMMM");
 
   <div class="h-12"></div>
 
+  <Button class="maximize-btn invisible"  clear>Full view</Button>
   <div class="schedule-wrapper">
     <header class="schedule-container header">
       <div
@@ -544,10 +546,6 @@ const dateText = format(date, "eeee - do MMMM");
     }
 
     .schedule {
-      --header-height: 30px;
-      --break: 8px;
-      --lunch: 8px;
-      --minute: 4px;
       --room-change: calc(var(--minute) * 8);
       --5min: calc(var(--minute) * 5);
 

src/layouts/ScheduleLayout.astro

@@ -19,15 +19,64 @@ const { title, description } = Astro.props;
 </Layout>
 
 <style is:global>
-.layout-wrapper2 {
-  max-width: 800px;
-  margin:auto;
-  display: grid;
-  grid-template-columns: 1fr (770px, 100%) 1fr !important;
-}
-
 .layout-wrapper2 > * {
   grid-column: 2;
 }
 
+@media screen and (max-width: 1280px) {
+  .layout-wrapper2 {
+    max-width: 800px;
+    margin:auto;
+    display: grid;
+    grid-template-columns: 1fr (770px, 100%) 1fr !important;
+  }
+}
+
+
+@media screen and (min-width: 1281px) {
+  .layout-wrapper2 {
+    /*max-width: 1100px;*/
+    max-width: auto !important;
+    grid-template-columns: 1fr (1070px, 100%) 1fr !important;
+  }
+
+  .layout-wrapper2 .schedule *{
+    font-size:1.2rem;
+    --header-height: 40px !important;
+    --break: 10px !important;
+  }
+
+  .layout-wrapper2 {
+    h2, .break {
+    font-size:1.2rem;
+    }
+  }
+}
+
+
+/*@media screen and (min-width: 1601px) {*/
+  /*.layout-wrapper2 {*/
+  /*  max-width: auto !important;*/
+  /*  grid-template-columns: 1fr (1170px, 100%) 1fr !important;*/
+  /*}*/
+  /**/
+
+@media screen and (min-width: 1201px) {
+
+  .layout-wrapper2.scaled-up .schedule *{
+    font-size:1.4rem;
+    --header-height: 60px !important;
+    --break: 14px !important;
+  }
+  .layout-wrapper2.scaled-up {
+    h2, .break {
+    font-size:1.4rem;
+    }
+  }
+}
+@media screen and (min-width: 1601px) {
+  .maximize-btn {
+    visibility:initial;
+  }
+}
 </style>

src/pages/schedule.astro

@@ -3,6 +3,7 @@ import { getEntry, getCollection } from "astro:content";
 import Layout from "@layouts/ScheduleLayout.astro";
 import ScheduleDay from "@components/schedule/day.astro";
 import Headline from "@ui/Headline.astro";
+import Button from "@ui/Button.astro";
 
 export const getStaticPaths = async () => {
   const days = await getCollection("days");
@@ -29,3 +30,50 @@ const allDays = Array.from(
     ))
   }
 </Layout>
+
+<style is:global>
+  .layout-wrapper2 {
+    transition: transform 0.3s ease;
+    transform-origin: center center;
+  }
+
+  .layout-wrapper2.scaled-up {
+    position: absolute;
+    background-color: #F5E5D7;
+    height:100vh;
+    width:100vw;
+    padding:50px;
+  }
+</style>
+
+
+<script is:inline>
+  const days = document.querySelectorAll('.day');
+  const wrapper = document.querySelector('.layout-wrapper2');
+
+  days.forEach((day) => {
+    let btn = day.querySelector('.maximize-btn');
+    btn.addEventListener('click', () => {
+      wrapper.classList.toggle('scaled-up');
+      btn.textContent = wrapper.classList.contains('scaled-up') ? 'Normal View' : 'Full View';
+
+    const h3 = day.querySelector('h3');
+
+    if (h3 && h3.tagName === 'H3') {
+      const anchor = h3.querySelector('a[href^="#"]');
+
+      if (anchor) {
+        const targetId = anchor.getAttribute('href').substring(1); // remove '#'
+        const targetElement = document.getElementById(targetId);
+
+        if (targetElement) {
+          targetElement.scrollIntoView();
+
+        }
+      }
+    }
+    });
+
+
+  });
+</script>

src/pages/schedule/talks.astro

@@ -3,7 +3,7 @@ import { getCollection } from "astro:content";
 import Layout from "@layouts/ScheduleLayout.astro";
 import ScheduleDay from "@components/schedule/day.astro";
 import { slugify } from '@utils/content';
-import Headline from "@ui/Headline.astro"
+import Headline from "@ui/Headline.astro";
 
 export const getStaticPaths = async () => {
   const sessions = await getCollection("sessions");