~emersion/alps-dev

alps theme: add remaining CalDAV pages v1 SUPERSEDED

This adds all of the remainng CalDAV pages which are defined by the base
CalDAV plugin, but we still need to add some new pages: daily and weekly
views. These to come in a later patch.

Drew DeVault (3):
  alps theme: add layout for calendar event update
  alps theme: unify create/update styles
  alps theme: add event page layout

 plugins/caldav/routes.go               |  2 +
 themes/alps/assets/style.css           | 58 ++++++++++++-------------
 themes/alps/compose.html               |  2 +-
 themes/alps/event.html                 | 59 ++++++++++++++++++++++++++
 themes/alps/update-address-object.html |  2 +-
 themes/alps/update-event.html          | 46 ++++++++++++++++++++
 6 files changed, 135 insertions(+), 34 deletions(-)
 create mode 100644 themes/alps/event.html
 create mode 100644 themes/alps/update-event.html

-- 
2.26.2
Export patchset (mbox)
How do I use this?

Copy & paste the following snippet into your terminal to import this patchset into git:

curl -s https://lists.sr.ht/~emersion/alps-dev/patches/10716/mbox | git am -3
Learn more about email & git
View this thread in the archives

[PATCH 1/3] alps theme: add layout for calendar event update Export this patch

---
 plugins/caldav/routes.go      |  2 ++
 themes/alps/assets/style.css  | 34 +++++++++++++++++++---------
 themes/alps/update-event.html | 42 +++++++++++++++++++++++++++++++++++
 3 files changed, 67 insertions(+), 11 deletions(-)
 create mode 100644 themes/alps/update-event.html

diff --git a/plugins/caldav/routes.go b/plugins/caldav/routes.go
index d7c31f7..1ae8f02 100644
--- a/plugins/caldav/routes.go
+++ b/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
}
@@ -299,6 +300,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,
		})
diff --git a/themes/alps/assets/style.css b/themes/alps/assets/style.css
index 5225b9d..789e04c 100644
--- a/themes/alps/assets/style.css
+++ b/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;
}

diff --git a/themes/alps/update-event.html b/themes/alps/update-event.html
new file mode 100644
index 0000000..7672a7b
--- /dev/null
+++ b/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"}}
-- 
2.26.2

[PATCH 2/3] alps theme: unify create/update styles Export this patch

---
 themes/alps/assets/style.css           | 55 ++++++++------------------
 themes/alps/compose.html               |  2 +-
 themes/alps/update-address-object.html |  2 +-
 themes/alps/update-event.html          |  6 ++-
 4 files changed, 23 insertions(+), 42 deletions(-)

diff --git a/themes/alps/assets/style.css b/themes/alps/assets/style.css
index 789e04c..b8b7f64 100644
--- a/themes/alps/assets/style.css
+++ b/themes/alps/assets/style.css
@@ -157,39 +157,24 @@ aside a.new.active {
}

aside a.new.active,
main.compose,
main.new-contact,
main.new-event {
main.create-update {
  background-color: #f6fff6;
}

main.compose,
main.new-contact,
main.new-event{ flex: 1 auto; padding: 1rem; }
main.create-update { flex: 1 auto; padding: 1rem; }
main.create-update form { flex: 1 auto; display: flex; flex-direction: column; }
main.create-update form label { margin-top: 5px; }

main.compose form,
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,
main.new-event form label{ margin-top: 5px; }

main.compose form label span,
/* TODO: CSS grid this */
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,
main.new-event form input { width: 80%; }

main.compose form textarea,
main.new-contact form textarea,
main.new-event form textarea { flex: 1 auto; resize: none; margin-top: 1rem; }
main.create-update form label span {
  display: inline-block;
  font-weight: bold;
  min-width: 150px;
}

main.compose h1,
main.new-event h1 { margin: 0; }
main.create-update form input { width: 80%; }
main.create-update form textarea { flex: 1 auto; resize: none; margin-top: 1rem; }
main.create-update 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;
@@ -246,9 +231,7 @@ main.contact dl {
  grid-gap: 1rem;
}

main.compose .actions,
main.new-contact .actions
main.new-event .actions {
main.create-update .actions {
  display: flex;
  flex-direction: row;
  align-items: center;
@@ -257,19 +240,13 @@ main.new-event .actions {
  margin-top: 0.3rem;
}

main.compose .actions button,
main.compose .actions .button-link,
main.new-contact .actions button,
main.new-contact .actions .button-link,
main.new-event .actions button,
main.new-event .actions .button-link {
main.create-update .actions button,
main.create-update .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-event .actions > *:not(:last-child) {
main.create-update .actions > *:not(:last-child) {
  margin-right: 1rem;
}

diff --git a/themes/alps/compose.html b/themes/alps/compose.html
index 0975aad..0342c29 100644
--- a/themes/alps/compose.html
+++ b/themes/alps/compose.html
@@ -15,7 +15,7 @@
  </aside>

  <div class="container">
    <main class="compose">
    <main class="create-update">

      <form method="post" action="" enctype="multipart/form-data">
        <input type="hidden" name="in_reply_to" value="{{.Message.InReplyTo}}">
diff --git a/themes/alps/update-address-object.html b/themes/alps/update-address-object.html
index 52644d0..1b73600 100644
--- a/themes/alps/update-address-object.html
+++ b/themes/alps/update-address-object.html
@@ -10,7 +10,7 @@
  </aside>

  <div class="container">
    <main class="new-contact">
    <main class="create-update">
      <form method="post">
        <h2>
          {{if .Card}}Edit{{else}}Create{{end}} contact
diff --git a/themes/alps/update-event.html b/themes/alps/update-event.html
index 7672a7b..7e7c1eb 100644
--- a/themes/alps/update-event.html
+++ b/themes/alps/update-event.html
@@ -10,7 +10,11 @@
  </aside>

  <div class="container">
    <main class="new-event">
    <main class="create-update">
      <h2>
        {{if .CalendarObject}}Edit{{else}}Create{{end}} event
      </h2>

      <form method="post">
        <label>
          <span>Event name</span>
-- 
2.26.2

[PATCH 3/3] alps theme: add event page layout Export this patch

---
 themes/alps/assets/style.css | 15 ++++++---
 themes/alps/event.html       | 59 ++++++++++++++++++++++++++++++++++++
 2 files changed, 69 insertions(+), 5 deletions(-)
 create mode 100644 themes/alps/event.html

diff --git a/themes/alps/assets/style.css b/themes/alps/assets/style.css
index b8b7f64..a2b4408 100644
--- a/themes/alps/assets/style.css
+++ b/themes/alps/assets/style.css
@@ -188,13 +188,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 +207,8 @@ main.contact .details {
  max-width: 100%;
}

main.message pre {
main.message pre,
main.event pre {
  white-space: pre-wrap;
  word-break: break-all;
}
diff --git a/themes/alps/event.html b/themes/alps/event.html
new file mode 100644
index 0000000..aa475bc
--- /dev/null
+++ b/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 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="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"}}
-- 
2.26.2