Improve room select for live modal on small screens

DigitaleGesellschaft · Nov 14, 2020 · 4887ba1 · 4887ba1
1 parent a6d3910
commit 4887ba1
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 4 deletions.
diff --git a/Gemfile.lock b/Gemfile.lock
@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    jekyll-theme-conference (2.5.0)
+    jekyll-theme-conference (2.5.1)
       jekyll (~> 4.0)
 
 GEM

diff --git a/_includes/js/conference-live.js b/_includes/js/conference-live.js
@@ -286,6 +286,7 @@
 
         let setStream = function (roomName) {
             streamModal.find('.modal-footer .btn').removeClass('active');
+            streamModal.find('#stream-select').selectedIndex = -1;
 
             let room = getRoom(roomName);
             let tNow = time();
@@ -301,6 +302,7 @@
             }
 
             streamModal.find('#stream-button' + room.id).addClass('active');
+            streamModal.find('#stream-select').selectedIndex = room.id;
         };
 
         let updateStream = function () {
@@ -323,6 +325,7 @@
         let hideModal = function (event) {
             streamModal.find('iframe').attr('src', '');
             streamModal.find('.modal-footer .btn').removeClass('active');
+            streamModal.find('#stream-select').selectedIndex = -1;
         };
 
         let setupStream = function () {
@@ -340,7 +343,14 @@
             streamModal.find('.modal-footer .btn').on('click', function(event) {
                 event.preventDefault();
 
-                let roomName = $(this).data('room')
+                let roomName = $(this).data('room');
+                setStream(roomName);
+            });
+
+            streamModal.find('#stream-select').on('change', function(event) {
+                event.preventDefault();
+
+                let roomName = $(this).children('option:selected').text();
                 setStream(roomName);
             });
         };

diff --git a/_includes/partials/live-modal.html b/_includes/partials/live-modal.html
@@ -19,10 +19,18 @@ <h5 class="modal-title">
         {% for r in site.data.program %}
           {% assign room = site.rooms | where: 'name', r.room | first %}
 
-          <a id="stream-button{{ forloop.index }}" href="#" class="btn btn-outline-primary {% unless room.live %}disabled{% endunless %}" role="button" data-room="{{ room.name }}">
+          <a id="stream-button{{ forloop.index }}" href="#" class="btn btn-outline-primary d-none d-sm-inline {% unless room.live %}disabled{% endunless %}" role="button" data-room="{{ room.name }}">
             {{ room.name }}
           </a>
         {% endfor %}
+        <div class="form-group w-100 d-block d-sm-none">
+          <select class="form-control" id="stream-select">
+            {% for r in site.data.program %}
+              {% assign room = site.rooms | where: 'name', r.room | first %}
+              <option {% unless room.live %}disabled{% endunless %}>{{ room.name }}</option>
+            {% endfor %}
+          </select>
+        </div>
       </div>
     </div>
   </div>

diff --git a/jekyll-theme-conference.gemspec b/jekyll-theme-conference.gemspec
@@ -2,7 +2,7 @@
 
 Gem::Specification.new do |spec|
   spec.name          = "jekyll-theme-conference"
-  spec.version       = "2.5.0"
+  spec.version       = "2.5.1"
   spec.authors       = ["Lorenz Schmid"]
   spec.email         = ["lorenzschmid@users.noreply.github.com"]