Add templates for events
authorSteve Sutton <steve@gaslightmedia.com>
Mon, 28 Jul 2014 15:31:16 +0000 (11:31 -0400)
committerSteve Sutton <steve@gaslightmedia.com>
Mon, 28 Jul 2014 15:31:16 +0000 (11:31 -0400)
from V1

Toolkit/Events/views/eventDetail.html [new file with mode: 0644]
Toolkit/Events/views/eventHomePage.html [new file with mode: 0644]
Toolkit/Events/views/eventList.html [new file with mode: 0644]
Toolkit/Events/views/mainEventWrapper.html [new file with mode: 0644]

diff --git a/Toolkit/Events/views/eventDetail.html b/Toolkit/Events/views/eventDetail.html
new file mode 100644 (file)
index 0000000..fa20698
--- /dev/null
@@ -0,0 +1,87 @@
+<style type="text/css">
+<!--
+#category, .listing {
+       display: none;
+       }
+#eventDetail h2#eventHeaderTitle {
+       position: relative;
+       padding: 10px;
+       background: #00578A;
+       color: #FFF;
+       font-size: 18px;
+}
+-->
+</style>
+<flexy:toJavascript
+       flexy:prefix=""
+    eventTitle="event.header"
+       >
+</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="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 id="eventDetailInfo">
+                               <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><!-- /#eventDetailTop -->
+               <div id="eventDetailDesc" flexy:if="event.description">{event.description:h}</div>
+       </div>
+</div>
diff --git a/Toolkit/Events/views/eventHomePage.html b/Toolkit/Events/views/eventHomePage.html
new file mode 100644 (file)
index 0000000..1a7f10b
--- /dev/null
@@ -0,0 +1,96 @@
+<style>
+.nivo-caption {
+       background: #369 !important;
+       background: rgba(51,102,153,0.8) !important;
+       }
+.nivo-caption span {
+       float: right;
+       }
+.nivo-controlNav {
+       display: block;
+       position: absolute;
+       z-index: 999;
+       top: -10px;
+       right: 10px;
+       }
+#slider-wrapper {
+       width: 100%;
+       height: auto;
+       position: relative;
+       }
+</style>
+{if:hasSlideshowEvents}
+<div id="slider-wrapper" class="slider-wrapper theme-default">
+       <div class="ribbon"></div>
+       <div id="slider" class="nivoSlider">
+    {foreach:slideShow,e}
+        {if:e.href}
+        <a href="{e.href:h}">
+        {end:}
+            <img src="{eventSliderUrl:h}{e.image:h}" alt="{e.header}" title="#event-{e.id:h}">
+        {if:e.href}
+        </a>
+        {end:}
+    {end:}
+       </div>
+</div>
+<div flexy:foreach="slideShow,e" id="event-{e.id:h}" class="nivo-html-caption">
+       <strong>{e.header}</strong>
+       <span>{e.dates}</span>
+</div>
+<script type="text/javascript">
+$(window).load(function() {
+       $('#slider').nivoSlider({
+               effect: 'fade',
+               animSpeed: 1000,
+               pauseTime: 5000
+       });
+       if ($('#slider').children('a').size() <= 1 ) {
+               $('.nivo-prevNav').css('display', 'none');
+               $('.nivo-nextNav').css('display', 'none');
+       }
+});
+</script>
+{end:}
+<div id="blocks_container">
+<?php
+       $index = 0;
+       if ($this->options['strict']
+    || (is_array($t->blocks)
+    || is_object($t->blocks))) {
+               foreach($t->blocks as $category => $events) {
+                       if ($index % 2 == 0) { echo '<div class="eventrow">'; } ?>
+                       <div class="event-category-block<?php
+                 if ($index % 2 != 0) {
+                     echo ' event-category-2';
+                 } echo ' topic' . $events['id']; ?>">
+                               <h2><a href="<?php echo $t->topicSearchUrl.$events['id'];?>">
+                  <?php echo $category;?></a>
+                </h2>
+                               <?php
+              if ($this->options['strict']
+              || (is_array($events['data'])
+              || is_object($events['data']))) {
+                foreach($events['data'] as $event) {
+                ?>
+                                       <div>
+                                       <b><?php echo $event->getDates();?></b>
+                    <a href="<?php echo $event->getHref();?>">
+                    <?php echo $event->getHeader();?></a>
+                                       </div>
+                               <?php }
+                }?>
+                <a href="<?php echo $t->topicSearchUrl.$events['id'];?>"
+                   class="event-more">All <?php echo $category;?></a>
+                       </div>
+               <?php
+        if ($index % 2 != 0) {
+            echo '</div><!-- /.eventrow -->';
+        } ?>
+                       <?php
+            if ($index == count($t->blocks)-1 && ($index + 1) % 2 != 0) {
+                echo '</div><!-- /.eventrow -->';
+            } ?>
+               <?php $index++; }?>
+       <?php }?>
+</div>
\ No newline at end of file
diff --git a/Toolkit/Events/views/eventList.html b/Toolkit/Events/views/eventList.html
new file mode 100644 (file)
index 0000000..374c874
--- /dev/null
@@ -0,0 +1,152 @@
+<style type="text/css">
+<!--
+/* Steve's Styles */
+#category, .listing {display: none;}
+.event-list-thumb {float:left;}
+/* Leif's Styles */
+.event-date-hdr {
+    width: 98%;
+    padding: 5px 2% 5px 0;
+    margin: 0;
+}
+#toolbox .event-date-hdr p {
+    display: block;
+    padding: 0;
+    margin: 0;
+    font-size: 19px;
+    font-sizw: 1.9rem;
+    color: #00456C;
+    font-weight: bold;
+}
+.event-category-hdr {
+    width: 98%;
+    padding: 5px 2% 5px 0;
+    margin: 0;
+    color: #E4E4E4;
+    text-align: left;
+    border-bottom: 1px solid #E4E4E4;
+}
+.event-category-hdr h3 {
+    display: block;
+    padding: 0;
+    margin: 0;
+    font-weight: normal;
+    color: #666;
+}
+.event-cat {
+    margin: 10px 0 10px 20px;
+    overflow: hidden;
+}
+.event-list {
+    margin: 0 0 0 4%;
+    padding: 14px 0;
+    border-bottom: 1px solid #E4E4E4;
+}
+.event-list-Intro {
+    display: block;
+    padding: 28px 0 0 0;
+
+}
+.event-list h3 {
+    display: block;
+    float: left;
+    margin: 0;
+    padding: 0;
+    width: 70%;
+}
+.event-list h3 a {
+    display: block;
+    color: #5B84AD;
+    text-decoration: none;
+    font-size: 16px;
+    font-size: 1.6rem;
+    font-weight: bold;
+}
+.event-list h3 a:hover {
+    color: #F79115;
+}
+.event-list-thumb  {
+    display: block;
+    float: left;
+    border: 1px solid rgb(51,102,153);
+    border-radius: 8px;
+    margin: 8px 4% 8px 0;
+    width: 26%;
+}
+.event-right {
+    float: right;
+    width: 30%;
+    min-height: 54px;
+}
+.event-list-Times {
+    display: block;
+    float: right;
+    clear: right;
+    color: #00456C;
+    width: 100%;
+    text-align: right;
+    margin: 0;
+    padding: 0 0 2px 0;
+    min-height: 20px;
+}
+.event-list-Frequency {
+    display: block;
+    float: right;
+    clear: right;
+    color: #00456C;
+    width: 100%;
+    text-align: right;
+    padding: 0 0 6px 0;
+}
+-->
+</style>
+<div id="eventsList">
+{if:search}
+<flexy:toJavascript
+    flexy:prefix=""
+    eventTitle="search"
+    >
+</flexy:toJavascript>
+{end:}
+<p class="event-search" flexy:if="search">
+    {front.searchFor.showing} {search}
+    {if:events}
+    <a href="{searchUrl:h}&print=1" flexy:if="printable">{front.searchFor.pdfLink}</a>
+    {end:}
+</p>
+{if:events}
+  {foreach:events,dateTime,date}
+  <div class="event-date-hdr"><p>{dateTime}</p></div>
+    {foreach:date,categoryName,category}
+      <div class="event-cat">
+
+        <div class="event-category-hdr"><h3>{categoryName}</h3></div>
+        {foreach:category,event}
+          {if:event.spans}<div class="event-list ongoing">{end:}
+          {if:event.recurr}<div class="event-list reacur">{end:}
+          {if:event.normal}<div class="event-list">{end:}
+          <h3>
+            <a href="{event.href}">{event.header}</a>
+          </h3>
+          <div class="event-right">
+          <span class="event-list-Times">{event.getEventTimes()}</span>
+          {if:event.spans}<span class="event-list-Frequency">Ongoing Event</span>{end:}
+          {if:event.recurr}<span class="event-list-Frequency">Repeating Event</span>{end:}
+          </div><!-- /.event-right -->
+          {if:event.image}
+            <a href="{event.href}"><img class="event-list-thumb"
+                src="{imgBaseUrl:h}eventListThumb/{event.image}"
+                width="100"></a>
+          {end:}
+          <div class="event-list-Intro">
+              {event.intro:h}
+          </div>
+        </div><!-- /.event-list -->
+      {end:}
+    </div><!-- /.event-cat -->
+    {end:}
+  {end:}
+{else:}
+    <p>No events were found for your search. </p>
+{end:}
+</div><!-- /#eventsList -->
diff --git a/Toolkit/Events/views/mainEventWrapper.html b/Toolkit/Events/views/mainEventWrapper.html
new file mode 100644 (file)
index 0000000..f17038c
--- /dev/null
@@ -0,0 +1,62 @@
+{if:styleSheets}
+  {foreach:styleSheets,style}
+    <link rel="stylesheet" type="text/css" href="{style}">
+  {end:}
+{end:}
+{if:topScripts}
+  {foreach:topScripts,script}
+    <script type="text/javascript" src="{script}"></script>
+  {end:}
+{end:}
+<flexy:toJavascript
+    flexy:prefix=""
+    eventPageUrl="eventPageUrl"
+    search="searchOn"
+    >
+</flexy:toJavascript>
+<div class="container full">
+    <div class="row inner">
+        <div id="event-second-column" class="fourcol last">
+            <flexy:include src="eventSearchForm.html">
+            <div id="event-shortcuts">
+              <h3>{front.shortCuts.title}</h3>
+              <ul class="ulCr">
+                <li flexy:if="hasMajorEvents">
+                  <a href="{majorEventsUrl:h}">{front.shortCuts.major}</a>
+                </li>
+                <li>
+                  <a href="{todayUrl:h}">{front.shortCuts.today}</a>
+                </li>
+                <li>
+                  <a href="{tomorrowUrl:h}">{front.shortCuts.tomorrow}</a>
+                </li>
+                <li flexy:foreach="dayRanges,days,dayRange">
+                  <a href="{nextUrl:h}{days}">{dayRange}</a>
+                </li>
+              </ul>
+            </div><!-- /#event-shortcuts -->
+            <div id="event-featured" flexy:if="hasFeaturedEvents">
+              <h3>{front.featured.title}</h3>
+              <div
+                flexy:foreach="featured,event"
+                style="background-image: url({eventFeaturedUrl:h}{event.image:h})">
+                <p>{event.dates}</p>
+                <a href="{event.href:h}">{event.header}</a>
+              </div>
+            </div><!-- /#event-featured -->
+        </div><!-- /#event-second-column -->
+        <div id="event-main-column" class="eightcol">
+          {if:eventHomePage}<flexy:include src="eventHomePage.html">{end:}
+          {if:eventListResults}<flexy:include src="eventList.html">{end:}
+          {if:eventDetailPage}<flexy:include src="eventDetail.html">{end:}
+        </div>
+    </div><!-- /.row -->
+</div><!-- /.container -->
+{if:bottomScripts}
+  {foreach:bottomScripts,script}
+    <script type="text/javascript" src="{script}"></script>
+  {end:}
+{end:}
+{startScriptTag:h}
+<flexy:include src="js/events.js">
+</script>