alps theme: add layout for calendar event update

plugins/caldav/routes.go

@@ -38,6 +38,7 @@ type EventRenderData struct {
 
 type UpdateEventRenderData struct {
 	alps.BaseRenderData
+	Calendar       *caldav.Calendar
 	CalendarObject *caldav.CalendarObject // nil if creating a new contact
 	Event          *ical.Event
 }
@@ -313,6 +314,7 @@ func registerRoutes(p *alps.GoPlugin, u *url.URL) {
 
 		return ctx.Render(http.StatusOK, "update-event.html", &UpdateEventRenderData{
 			BaseRenderData: *alps.NewBaseRenderData(ctx),
+			Calendar:       calendar,
 			CalendarObject: co,
 			Event:          event,
 		})

themes/alps/assets/style.css

@@ -158,30 +158,38 @@ aside a.new.active {
 
 aside a.new.active,
 main.compose,
-main.new-contact {
+main.new-contact,
+main.new-event {
   background-color: #f6fff6;
 }
 
 main.compose,
-main.new-contact { flex: 1 auto; padding: 1rem; }
+main.new-contact,
+main.new-event{ flex: 1 auto; padding: 1rem; }
 
 main.compose form,
-main.new-contact form { flex: 1 auto; display: flex; flex-direction: column; }
+main.new-contact form,
+main.new-event form{ flex: 1 auto; display: flex; flex-direction: column; }
 
 main.compose form label,
-main.new-contact form label { margin-top: 5px; }
+main.new-contact form label,
+main.new-event form label{ margin-top: 5px; }
 
 main.compose form label span,
 /* TODO: CSS grid this */
-main.new-contact form label span { display: inline-block; font-weight: bold; min-width: 150px; }
+main.new-contact form label span,
+main.new-event form label span { display: inline-block; font-weight: bold; min-width: 150px; }
 
 main.compose form input,
-main.new-contact form input { width: 80%; }
+main.new-contact form input,
+main.new-event form input { width: 80%; }
 
 main.compose form textarea,
-main.new-contact form textarea { flex: 1 auto; resize: none; margin-top: 1rem; }
+main.new-contact form textarea,
+main.new-event form textarea { flex: 1 auto; resize: none; margin-top: 1rem; }
 
-main.compose h1 { margin: 0; }
+main.compose h1,
+main.new-event h1 { margin: 0; }
 
 main table { border-collapse: collapse; width: 100%; border: 1px solid #eee; }
 main table td { white-space: nowrap; padding: 0.3rem; color: #757373;
@@ -239,7 +247,8 @@ main.contact dl {
 }
 
 main.compose .actions,
-main.new-contact .actions {
+main.new-contact .actions
+main.new-event .actions {
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -251,13 +260,16 @@ main.new-contact .actions {
 main.compose .actions button,
 main.compose .actions .button-link,
 main.new-contact .actions button,
-main.new-contact .actions .button-link {
+main.new-contact .actions .button-link,
+main.new-event .actions button,
+main.new-event .actions .button-link {
   padding: 0.4rem 1rem 0.35rem;
   font-weight: bold;
 }
 
 main.compose .actions > *:not(:last-child),
-main.new-contact .actions > *:not(:last-child) {
+main.new-contact .actions > *:not(:last-child),
+main.new-event .actions > *:not(:last-child) {
   margin-right: 1rem;
 }
 

themes/alps/update-event.html

@@ -0,0 +1,42 @@
+{{template "head.html" .}}
+{{template "nav.html" .}}
+
+<div class="page-wrap">
+  <aside>
+    <a href="/calendar/create" class="new active">New event</a>
+    <!-- TODO: fetch list of address books -->
+    <a href="#">{{.Calendar.Name}}</a>
+    <a href="#">Personal</a>
+  </aside>
+
+  <div class="container">
+    <main class="new-event">
+      <form method="post">
+        <label>
+          <span>Event name</span>
+          <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>
+
+        <label>
+          <span>End date</span>
+          <input type="date" name="end" id="end" value="{{.Event.DateTimeEnd nil | ornow | formatinputdate}}"/>
+        </label>
+
+        <textarea name="description" id="description">{{.Event.Props.Text "DESCRIPTION"}}</textarea>
+
+        <div class="actions">
+          <button type="submit">Save</button>
+          <a class="button-link" href="/calendar">Cancel</a>
+        </div>
+      </form>
+    </main>
+  </div>
+</div>
+
+{{template "foot.html"}}