Updating the event detail page

Setting up the detail page based on what Collins has given us for a new
design.

diff --git a/css/front.css b/css/front.css
index ef4c44d..2d01afc 100644 (file)
--- a/css/front.css
+++ b/css/front.css
@@ -80,14 +80,14 @@
 }
 #eventDetail-map {
      cursor: pointer;
-     height: 160px;
+     height: 260px;
 }
 .st_sharethis {
     float: right;
     margin-top: 10px;
     width: 58px;
 }
-#glm-event-wrapper .eventTitle .stButton .sharethis {
+#glm-event-wrapper .stButton .sharethis {
   background-image: url("../assets/share-icon.png") !important;
   width: 52px;
   height: 22px;
@@ -131,6 +131,7 @@ input[name='contact_fname'], input[name='contact_lname']{
         margin-top: 20px !important;
     }
 }
+/* Event Detail Page */
 #glm-event-detail-takeback-mini > span {
     width: 120px;
     top: 13px;
@@ -143,3 +144,63 @@ input[name='contact_fname'], input[name='contact_lname']{
     -o-transition:      width 0.5s ease;
     transition:         width 0.5s ease;
 }
+#glm-event-detail-dates {
+    margin: 0 0 10px 20px;
+    position: relative;
+}
+#glm-event-detail-dates:before {
+    content: "";
+    background-image: url("../assets/time-icon-24x24.png");
+    background-height: 24px;
+    background-width: 24px;
+    position: absolute;
+    width: 24px;
+    height: 24px;
+    top: 6px;
+    left: -35px;
+}
+#glm-event-detail-location {
+    margin: 0 0 10px 20px;
+    position: relative;
+}
+#glm-event-detail-location:before {
+    content: "";
+    background-image: url("../assets/location-icon-24x24.png");
+    background-height: 24px;
+    background-width: 24px;
+    position: absolute;
+    width: 24px;
+    height: 24px;
+    top: 6px;
+    left: -35px;
+}
+#glm-event-detail-cost {
+    margin: 0 0 10px 20px;
+    position: relative;
+}
+#glm-event-detail-cost:before {
+    content: "";
+    background-image: url("../assets/cost-icon-24x24.png");
+    background-height: 24px;
+    background-width: 24px;
+    position: absolute;
+    width: 24px;
+    height: 24px;
+    top: 6px;
+    left: -35px;
+}
+#glm-event-detail-contact {
+    margin: 0 0 10px 20px;
+    position: relative;
+}
+#glm-event-detail-contact:before {
+    content: "";
+    background-image: url("../assets/contact-icon-24x24.png");
+    background-height: 24px;
+    background-width: 24px;
+    position: absolute;
+    width: 24px;
+    height: 24px;
+    top: 6px;
+    left: -35px;
+}

diff --git a/js/dashboard.js b/js/dashboard.js
index 7bd34bc..350a495 100644 (file)
--- a/js/dashboard.js
+++ b/js/dashboard.js
@@ -9,8 +9,8 @@
     if ($('#eventDetail-map').length > 0) {
         GLM_GeoMap.initialize();
         $('#map-dialog').dialog({
-            height: 480,
-            width: 520,
+            height: 490,
+            width: 630,
             modal: true,
             autoOpen: false
         });

diff --git a/views/front/events/detail.html b/views/front/events/detail.html
index a50ca75..1214556 100644 (file)
--- a/views/front/events/detail.html
+++ b/views/front/events/detail.html
@@ -1,4 +1,4 @@
-<div id="glm-event-wrapper" class="event-detail text-left"> 
+<div id="glm-event-wrapper" class="event-detail text-left"><!-- #glm-event-wrapper --> 
     <a id="glm-event-detail-takeback-mini" class="glm-member-db-takeback-mini button glm-member-button" href="javascript:history.go(-1)"><span>Back To Search</span></a>
     <div class="row">
         <div class="small-12 large-8 small-centered column">
@@ -8,119 +8,116 @@
         </div>
     </div>
 
-    <div class="row">
-        <div class="small-12 large-8 large-centered column">
-    <div class="row">
-        <div class="small-12 column eventTitle">
-            <h1>{$event.name}</h1>
+    <div class="row collapse"><!-- .row #1 -->
+        <div class="small-12 large-9 large-centered column"><!-- .small-12 .large-9 .large-centered .columns -->
             <span id="eventShare" class="st_sharethis" st_title="{$event.name}" st_url="{$permalink}"></span>
-        </div>
-        {if $event.image}
-        <div class="small-12 column">
-            <img style="margin: 15px;" src="{$mainImgUrl}{$event.image}">
-        </div>
-        {/if}
-        <div class="small-12 column">
-            <div class="row">
-                {if $event.locations}
-                <div class="small-5 column">
-                    {if $event.locations.lat}
-                    <div id="eventDetailMap">
-                        <div id="eventDetail-map" title="Click to enlarge">map...</div>
-                        <div id="map-dialog"><div id="map_canvas" style="width:500px; height:400px">Loading...</div></div>
-                    </div>
-                    <div id="event-lat" rel="{$event.locations.lat}"></div>
-                    <div id="event-lon" rel="{$event.locations.lon}"></div>
-                    <form id="EventDrivingDirectionsForm" name="EventDrivingDirectionsForm" flexy:ignore="yes" method="post" action="">
-                        <input type="hidden" id="EventLocation" name="EventLocation" value="{$event.locations.name}">
-                        <input type="hidden" id="EventLat" name="EventLat" value="{$event.locations.lat}">
-                        <input type="hidden" id="EventLon" name="EventLon" value="{$event.locations.lon}">
-                        <input type="submit" class="button tiny text-center" id="EventDrivingDirectionSubmit" name="EventDrivingDirectionSubmit" value="Get Driving Directions">
-                    </form>
-                    {/if}
+            <div class="row"><!-- .row #2 -->
+                <div class="small-12 column eventTitle">
+                    <h1>{$event.name}</h1>
                 </div>
-                {elseif $event.member && $event.use_member_location.value}
-                <div class="small-5 column">
-                    {if $event.member.lat}
-                    <div id="eventDetailMap">
-                        <div id="eventDetail-map" title="Click to enlarge">map...</div>
-                        <div id="map-dialog"><div id="map_canvas" style="width:500px; height:400px">Loading...</div></div>
-                    </div>
-                    <div id="event-lat" rel="{$event.member.lat}"></div>
-                    <div id="event-lon" rel="{$event.member.lon}"></div>
-                    <form id="EventDrivingDirectionsForm" name="EventDrivingDirectionsForm" flexy:ignore="yes" method="post" action="">
-                        <input type="hidden" id="EventLocation" name="EventLocation" value="{$event.member.member_name}">
-                        <input type="hidden" id="EventLat" name="EventLat" value="{$event.member.lat}">
-                        <input type="hidden" id="EventLon" name="EventLon" value="{$event.member.lon}">
-                        <input type="submit" class="button tiny text-center" id="EventDrivingDirectionSubmit" name="EventDrivingDirectionSubmit" value="Get Driving Directions">
-                    </form>
-                    {/if}
+                {if $event.image}
+                <div class="small-12 column">
+                    <img style="margin: 15px;" src="{$mainImgUrl}{$event.image}">
                 </div>
                 {/if}
-                <div class="small-{if $event.locations || $event.use_member_location.value}7{else}12{/if} column">
-                    <div class="row">
-                        <div class="small-12 column"><strong>{$event.dates}</strong></div>
-                        <div class="small-12 column">
-                        {if !$event.all_day}
-                            {if $event.starting_date|date_format:"%l:%M %P" == $event.ending_date|date_format:"%l:%M %P"}
-                                {$event.starting_date|date_format:"%l:%M %P"}
-                            {else}
-                                {$event.starting_date|date_format:"%l:%M %P"} - {$event.ending_date|date_format:"%l:%M %P"}
+                <div class="small-12 column"><!-- .small-12 .column -->
+                    <div class="row"><!-- .row #3 -->
+                        {if $event.locations}
+                        <div class="small-10 small-centered medium-5 medium-uncentered columns">
+                            {if $event.locations.lat}
+                            <div id="eventDetailMap">
+                                <div id="eventDetail-map" title="Click to enlarge">map...</div>
+                                <div id="map-dialog"><div id="map_canvas" style="width:500px; height:400px">Loading...</div></div>
+                            </div>
+                            <div id="event-lat" rel="{$event.locations.lat}"></div>
+                            <div id="event-lon" rel="{$event.locations.lon}"></div>
+                            <form id="EventDrivingDirectionsForm" name="EventDrivingDirectionsForm" flexy:ignore="yes" method="post" action="">
+                                <input type="hidden" id="EventLocation" name="EventLocation" value="{$event.locations.name}">
+                                <input type="hidden" id="EventLat" name="EventLat" value="{$event.locations.lat}">
+                                <input type="hidden" id="EventLon" name="EventLon" value="{$event.locations.lon}">
+                                <input type="submit" class="button tiny text-center" id="EventDrivingDirectionSubmit" name="EventDrivingDirectionSubmit" value="Get Driving Directions">
+                            </form>
                             {/if}
-                        {/if}
                         </div>
-                        {if $event.hide_address.name == 'No'}
-                            <div class="small-12 column">
-                            {if !$event.use_member_location.value && $event.locations}
-                                {if $event.locations.name}{$event.locations.name}<br>{/if}
-                                {if $event.locations.address}
-                                    {$event.locations.address}<br>
-                                    {$event.locations.city.name}, {$event.locations.state.value} {$event.locations.zip}
-                                {/if}
-                            {elseif $event.use_member_location.value}
-                                {$event.member.member}<br>
-                                {$event.member.addr1}<br>
-                                {$event.member.city}, {$event.member.state.value} {$event.member.zip} 
-                            {/if}
-                            </div>
-                        {/if}
-                        {if $event.cost && !$event.free.value}
-                        <div class="small-12 column"><strong>Cost: </strong><br> {$event.cost}</div>
-                        {/if}
-                        {if $event.free.value}
-                        <div class="small-12 column"><strong>Cost: </strong><br> FREE</div>
-                        {/if}
-                        {if $event.file1}
-                            <div class="small-12 column"><strong>File: </strong>
-                                <a href="{$filePathUrl}{$event.file1}">{if $event.file1_descr}{$event.file1_descr}{else}{$event.file1}{/if}</a>
+                        {elseif $event.member && $event.use_member_location.value}
+                        <div class="small-12 medium-5 columns">
+                            {if $event.member.lat}
+                            <div id="eventDetailMap">
+                                <div id="eventDetail-map" title="Click to enlarge">map...</div>
+                                <div id="map-dialog"><div id="map_canvas" style="width:500px; height:400px">Loading...</div></div>
                             </div>
+                            <div id="event-lat" rel="{$event.member.lat}"></div>
+                            <div id="event-lon" rel="{$event.member.lon}"></div>
+                            <form id="EventDrivingDirectionsForm" name="EventDrivingDirectionsForm" flexy:ignore="yes" method="post" action="">
+                                <input type="hidden" id="EventLocation" name="EventLocation" value="{$event.member.member_name}">
+                                <input type="hidden" id="EventLat" name="EventLat" value="{$event.member.lat}">
+                                <input type="hidden" id="EventLon" name="EventLon" value="{$event.member.lon}">
+                                <input type="submit" class="button tiny text-center" id="EventDrivingDirectionSubmit" name="EventDrivingDirectionSubmit" value="Get Driving Directions">
+                            </form>
+                            {/if}
+                        </div>
                         {/if}
-                        {if $event.file2}
-                            <div class="small-12 column"><strong>File 2: </strong>
-                                <a href="{$filePathUrl}{$event.file2}">{if $event.file2_descr}{$event.file2_descr}{else}{$event.file2}{/if}</a>
+                        <div class="small-12 medium-{if $event.locations || $event.use_member_location.value}7{else}12{/if} column">
+                            <div id="glm-event-detail-dates">
+                                <div><strong>{$event.dates}</strong></div>
+                                {if !$event.all_day}
+                                    {if $event.starting_date|date_format:"%l:%M %P" == $event.ending_date|date_format:"%l:%M %P"}
+                                        {$event.starting_date|date_format:"%l:%M %P"}
+                                    {else}
+                                        {$event.starting_date|date_format:"%l:%M %P"} - {$event.ending_date|date_format:"%l:%M %P"}
+                                    {/if}
+                                {/if}
                             </div>
-                        {/if}
-                        {if $event.file3}
-                            <div class="small-12 column"><strong>File 3: </strong>
-                                <a href="{$filePathUrl}{$event.file3}">{if $event.file3_descr}{$event.file3_descr}{else}{$event.file3}{/if}</a>
+                            {if $event.hide_address.name == 'No'}
+                                <div id="glm-event-detail-location">
+                                {if !$event.use_member_location.value && $event.locations}
+                                    {if $event.locations.name}{$event.locations.name}<br>{/if}
+                                    {if $event.locations.address}
+                                        {$event.locations.address}<br>
+                                        {$event.locations.city.name}, {$event.locations.state.value} {$event.locations.zip}
+                                    {/if}
+                                {elseif $event.use_member_location.value}
+                                    {$event.member.member}<br>
+                                    {$event.member.addr1}<br>
+                                    {$event.member.city}, {$event.member.state.value} {$event.member.zip} 
+                                {/if}
+                                </div>
+                            {/if}
+                            {if $event.cost && !$event.free.value}
+                            <div id="glm-event-detail-cost"><strong>Cost: </strong>{$event.cost}</div>
+                            {/if}
+                            {if $event.free.value}
+                            <div id="glm-event-detail-cost"><strong>Cost: </strong>FREE</div>
+                            {/if}
+                            {if $event.file1}
+                                <div id="glm-event-detail-file"><strong>File: </strong>
+                                    <a href="{$filePathUrl}{$event.file1}">{if $event.file1_descr}{$event.file1_descr}{else}{$event.file1}{/if}</a>
+                                </div>
+                            {/if}
+                            {if $event.file2}
+                                <div id="glm-event-detail-file2"><strong>File 2: </strong>
+                                    <a href="{$filePathUrl}{$event.file2}">{if $event.file2_descr}{$event.file2_descr}{else}{$event.file2}{/if}</a>
+                                </div>
+                            {/if}
+                            {if $event.file3}
+                                <div id="glm-event-detail-file3"><strong>File 3: </strong>
+                                    <a href="{$filePathUrl}{$event.file3}">{if $event.file3_descr}{$event.file3_descr}{else}{$event.file3}{/if}</a>
+                                </div>
+                            {/if}
+                            <div id="glm-event-detail-contact"><strong>Contact & More Info</strong><br>
+                                {if $event.url}<a href="{$event.url}" target="_blank">{$event.url}</a><br>{/if}
+                                {if $event.contact_name}Contact: {$event.contact_name}<br>{/if}
+                                {if $event.contact_email}Email: <a href="mailto: {$event.contact_email}">{$event.contact_email}</a><br>{/if}
+                                {if $event.contact_phone}Phone: {$event.contact_phone}<br>{/if}
                             </div>
-                        {/if}
-                        <div class="small-12 column"><strong>Contact & More Info</strong><br>
-                            {if $event.url}<a href="{$event.url}" target="_blank">{$event.url}</a><br>{/if}
-                            {if $event.contact_name}Contact: {$event.contact_name}<br>{/if}
-                            {if $event.contact_email}Email: <a href="mailto: {$event.contact_email}">{$event.contact_email}</a><br>{/if}
-                            {if $event.contact_phone}Phone: {$event.contact_phone}<br>{/if}
                         </div>
-                    </div>
-                </div>
+                    </div><!-- /.row #3 -->
+                </div><!-- /.small-12 .column -->
                 <div class="small-12 column">
                     <p>{$event.descr}</p>
                 </div>
-            </div>
-        </div>
-    </div>
-        </div>
-    </div>
-
-</div>
+            </div><!-- /.row #2 -->
+        </div><!-- /.small-12 .large-9 .large-centered -->
+    </div><!-- /.row .collapse #1 -->
+</div><!-- /#glm-event-wrapper -->