aboutsummaryrefslogtreecommitdiff
path: root/themes
diff options
context:
space:
mode:
Diffstat (limited to 'themes')
-rw-r--r--themes/alps/assets/style.css101
-rw-r--r--themes/alps/calendar-header.html18
-rw-r--r--themes/alps/calendar.html84
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"}}