moving the dates and days of the week to their own line in agenda view

diff --git a/css/front.css b/css/front.css
index a4c6621..50e8ff3 100644 (file)
--- a/css/front.css
+++ b/css/front.css
@@ -305,53 +305,13 @@ a.fc-time-grid-event.fc-v-event {
     font-size: 13px;
 /*    font-weight: bold;*/
 }
-span.agenda-event-weekday:first-child{
-
+.agenda-event-weekday{
+    font-weight: 600;
 }
-@media (min-width: 1024px){
-    .agenda-event-times{
-        float: left;
-        width: 22%
-    }
-    .agenda-days-of-week{
-        float: left;
-        width: 78%;
-    }
-}
-@media (max-width: 1024px) and (min-width: 640px){
-    .agenda-event-times{
-        float: left;
-        width: 32%
-    }
-    .agenda-days-of-week{
-        float: left;
-        width: 68%;
-    }
-}
-@media(max-width: 640px) and (min-width: 415px){
-    .agenda-event-times{
-        float: left;
-        width: 45%
-    }
-    .agenda-days-of-week{
-        float: left;
-        width: 55%;
-    }
-}
-@media (min-width: 320px) and (max-width: 415px){
-    .agenda-event-name{
-        width: 100%;
-        margin-bottom: 0px;
-    }
-    .agenda-event-recur-dates{
-        width: 100%;
-/*        font-weight: bold;*/
-    }
-    .agenda-days-of-week{
-/*        font-weight: bold;*/
-    }
+.date-range-container{
+    font-size: 13px;
+    margin-bottom: 8px;
 }
-.day-times-wrapper{
-/*    float: left;
-    width:100%*/
+.agenda-event-recur-dates{
+    font-weight: 600;
 }

diff --git a/views/front/events/agenda.html b/views/front/events/agenda.html
index 0e745e0..7258264 100644 (file)
--- a/views/front/events/agenda.html
+++ b/views/front/events/agenda.html
@@ -20,20 +20,11 @@
                             {foreach $events as $event}
                             <div class="row glm-event-day-event">
                                 <div class="small-12 columns">
-                                    <div class="title-daterange-wrapper">
+   
                                         <h2 class="agenda-event-name">{$event.name}</h2>
-                                        <span class="agenda-event-recur-dates">{$event.recurrences.0.from_date.date} - {$event.recurrences.0.to_date.date} </span>
-                                    </div>
-                                    <div class="day-times-wrapper">
-                                        {if !$event.all_day}
-                                            {if $event.starting_date|date_format:"%l:%M %P" == $event.ending_date|date_format:"%l:%M %P"}
-                                            <div class="agenda-event-times">{$event.starting_date|date_format:"%l:%M %P"}</div>
-                                            {else}
-                                            <div class="agenda-event-times"> {$event.starting_date|date_format:"%l:%M %P"} - {$event.ending_date|date_format:"%l:%M %P"}</div>
-                                            {/if}
-                                        {/if}
+                                        <div class='date-range-container'>( Occurring <span class="agenda-event-recur-dates">{$event.recurrences.0.from_date.date} - {$event.recurrences.0.to_date.date}</span> on 
                                         {if $event.recurrences.0.day_of_week.names|@count < 7}
-                                        <div class="agenda-days-of-week">(
+                                        <span class="agenda-days-of-week">
                                             {foreach $event.recurrences.0.day_of_week.names as $day}
                                             {if $day == "Thursday"}
                                                 <span class="agenda-event-weekday"> {$day|substr:0:4} </span>
@@ -42,7 +33,16 @@
                                              {/if}
                                              {/foreach}
                                              )
+                                        </span>
+                                        {/if}
                                         </div>
+                                    <div class="day-times-wrapper">
+                                        {if !$event.all_day}
+                                            {if $event.starting_date|date_format:"%l:%M %P" == $event.ending_date|date_format:"%l:%M %P"}
+                                            <div class="agenda-event-times">{$event.starting_date|date_format:"%l:%M %P"}</div>
+                                            {else}
+                                            <div class="agenda-event-times"> {$event.starting_date|date_format:"%l:%M %P"} - {$event.ending_date|date_format:"%l:%M %P"}</div>
+                                            {/if}
                                         {/if}
                                     </div>
                                     <div class="event-content hide clearfix">