jekyll-theme-conference 3.0.1 → 3.1.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 77630ecb9f0ae81a9f53c52bf08d86fda4be6a75e92668e95f0a5f48ed270748
-  data.tar.gz: 32ff767339f60c06bff39b86cbf2d1126f1c149ab797a26f1b1ec9fcdfc49223
+  metadata.gz: 91444cf0a7c14c4e1d4a10547c95fd9c6a10b176db297a2071830f2a634052c0
+  data.tar.gz: 5c16b5f374876f5bde05ff91c0e121133843f31ad42701ef8336b523933101ba
 SHA512:
-  metadata.gz: 6b0edcba1a9c41fc6365312f1cba5056ce66dd351283a9af19266d558fe27dac3b01d2fa0f83a0567eacc293f91489b1af7922e868325f23b19996a6608b0ec9
-  data.tar.gz: 18c8a4f2e500b45d1e4ddba54eeb466b4b2b3d7bf9171554c15403f8e58812f7f06bd06f1864e25cf9b792811fcd6b0ad16c1448088d727b6c57ac1246dea23b
+  metadata.gz: c2e410318beee836c5d3371185d5e5386f24a28c34061eeb0fc407ec68715326e55f9344021b93c2ded7631df376c45723fbeac84a3e7ae9c5f7a781e981abcc
+  data.tar.gz: a3a3fefe3e080e42fdf24923fe36189593aeaafd87a2e90624ce42a2fa6ba766a5436201cbb63a5e7b34fba71ea695e05a9ddbadf13352fddc4792c8423444f9

data/README.md

@@ -18,6 +18,41 @@ The theme was originally created for the yearly Winterkongress conference of the
 - [Demo: Winterkongress](https://digitale-gesellschaft.ch/kongress/)
 
 
+## Table of Contents
+
+- [Installation](#installation)
+  * [Gem-based Method](#gem-based-method)
+  * [Remote Theme Method](#remote-theme-method)
+- [Setup](#setup)
+  * [Jump Start](#jump-start)
+  * [Automatic Import](#automatic-import)
+  * [Automatic Build](#automatic-build)
+- [Configuration](#configuration)
+  * [Theme Verification](#theme-verification)
+  * [Collection URLs](#collection-urls)
+  * [Language](#language)
+  * [Navigation Bar](#navigation-bar)
+  * [Main Landing Page](#main-landing-page)
+  * [Information Boxes](#information-boxes)
+  * [Live Indications & Streaming](#live-indications---streaming)
+  * [Talk Settings](#talk-settings)
+  * [Speaker Settings](#speaker-settings)
+  * [Location Settings](#location-settings)
+  * [Program Settings](#program-settings)
+- [Content](#content)
+  * [Schedule / Program](#schedule---program)
+  * [Talks](#talks)
+  * [Speakers](#speakers)
+  * [Rooms](#rooms)
+  * [Links](#links)
+- [Overview Pages](#overview-pages)
+  * [Location / Room Overview](#location---room-overview)
+  * [Live Stream Overview](#live-stream-overview)
+  * [Additional Pages](#additional-pages)
+- [Design](#design)
+- [License](#license)
+
+
 ## Installation
 
 There are three ways to install: As a [Gem-based theme](https://jekyllrb.com/docs/themes/#understanding-gem-based-themes), as a [remote theme](https://github.blog/2017-11-29-use-any-theme-with-github-pages/) (GitHub Pages compatible), or by cloning/forking this repository and reference to it directly.
@@ -319,15 +354,16 @@ conference:
 
 In order to help users navigating the program during the congress, a _Live_ indication can be shown next to talks which are currently taking place. A small JavaScript functions keeps the site automatically up-to-date (without the need to refresh) showing the indication as soon as the talk has started and hiding it once it is over (according to the timetable indicated in the `_data/program.yml` file).
 
-This can be further extended if some of the talks have an associated live stream: Upon clicking one of the live indications a modal will open containing the corresponding live stream embedded. The URL to the live stream has to be set via `live` property in each room (see the _Content_ > _Room_ section below).
+This can be further extended if some of the talks have an associated live stream: Upon clicking one of the live indications a modal will open containing the corresponding live stream embedded. The URL to the live stream has to be set via `live` property in each room (see the _Content_ > _Room_ section below). Instead of opening the modal an external link can also be used.
 
 In order to activate the functionality, each day in the `program.yml` file must contain a `date` property (see section _Content_ > _Schedule / Program_ below) and the `live` property has to be set in the configuration file containing
 
 - how long a pause between two consecutive talks has to be for the live indication to pause (`time_stop`),
 - optionally if streaming is enabled (`streaming`) with indications
   + how many minutes the stream goes active before a talk (`time_prepend`),
-  + how many minutes the stream stays active after a talk (`time_extend`), and
-  + how long a pause between two consecutive talks has to be for the stream to pause (`time_pause`),
+  + how many minutes the stream stays active after a talk (`time_extend`),
+  + how long a pause between two consecutive talks has to be for the stream to pause (`time_pause`), and
+  + optionally an external (absolute) link to which the user will be redirected instead of opening the modal (`external`),
 - optionally a demo mode setting, whereby the JavaScript function cycles through the entire program in five minutes for demonstration purposes (`demo: true`, default: `false`).
 
 ```yaml
@@ -587,6 +623,10 @@ If you choose a different location for the overview pages you must:
 
 The `location` layout contains a map container (if not disabled, see section _Location Settings_ above) which can be customized. See the section above for further details.
 
+### Live Stream Overview
+
+The `stream-overview` layout contains all active streams on a single page (see the section _Live Indications & Streaming_ above).
+
 ### Additional Pages
 
 Additional static pages can easily be added as files and linked to via navigation bar or main landing page (see above on how to).

data/_includes/js/conference-live.js

@@ -13,6 +13,8 @@ window.conference.live = (function() {
     {%- include partials/get_talk_timestamp.html -%}
     {%- assign conf_end = timestamp_end -%}
 
+    let data;
+
     let confStart = {{ conf_start }};
     let confEnd = {{ conf_end }};
     let confDur = confEnd - confStart;
@@ -32,26 +34,43 @@ window.conference.live = (function() {
     let streamVideoTimer;
     let streamInfoTimer;
 
+    let loadData = function () {
+        // Fetch schedule from external file
+        $.getJSON('{{ site.baseurl }}/assets/js/data.json', function(json) {
+            data = json;
+        });
+    };
+
+    let getData = function () {
+        // Return data
+        return data;
+    };
+
     let mod = function (n, m) {
+        // Absolute modulo
         return ((n % m) + m) % m;
     };
 
     let timeNow = function () {
+        // Current timestamp in seconds
         return Math.floor(Date.now() / 1000);
     };
 
     let timeCont = function () {
+        // Continuous time (respecting previous pauses)
         return timeNow() - timeOffset;
     };
 
     let timeCycle = function () {
+        // Cyclic timestamp in seconds
         let actTime = timeNow();
-        let relTime = mod(actTime, durDemo + 2*durPause) / durDemo;
+        let relTime = mod(actTime, durDemo + 2*durPause) / (durDemo + 2*durPause);
         let cycleTime = mod((demoEnd - demoStart) * relTime - timeOffset, (demoEnd - demoStart)) + demoStart;
         return cycleTime;
     };
 
     let time = function () {
+        // Return app time
         if (freezeTime) {
             return timeFrozen;
         }
@@ -64,6 +83,7 @@ window.conference.live = (function() {
     };
 
     let pauseTime = function () {
+        // Pause app time
         if (!freezeTime) {
             timeFrozen = time();
             freezeTime = true;
@@ -73,6 +93,7 @@ window.conference.live = (function() {
     };
 
     let continueTime = function () {
+        // Continue app time
         if (freezeTime) {
             freezeTime = false;
             timeOffset += time() - timeFrozen;
@@ -80,18 +101,23 @@ window.conference.live = (function() {
         }
     };
 
-    let resetTime = function (timeStr) {
+    let resetTime = function () {
+        // Reset app time
         timeOffset = 0;
         freezeTime = false;
 
         startUpdate();
     };
 
-    let setTime = function (newTime, newDay=1) {
+    let setTime = function (newTime, newDay) {
+        // Set and pause app time
         pauseTime();
 
         let dayIdx;
-        if (Number.isInteger(newDay)) {
+        if (arguments.length < 2) {
+            dayIdx = 0;
+        }
+        else if (Number.isInteger(newDay)) {
             dayIdx = newDay-1;
         }
         else if (/^[0-9]{4}-[0-9]{2}-[0-9]{2}$/.test(newDay)) {
@@ -100,7 +126,7 @@ window.conference.live = (function() {
         else {
             dayIdx = data.days.find(o => o.name === newDay);
         }
-        newDate = data.days[dayIdx].date;
+        let newDate = data.days[dayIdx].date;
 
         let d = new Date(newDate);
         newTime = newTime.split(':');
@@ -111,7 +137,10 @@ window.conference.live = (function() {
         update();
     };
 
-    let getTime = function (tConvert=time()) {
+    let getTime = function () {
+        // Return app time as string
+        let tConvert = time();
+
         let d = new Date(tConvert * 1000);
         let dStr = d.toISOString().slice(0,10);
         let h = d.getHours();
@@ -121,6 +150,7 @@ window.conference.live = (function() {
     };
 
     let timeUnit = function () {
+        // App time refresh rate
         if (demo) {
             return 0.1;
         }
@@ -130,6 +160,7 @@ window.conference.live = (function() {
     };
 
     let delayStart = function (startTime) {
+        // Seconds until given startTime occurs
         let tNow = time();
         let tUnit = timeUnit();
 
@@ -149,21 +180,25 @@ window.conference.live = (function() {
     };
 
     let toggleDemo = function () {
+        // Toggle app demo mode
         demo = !demo;
         resetTime();
     };
 
     let demoOn = function () {
+        // Return app demo status
         return demo;
     };
 
     let updateLive = function () {
+        // Update status all live elements in DOM
         let tNow = time();
         let liveShow = document.getElementsByClassName('live-show');
         let liveHide = document.getElementsByClassName('live-hide');
         let liveTime = document.getElementsByClassName('live-time');
         let livePast = document.getElementsByClassName('live-past');
 
+        // Show elements for a given period
         for (let i = 0; i < liveShow.length; i++) {
             let tStarts = liveShow[i].dataset.start.split(',');
             let tEnds = liveShow[i].dataset.end.split(',');
@@ -181,6 +216,7 @@ window.conference.live = (function() {
             }
         }
 
+        // Hide elements for a given period
         for (let i = 0; i < liveHide.length; i++) {
             let tStarts = liveHide[i].dataset.start.split(',');
             let tEnds = liveHide[i].dataset.end.split(',');
@@ -200,6 +236,7 @@ window.conference.live = (function() {
             }
         }
 
+        // Update duration string for given elements
         for (let i = 0; i < liveTime.length; i++) {
             let t = liveTime[i].dataset.time;
             if (typeof t == "undefined") {
@@ -259,6 +296,7 @@ window.conference.live = (function() {
             liveTime[i].innerHTML = tStr;
         }
 
+        // Disable elements for a given period
         for (let i = 0; i < livePast.length; i++) {
             let t = livePast[i].dataset.time;
             if (typeof t == "undefined") {
@@ -278,13 +316,14 @@ window.conference.live = (function() {
             }
         }
 
+        // Cancel timer after program is over
         if (tNow > confEnd && !demo) {
-            // Cancel timer after program is over
             stopUpdateLive();
         }
     };
 
     let startUpdateLive = function () {
+        // Start update timer to update live elements in DOM
         stopUpdateLive();
         updateLive();
 
@@ -301,6 +340,7 @@ window.conference.live = (function() {
     };
 
     let stopUpdateLive = function () {
+        // stopUpdate update timer to update live elements in DOM
         if (typeof liveTimer !== "undefined") {
             clearInterval(liveTimer);
         }
@@ -312,9 +352,9 @@ window.conference.live = (function() {
         let streamExtend  = {{ site.conference.live.streaming.time_extend | default: 5 }};  // in minutes
 
         let streamModal;
-        let data;
 
         let getRoom = function (roomName) {
+            // Return room object for given room name
             if (roomName in data.rooms) {
                 return data.rooms[roomName];
             }
@@ -324,6 +364,7 @@ window.conference.live = (function() {
         };
 
         let getNextTalk = function (roomName) {
+            // Get talk object for next talk in given room
             let timeNow = time();
             let talksHere = data.talks[roomName];
 
@@ -340,6 +381,7 @@ window.conference.live = (function() {
         };
 
         let getNextPause = function (roomName) {
+            // Get time object for next pause in given room
             let timeNow = time();
             let talksHere = data.talks[roomName];
 
@@ -358,20 +400,24 @@ window.conference.live = (function() {
             return false;
         };
 
-        let setStreamContent = function (content) {
+        let setStreamIframeContent = function (content) {
+            // Set stream modal iframe to show given text
             streamModal.find('iframe').attr('src', '');
             streamModal.find('iframe').addClass('d-none');
             streamModal.find('#stream-placeholder > div').text(content);
             streamModal.find('#stream-placeholder').addClass('d-flex');
         };
 
-        let setStreamSrc = function (href) {
+        let setStreamIframeSrc = function (href) {
+            // Set stream modal iframe to show given URL
             streamModal.find('iframe').attr('src', href);
             streamModal.find('#stream-placeholder').addClass('d-none').removeClass('d-flex');
             streamModal.find('iframe').removeClass('d-none');
         };
 
         let setStreamVideo = function (roomName) {
+            // Update stream modal iframe:
+            // Show stream with start/pause/end message (for given room) and keep updated
             let timeNow = time();
 
             let talksHere = data.talks[roomName];
@@ -384,7 +430,7 @@ window.conference.live = (function() {
 
             // Conference not yet started
             if (timeNow < roomStart - streamPrepend*60) {
-                setStreamContent('{{ site.data.lang[site.conference.lang].live.pre_stream | default: "Live stream has not started yet." }}');
+                setStreamIframeContent('{{ site.data.lang[site.conference.lang].live.pre_stream | default: "Live stream has not started yet." }}');
 
                 if (!freezeTime) {
                     streamVideoTimer = setTimeout(setStreamVideo, delayStart(roomStart - streamPrepend*60) * 1000, roomName);
@@ -393,7 +439,7 @@ window.conference.live = (function() {
 
             // Conference is over
             else if (timeNow > roomEnd + streamExtend*60) {
-                setStreamContent('{{ site.data.lang[site.conference.lang].live.post_stream | default: "Live stream has ended." }}');
+                setStreamIframeContent('{{ site.data.lang[site.conference.lang].live.post_stream | default: "Live stream has ended." }}');
 
                 if (!freezeTime && demo) {
                     streamVideoTimer = setTimeout(setStreamVideo, delayStart(roomEnd - streamPrepend*60) * 1000, roomName);
@@ -406,7 +452,7 @@ window.conference.live = (function() {
 
                 // Currently stream is paused
                 if (pauseNext && timeNow >= pauseNext.start + streamExtend*60 && timeNow <= pauseNext.end - streamPrepend*60) {
-                    setStreamContent('{{ site.data.lang[site.conference.lang].live.pause_stream | default: "Live stream is currently paused." }}');
+                    setStreamIframeContent('{{ site.data.lang[site.conference.lang].live.pause_stream | default: "Live stream is currently paused." }}');
 
                     if (!freezeTime) {
                         streamVideoTimer = setTimeout(setStreamVideo, delayStart(pauseNext.end - streamPrepend*60) * 1000, roomName);
@@ -415,7 +461,7 @@ window.conference.live = (function() {
                 // Currently a talk is active
                 else {
                     let room = getRoom(roomName);
-                    setStreamSrc(room.href);
+                    setStreamIframeSrc(room.href);
 
                     if (!freezeTime) {
                         if (pauseNext) {
@@ -430,6 +476,8 @@ window.conference.live = (function() {
         };
 
         let setStreamInfo = function (roomName) {
+            // Update stream modal info bar:
+            // Show next talk and speaker (for given room) and keep updated
             let timeNow = time();
             let talkNext = getNextTalk(roomName);
 
@@ -484,6 +532,7 @@ window.conference.live = (function() {
         };
 
         let setStream = function (roomName) {
+            // Update stream modal (iframe and info bar) for given room
             streamModal.find('.modal-footer .btn').removeClass('active');
             streamModal.find('#stream-select').val(0);
 
@@ -499,6 +548,7 @@ window.conference.live = (function() {
         };
 
         let updateStream = function () {
+            // Update stream modal for currently active room button
             if (streamModal.hasClass('show')) {
                 let activeButton = streamModal.find('.modal-footer .btn.active');
                 let roomName = activeButton.data('room');
@@ -510,6 +560,7 @@ window.conference.live = (function() {
         };
 
         let stopUpdateStream = function () {
+            // Stop stream modal update timer
             if (typeof streamVideoTimer !== "undefined") {
                 clearInterval(streamVideoTimer);
             }
@@ -518,13 +569,15 @@ window.conference.live = (function() {
             }
         };
 
-        let hideModal = function (event) {
+        let hideModal = function () {
+            // Close stream modal
             streamModal.find('iframe').attr('src', '');
             streamModal.find('.modal-footer .btn').removeClass('active');
             streamModal.find('#stream-select').selectedIndex = -1;
         };
 
         let setupStream = function () {
+            // Setup events when modal opens/closes
             streamModal = $('#stream-modal');
 
             // configure modal opening buttons
@@ -533,8 +586,8 @@ window.conference.live = (function() {
                 let roomName = button.data('room');
                 setStream(roomName);
             });
-            streamModal.on('hide.bs.modal', function (event) {
-                hideModal(event);
+            streamModal.on('hide.bs.modal', function () {
+                hideModal();
             });
 
             // configure room selection buttons in modal
@@ -552,14 +605,10 @@ window.conference.live = (function() {
                 let roomName = $(this).children('option:selected').text();
                 setStream(roomName);
             });
-
-            // load data
-            $.getJSON('{{ site.baseurl }}/assets/js/data.json', function(json) {
-                data = json;
-            });
         };
 
         let setup = function () {
+            loadData();
             startUpdateLive();
             setupStream();
         };
@@ -582,6 +631,7 @@ window.conference.live = (function() {
     {%- else -%}
 
         let setup = function () {
+            loadData();
             startUpdateLive();
         };
 
@@ -601,6 +651,7 @@ window.conference.live = (function() {
 
     return {
         init: setup,
+        getData: getData,
 
         pauseTime: pauseTime,
         continueTime: continueTime,

data/_includes/js/conference-map.js

@@ -24,7 +24,7 @@ window.conference.mapConfig = (function() {
     };
 
     let init = function () {
-        elId = 'map';
+        let elId = 'map';
 
         if (document.getElementById(elId)) {
             setup(elId);

data/_includes/js/conference-modal.js

@@ -51,7 +51,7 @@ window.conference.modal = (function () {
         }
     };
 
-    let hide = function (el, event) {
+    let hide = function (el) {
         let modal = $(el);
 
         modal.find('.modal-title h3').text('');
@@ -61,13 +61,13 @@ window.conference.modal = (function () {
     };
 
     let init = function() {
-        elSel = '#link-modal';
+        let elSel = '#link-modal';
 
         $(elSel).on('show.bs.modal', function (event) {
             show(this, event);
         });
-        $(elSel).on('hide.bs.modal', function (event) {
-            hide(this, event);
+        $(elSel).on('hide.bs.modal', function () {
+            hide(this);
         });
     };
 

data/_includes/js/conference-program.js

@@ -34,7 +34,7 @@ window.conference.program = (function() {
             }
 
             // Add current selected day as hash to URL while keeping current scrolling position
-            $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
+            $('a[data-toggle="tab"]').on('shown.bs.tab', function () {
                 updateHash(this.hash);
             });
         }

data/_includes/js/syncscroll.js

@@ -29,7 +29,7 @@ function (exports) {
         var elems = document.getElementsByClassName('syncscroll');
         var i, j, el, found, name;
         for (name in names) {
-            if (names.hasOwnProperty(name)) {
+            if (Object.prototype.hasOwnProperty.call(names, name)) {
                 for (i = 0; i < names[name].length; i++) {
                     names[name][i].removeEventListener(
                         'scroll', names[name][i].syn, 0

data/_includes/partials/modal_live.html

@@ -4,7 +4,7 @@
 
       <div class="modal-header">
         <h5 class="modal-title">
-          {{ site.data.lang[site.conference.lang].live.streaming | default: "Live Stream" }}
+          {{ site.data.lang[site.conference.lang].live.stream | default: "Live Stream" }}
         </h5>
         <button type="button" class="close" data-dismiss="modal" aria-label="Close">
           <span aria-hidden="true">&times;</span>

data/_includes/partials/navbar.html

@@ -41,7 +41,18 @@
 
             <li class="nav-item live-show d-none" data-start="{{ live_starts }}" data-end="{{ live_ends }}">
               {%- if site.conference.live.streaming %}
-                <a class="nav-link" title="{% if link.name %}{{ link.name }}{% else %}{{ site.data.lang[site.conference.lang].live.streaming | default: "Live Stream" }}{% endif %}" data-toggle="modal" data-target="#stream-modal" data-room="" href="#">
+                <a class="nav-link" title="
+                  {%- if link.name -%}
+                    {{- link.name -}}
+                  {%- else -%}
+                    {{- site.data.lang[site.conference.lang].live.stream | default: "Live Stream" -}}
+                  {%- endif -%}
+                  " {% if site.conference.live.streaming.external -%}
+                    href="{{ site.conference.live.streaming.external }}"
+                  {%- else -%}
+                    data-toggle="modal" data-target="#stream-modal" data-room="{{ r.name }}" href="#"
+                  {%- endif -%}
+                  >
               {%- else %}
                 {%- assign link_styleclass = "nav-link" -%}
                 {%- include partials/get_link.html %}

data/_includes/partials/show_live_button.html

@@ -2,7 +2,11 @@
   {%- include partials/get_talk_timestamp.html -%}
 
   {%- if site.conference.live.streaming -%}
-    <a title="{{ link.name }}" data-toggle="modal" data-target="#stream-modal" data-room="{{ r.name }}" href="#"
+    <a title="{{ link.name }}" {% if site.conference.live.streaming.external -%}
+      href="{{ site.conference.live.streaming.external }}"
+    {%- else -%}
+      data-toggle="modal" data-target="#stream-modal" data-room="{{ r.name }}" href="#"
+    {%- endif -%}
   {%- else -%}
     <span
   {%- endif %} class="live-show live-button badge badge-dark font-weight-normal text-center d-none {{ live_button_styleclass }}" data-start="{{ timestamp_start }}" data-end="{{ timestamp_end }}">

data/_layouts/home.html

@@ -23,11 +23,12 @@
 
     {% if site.conference.main.links %}
       <div class="lead d-print-none">
+      {% assign btn_default = 'btn btn-outline-primary btn-lg mt-2 ml-1' %}
       {% for link in site.conference.main.links %}
 
         {% if link.menu %}
           <div class="dropdown d-inline">
-            <a class="btn btn-outline-primary btn-lg mt-2 dropdown-toggle" href="#" role="button" id="main-dropdown{{ forloop.index0 }}" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+            <a class="{{ btn_default }} dropdown-toggle" href="#" role="button" id="main-dropdown{{ forloop.index0 }}" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
               {{ link.name }}
             </a>
             <div class="dropdown-menu" aria-labelledby="main-dropdown{{ forloop.index0 }}">
@@ -48,20 +49,20 @@
           {%- if link.name -%}
             {%- assign link_name = link.name -%}
           {%- else -%}
-            {%- assign link_name =  site.data.lang[site.conference.lang].live.streaming | default: "Live Stream" -%}
+            {%- assign link_name =  site.data.lang[site.conference.lang].live.stream | default: "Live Stream" -%}
           {%- endif -%}
 
           {%- if link.name_inactive -%}
-            <span class="live-hide btn btn-outline-primary btn-lg mt-2 disabled" data-start="{{ live_starts }}" data-end="{{ live_ends }}">
+            <span class="live-hide {{ btn_default }} disabled" data-start="{{ live_starts }}" data-end="{{ live_ends }}">
               {{ link.name_inactive }}
             </span>
           {%- endif -%}
 
           <span class="live-show d-none" data-start="{{ live_starts }}" data-end="{{ live_ends }}">
             {% if site.conference.live.streaming %}
-              <a class="btn btn-outline-primary btn-lg mt-2" title="{{ link_name }}" data-toggle="modal" data-target="#stream-modal" data-room="" href="#">
+              <a class="{{ btn_default }}" title="{{ link_name }}" data-toggle="modal" data-target="#stream-modal" data-room="" href="#">
             {% else %}
-              {% assign link_styleclass = "btn btn-outline-primary btn-lg mt-2" %}
+              {% assign link_styleclass = "{{ btn_default }}" %}
               {% include partials/get_link.html %}
               {{ link_tag }}
             {% endif %}
@@ -71,7 +72,7 @@
           </span>
 
         {% else %}
-          {% assign link_styleclass = "btn btn-outline-primary btn-lg mt-2" %}
+          {% assign link_styleclass = btn_default %}
           {% include partials/get_link.html %}
           {{ link_tag }}
             {{ link.name }}

data/_layouts/program.html

@@ -30,11 +30,11 @@
     {%- endif %}
 
     <div class="sticky-top syncscroll overflow-hidden" name="sync-table">
-      <table class="table mb-0">
+      <table class="table mb-0 mx-auto">
         <thead>
           <tr>
-            <th scope="col" class="text-right">#<span class="invisible">I0</span></th>
-            <th class="p-0" scope="col"></th>
+            <th scope="col" class="col-title text-right">#<span class="invisible">I0</span></th>
+            <th class="col-space p-0" scope="col"></th>
             {%- assign nbr_rooms = d.rooms | size -%}
             {%- for r in d.rooms -%}
               {%- assign room = site.rooms | where: 'name', r.name | first %}
@@ -48,7 +48,7 @@
                 {%- endif -%}
               </th>
               {%- unless forloop.last %}
-                <th class="p-0" scope="col"></th>
+                <th class="col-space p-0" scope="col"></th>
               {%- endunless -%}
             {%- endfor %}
           </tr>
@@ -57,7 +57,7 @@
     </div>
 
     <div class="syncscroll overflow-y-hidden" name="sync-table">
-      <table class="table">
+      <table class="table mx-auto">
         <tbody>
           {%- include partials/get_day_time.html -%}
 
@@ -85,17 +85,17 @@
             <tr>
 
               {%- if current_min == 0 -%}
-                <th scope="row" class="text-right" style="z-index: {{ z-index-max }}">
+                <th scope="row" class="col-title text-right" style="z-index: {{ z-index-max }}">
                   {{- current_time -}}
                 </th>
               {%- elsif site.conference.program.show_alltimes -%}
-                <th scope="row" class="text-right text-muted font-weight-normal" style="z-index: {{ z-index-max }}">
+                <th scope="row" class="col-title text-right text-muted font-weight-normal" style="z-index: {{ z-index-max }}">
                   :{{ current_min }}
                 </th>
               {%- else -%}
-                <th scope="row" style="z-index: {{ z-index-max }}"></th>
+                <th scope="row" class="col-title" style="z-index: {{ z-index-max }}"></th>
               {%- endif %}
-              <td class="p-0"></td>
+              <td class="col-space p-0"></td>
 
               {%- for r in d.rooms -%}
                 {%- assign room = site.rooms | where: 'name', r.name | first -%}
@@ -135,7 +135,7 @@
 
                     {%- assign talk_nbr_steps = talk_duration_min | divided_by: site.conference.program.time_steps -%}
                     {%- include partials/get_main_category.html -%}
-                    <td rowspan="{{ talk_nbr_steps }}" class="alert alert-{{ main_cat_color }} shadow-sm" style="z-index: {{ z-index-max | minus: i }}">
+                    <td rowspan="{{ talk_nbr_steps }}" class="alert alert-{{ main_cat_color }} shadow-sm overflow-hidden" style="z-index: {{ z-index-max | minus: i }}">
 
                       {%- assign live_button_styleclass = "mb-2" %}
                       {%- include partials/show_live_button.html %}
@@ -161,7 +161,7 @@
                 {%- endunless -%}
 
                 {%- if forloop.last != true %}
-                  <td class="p-0"></td>
+                  <td class="col-space p-0"></td>
                 {%- endif -%}
 
               {%- endfor %}

data/_layouts/stream-overview.html

@@ -0,0 +1,42 @@
+{% include partials/header.html %}
+
+  <h1 class="display-5 mb-4">
+    {% if page.title %}
+      {{ page.title }}
+    {% else %}
+      {{ site.data.lang[site.conference.lang].live.stream | default: "Live Streams" }}
+    {% endif %}
+  </h1>
+
+  {{ content }}
+
+  {%- assign nbr_streams = 0 -%}
+  {%- for room in site.rooms -%}
+    {%- if room.live -%}
+      {%- assign mod_nbr_streams = nbr_streams | modulo: 2 -%}
+      {%- if mod_nbr_streams == 0 %}
+  <div class="row">
+      {%- endif %}
+
+    <div class="col-md">
+      <h3>{{ room.name }}</h3>
+      <div class="embed-responsive embed-responsive-16by9">
+        <iframe class="embed-responsive-item" src="{{ room.live }}" allowfullscreen></iframe>
+      </div>
+    </div>
+
+      {%- if mod_nbr_streams == 1 %}
+  </div>
+      {%- endif -%}
+
+      {%- assign nbr_streams = nbr_streams | plus: 1 -%}
+    {%- endif -%}
+  {%- endfor %}
+
+  {% assign mod_nbr_streams = nbr_streams | modulo: 2 %}
+  {%- if mod_nbr_streams == 1 %}
+    <div class="col-md"></div>
+  </div>
+  {%- endif %}
+
+{% include partials/footer.html %}

data/_sass/conference.scss

@@ -79,6 +79,12 @@ ul.btn-group {
 
 // General
 
+//   Keep images in container
+main.container img {
+  max-width: 100%;
+  height: auto;
+}
+
 //   No bottom margin on info-bar
 .alert > p:last-of-type {
   margin-bottom: 0;
@@ -130,22 +136,26 @@ ul.btn-group {
   // First row defines width for all columns
   table-layout: fixed;
 
-  // Table width
-  min-width: 100%;
+  // Columns define table width
+  width: auto;
 
   // Column widths
-  tr {
+  th, td {
+    // Total available container width is 1110px
+
+    // Width of columns with content (default)
+    width: 245px;
+    min-width: 245px;
+
     // Spacing between columns
-    > :nth-child(even) {
-      width: 10px;
-    }
-    // Width of columns with content
-    > :nth-child(odd) {
-      width: 180px;
+    &.col-space {
+      width: 15px;
+      min-width: 15px;
     }
     // Width of first column containing timestamps
-    > :nth-child(1) {
-      width: 4.5em;
+    &.col-title {
+      width: 70px;
+      min-width: 70px;
     }
   }
 }

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: jekyll-theme-conference
 version: !ruby/object:Gem::Version
-  version: 3.0.1
+  version: 3.1.1
 platform: ruby
 authors:
 - Lorenz Schmid
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2020-12-08 00:00:00.000000000 Z
+date: 2021-02-15 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll
@@ -108,6 +108,7 @@ files:
 - _layouts/room.html
 - _layouts/speaker-overview.html
 - _layouts/speaker.html
+- _layouts/stream-overview.html
 - _layouts/talk-overview.html
 - _layouts/talk.html
 - _sass/bootstrap/_alert.scss
@@ -278,7 +279,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.1.4
+rubygems_version: 3.2.3
 signing_key: 
 specification_version: 4
 summary: Jekyll template for a conference website containing program, speaker, talks