From 5615622fa348c39e133233d02a76811d086f84f0 Mon Sep 17 00:00:00 2001
From: Ove Klykken <ove@gaslightmedia.com>
Date: Fri, 25 Jul 2014 17:04:54 -0400
Subject: [PATCH] Resposive part of slideshow and calendar column on home page

---
 .../templates/rotatingImages.html             |  4 +--
 styles.css                                    | 36 ++++++++++++++++++-
 templates/template.html                       | 13 +++----
 3 files changed, 44 insertions(+), 9 deletions(-)

diff --git a/Toolkit/RotatingImages/templates/rotatingImages.html b/Toolkit/RotatingImages/templates/rotatingImages.html
index 7c938bc..5e71f98 100755
--- a/Toolkit/RotatingImages/templates/rotatingImages.html
+++ b/Toolkit/RotatingImages/templates/rotatingImages.html
@@ -20,14 +20,14 @@
     }
 </style>
 {if:images}
-<div id="slider-wrapper" class="slider-wrapper theme-default">
+ <div id="slider-wrapper" class="slider-wrapper theme-default">
     <div class="ribbon"></div>
     <div id="slider" class="nivoSlider">
     {foreach:images,image}
         {image.toHtml():h}
     {end:}
     </div>
-</div>
+ </div> 
 <div flexy:foreach="images,image" id="event-{image.getId():h}" class="nivo-html-caption">
     {if:image.getTitle()}<strong>{image.getTitle()}</strong>{end:}
     {if:image.getDescr()}<span>{image.getDescr()}</span>{end:}
diff --git a/styles.css b/styles.css
index 8265378..944961d 100755
--- a/styles.css
+++ b/styles.css
@@ -1,3 +1,12 @@
+#slideshow {
+    position: relative;
+    }
+#slider-wrapper {
+    position: absolute !important;
+    top: 0;
+    left: 0;
+    }
+
 nav.tab-bar a #logoTop {
     margin-left: 60px;
     max-height: 100%;}
@@ -243,7 +252,18 @@ a:hover {
 #footer div#copyright a {
     display: inline;
     }
-/* Events on Home Page */
+/* Events on Home Page
+#eventHomeColumn {
+    height: 480px;
+    }
+ */
+/* @media only screen and (max-width: 55em) {
+    #eventHomeColumn {
+        max-height: 350px;
+        }
+    }
+}
+*/
 #homepage_events_wrapper {
     background: #216083;
     }
@@ -276,6 +296,19 @@ a:hover {
     font-size: 12px;
     padding: 8px 7px;
     }
+@media only screen and (max-width: 58em) {
+    #eventCalendar td {
+        padding: 5px;
+        }
+    }
+@media only screen and (max-width: 50em) {
+    #eventCalendar table {
+        display: none;
+        }
+    }
+#eventCalendar th {
+    padding: 2px;
+    }
 #eventCalendar table,
 #eventCalendar tr,
 #eventCalendar th,
@@ -386,6 +419,7 @@ a:hover {
 /* end subsub */
 #main {
     margin-top: 16px;
+    clear: both;
     }
 #breadcrumbs {
     font-size: 12px;
diff --git a/templates/template.html b/templates/template.html
index 8c4940a..0db28e2 100755
--- a/templates/template.html
+++ b/templates/template.html
@@ -66,14 +66,15 @@
                     </div>
 
 
-                    <div class="row clearfix" id="homeSlide" flexy:if="isHomePage"  data-equalizer>
-                        <div class="medium-9 columns" data-equalizer-watch>
-                            <div id="slideshow" flexy:if="rotatingImages">
+                    <div class="row clearfix hide-for-small-only" id="homeSlide" flexy:if="isHomePage"  data-equalizer>
+                        <div class="medium-9 columns">
+                            <div id="slideshow" flexy:if="rotatingImages" data-equalizer-watch>
+                                <img src="http://is0.gaslightmedia.com/cityofmi/rotatingImagesResized/is76-1406147945-35581.jpeg" id="testImg">
                                 {rotatingImages:h}
                             </div>
 
                         </div>
-                        <div class="medium-3 columns">
+                        <div class="medium-3 columns" id="eventHomeColumn">
                             <div id="homepage_events_wrapper" flexy:if="hasEvents" data-equalizer-watch>
                                 <div id="cEventMeetings">Meetings</div>
                                 <div id="cEventMore"><a href="{baseURLDefined:h}calendars-10/">Events</a></div>
@@ -82,13 +83,13 @@
                                     <?php $counter = 0; ?>
                                     <a flexy:foreach="events,v" href="{v[href]:h}" class="cEventItem">
                                         <?php $counter +=1;
-                                            if ($counter <=2) {
+                                            if ($counter <=4) {
                                         ?>
                                         <span class="cEventTitle">{v[header]}</span>
                                         <span class="cEventDate">{v[dates]}</span>
                                         <span class="cEventTimes" flexy:if="v[times]">{v[times]}</span>
                                         <!-- <span class="cEventCategory" flexy:if="v[cat]"><b>Category:</b> {v[cat]}</span> -->
-                                        <span class="cEventDescription" flexy:if="v[intro]">{v[intro]}</span>
+                                        <!-- <span class="cEventDescription" flexy:if="v[intro]">{v[intro]}</span> -->
                                         <!-- <span class="cEventLocation" flexy:if="v[loc]"><b>Location:</b>
                                             {if:v[loc][place]}
                                             {v[loc][place]},
-- 
2.17.1