Received: from mail.cmpwn.com (mail.cmpwn.com [45.56.77.53])
	by mail-b.sr.ht (Postfix) with ESMTPS id 3ED4BFF0B6
	for <~emersion/alps-dev@lists.sr.ht>; Wed, 20 May 2020 17:40:57 +0000 (UTC)
Authentication-Results: mail-b.sr.ht;
	dkim=pass (1024-bit key) header.d=cmpwn.com header.i=@cmpwn.com header.b=XKN5JBkq
DKIM-Signature: v=1; a=rsa-sha256; c=simple/simple; d=cmpwn.com; s=cmpwn;
	t=1589996456; bh=4PT67/bTEQko9DoPxqAVqmRHT61ax+uSGNOGh3Xvp+0=;
	h=From:To:Cc:Subject:Date:In-Reply-To:References;
	b=XKN5JBkqLcvnQdgp7yyp9fnZXNT0iGtGPsTtcFqKZjuJZ3KkxCFbkFuRgS9O1TZxc
	 EaZP4C3bXzlUfFj2d0veDN5Ro1gFdET0jeUhoss0Nh94tN00wjpSLS00tAvDJqkwJg
	 TRgBVqGIn5xS/Ql/+SiBKHmM3fXDWv319N9aGdwU=
From: Drew DeVault <sir@cmpwn.com>
To: ~emersion/alps-dev@lists.sr.ht
Cc: Drew DeVault <sir@cmpwn.com>
Subject: [PATCH v3 3/3] alps theme: add event page layout
Date: Wed, 20 May 2020 13:40:54 -0400
Message-Id: <20200520174054.109903-4-sir@cmpwn.com>
X-Mailer: git-send-email 2.26.2
In-Reply-To: <20200520174054.109903-1-sir@cmpwn.com>
References: <20200520174054.109903-1-sir@cmpwn.com>
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: quoted-printable

---
 themes/alps/assets/style.css  | 30 +++++++++++++++---
 themes/alps/event.html        | 59 +++++++++++++++++++++++++++++++++++
 themes/alps/update-event.html | 15 ++++-----
 3 files changed, 92 insertions(+), 12 deletions(-)
 create mode 100644 themes/alps/event.html

diff --git a/themes/alps/assets/style.css b/themes/alps/assets/style.css
index b8b7f64..9d51f45 100644
--- a/themes/alps/assets/style.css
+++ b/themes/alps/assets/style.css
@@ -85,6 +85,9 @@ input[type=3D"text"],
 input[type=3D"email"],
 input[type=3D"password"],
 input[type=3D"file"],
+input[type=3D"number"],
+input[type=3D"date"],
+input[type=3D"time"],
 textarea {
   margin: 0;
   border: none;
@@ -188,13 +191,17 @@ main table td a { text-decoration: none; }
=20
 main table td a:hover { text-decoration: underline; }
=20
-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;}
=20
 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%;
 }
=20
-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;
 }
=20
+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;
diff --git a/themes/alps/event.html b/themes/alps/event.html
new file mode 100644
index 0000000..52b7fa4
--- /dev/null
+++ b/themes/alps/event.html
@@ -0,0 +1,59 @@
+{{template "head.html" .}}
+{{template "nav.html" .}}
+
+<div class=3D"page-wrap">
+  <aside>
+    <a href=3D"/calendar/create" class=3D"new">New event</a>
+    <!-- TODO: fetch list of address books -->
+    <a href=3D"#" class=3D"active">{{.Calendar.Name}}</a>
+    <a href=3D"#">Personal</a>
+  </aside>
+
+  <div class=3D"container">
+    <main class=3D"event">
+      <section class=3D"actions">
+        <div class=3D"actions-wrap">
+          <div class=3D"actions-message">
+            <div class=3D"action-group">
+              <a href=3D"/calendar" class=3D"button-link">=C2=AB Back</a=
>
+            </div>
+            <div class=3D"action-group">
+              <a href=3D"{{.Event.URL}}/update" class=3D"button-link">Ed=
it</a>
+            </div>
+            <form
+              class=3D"action-group"
+              action=3D"{{.Event.URL}}/delete"
+              method=3D"post"
+            >
+              <input type=3D"submit" value=3D"Delete">
+            </form>
+            <!-- TODO: Invite attendees -->
+          </div>
+        </div>
+      </section>
+
+      <section class=3D"details">
+        {{$event :=3D index .Event.Data.Events 0}}
+        <table>
+          <tr>
+            <th colspan=3D"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"}}
diff --git a/themes/alps/update-event.html b/themes/alps/update-event.htm=
l
index 7e7c1eb..17c6e16 100644
--- a/themes/alps/update-event.html
+++ b/themes/alps/update-event.html
@@ -21,15 +21,16 @@
           <input type=3D"text" name=3D"summary" id=3D"summary" value=3D"=
{{.Event.Props.Text "SUMMARY"}}">
         </label>
=20
-        <label>
-          <!-- TODO: inputs with time -->
-          <span>Start date</span>
-          <input type=3D"date" name=3D"start" id=3D"start" value=3D"{{.E=
vent.DateTimeStart nil | ornow | formatinputdate}}"/>
+        <label class=3D"event-date">
+          <span>Starts at</span>
+          <input type=3D"date" name=3D"start" id=3D"start" value=3D"{{.E=
vent.DateTimeStart nil | formatinputdate}}"/>
+          <input type=3D"time" name=3D"start-time" id=3D"start-time" val=
ue=3D"{{.Event.DateTimeStart nil | formatinputtime}}"/>
         </label>
=20
-        <label>
-          <span>End date</span>
-          <input type=3D"date" name=3D"end" id=3D"end" value=3D"{{.Event=
.DateTimeEnd nil | ornow | formatinputdate}}"/>
+        <label class=3D"event-date">
+          <span>Ends at</span>
+          <input type=3D"date" name=3D"end" id=3D"end" value=3D"{{.Event=
.DateTimeEnd nil | formatinputdate}}"/>
+          <input type=3D"time" name=3D"end-time" id=3D"end-time" value=3D=
"{{.Event.DateTimeEnd nil | formatinputtime}}"/>
         </label>
=20
         <textarea name=3D"description" id=3D"description">{{.Event.Props=
.Text "DESCRIPTION"}}</textarea>
--=20
2.26.2