Refs #3076: improv. responsive behav. on calendars for tt#show

2 files changed, 24 insertions, 2 deletions

diff --git a/app/assets/stylesheets/components/_calendar.sass b/app/assets/stylesheets/components/_calendar.sass
index ba6e3b3c3..64f2eda77 100644
--- a/app/assets/stylesheets/components/_calendar.sass
+++ b/app/assets/stylesheets/components/_calendar.sass
@@ -28,6 +28,7 @@ table.calendar
     tr > td
       &.weekNumber
         border: none
+        padding: 0.5em 0.5em 0.5em 0
 
       &.outsideMonth
         color: rgba($darkgrey, 0.35)
@@ -49,3 +50,24 @@ table.calendar
           &:hover, &:focus
             color: $darkgrey
             text-decoration: none
+
+.col-xs-6
+  &:nth-child(2n +1)
+    clear: both
+
+.col-sm-4
+  @media (min-width: 768px)
+    &:nth-child(2n +1)
+      clear: none
+    &:nth-child(3n+1)
+      clear: both
+
+// .col-md-4
+//   @media (min-width: 992px)
+
+.col-lg-3
+  @media (min-width: 1200px)
+    &:nth-child(2n +1), &:nth-child(3n+1)
+      clear: none
+    &:nth-child(4n+1)
+      clear: both
diff --git a/app/helpers/time_tables_helper.rb b/app/helpers/time_tables_helper.rb
index e4253c180..b380a2b0a 100644
--- a/app/helpers/time_tables_helper.rb
+++ b/app/helpers/time_tables_helper.rb
@@ -54,7 +54,7 @@ module TimeTablesHelper
 
     if (options[:month_header])
       cal << %(<tr>)
-      cal << %(<th scope="col"></th>)
+      cal << %(<th class='weekNumber' scope="col"></th>)
       if options[:previous_month_text] or options[:next_month_text]
         cal << %(<th colspan="2">#{options[:previous_month_text]}</th>)
         colspan=3
@@ -67,7 +67,7 @@ module TimeTablesHelper
     end
 
     cal << %(<tr class="#{options[:day_name_class]}">)
-    cal << %(<th scope="col"></th>)
+    cal << %(<th class='weekNumber' scope="col"></th>)
 
     week_days.each do |wday|
       cal << %(<th id="#{th_id(Date::DAYNAMES[wday], options[:table_id])}" scope="col">)