alps theme: add event page layout

themes/alps/assets/style.css

@@ -85,6 +85,9 @@ input[type="text"],
 input[type="email"],
 input[type="password"],
 input[type="file"],
+input[type="number"],
+input[type="date"],
+input[type="time"],
 textarea {
   margin: 0;
   border: none;
@@ -188,13 +191,17 @@ main table td a { text-decoration: none; }
 
 main table td a:hover { text-decoration: underline; }
 
-main.message table { background-color: white; }
-main.message th { width: 5%;}
-main.message h1 { font-size: 1.2rem; padding: 0.5rem;}
+main.message table,
+main.event table { background-color: white; }
+main.message th,
+main.event th { width: 5%;}
+main.message h1,
+main.event h1 { font-size: 1.2rem; padding: 0.5rem;}
 
 main.message pre,
 main.message iframe,
-main.contact .details {
+main.contact .details,
+main.event pre {
   flex: 1 auto;
   padding: 1rem;
   margin: 0.3rem 0 0 0;
@@ -203,7 +210,8 @@ main.contact .details {
   max-width: 100%;
 }
 
-main.message pre {
+main.message pre,
+main.event pre {
   white-space: pre-wrap;
   word-break: break-all;
 }
@@ -250,6 +258,18 @@ main.create-update .actions > *:not(:last-child) {
   margin-right: 1rem;
 }
 
+main.create-update .event-date {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+main.create-update .event-date input {
+  width: inherit;
+  flex-grow: 1;
+  margin-left: 0.3rem;
+}
+
 .actions h3 {
   align-self: center;
   margin: 0 1.3rem 0 1rem;

themes/alps/event.html

@@ -0,0 +1,59 @@
+{{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="event">
+      <section class="actions">
+        <div class="actions-wrap">
+          <div class="actions-message">
+            <div class="action-group">
+              <a href="/calendar" class="button-link">« Back</a>
+            </div>
+            <div class="action-group">
+              <a href="{{.Event.URL}}/update" class="button-link">Edit</a>
+            </div>
+            <form
+              class="action-group"
+              action="{{.Event.URL}}/delete"
+              method="post"
+            >
+              <input type="submit" value="Delete">
+            </form>
+            <!-- TODO: Invite attendees -->
+          </div>
+        </div>
+      </section>
+
+      <section class="details">
+        {{$event := index .Event.Data.Events 0}}
+        <table>
+          <tr>
+            <th colspan="2">
+              <h1>{{$event.Props.Text "SUMMARY"}}</h1>
+            </th>
+          </tr>
+          <tr>
+            <th>Start date:</th>
+            <td>{{$event.DateTimeStart nil | formatdate}}</td>
+          </tr>
+          <tr>
+            <th>End date:</th>
+            <td>{{$event.DateTimeEnd nil | formatdate}}</td>
+          </tr>
+          <!-- TODO: List of attendees, room -->
+        </table>
+        <pre>{{$event.Props.Text "DESCRIPTION"}}</pre>
+      </section>
+    </main>
+  </div>
+</div>
+
+{{template "foot.html"}}

themes/alps/update-event.html

@@ -21,15 +21,16 @@
           <input type="text" name="summary" id="summary" value="{{.Event.Props.Text "SUMMARY"}}">
         </label>
 
-        <label>
-          <!-- TODO: inputs with time -->
-          <span>Start date</span>
-          <input type="date" name="start" id="start" value="{{.Event.DateTimeStart nil | ornow | formatinputdate}}"/>
+        <label class="event-date">
+          <span>Starts at</span>
+          <input type="date" name="start" id="start" value="{{.Event.DateTimeStart nil | formatinputdate}}"/>
+          <input type="time" name="start-time" id="start-time" value="{{.Event.DateTimeStart nil | formatinputtime}}"/>
         </label>
 
-        <label>
-          <span>End date</span>
-          <input type="date" name="end" id="end" value="{{.Event.DateTimeEnd nil | ornow | formatinputdate}}"/>
+        <label class="event-date">
+          <span>Ends at</span>
+          <input type="date" name="end" id="end" value="{{.Event.DateTimeEnd nil | formatinputdate}}"/>
+          <input type="time" name="end-time" id="end-time" value="{{.Event.DateTimeEnd nil | formatinputtime}}"/>
         </label>
 
         <textarea name="description" id="description">{{.Event.Props.Text "DESCRIPTION"}}</textarea>