From d181a931b84b61b4268bd4274165d6ccda0a868f Mon Sep 17 00:00:00 2001
From: drigato <denise.rigato@sourcefabric.org>
Date: Tue, 9 Jun 2015 10:30:47 -0400
Subject: [PATCH] Fix schedule widget layout by removing table structure

---
 .../views/scripts/embed/weekly-program.phtml  | 18 ++--
 .../embed/weekly-schedule-widget-basic.css    | 86 +++++++++++-------
 .../css/embed/weekly-schedule-widget.css      | 87 +++++++++++++------
 3 files changed, 126 insertions(+), 65 deletions(-)

diff --git a/airtime_mvc/application/views/scripts/embed/weekly-program.phtml b/airtime_mvc/application/views/scripts/embed/weekly-program.phtml
index 2b7652430..ed72e5926 100644
--- a/airtime_mvc/application/views/scripts/embed/weekly-program.phtml
+++ b/airtime_mvc/application/views/scripts/embed/weekly-program.phtml
@@ -37,17 +37,15 @@
         <?php
         foreach($this->scheduleDataWeek1 as $day => $data) {
             $activeClass = $this->currentDayOfMonth == $data["dayOfMonth"] ? "active" : "";
-        echo"<div id='day-".$data["dayOfMonth"]."' class='schedule_item ".$activeClass."'>
-            <table class='widget widget now-playing-list'>
 
-            <thead></thead>
-            <tfoot><tr><td></td></tr></tfoot>
-            <tbody>";
-            foreach ($data["shows"] as $show => $showData) {
-                echo "<tr><td class='time_grid col_two'><div>".$showData["show_start_hour"].' - '.$showData["show_end_hour"]."</div></td>
-                    <td class='name_grid'><div><h4>".$showData["name"]."</h4></div></td></tr>";
-            }
-            echo "</tbody></table></div>";
+            echo "<div id='day-".$data["dayOfMonth"]."' class='schedule_item ".$activeClass."'>";
+                foreach ($data["shows"] as $show => $showData) {
+                    echo "<div class='row'>";
+                    echo "<div class='time_grid'>".$showData["show_start_hour"].' - '.$showData["show_end_hour"]."</div>";
+                    echo "<div class='name_grid'>".$showData["name"]."</div>";
+                    echo "</div>";
+                }
+            echo "</div>";
         }?>
     </div>
 
diff --git a/airtime_mvc/public/css/embed/weekly-schedule-widget-basic.css b/airtime_mvc/public/css/embed/weekly-schedule-widget-basic.css
index bf496b1e6..c62878204 100644
--- a/airtime_mvc/public/css/embed/weekly-schedule-widget-basic.css
+++ b/airtime_mvc/public/css/embed/weekly-schedule-widget-basic.css
@@ -71,16 +71,16 @@ body {
     max-height: 300px;
 }
 
-.schedule_content table {
+/*.schedule_content table {
     opacity: 0;
-    /*transition: all 1s ease;*/
+    *//*transition: all 1s ease;*//*
 }
 
 .schedule.current .schedule_content table {
     opacity: 1;
     -webkit-transition-delay: 0.6s;
     transition-delay: 0.6s;
-}
+}*/
 
 .schedule_item {
     display: none;
@@ -94,33 +94,26 @@ body {
     display: block;
 }
 
-.schedule_item .time_grid  {
+.schedule_item .row {
+    padding-top: 10px;
+    padding-bottom: 10px;
+}
+
+.schedule_item div.time_grid {
+    /*padding-right: 10px;*/
+    width: 20%;
     font-weight: 300;
     color: #AAAAAA;
+    display: inline-block;
 }
 
-.schedule_item .time_grid div {
-    /*padding-right: 10px;*/
-    width:120px;
-}
-
-.schedule_item .name_grid div {
-    /*padding-right: 10px;*/
+.schedule_item div.name_grid {
     overflow: hidden;
     text-overflow: ellipsis;
-}
-
-
-.schedule_item .name_grid {
     padding-left: 10px;
-}
-
-.schedule_item h4 {
-    margin: 10px 0px;
-    font-weight: 400;
-    overflow: hidden;
-    text-overflow:ellipsis;
-    overflow-x: hidden;
+    width: 77%;
+    display:inline-block;
+    vertical-align: middle;
 }
 
 .weekly-schedule-widget-footer {
@@ -156,13 +149,48 @@ body {
     }
 }
 
-@media (max-width: 520px) {
-
-    .schedule_item {
-        padding: 0px 10px;
+@media (max-width: 630px) {
+    .schedule_item div.time_grid {
+        width: 25%;
     }
-    .schedule_item .time_grid, .schedule_item .name_grid {
-        font-size: 14px;
+
+    .schedule_item div.name_grid {
+        width: 72%;
+    }
+}
+
+@media (max-width: 530px) {
+    .schedule_item {
+        padding: 10px 20px;
+        font-size: 14px;
+    }
+
+    .schedule_item div.time_grid {
+        width: 30%;
+    }
+
+    .schedule_item div.name_grid {
+        width: 67%;
+    }
+}
+
+@media (max-width: 500px) {
+    .schedule_item div.time_grid {
+        width: 35%;
+    }
+
+    .schedule_item div.name_grid {
+        width: 62%;
+    }
+}
+
+@media (max-width: 400px) {
+    .schedule_item div.time_grid {
+        width: 40%;
+    }
+
+    .schedule_item div.name_grid {
+        width: 50%;
     }
 }
 
diff --git a/airtime_mvc/public/css/embed/weekly-schedule-widget.css b/airtime_mvc/public/css/embed/weekly-schedule-widget.css
index cfc5f0559..622c2699a 100644
--- a/airtime_mvc/public/css/embed/weekly-schedule-widget.css
+++ b/airtime_mvc/public/css/embed/weekly-schedule-widget.css
@@ -71,17 +71,6 @@ body {
     max-height: 300px;
 }
 
-.schedule_content table {
-    opacity: 0;
-    /*transition: all 1s ease;*/
-}
-
-.schedule.current .schedule_content table {
-    opacity: 1;
-    -webkit-transition-delay: 0.6s;
-    transition-delay: 0.6s;
-}
-
 .schedule_item {
     display: none;
     font-size: 17px;
@@ -94,27 +83,26 @@ body {
     display: block;
 }
 
-.schedule_item .time_grid  {
+.schedule_item .row {
+    padding-top: 10px;
+    padding-bottom: 10px;
+}
+
+.schedule_item div.time_grid {
+    /*padding-right: 10px;*/
+    width: 20%;
     font-weight: 300;
     color: #AAAAAA;
+    display: inline-block;
 }
 
-.schedule_item .time_grid div {
-    width: 120px;
-}
-
-.schedule_item .name_grid {
-    padding-left: 30px;
-}
-
-.schedule_item .name_grid div {
+.schedule_item div.name_grid {
     overflow: hidden;
     text-overflow: ellipsis;
-}
-
-.schedule_item h4 {
-    margin: 10px 0px;
-    font-weight: 400;
+    padding-left: 10px;
+    width: 77%;
+    display:inline-block;
+    vertical-align: middle;
 }
 
 @media (max-width: 730px) {
@@ -134,3 +122,50 @@ body {
     }
 }
 
+
+@media (max-width: 630px) {
+    .schedule_item div.time_grid {
+        width: 25%;
+    }
+
+    .schedule_item div.name_grid {
+        width: 72%;
+    }
+}
+
+@media (max-width: 530px) {
+    .schedule_item {
+        padding: 10px 20px;
+        font-size: 14px;
+    }
+
+    .schedule_item div.time_grid {
+        width: 30%;
+    }
+
+    .schedule_item div.name_grid {
+        width: 67%;
+    }
+}
+
+@media (max-width: 500px) {
+    .schedule_item div.time_grid {
+        width: 35%;
+    }
+
+    .schedule_item div.name_grid {
+        width: 62%;
+    }
+}
+
+@media (max-width: 400px) {
+    .schedule_item div.time_grid {
+        width: 40%;
+    }
+
+    .schedule_item div.name_grid {
+        width: 50%;
+    }
+}
+
+