Small mobile view improvements for events

Author: Denis Krienbühl

onegov/org/templates/macros.pt

@@ -763,16 +763,15 @@
 
     <div class="calendar-day-date">
         <div class="weekday">${layout.format_date(date, 'weekday_short').rstrip('.')}</div>
-        <div class="day">${date.day}.</div>
-        <div class="month">${layout.format_date(date, 'month_long')}</div>
+        <div class="date">${date.day}. ${layout.format_date(date, 'month_long')}</div>
     </div>
 </metal:calendar_day_box>
 
 <metal:occurrences define-macro="occurrences" i18n:domain="onegov.org">
     <tal:b repeat="occurrence occurrences">
         <div class="row">
             <div class="occurrence">
-                <div class="medium-3 small-12 columns">
+                <div class="large-3 medium-4 small-12 columns">
                     <metal:b
                         tal:define="
                             date occurrence.localized_start;
@@ -782,7 +781,7 @@
                         use-macro="layout.macros['calendar-day']"
                     />
                 </div>
-                <div class="medium-9 small-12 columns">
+                <div class="large-9 medium-8 small-12 columns">
                     <h3><a href="${request.link(occurrence)}">${occurrence.title}</a></h3>
                     <div class="occurrence-date show-for-sr">${layout.format_date(occurrence.localized_start, 'date')}</div>
                     <div class="occurrence-location">${occurrence.location}</div>

onegov/org/templates/resource_occupancy.pt

@@ -16,10 +16,10 @@
             <div class="small-12 medium-8 columns">
                 <div class="row occupancy-block" tal:repeat="date occupancy">
                     <tal:b define="entries occupancy[date]">
-                        <div class="columns small-12 medium-12 large-3">
+                        <div class="columns medium-12 large-3">
                             <metal:b use-macro="layout.macros['calendar-day']" />
                         </div>
-                        <div class="columns small-12 medium-12 large-9">
+                        <div class="columns medium-12 large-9">
                             <ul class="occupancy-entry">
                                 <li tal:repeat="entry entries">
                                     <tal:b tal:define="whole_day entry.start.time() != entry.end.time()">

onegov/org/theme/styles/org.scss

@@ -2861,8 +2861,12 @@ button {
             text-transform: uppercase;
         }
 
-        .day {
-            padding: 0 0 0 .4rem;
+        .date {
+            padding: 0 0 0 .3rem;
+            max-width: 65%;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
         }
     }
 }