~emersion/alps-dev

alps theme: add remaining CalDAV pages v2 SUPERSEDED

Drew DeVault <sir@cmpwn.com>
4 years ago 
Sorry for the sudden v2, I missed a spot when adding the event view.

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/10717/mbox | git am -3
Learn more about email & git
Reply to thread View this thread in the archives

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

Drew DeVault <sir@cmpwn.com>
4 years ago 
---
 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 v2 2/3] alps theme: unify create/update styles Export this patch

Drew DeVault <sir@cmpwn.com>
4 years ago 
---
 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 v2 3/3] alps theme: add event page layout Export this patch

Drew DeVault <sir@cmpwn.com>
4 years ago 
---
 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..52b7fa4
--- /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">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"}}
-- 
2.26.2