alps theme: initial layout for calendar

3 files changed, 202 insertions, 1 deletions

diff --git a/themes/alps/assets/style.css b/themes/alps/assets/style.css
index c62fbbc..8ce6549 100644
--- a/themes/alps/assets/style.css
+++ b/themes/alps/assets/style.css
@@ -261,6 +261,11 @@ main.new-contact .actions > *:not(:last-child) {
   margin-right: 1rem;
 }
 
+.actions h3 {
+  align-self: center;
+  margin: 0 1.3rem 0 1rem;
+}
+
 .message-list-subject a { color: #77c; }
 
 .message-list-unread.message-list-sender,
@@ -370,7 +375,7 @@ main table tfoot {
   padding: 0.3rem 0.5rem;
 }
 
-.actions-pagination .button-link:first-child:not(:last-child) {
+.actions-pagination .button-link:not(:last-child) {
   margin-right: 0.3rem;
 }
 
@@ -444,6 +449,100 @@ main table tfoot {
   margin-top: 1rem;
 }
 
+main.calendar .dates {
+  flex-grow: 1;
+  padding: 0.3rem;
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
+  grid-template-rows: auto 1fr 1fr 1fr 1fr 1fr 1fr auto;
+  grid-template-areas:
+    "sunday-top monday-top wednesday-top tuesday-top thursday-top friday-top saturday-top"
+    "dates dates dates dates dates dates dates"
+    "dates dates dates dates dates dates dates"
+    "dates dates dates dates dates dates dates"
+    "dates dates dates dates dates dates dates"
+    "dates dates dates dates dates dates dates"
+    "dates dates dates dates dates dates dates"
+    "sunday-bottom monday-bottom wednesday-bottom tuesday-bottom thursday-bottom friday-bottom saturday-bottom";
+  grid-gap: 0.3rem;
+}
+
+main.calendar .dates .weekday {
+  text-align: center;
+  font-size: 1.1rem;
+  font-weight: normal;
+}
+
+main.calendar .dates .sunday-top { grid-area: sunday-top; }
+main.calendar .dates .monday-top { grid-area: monday-top; }
+main.calendar .dates .tuesday-top { grid-area: tuesday-top; }
+main.calendar .dates .wednesday-top { grid-area: wednesday-top; }
+main.calendar .dates .thursday-top { grid-area: thursday-top; }
+main.calendar .dates .friday-top { grid-area: friday-top; }
+main.calendar .dates .saturday-top { grid-area: saturday-top; }
+main.calendar .dates .sunday-bottom { grid-area: sunday-bottom; }
+main.calendar .dates .monday-bottom { grid-area: monday-bottom; }
+main.calendar .dates .tuesday-bottom { grid-area: tuesday-bottom; }
+main.calendar .dates .wednesday-bottom { grid-area: wednesday-bottom; }
+main.calendar .dates .thursday-bottom { grid-area: thursday-bottom; }
+main.calendar .dates .friday-bottom { grid-area: friday-bottom; }
+main.calendar .dates .saturday-bottom { grid-area: saturday-bottom; }
+
+main.calendar .date {
+  border: 1px solid #eee;
+  padding: 0.3rem;
+  background: white;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+}
+
+main.calendar .date.active {
+  background-color: #f6fff6;
+  border: 1px solid #afa;
+}
+
+main.calendar .date .date-link {
+  position: absolute;
+  top: 0; right: 0; bottom: 0; left: 0;
+}
+
+main.calendar .date.extra {
+  background: transparent;
+  border: none;
+}
+
+main.calendar .date ul {
+  list-style: none;
+  margin: 0;
+  padding-left: 0.3rem;
+}
+
+main.calendar .date .events {
+  flex-grow: 1;
+}
+
+main.calendar .date.extra .events {
+  visibility: hidden;
+}
+
+main.calendar .events .start-time {
+  color: #444;
+}
+
+main.calendar .events .overflow {
+  color: #444;
+  text-align: right;
+}
+
+main.calendar .date h4 {
+  font-weight: normal;
+  text-align: right;
+  color: #666;
+}
+
+main.calendar .date h4 .da { font-size: 1.2rem; }
+
 input[type="submit"],
 .button,
 button,
diff --git a/themes/alps/calendar-header.html b/themes/alps/calendar-header.html
new file mode 100644
index 0000000..d902806
--- /dev/null
+++ b/themes/alps/calendar-header.html
@@ -0,0 +1,18 @@
+<div class="actions-wrap">
+  <div class="actions-pagination" style="margin-left: 0;">
+    <a href="?month={{.PrevPage}}" class="button-link">« {{.PrevTime.Format "January"}}</a>
+    <h3>{{.Time.Format "January 2006"}}</h3>
+    <a href="?month={{.NextPage}}" class="button-link">{{.NextTime.Format "January"}} »</a>
+    {{if ne .Time.Month .Now.Month}}
+    <a href="/calendar" class="button-link">Today »</a>
+    {{end}}
+  </div>
+
+  <form method="get" class="actions-search action-group">
+    <input
+      type="text"
+      name="query"
+      placeholder="Search {{.Calendar.Name}} events...">
+    <button>Search</button>
+  </form>
+</div>
diff --git a/themes/alps/calendar.html b/themes/alps/calendar.html
new file mode 100644
index 0000000..5bdd6eb
--- /dev/null
+++ b/themes/alps/calendar.html
@@ -0,0 +1,84 @@
+{{template "head.html" .}}
+{{template "nav.html" .}}
+
+<div class="page-wrap">
+  <aside>
+    <a href="/calendar/create" class="new">New event</a>
+    <!-- TODO: fetch list of address books -->
+    <a href="#" class="active">{{.Calendar.Name}}</a>
+    <a href="#">Personal</a>
+  </aside>
+
+  <div class="container">
+    <main class="calendar">
+      <section class="actions">
+        {{ template "calendar-header.html" . }}
+      </section>
+
+      <section class="dates">
+        <h4 class="weekday sunday-top">Sunday</h4>
+        <h4 class="weekday monday-top">Monday</h4>
+        <h4 class="weekday tuesday-top">Tuesday</h4>
+        <h4 class="weekday wednesday-top">Wednesday</h4>
+        <h4 class="weekday thursday-top">Thursday</h4>
+        <h4 class="weekday friday-top">Friday</h4>
+        <h4 class="weekday saturday-top">Saturday</h4>
+
+        {{$base := .}}
+        {{range .Dates}}
+        <div class="date
+          {{if ne $base.Time.Month .Month}}extra{{end}}
+          {{if and (eq $base.Now.Month .Month) (eq $base.Now.Day .Day)}}active{{end}}
+          ">
+          {{if eq $base.Time.Month .Month}}
+            <a href="#" class="date-link"></a>
+          {{end}}
+          <div class="events">
+            {{$events := (call $base.EventsForDate .)}}
+            {{if $events}}
+            <ul>
+              {{$overflow := 0}}
+              {{if gt (len $events) 3}}
+              {{$overflow = call $base.Sub (len $events) 3}}
+              {{$events = slice $events 0 3}}
+              {{end}}
+
+              {{range $events}}
+              {{$event := index .Data.Events 0}}
+              <li>
+                <span class="start-time">
+                  {{($event.DateTimeStart nil).Format "15:04"}}
+                </span>
+                {{$event.Props.Text "SUMMARY"}}
+              </li>
+              {{end}}
+              {{if ne $overflow 0}}
+              <li class="overflow">...and {{$overflow}} more</li>
+              {{end}}
+            </ul>
+            {{end}}
+          </div>
+          <h4>
+            <span class="mo">{{.Format "Jan"}}</span>
+            <span class="da">{{.Format "2"}}{{call $base.DaySuffix .Day}}</span>
+          </h4>
+        </div>
+        {{end}}
+
+        <h4 class="weekday sunday-bottom">Sunday</h4>
+        <h4 class="weekday monday-bottom">Monday</h4>
+        <h4 class="weekday tuesday-bottom">Tuesday</h4>
+        <h4 class="weekday wednesday-bottom">Wednesday</h4>
+        <h4 class="weekday thursday-bottom">Thursday</h4>
+        <h4 class="weekday friday-bottom">Friday</h4>
+        <h4 class="weekday saturday-bottom">Saturday</h4>
+      </section>
+
+      <section class="actions">
+        {{ template "calendar-header.html" . }}
+      </section>
+    </main>
+  </div>
+</div>
+
+{{template "foot.html"}}