Updating the styles for the agenda view

Getting it to look better.

diff --git a/css/front.css b/css/front.css
index 9c39d03..d23848e 100644 (file)
--- a/css/front.css
+++ b/css/front.css
@@ -8,16 +8,77 @@
 .glm-event-day-row {
     border: 1px solid #FFF;
     margin-top: 8px !important;
-    transition: border 500ms ease-out;
-}
-.glm-event-day-row:hover {
-    border: 1px solid #56B64A;
+    background: -webkit-linear-gradient(left, #f2f2f2 5%, #fff 100%);
+    background: -moz-linear-gradient(center top, #f2f2f2 5%, #fff 100%);
+    background: -ms-linear-gradient(left, #f2f2f2 5%, #fff 100%);
 }
 .glm-event-day-event {
-    /*background-color: #F2F2F2;*/
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    padding: 5px;
     margin-top: 10px !important;
     margin-bottom: 10px !important;
+    transition: border 300ms;
+}
+.glm-event-day-event:hover  {
+    border: 1px solid black;
 }
 #EventDrivingDirectionSubmit {
     width: 100%;
 }
+.glm-event-day-event h2 {
+    font-size: 16px;
+}
+.glm-event-day-event .event-content {
+    padding: 10px;
+}
+.glm-event-day-event a.glm-read-more {
+    margin: 10px;
+    padding: 5px 10px;
+    background-color: #fff;
+    border: 1px solid #2c296d;
+    border-radius: 5px;
+    text-decoration: none;
+    color: black;
+    float: right;
+    clear: right;
+    transition: all 300ms;
+}
+.glm-event-day-event a.glm-read-more:hover {
+    background-color: #2c296d;
+    border: 1px solid #fff;
+    background-color: #2c296d;
+    color: #fff;
+}
+.glm-event-cal {
+    margin-top: 20px;
+    width: 64px;
+    border: 1px solid #2c296d;
+    border-radius: 5px;
+    text-align: center;
+}
+.glm-event-cal-day-container {
+    background: -webkit-linear-gradient(left, #fff 5%, #f2f2f2 100%);
+    background: -moz-linear-gradient(center top, #fff 5%, #f2f2f2 100%);
+    background: -ms-linear-gradient(left, #fff 5%, #f2f2f2 100%);
+    border-bottom-left-radius: 5px;
+    border-bottom-right-radius: 5px;
+}
+.glm-event-cal-dow {
+     font-size: .76rem;
+     display: inline-block;
+     width: 100%;
+}
+.glm-event-cal-day {
+    padding-top: 5px;
+    font-size: 1.6rem;
+    display: inline-block;
+    width: 100%;
+    font-weight: bold;
+}
+.glm-event-cal-month {
+    width: 100%;
+    background-color: #2c296d;
+    color: #fff;
+    font-weight: bold;
+}

diff --git a/js/front.js b/js/front.js
index a1daf50..9c0e7f3 100644 (file)
--- a/js/front.js
+++ b/js/front.js
@@ -9,6 +9,11 @@ var EventFront = {
             window.open(url, '_blank');
             return false;
         });
+
+        jQuery(".glm-event-day-row").find(".glm-event-day-event").click(function(){
+            jQuery(this).find('.event-content').slideToggle('slow');
+            console.log(jQuery(this).find('.event-content'));
+        });
     }
 };
 

diff --git a/models/front/events/list.php b/models/front/events/list.php
index 2117e30..fdb1c59 100644 (file)
--- a/models/front/events/list.php
+++ b/models/front/events/list.php
@@ -150,7 +150,8 @@ class GlmMembersFront_events_list extends GlmMembersFront_events_baseAction
             'catEvents'    => $categoryEvents,
             'fromDate'     => $fromDate,
             'toDate'       => $toDate,
-            'eventName'    => $eventNameSearch
+            'eventName'    => $eventNameSearch,
+            'imgUrl'  => GLM_MEMBERS_PLUGIN_MEDIA_URL . '/images/small/'
         );
 
         error_reporting(E_ALL ^ E_NOTICE);

diff --git a/views/front/events/agenda.html b/views/front/events/agenda.html
index 0032d10..48f7223 100644 (file)
--- a/views/front/events/agenda.html
+++ b/views/front/events/agenda.html
@@ -43,21 +43,38 @@
             </form>
             {foreach $eventsByDate as $date => $events}
                 <div class="row glm-event-day-row">
-                    <div class="small-3 columns">
-                        <strong>{$date|date_format:"%b %e"}</strong><br>
-                        {$date|date_format:"%A"}
+                    <div class="small-2 columns">
+                        <div class="glm-event-cal">
+                            <div class="glm-event-cal-month">{$date|date_format:"%b"}</div>
+                            <div class="glm-event-cal-day-container">
+                                <span class="glm-event-cal-day">{$date|date_format:"%e"}</span>
+                                <span class="glm-event-cal-dow">{$date|date_format:"%a"}</span>
+                            </div>
+                        </div>
                     </div>
-                    <div class="small-9 columns">
+                    <div class="small-10 columns">
                         {foreach $events as $event}
                         <div class="row glm-event-day-event">
                             <div class="small-12 column">
-                                {foreach $event.categories as $cat}
-                                    {$cat.name}:<br>
-                                {/foreach}
-                                <a href="{$siteBaseUrl}event-detail/{$event.name_slug}/?glm_event_from={$fromDate|unescape:"html"}">{$event.name}</a>
+                                <h2>{$event.name}</h2>
                                 {if !$event.hasSameTimes}
                                 {$event.starting_date|date_format:"%l %P"} - {$event.ending_date|date_format:"%l %P"}
                                 {/if}
+                                <div class="event-content hide clearfix">
+                                    {if $event.image}<img style="float:right;" src="{$imgUrl}{$event.image}">{/if}
+                                    {$event.intro}
+                                    {if $event.categories}
+                                    <div>
+                                        <strong>Categories:</strong>
+                                        {foreach $event.categories as $cat}
+                                        {$cat.name}
+                                        {/foreach}
+                                    </div>
+                                    {/if}
+                                    <div>
+                                        <a class="glm-read-more" href="{$siteBaseUrl}event-detail/{$event.name_slug}/?glm_event_from={$fromDate|unescape:"html"}">Read More</a>
+                                    </div>
+                                </div>
                             </div>
                         </div>
                         {/foreach}