talk day improvements

robotframework · Feb 22, 2024 · 739fe2a · 739fe2a
1 parent 7e2c7d7
commit 739fe2a
Show file tree

Hide file tree

Showing 10 changed files with 126 additions and 85 deletions.
diff --git a/dist/css/app.561e8525.css b/dist/css/app.561e8525.css
diff --git a/dist/css/app.84f5bd58.css b/dist/css/app.84f5bd58.css
diff --git a/dist/js/app.334d8f8f.js b/dist/js/app.334d8f8f.js
diff --git a/dist/js/app.d055bb2b.js b/dist/js/app.d055bb2b.js
diff --git a/dist/js/chunk-vendors.2b43d562.js → dist/js/chunk-vendors.56623bf9.js b/dist/js/chunk-vendors.2b43d562.js → dist/js/chunk-vendors.56623bf9.js
diff --git a/...ifest.058fa9427fc083b67a45bdbc164f9209.js → ...ifest.304b0c8af51153673b0d3efea8f69adf.js b/...ifest.058fa9427fc083b67a45bdbc164f9209.js → ...ifest.304b0c8af51153673b0d3efea8f69adf.js
@@ -4,8 +4,8 @@ self.__precacheManifest = (self.__precacheManifest || []).concat([
     "url": "dist/404.html"
   },
   {
-    "revision": "8a9fd57c4cfba6f1f625",
-    "url": "dist/css/app.561e8525.css"
+    "revision": "66d442ee1692536b2d2e",
+    "url": "dist/css/app.84f5bd58.css"
   },
   {
     "revision": "27679e61bfd27e1093f4bf200900b8e7",
@@ -188,16 +188,16 @@ self.__precacheManifest = (self.__precacheManifest || []).concat([
     "url": "dist/img/ticket-depth.jpg"
   },
   {
-    "revision": "0630ae1990fcbe3b66e1b2441df7fe13",
+    "revision": "cf07555b342e0ff603661c557c9dc35a",
     "url": "dist/index.html"
   },
   {
-    "revision": "8a9fd57c4cfba6f1f625",
-    "url": "dist/js/app.d055bb2b.js"
+    "revision": "66d442ee1692536b2d2e",
+    "url": "dist/js/app.334d8f8f.js"
   },
   {
-    "revision": "93488b24d25139a6649c",
-    "url": "dist/js/chunk-vendors.2b43d562.js"
+    "revision": "55879d9a3902f34e3b7b",
+    "url": "dist/js/chunk-vendors.56623bf9.js"
   },
   {
     "revision": "ae69c76f0db87375aa82706bd2ce675f",

diff --git a/dist/service-worker.js b/dist/service-worker.js
@@ -14,7 +14,7 @@
 importScripts("https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-sw.js");
 
 importScripts(
-  "dist/precache-manifest.058fa9427fc083b67a45bdbc164f9209.js"
+  "dist/precache-manifest.304b0c8af51153673b0d3efea8f69adf.js"
 );
 
 workbox.core.setCacheNameDetails({prefix: "robot-framework"});

diff --git a/index.html b/index.html
@@ -17,4 +17,4 @@
               l.pathname.slice(0, -1) + decoded + l.hash
           );
         }
-      }(window.location))</script><link href="dist/css/app.561e8525.css" rel="preload" as="style"><link href="dist/js/app.d055bb2b.js" rel="preload" as="script"><link href="dist/js/chunk-vendors.2b43d562.js" rel="preload" as="script"><link href="dist/css/app.561e8525.css" rel="stylesheet"><link rel="icon" type="image/png" sizes="32x32" href="dist/img/icons/favicon-32x32.png"><link rel="icon" type="image/png" sizes="16x16" href="dist/img/icons/favicon-16x16.png"><link rel="manifest" href="dist/manifest.json"><meta name="theme-color" content="#4DBA87"><meta name="apple-mobile-web-app-capable" content="no"><meta name="apple-mobile-web-app-status-bar-style" content="default"><meta name="apple-mobile-web-app-title" content="robot-framework"><link rel="apple-touch-icon" href="dist/img/icons/apple-touch-icon-152x152.png"><link rel="mask-icon" href="dist/img/icons/safari-pinned-tab.svg" color="#4DBA87"><meta name="msapplication-TileImage" content="dist/img/icons/msapplication-icon-144x144.png"><meta name="msapplication-TileColor" content="#000000"></head><body><noscript><strong>We're sorry but robot-framework doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="dist/js/chunk-vendors.2b43d562.js"></script><script src="dist/js/app.d055bb2b.js"></script></body></html>
+      }(window.location))</script><link href="dist/css/app.84f5bd58.css" rel="preload" as="style"><link href="dist/js/app.334d8f8f.js" rel="preload" as="script"><link href="dist/js/chunk-vendors.56623bf9.js" rel="preload" as="script"><link href="dist/css/app.84f5bd58.css" rel="stylesheet"><link rel="icon" type="image/png" sizes="32x32" href="dist/img/icons/favicon-32x32.png"><link rel="icon" type="image/png" sizes="16x16" href="dist/img/icons/favicon-16x16.png"><link rel="manifest" href="dist/manifest.json"><meta name="theme-color" content="#4DBA87"><meta name="apple-mobile-web-app-capable" content="no"><meta name="apple-mobile-web-app-status-bar-style" content="default"><meta name="apple-mobile-web-app-title" content="robot-framework"><link rel="apple-touch-icon" href="dist/img/icons/apple-touch-icon-152x152.png"><link rel="mask-icon" href="dist/img/icons/safari-pinned-tab.svg" color="#4DBA87"><meta name="msapplication-TileImage" content="dist/img/icons/msapplication-icon-144x144.png"><meta name="msapplication-TileColor" content="#000000"></head><body><noscript><strong>We're sorry but robot-framework doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="dist/js/chunk-vendors.56623bf9.js"></script><script src="dist/js/app.334d8f8f.js"></script></body></html>
diff --git a/src/components/Talks24.vue b/src/components/Talks24.vue
@@ -1,82 +1,89 @@
 <template>
   <div class="mt-small w-100">
-    <button
-      v-for="type in ['online', 'helsinki']"
-      :key="type"
-      class="theme mr-xsmall"
-      :class="selectedTrack === type && 'active'"
-      @click="selectedTrack = type"
-    >
-      {{ type }}
-    </button>
-    <div
-      v-for="talk in shownTalks"
-      :key="talk.id"
-      class="mt-large card p-small"
-      :class="talk.isBreak && 'bg-secondary sharper'"
-    >
-      <a
-        v-if="!talk.isBreak"
-        class="anchor"
-        :id="getSlug(talk.title, selectedTrack)"
-      ></a>
-      <div class="flex between">
-        <h3>
-          {{ talk.isBreak ? talk.description.en : talk.title }}
-        </h3>
+    <div class="bg-background p-xsmall sticky pl-2xlarge">
+      <button
+        v-for="type in ['online', 'helsinki']"
+        :key="type"
+        class="theme mr-xsmall"
+        :class="selectedTrack === type && 'active'"
+        @click="selectedTrack = type"
+      >
+        {{ type }}
+      </button>
+    </div>
+    <div v-for="(day, i) in shownTalks" :key="i">
+      <h3 class="sticky type-large" :style="i !== 0 ? 'margin-top: 4rem' : ''">
+        Day {{ i + 1 }}
+      </h3>
+      <div
+        v-for="talk in day"
+        :key="talk.id"
+        class="mt-large card p-small"
+        :class="talk.isBreak && 'bg-secondary sharper'"
+      >
         <a
-          v-if="!$store.state.isMobile && !talk.isBreak"
-          title="get link to talk"
-          :href="`#${getSlug(talk.title, selectedTrack)}`"
-        >
-          <link-icon style="transform: translateY(2px)" />
-        </a>
-      </div>
-      <p class="type-small m-none">
-        {{ format(new Date(talk.slot?.start || talk.start), 'MMM dd') }} {{ getShownTime(talk.slot?.start || talk.start) }} - {{ getShownTime(talk.slot?.end || talk.end) }} ({{Intl.DateTimeFormat().resolvedOptions().timeZone}})
-      </p>
-      <div v-if="hashKey && getVideoUrl(talk.code)" class="col-sm-12 col-md-10 col-md-offset-1">
-        <div width="100%" class="video mt-medium mb-medium">
-          <iframe width="100%" height="100%" class="rounded" :src=getVideoUrl(talk.code) :title="`Recording: ${talk.title}`" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
+          v-if="!talk.isBreak"
+          class="anchor"
+          :id="getSlug(talk.title, selectedTrack)"
+        ></a>
+        <div class="flex between">
+          <h3>
+            {{ talk.isBreak ? talk.description.en : talk.title }}
+          </h3>
+          <a
+            v-if="!$store.state.isMobile && !talk.isBreak"
+            title="get link to talk"
+            :href="`#${getSlug(talk.title, selectedTrack)}`"
+          >
+            <link-icon style="transform: translateY(2px)" />
+          </a>
         </div>
-      </div>
-      <div v-if="talk.abstract" v-html="parseText(talk.abstract)" />
-      <details v-if="!talk.isBreak && talk.description" class="details">
-        <summary>
-          Full description
-        </summary>
-        <div v-html="parseText(talk.description)" class="p-small" />
-      </details>
-      <h3 v-if="!talk.isBreak" class="mt-xlarge">Presenters</h3>
-      <details
-        v-for="speaker in talk.speakers"
-        :key="speaker.code"
-        class="card sharper mb-medium mt-medium">
-        <summary class="bio">
-          <div class="middle" style="display: inline-flex">
-            <div class="mr-small">
-              <img :src="speaker.avatar || `${publicPath}/img/speaker_img_placeholder.jpg`" class="rounded-small block" style="width: 5rem; aspect-ratio: 1; object-fit: cover;" />
+        <p class="type-small m-none">
+          {{ format(new Date(talk.slot?.start || talk.start), 'MMM dd') }} {{ getShownTime(talk.slot?.start || talk.start) }} - {{ getShownTime(talk.slot?.end || talk.end) }} ({{Intl.DateTimeFormat().resolvedOptions().timeZone}})
+        </p>
+        <div v-if="hashKey && getVideoUrl(talk.code)" class="col-sm-12 col-md-10 col-md-offset-1">
+          <div width="100%" class="video mt-medium mb-medium">
+            <iframe width="100%" height="100%" class="rounded" :src=getVideoUrl(talk.code) :title="`Recording: ${talk.title}`" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
+          </div>
+        </div>
+        <div v-if="talk.abstract" v-html="parseText(talk.abstract)" />
+        <details v-if="!talk.isBreak && talk.description" class="details">
+          <summary>
+            Full description
+          </summary>
+          <div v-html="parseText(talk.description)" class="p-small" />
+        </details>
+        <h3 v-if="!talk.isBreak" class="mt-xlarge">Presenters</h3>
+        <details
+          v-for="speaker in talk.speakers"
+          :key="speaker.code"
+          class="card sharper mb-medium mt-medium">
+          <summary class="bio">
+            <div class="middle" style="display: inline-flex">
+              <div class="mr-small">
+                <img :src="speaker.avatar || `${publicPath}/img/speaker_img_placeholder.jpg`" class="rounded-small block" style="width: 5rem; aspect-ratio: 1; object-fit: cover;" />
+              </div>
+              <div class="">
+                <h4 class="type-small type-underline">
+                    {{ getSpeaker(speaker.code)?.name || speaker.name }}
+                  </h4>
+              </div>
             </div>
-            <div class="">
-              <h4 class="type-small type-underline">
-                  {{ getSpeaker(speaker.code)?.name || speaker.name }}
-                </h4>
+          </summary>
+          <div class="col-sm-12 p-medium pl-large pr-small">
+              <p
+                class="type-small m-none pl-2xsmall"
+                v-html="parseText(getSpeaker(speaker.code)?.biography) || '-'" />
             </div>
-          </div>
-        </summary>
-        <div class="col-sm-12 p-medium pl-large pr-small">
-            <p
-              class="type-small m-none pl-2xsmall"
-              v-html="parseText(getSpeaker(speaker.code)?.biography) || '-'" />
-          </div>
-      </details>
+        </details>
+      </div>
     </div>
   </div>
 </template>
 
 <script>
 import { marked } from 'marked'
-import { format, isWithinInterval } from 'date-fns'
+import { format, isWithinInterval, getDate } from 'date-fns'
 import LinkIcon from './icons/LinkIcon.vue'
 import CryptoJS from 'crypto-js'
 
@@ -97,8 +104,19 @@ export default {
   },
   computed: {
     shownTalks() {
-      if (this.selectedTrack === 'online' || this.onlineOnly) return this.talksOnline
-      if (this.selectedTrack === 'helsinki') return this.talksLive
+      if (!this.talksLive.length || !this.talksOnline.length) return
+      if (this.selectedTrack === 'online' || this.onlineOnly) {
+        return [
+          this.talksOnline.filter(({ slot }) => getDate(new Date(slot?.start)) === 28),
+          this.talksOnline.filter(({ slot }) => getDate(new Date(slot?.start)) === 29)
+        ]
+      }
+      if (this.selectedTrack === 'helsinki') {
+        return [
+          this.talksLive.filter(({ slot, start }) => getDate(new Date(start || slot?.start)) === 8),
+          this.talksLive.filter(({ slot, start }) => getDate(new Date(start || slot?.start)) === 9)
+        ]
+      }
       return []
     }
   },
@@ -217,4 +235,23 @@ details.details >>> ol {
 details summary.bio::-webkit-details-marker {
   display:none;
 }
+.sticky {
+  position: sticky;
+  top: 3.5rem;
+  z-index: 2;
+}
+h3.sticky {
+  top: 4.75rem;
+  margin-top: -2.5rem;
+  pointer-events: none;
+}
+@media screen and (max-width: 1280px) {
+  .sticky {
+    top: 6rem;
+  }
+  h3.sticky {
+    top: 7rem;
+    margin-top: -3rem;
+  }
+}
 </style>
diff --git a/src/views/Home.vue b/src/views/Home.vue
@@ -87,6 +87,10 @@
         <span class="color-theme">The online conference</span> will take place
         28-29 February, 2024 followed by the community day on the 1st of March.
       </p>
+      <p>
+        Also this you have the chance to meet your fellow Robot Framework enthusiasts in <span class="color-theme">Gather.town:</span>
+      </p>
+      <iframe width="100%" height="400" class="rounded" src="https://www.youtube.com/embed/6mtIO49k074?si=M0MgEfL2xBMEh0qe" frameborder="0" allow="" allowfullscreen></iframe>
       <p>
         In-person ticket includes a complimentary online conference ticket.
       </p>
@@ -130,15 +134,15 @@
             </div>
         </div>
     </page-section>
-    <!-- <page-section title-id="tutorials" :title="'Tutorials'">
+    <page-section title-id="tutorials" :title="'Tutorials'">
       <p>
         Tutorials offer you a sneak peek into specific topics, each uniquely designed for different levels of expertise. This year, we're excited to provide <span class="weight-bold">free beginner-level tutorials during the Community Day of our in-person conference.</span> <a href="https://tickets.robotframework.org/robocon-2024/3997179/">Enroll here, please!</a>
         </p>
         <p>
 Moreover, a wide array of exceptional online tutorials will be spread across the days before and after the online conference, <span class="type-underline-theme weight-bold">accessible exclusively to ticket holders.</span> Don't miss this opportunity to enhance your skills and knowledge in a tailored, engaging environment.
       </p>
       <tutorials24 :speakers="speakers" />
-    </page-section> -->
+    </page-section>
     <!-- <page-section title-id="workshops" :title="'Workshops'">
       <p>
         The in-person conference week kicks off with our exceptional hands-on workshops. These serve as your gateway to a deep dive into specific topics, allowing you to learn practically in a small group setting.
@@ -171,7 +175,7 @@ Moreover, a wide array of exceptional online tutorials will be spread across the
 
 <script>
 // import { PageSection, NewsBanner, Ticket, Talks24, Workshops24, Tutorials24, Sponsors, GlobeRbcn } from 'Components'
-import { PageSection, NewsBanner, Ticket, Talks24, Sponsors, GlobeRbcn } from 'Components'
+import { PageSection, NewsBanner, Ticket, Talks24, Tutorials24, Sponsors, GlobeRbcn } from 'Components'
 
 export default {
   name: 'App',
@@ -181,7 +185,7 @@ export default {
     Ticket,
     Talks24,
     // Workshops24,
-    // Tutorials24,
+    Tutorials24,
     Sponsors,
     GlobeRbcn
   },