Improve program layout if schedule contains only few tracks (rooms)

DigitaleGesellschaft · Dec 14, 2020 · 7205dfc · 7205dfc
1 parent cc0b78d
commit 7205dfc
Show file tree

Hide file tree

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

diff --git a/_layouts/program.html b/_layouts/program.html
@@ -30,11 +30,11 @@ <h1 class="display-5 {% if nbr_days > 1 -%} mb-2 {%- else -%} mb-4 {%- endif %}"
     {%- 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 @@ <h1 class="display-5 {% if nbr_days > 1 -%} mb-2 {%- else -%} mb-4 {%- endif %}"
                 {%- 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 @@ <h1 class="display-5 {% if nbr_days > 1 -%} mb-2 {%- else -%} mb-4 {%- endif %}"
     </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 @@ <h1 class="display-5 {% if nbr_days > 1 -%} mb-2 {%- else -%} mb-4 {%- endif %}"
             <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 @@ <h1 class="display-5 {% if nbr_days > 1 -%} mb-2 {%- else -%} mb-4 {%- endif %}"
 
                     {%- 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 @@ <h1 class="display-5 {% if nbr_days > 1 -%} mb-2 {%- else -%} mb-4 {%- endif %}"
                 {%- endunless -%}
 
                 {%- if forloop.last != true %}
-                  <td class="p-0"></td>
+                  <td class="col-space p-0"></td>
                 {%- endif -%}
 
               {%- endfor %}

diff --git a/_sass/conference.scss b/_sass/conference.scss
@@ -130,22 +130,24 @@ 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 {
+    // Width of columns with content (default)
+    width: 220px;
+    min-width: 220px;
+
     // Spacing between columns
-    > :nth-child(even) {
+    &.col-space {
       width: 10px;
-    }
-    // Width of columns with content
-    > :nth-child(odd) {
-      width: 180px;
+      min-width: 10px;
     }
     // Width of first column containing timestamps
-    > :nth-child(1) {
+    &.col-title {
       width: 4.5em;
+      min-width: 4.5em;
     }
   }
 }

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       = "3.0.1"
+  spec.version       = "3.0.2"
   spec.authors       = ["Lorenz Schmid"]
   spec.email         = ["lorenzschmid@users.noreply.github.com"]