Extract calendar day style from occurrences view

OneGov · May 11, 2016 · fef3e3c · fef3e3c
1 parent 8cb66ec
commit fef3e3c
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 35 deletions.
diff --git a/onegov/town/templates/macros.pt b/onegov/town/templates/macros.pt
@@ -503,23 +503,28 @@
     </div>
 </metal:atoz>
 
+<metal:calendar_day_box define-macro="calendar-day" i18n:domain="onegov.town">
+    <h2 class="calendar-day-box">
+        <metal:block use-macro="layout.macros['calendar-day-content']" />
+    </h2>
+</metal:calendar_day_box>
+
+<metal:calendar_day_box define-macro="calendar-day-content" i18n:domain="onegov.town">
+    <span>${layout.format_date(date, 'weekday_long')}</span>
+    <span class="day">${date.day}</span><span class="dot">.</span>
+    <span>${layout.format_date(date, 'month_long')}</span>
+</metal:calendar_day_box>
+
 <metal:occurrences define-macro="occurrences" i18n:domain="onegov.town">
     <tal:block tal:define="global lastdaydate 0">
         <tal:block repeat="occurrence occurrences">
             <div class="row">
                 <div class="occurrence">
                     <div class="large-3 columns">
-                        <tal:block tal:condition="layout.format_date(occurrence.localized_start, 'date') == lastdaydate">
-                            <div class="show-for-large-up occurrences-day-date"></div>
-                        </tal:block>
                         <tal:block tal:condition="layout.format_date(occurrence.localized_start, 'date') != lastdaydate">
-                            <h2 class="occurrences-day-date active">
-                                <span>${layout.format_date(occurrence.localized_start, 'weekday_long')}</span>
-                                <span class="day">${occurrence.localized_start.day}</span>
-                                <span class="dot">.</span>
-                                <span>${layout.format_date(occurrence.localized_start, 'month_long')}</span>
-                            </h2>
+                            <metal:block tal:define="date occurrence.localized_start" use-macro="layout.macros['calendar-day']" />
                         </tal:block>
+                        <div class="show-for-large-up" style="width: 100%; height: 1px;"></div>
                     </div>
                     <div class="large-9 medium-12 small-12 columns">
                         <div class="occurrence-date show-for-large-up">${layout.format_date(occurrence.localized_start, 'date')}</div>

diff --git a/onegov/town/theme/styles/town.scss b/onegov/town/theme/styles/town.scss
@@ -2033,6 +2033,44 @@ button {
     }
 }
 
+/*
+    A box rendering the following structure as a calendar-like box:
+
+    <h2 class="calendar-day-box">
+        <span>Wednesday</span>
+        <span class="day">11</span>
+        <span>March</span>
+    </h2>
+*/
+.calendar-day-box {
+    padding: .5em 0;
+    width: 100%;
+
+    @media #{$small-up} {
+        font-weight: bold;
+    }
+
+    @media #{$large-up} {
+        background-color: $white-smoke;
+        font-weight: normal;
+
+        span {
+            display: block;
+            font-size: 1rem;
+            text-align: center;
+
+            &.dot {
+                display: none;
+            }
+
+            &.day {
+                font-size: 3rem;
+                font-weight: bold;
+            }
+        }
+    }
+}
+
 /*
     Events
 */
@@ -2066,32 +2104,6 @@ button {
     }
 }
 
-.occurrences-day-date {
-    padding: .5em 0;
-    width: 100%;
-
-    &.active {
-        background-color: $white-smoke;
-    }
-
-    @media #{$large-up} {
-        span {
-            display: block;
-            font-size: 1rem;
-            text-align: center;
-
-            &.day {
-                font-size: 3rem;
-                font-weight: bold;
-            }
-
-            &.dot {
-                display: none;
-            }
-        }
-    }
-}
-
 .occurrences-filter-result {
     margin-bottom: 1em;