Update the detail page for events

Setup so the top main image is centered

diff --git a/Toolkit/Events/views/eventDetail.html b/Toolkit/Events/views/eventDetail.html
index e7c94a1..b6ae229 100755 (executable)
--- a/Toolkit/Events/views/eventDetail.html
+++ b/Toolkit/Events/views/eventDetail.html
@@ -4,72 +4,76 @@
        >
 </flexy:toJavascript>
 <div id="eventDetail">
-       <div>
-      {if:event.image}
-      <img src="{imgPathDetail:h}{event.image}">
-      {end:}
-               <h2 id="eventHeaderTitle">{event.header:h}</h2>
-               <div id="eventDetailTop">
-                       <div id="eventDetailInfo" class="medium-8 columns">
-                               <div id="eventDetailTime">
-                                       <div id="eventDetailDate">{event.dates}</div>
-                                       <div id="eventDetailHour" flexy:if="event.getEventTimes">{event.getEventTimes()} </div>
-                               </div><!-- /#eventDetailTime -->
-                               <div id="eventDetailPlace" flexy:if="event.hasLocation">
-                                       <div id="eventDetailLocation" flexy:if="event.place">{event.place}</div>
-                    {if:!event.hideAddress}
-                                       <span id="eventDetailAddress" flexy:if="event.address">{event.address}</span>
-                                       <span id="eventDetailCity" flexy:if="event.city">{event.city}, {event.state} {event.zip}</span>
-                    {end:}
-                                       <div id="event-lat" rel="{event.lat}" flexy:if="event.lat"></div>
-                                       <div id="event-lon" rel="{event.lon}" flexy:if="event.lon"></div>
-                               </div><!-- /#eventDetailPlace -->
-                               <div id="eventCost" flexy:if="event.cost">{event.cost}</div>
-                <div class="eventurl" flexy:if="event.website">
-                    <a class="external" href="{event.website}">{event.website}</a>
+       <div class="row">
+        {if:event.image}
+        <div class="small-12 columns text-center">
+            <img src="{imgPathDetail:h}{event.image}">
+        </div>
+        {end:}
+        <div class="small-12 columns">
+            <h2 id="eventHeaderTitle">{event.header:h}</h2>
+            <div id="eventDetailTop">
+                <div id="eventDetailInfo" class="small-12 large-8 columns">
+                    <div id="eventDetailTime">
+                        <div id="eventDetailDate">{event.dates}</div>
+                        <div id="eventDetailHour" flexy:if="event.getEventTimes">{event.getEventTimes()} </div>
+                    </div><!-- /#eventDetailTime -->
+                    <div id="eventDetailPlace" flexy:if="event.hasLocation">
+                        <div id="eventDetailLocation" flexy:if="event.place">{event.place}</div>
+                        {if:!event.hideAddress}
+                        <span id="eventDetailAddress" flexy:if="event.address">{event.address}</span>
+                        <span id="eventDetailCity" flexy:if="event.city">{event.city}, {event.state} {event.zip}</span>
+                        {end:}
+                        <div id="event-lat" rel="{event.lat}" flexy:if="event.lat"></div>
+                        <div id="event-lon" rel="{event.lon}" flexy:if="event.lon"></div>
+                    </div><!-- /#eventDetailPlace -->
+                    <div id="eventCost" flexy:if="event.cost">{event.cost}</div>
+                    <div class="eventurl" flexy:if="event.website">
+                        <a class="external" href="{event.website}">{event.website}</a>
+                    </div>
+                    <div class="eventurl" flexy:if="event.file">
+                        Files: <a href="{filePathDetail:h}{event.file.filename}">
+                          {if:event.file.urltext}
+                            {event.file.urltext:h}
+                          {else:}
+                            {event.file.filename:h}
+                          {end:}
+                        </a>
+                    </div>
+                    <div id="eventDetailContact" flexy:if="event.hasContactInfo">
+                        <h3>Contact &amp; More Info</h3>
+                        <div class="eventcontact" flexy:if="event.contactName">Contact: {event.contactName}</div>
+                        <div class="eventemail" flexy:if="event.contactEmail">Email: <a href="mailto:{event.contact_email}">{event.contactEmail}</a></div>
+                        <div class="eventphone" flexy:if="event.contactPhone">Phone: {event.contactPhone}</div>
+                    </div><!-- /#eventDetailContact -->
+                </div><!-- /#eventDetailInfo -->
+                <div class="small-12 large-4 columns">
+                    <div id="eventDetailMap" flexy:if="event.hasLatLon">
+                        <div id="eventDetail-map" flexy:if="event.lat" title="Click to enlarge">map...</div>
+                        <div id="map-dialog" flexy:if="event.lat"><div id="map_canvas" style="width:500px; height:400px">Loading...</div></div>
+                    </div><!-- /#eventDetailMap -->
+                    <div id="EventDrivingDirectionsContainer" flexy:if="event.lat">
+                        <form id="EventDrivingDirectionsForm" name="EventDrivingDirectionsForm" flexy:ignore="yes" method="post" action="">
+                            <input type="hidden" id="EventLocation" name="EventLocation" value="{event.place:h}">
+                            <input type="hidden" id="EventLat" name="EventLat" value="{event.lat}">
+                            <input type="hidden" id="EventLon" name="EventLon" value="{event.lon}">
+                            <input type="submit" id="EventDrivingDirectionSubmit" name="EventDrivingDirectionSubmit" value="Get Directions">
+                        </form>
+                    </div>
+                    <div id="EventSocialLinks" flexy:if="event.hasSocialMedia">
+                      <!--<h2 >Social Media Links</h2>-->
+                      <ul>
+                        <li flexy:if="event.facebook" class="mFacebook">
+                            <a id="fb" class="external" href="{event.facebook:h}">Facebook</a>
+                        </li>
+                        <li flexy:if="event.twitter" class="mTwitter">
+                            <a id="tw" class="external" href="{event.twitter:h}">Twitter</a>
+                        </li>
+                      </ul>
+                    </div>
                 </div>
-                <div class="eventurl" flexy:if="event.file">
-                    Files: <a href="{filePathDetail:h}{event.file.filename}">
-                      {if:event.file.urltext}
-                        {event.file.urltext:h}
-                      {else:}
-                        {event.file.filename:h}
-                      {end:}
-                    </a>
-                </div>
-                               <div id="eventDetailContact" flexy:if="event.hasContactInfo">
-                                       <h3>Contact &amp; More Info</h3>
-                                       <div class="eventcontact" flexy:if="event.contactName">Contact: {event.contactName}</div>
-                                       <div class="eventemail" flexy:if="event.contactEmail">Email: <a href="mailto:{event.contact_email}">{event.contactEmail}</a></div>
-                                       <div class="eventphone" flexy:if="event.contactPhone">Phone: {event.contactPhone}</div>
-                               </div><!-- /#eventDetailContact -->
-                       </div><!-- /#eventDetailInfo -->
-            <div class="medium-4 columns">
-                <div id="eventDetailMap" flexy:if="event.hasLatLon">
-                    <div id="eventDetail-map" flexy:if="event.lat" title="Click to enlarge">map...</div>
-                    <div id="map-dialog" flexy:if="event.lat"><div id="map_canvas" style="width:500px; height:400px">Loading...</div></div>
-                </div><!-- /#eventDetailMap -->
-                <div id="EventDrivingDirectionsContainer" flexy:if="event.lat">
-                    <form id="EventDrivingDirectionsForm" name="EventDrivingDirectionsForm" flexy:ignore="yes" method="post" action="">
-                        <input type="hidden" id="EventLocation" name="EventLocation" value="{event.place:h}">
-                        <input type="hidden" id="EventLat" name="EventLat" value="{event.lat}">
-                        <input type="hidden" id="EventLon" name="EventLon" value="{event.lon}">
-                        <input type="submit" id="EventDrivingDirectionSubmit" name="EventDrivingDirectionSubmit" value="Get Directions">
-                    </form>
-                </div>
-                <div id="EventSocialLinks" flexy:if="event.hasSocialMedia">
-                  <!--<h2 >Social Media Links</h2>-->
-                  <ul>
-                    <li flexy:if="event.facebook" class="mFacebook">
-                        <a id="fb" class="external" href="{event.facebook:h}">Facebook</a>
-                    </li>
-                    <li flexy:if="event.twitter" class="mTwitter">
-                        <a id="tw" class="external" href="{event.twitter:h}">Twitter</a>
-                    </li>
-                  </ul>
-                </div>
-            </div>
-               </div><!-- /#eventDetailTop -->
-               <div id="eventDetailDesc" flexy:if="event.description">{event.description:h}</div>
+            </div><!-- /#eventDetailTop -->
+            <div id="eventDetailDesc" flexy:if="event.description">{event.description:h}</div>
+        </div>
        </div>
 </div>