jekyll-theme-conference 3.0.0 → 3.1.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b4319ed637aa4734e12cd0d9eef3a807f314e8a9e4c0ff3a79b8781e8e00ebb9
-  data.tar.gz: d0c52c4aa84e87fb5c9892b6509db3de79a640e2e3ad005359febda835c412be
+  metadata.gz: e8d4fe78f7da2eba1de22ca1b58a6cd57fefd89729aae6efc5ec6e34bc61bf85
+  data.tar.gz: 14da05b22aec27e04c3827682c686fc07444ab42f0b38c99c0158f818f363dce
 SHA512:
-  metadata.gz: 849e5facbe864d96c63fcdcd218ee4a4a4d8e63a9787aca58c10b1fafdf20704ce3d529caa519940ae65bd3a561ffc6127f2da243a823e676604b538e2f24c35
-  data.tar.gz: 5bca6a3b8624e8e8f04797292cc969dd2f995fb74ffedd178dee2d59b0410cd93d1dd5479d8c64cdc99728ca7160e05c31e9537a93866093ed88bd65142e0a03
+  metadata.gz: 58c2b9524a42cc13bcc1cb91075bc35cdc223418b23bd926bd21cc849688d60f543d13fadaf4ad46ac21ff8091a798478fad9daf331ae49db1b88d6ae6b56f7f
+  data.tar.gz: abe66bdd148005dc8293d4604070c00bfb41203b33767ab4f05341da278b67527738800ad20880f8c39af85825549f91ae47069a6f6f029716ccae065e25a648

data/README.md

@@ -319,15 +319,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
@@ -552,7 +553,7 @@ Links are used at different location throughout the theme: They can either be us
 Additionally, a navigation bar or main landing page link can also have the following properties:
 
 - `menu` containing another list of links. This creates a dropdown menu of multiple sublinks. The sublinks have the same properties as regular links, or
-- `live` making the link only visible during the conference and adds a live indication. The `name` property can be omitted. If streaming is enabled and any URL property is omitted, a click on the link will open the streaming modal (see section _Live Indications_ above).
+- `live` making the link only visible during the conference and adds a live indication. The `name` property can be omitted. Using the optional `name_inactive` property shows a placeholder text while the conference is **not** live. If streaming is enabled and any URL property is omitted, a click on the link will open the streaming modal (see section _Live Indications_ above).
 
 Using the `file:` indicator, the relative address is automatically set as well as the icon. Using the `video:` indicator, the link is automatically configured to open in an iframe with a corresponding title and the icon is set.
 
@@ -587,6 +588,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,6 +34,16 @@ window.conference.live = (function() {
     let streamVideoTimer;
     let streamInfoTimer;
 
+    let loadData = function () {
+        $.getJSON('{{ site.baseurl }}/assets/js/data.json', function(json) {
+            data = json;
+        });
+    };
+
+    let getData = function () {
+        return data;
+    };
+
     let mod = function (n, m) {
         return ((n % m) + m) % m;
     };
@@ -46,7 +58,7 @@ window.conference.live = (function() {
 
     let timeCycle = function () {
         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;
     };
@@ -312,7 +324,6 @@ window.conference.live = (function() {
         let streamExtend  = {{ site.conference.live.streaming.time_extend | default: 5 }};  // in minutes
 
         let streamModal;
-        let data;
 
         let getRoom = function (roomName) {
             if (roomName in data.rooms) {
@@ -485,7 +496,7 @@ window.conference.live = (function() {
 
         let setStream = function (roomName) {
             streamModal.find('.modal-footer .btn').removeClass('active');
-            streamModal.find('#stream-select').selectedIndex = -1;
+            streamModal.find('#stream-select').val(0);
 
             // Recover room name in case of empty default
             let room = getRoom(roomName);
@@ -495,7 +506,7 @@ window.conference.live = (function() {
             setStreamInfo(roomName);
 
             streamModal.find('#stream-button' + room.id).addClass('active');
-            streamModal.find('#stream-select').selectedIndex = room.id;
+            streamModal.find('#stream-select').val(room.id);
         };
 
         let updateStream = function () {
@@ -552,14 +563,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 +589,7 @@ window.conference.live = (function() {
     {%- else -%}
 
         let setup = function () {
+            loadData();
             startUpdateLive();
         };
 
@@ -601,6 +609,7 @@ window.conference.live = (function() {
 
     return {
         init: setup,
+        getData: getData,
 
         pauseTime: pauseTime,
         continueTime: continueTime,

data/_includes/js/conference-modal.js

@@ -4,31 +4,47 @@ window.conference.modal = (function () {
         let button = $(event.relatedTarget);
 
         let href = button.data('href');
-        let header = button.data('header');
+        let format = button.data('format');
         let title = button.data('title');
+        let subtitle = button.data('subtitle');
         let footer = button.data('footer');
-        let desc = button.data('desc');
 
         let modal = $(el);
         modal.find('iframe').attr('src', href);
 
-        if (header) {
-            modal.find('.modal-title').html(header);
-        }
-        else if (title) {
-            modal.find('.modal-title').text(title);
+        if (title) {
+            if (format == 'html') {
+                modal.find('.modal-title h3').html(title);
+                if (subtitle) {
+                    modal.find('.modal-title h5').html(subtitle).removeClass('d-none');
+                }
+                else {
+                    modal.find('.modal-title h5').text('').addClass('d-none');
+                }
+            }
+            else {
+                modal.find('.modal-title h3').text(title);
+                if (subtitle) {
+                    modal.find('.modal-title h5').text(subtitle).removeClass('d-none');
+                }
+                else {
+                    modal.find('.modal-title h5').text('').addClass('d-none');
+                }
+            }
         }
         else {
-            modal.find('.modal-title').text('');
+            modal.find('.modal-title h3').text('');
+            modal.find('.modal-title h5').text('').addClass('d-none');
         }
 
         if (footer) {
             modal.find('.modal-footer').removeClass('d-none');
-            modal.find('.modal-description').html(footer);
-        }
-        else if (desc) {
-            modal.find('.modal-footer').removeClass('d-none');
-            modal.find('.modal-description').text(desc);
+            if (format == 'html') {
+                modal.find('.modal-footer p').html(footer);
+            }
+            else {
+                modal.find('.modal-footer p').text(footer);
+            }
         }
         else {
             modal.find('.modal-footer').addClass('d-none');
@@ -38,9 +54,10 @@ window.conference.modal = (function () {
     let hide = function (el, event) {
         let modal = $(el);
 
-        modal.find('.modal-title').text('');
+        modal.find('.modal-title h3').text('');
+        modal.find('.modal-title h5').text('').addClass('d-none');
         modal.find('iframe').attr('src', '');
-        modal.find('.modal-description').html('');
+        modal.find('.modal-footer p').html('');
     };
 
     let init = function() {

data/_includes/partials/footer.html

@@ -2,27 +2,10 @@
   </main>
   <footer class="container"></footer>
 
-  <div class="modal fade" id="link-modal" tabindex="-1" role="dialog" aria-labelledby="link-modal-label" aria-hidden="true">
-    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
-      <div class="modal-content">
-        <div class="modal-header">
-          <h5 class="modal-title" id="link-modal-label"></h5>
-          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-            <span aria-hidden="true">&times;</span>
-          </button>
-        </div>
-        <div class="modal-body embed-responsive embed-responsive-16by9">
-          <iframe class="embed-responsive-item" src="" allowfullscreen></iframe>
-        </div>
-        <div class="modal-footer justify-content-start">
-          <p class="modal-description"></p>
-        </div>
-      </div>
-    </div>
-  </div>
+  {%- include partials/modal_link.html -%}
 
   {%- if site.conference.live.streaming -%}
-    {%- include partials/live_modal.html -%}
+    {%- include partials/modal_live.html -%}
   {%- endif -%}
 
   <!-- Append build time to avoid caching of live program embedded in JavaScript file -->

data/_includes/partials/get_link.html

@@ -29,34 +29,30 @@
   {%- assign link_iframe = true -%}
 
   {%- if talk -%}
-    {%- capture modal_header -%}
-      <h3 class="font-weight-light">
-        {%- if talk.hide -%}
+    {%- capture modal_title -%}
+      {%- if talk.hide -%}
+        {{ talk.name }}
+      {%- else -%}
+        <a class="text-reset" href="{{ talk.url | prepend: site.baseurl }}">
           {{ talk.name }}
-        {%- else -%}
-          <a class="text-reset" href="{{ talk.url | prepend: site.baseurl }}">
-            {{ talk.name }}
-          </a>
-        {%- endif -%}
-      </h3>
-      <p class="mb-0 font-weight-light">
-        {%- include partials/list_speakers.html -%}
-      </p>
+        </a>
+      {%- endif -%}
+    {%- endcapture -%}
+    {%- capture modal_subtitle -%}
+      {%- include partials/list_speakers.html -%}
     {%- endcapture -%}
 
   {%- elsif speaker -%}
-    {%- capture modal_header -%}
-      <h3 class="mb-0 font-weight-light">
-        {%- if speaker.hide -%}
+    {%- capture modal_title -%}
+      {%- if speaker.hide -%}
+        {{ speaker.first_name }} {{ speaker.last_name }}
+      {%- else -%}
+        <a class="text-reset" href="{{ speaker.url | prepend: site.baseurl }}">
           {{ speaker.first_name }} {{ speaker.last_name }}
-        {%- else -%}
-          <a class="text-reset" href="{{ speaker.url | prepend: site.baseurl }}">
-            {{ speaker.first_name }} {{ speaker.last_name }}
-          </a>
-        {%- endif -%}
-      </h3>
+        </a>
+      {%- endif -%}
     {%- endcapture -%}
-    {%- assign modal_desc = link.name -%}
+    {%- assign modal_footer = link.name -%}
 
   {%- endif -%}
 
@@ -70,18 +66,14 @@
     <a class="disabled{% if link_styleclass %} {{ link_styleclass }}{% endif %}" href="#">
 
   {%- elsif link_iframe -%}
-    <a {% if link_styleclass %}class="{{ link_styleclass }}"{% endif %} title="{{ link.name }}" data-toggle="modal" data-target="#link-modal" data-href="{{ link_href }}" href="#" {% if modal_header -%}
-      data-header="{{ modal_header | strip_newlines | escape }}"
-    {%- elsif modal_title -%}
-      data-title="{{ modal_title }}"
+    <a {% if link_styleclass %}class="{{ link_styleclass }}"{% endif %} title="{{ link.name }}" data-toggle="modal" data-target="#link-modal" data-href="{{ link_href }}" href="#" {% if modal_title -%}
+      data-format='html' data-title="{{ modal_title | strip_newlines | escape }}" {%- if modal_subtitle %} data-subtitle="{{ modal_subtitle | strip_newlines | escape }}"{%- endif -%}
     {%- elsif link.name -%}
-      data-title="{{ link.name }}"
+      data-format='text' data-title="{{ link.name }}"
     {%- endif %} {% if modal_footer -%}
-      data-footer="{{ modal_footer | strip_newlines | escape }}"
-    {%- elsif modal_desc -%}
-      data-desc="{{ modal_desc }}"
+      data-format='html' data-footer="{{ modal_footer | strip_newlines | escape }}"
     {%- elsif link.description -%}
-      data-desc="{{ link.description }}"
+      data-format='text' data-footer="{{ link.description }}"
     {%- endif %}>
 
   {%- else -%}

data/_includes/partials/modal_link.html

@@ -0,0 +1,21 @@
+<div class="modal fade" id="link-modal" tabindex="-1" role="dialog" aria-labelledby="link-modal-label" aria-hidden="true">
+  <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
+    <div class="modal-content">
+      <div class="modal-header">
+        <div class="modal-title" id="link-modal-label">
+          <h3 class="mb-2 font-weight-light"></h3>
+          <h5 class="mb-0 font-weight-light"></h5>
+        </div>
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+          <span aria-hidden="true">&times;</span>
+        </button>
+      </div>
+      <div class="modal-body embed-responsive embed-responsive-16by9">
+        <iframe class="embed-responsive-item" src="" allowfullscreen></iframe>
+      </div>
+      <div class="modal-footer justify-content-start">
+        <p></p>
+      </div>
+    </div>
+  </div>
+</div>

data/_includes/partials/{live_modal.html → modal_live.html}

@@ -1,10 +1,10 @@
 <div class="modal fade" id="stream-modal" tabindex="-1" role="dialog" aria-labelledby="link-modal-label" aria-hidden="true">
-  <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
+  <div class="modal-dialog modal-lg" role="document">
     <div class="modal-content">
 
       <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>
@@ -20,7 +20,7 @@
 
       <div class="modal-footer flex-column justify-content-start d-none live-past" id="stream-info" data-time="">
         <div class="my-0 small align-self-start live-time" id="stream-info-time" data-time=""></div>
-        <div class="pl-3 align-self-start" id="stream-info-color">
+        <div class="pl-2 align-self-start" id="stream-info-color">
           <p class="mb-0">
             <a class="text-reset" href="#" id="stream-info-talk"></a>
           </p>
@@ -37,7 +37,7 @@
         <div class="form-group w-100 d-block d-sm-none">
           <select class="form-control" id="stream-select">
             {%- for room in site.rooms -%}
-              <option {% unless room.live %}disabled{% endunless %}>{{ room.name }}</option>
+              <option value="{{ forloop.index }}" {% unless room.live %}disabled{% endunless %}>{{ room.name }}</option>
             {%- endfor %}
           </select>
         </div>

data/_includes/partials/navbar.html

@@ -31,9 +31,28 @@
           {%- elsif link.live -%}
             {%- include partials/get_live_timestamps.html -%}
 
+            {%- if link.name_inactive -%}
+              <li class="nav-item live-hide" data-start="{{ live_starts }}" data-end="{{ live_ends }}">
+                <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">
+                  {{ link.name_inactive }}
+                </a>
+              </li>
+            {%- endif -%}
+
             <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 }}">
@@ -45,17 +46,23 @@
         {% elsif link.live %}
           {%- include partials/get_live_timestamps.html -%}
 
-          {% if link.name %}
-            {% assign link_name = link.name %}
-          {% else %}
-            {% assign link_name =  site.data.lang[site.conference.lang].live.streaming | default: "Live Stream" %}
-          {% endif %}
+          {%- if link.name -%}
+            {%- assign link_name = link.name -%}
+          {%- else -%}
+            {%- assign link_name =  site.data.lang[site.conference.lang].live.stream | default: "Live Stream" -%}
+          {%- endif -%}
+
+          {%- if link.name_inactive -%}
+            <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 %}
@@ -65,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.0
+  version: 3.1.0
 platform: ruby
 authors:
 - Lorenz Schmid
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2020-11-28 00:00:00.000000000 Z
+date: 2021-02-14 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll
@@ -90,7 +90,8 @@ files:
 - _includes/partials/list_categories.html
 - _includes/partials/list_speakers.html
 - _includes/partials/list_sub_categories.html
-- _includes/partials/live_modal.html
+- _includes/partials/modal_link.html
+- _includes/partials/modal_live.html
 - _includes/partials/navbar.html
 - _includes/partials/navbar_rooms.html
 - _includes/partials/show_live_button.html
@@ -107,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
@@ -277,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