From 28be7ca850f41352a1e4e43f0c7035bdeeff6e83 Mon Sep 17 00:00:00 2001
From: Raphael Kabo <raphaelkabo@hey.com>
Date: Wed, 28 Feb 2024 22:40:33 +0000
Subject: New frontend styles, instance description functionality

---
 views/createEventMagicLink.handlebars         |  2 +-
 views/event.handlebars                        | 64 +++++++++++++--------------
 views/eventgroup.handlebars                   | 28 ++++++------
 views/home.handlebars                         | 16 +------
 views/newevent.handlebars                     | 23 +++++-----
 views/partials/editeventgroupmodal.handlebars |  8 ++--
 views/partials/editeventmodal.handlebars      |  8 ++--
 views/partials/eventForm.handlebars           |  4 +-
 views/partials/importeventform.handlebars     |  4 +-
 views/partials/instanceRules.handlebars       | 11 +++++
 views/partials/sidebar.handlebars             |  2 +-
 views/publicEventList.handlebars              | 23 +++++++---
 12 files changed, 101 insertions(+), 92 deletions(-)
 create mode 100644 views/partials/instanceRules.handlebars

(limited to 'views')

diff --git a/views/createEventMagicLink.handlebars b/views/createEventMagicLink.handlebars
index 7329801..d0a0a49 100644
--- a/views/createEventMagicLink.handlebars
+++ b/views/createEventMagicLink.handlebars
@@ -23,7 +23,7 @@
     <input type="email" class="form-control" id="email" placeholder="Email address" required name="email">
     </div>
     <div class="form-group text-center">
-      <button type="submit" class="btn btn-primary w-50">Request magic link</button>
+      <button type="submit" class="button button--primary w-50">Request magic link</button>
     </div>
   </form>
 </main>
diff --git a/views/event.handlebars b/views/event.handlebars
index 3ccbc08..5f5f831 100755
--- a/views/event.handlebars
+++ b/views/event.handlebars
@@ -11,9 +11,9 @@
   </div>
   <div class="col-lg-3 ml-2 edit-buttons">
     {{#if editingEnabled}}
-      <button type="button" id="editEvent" class="btn btn-success" {{#if eventHasConcluded}}disabled{{/if}} data-event-id="{{eventData.id}}" data-toggle="modal" data-target="#editModal"><i class="fas fa-edit"></i> Edit event</button>
+      <button type="button" id="editEvent" class="button button--primary" {{#if eventHasConcluded}}disabled{{/if}} data-event-id="{{eventData.id}}" data-toggle="modal" data-target="#editModal"><i class="fas fa-edit"></i> Edit event</button>
     {{else}}
-      <button type="button" id="editEvent" class="btn btn-success" {{#if eventHasConcluded}}disabled{{/if}} data-event-id="{{eventData.id}}" data-toggle="modal" data-target="#editTokenModal"><i class="fas fa-edit"></i> Edit event</button>
+      <button type="button" id="editEvent" class="button button--primary" {{#if eventHasConcluded}}disabled{{/if}} data-event-id="{{eventData.id}}" data-toggle="modal" data-target="#editTokenModal"><i class="fas fa-edit"></i> Edit event</button>
     {{/if}}
   </div>
 </div>
@@ -75,7 +75,7 @@
             <i class="fas fa-fw fa-share-square"></i>
           </span>
           <a class="u-url" href="https://{{domain}}/{{eventData.id}}">https://{{domain}}/{{eventData.id}}</a>
-          <button type="button" id="copyEventLink" class="eventInformationAction btn btn-outline-secondary btn-sm" data-clipboard-text="https://{{domain}}/{{eventData.id}}">
+          <button type="button" id="copyEventLink" class="eventInformationAction button button--outline-secondary button--sm" data-clipboard-text="https://{{domain}}/{{eventData.id}}">
             <i class="fas fa-copy"></i> Copy
           </button>
         </li>
@@ -85,7 +85,7 @@
             <i class="fas fa-fw fa-share-square"></i>
           </span>
           @{{eventData.id}}@{{domain}}
-          <button type="button" id="copyAPLink" class="eventInformationAction btn btn-outline-secondary btn-sm" data-clipboard-text="@{{eventData.id}}@{{domain}}">
+          <button type="button" id="copyAPLink" class="eventInformationAction button button--outline-secondary button--sm" data-clipboard-text="@{{eventData.id}}@{{domain}}">
             <i class="fas fa-copy"></i> Copy
           </button>
         </li>
@@ -94,17 +94,17 @@
     </div> <!-- .card-body -->
   </div> <!-- .card#event__data -->
   <aside id="event__actions">
-    <div class="btn-group-vertical d-flex" role="group" aria-label="Event actions">
-      <a href="http://www.google.com/calendar/event?action=TEMPLATE&dates={{parsedStart}}%2F{{parsedEnd}}&text={{escapedName}}&location={{parsedLocation}}&ctz={{timezone}}" class="btn btn-outline-secondary btn-sm">
+    <div class="button-stack" role="group" aria-label="Event actions">
+      <a href="http://www.google.com/calendar/event?action=TEMPLATE&dates={{parsedStart}}%2F{{parsedEnd}}&text={{escapedName}}&location={{parsedLocation}}&ctz={{timezone}}" class="button button--outline-secondary button--sm">
         <i class="far fa-calendar-plus"></i> Add to Google Calendar
       </a>
-      <button type="button" id="exportICS" class="btn btn-outline-secondary btn-sm" data-event-id="{{eventData.id}}">
+      <button type="button" id="exportICS" class="button button--outline-secondary button--sm" data-event-id="{{eventData.id}}">
         <i class="fas fa-download"></i> Export as ICS
       </button>
-      <a target="_blank" href="http://maps.google.com/?q={{parsedLocation}}" class="btn btn-outline-secondary btn-sm">
+      <a target="_blank" href="http://maps.google.com/?q={{parsedLocation}}" class="button button--outline-secondary button--sm">
         <i class="fas fa-map-marked"></i> Show on Google Maps
       </a>
-      <a target="_blank" href="https://www.openstreetmap.org/search?query={{parsedLocation}}" class="btn btn-outline-secondary btn-sm">
+      <a target="_blank" href="https://www.openstreetmap.org/search?query={{parsedLocation}}" class="button button--outline-secondary button--sm">
         <i class="fas fa-map-marked"></i> Show on OpenStreetMap
       </a>
     </div>
@@ -136,11 +136,11 @@
 {{#if eventData.usersCanAttend}}
 <div class="card mb-4" id="eventAttendees">
   <h5 class="card-header">Attendees {{#if numberOfAttendees}}({{numberOfAttendees}}){{/if}}
-    <div class="btn-group" role="group" aria-label="Attendance controls">
+    <div class="button--group" role="group" aria-label="Attendance controls">
       {{#unless noMoreSpots}}
-        <button type="button" id="attendEvent" class="btn btn-success" data-event-id="{{eventData.id}}"><i class="fas fa-user-plus"></i> Add me</button>
+        <button type="button" id="attendEvent" class="button button--primary" data-event-id="{{eventData.id}}"><i class="fas fa-user-plus"></i> Add me</button>
       {{/unless}}
-      <button type="button" id="unattendEvent" class="btn btn-secondary" data-toggle="modal" data-target="#unattendModal"><i class="fas fa-user-times"></i> Remove me</button>
+      <button type="button" id="unattendEvent" class="button button--secondary" data-toggle="modal" data-target="#unattendModal"><i class="fas fa-user-times"></i> Remove me</button>
     </div>
   </h5>
   <div class="card-body text-center">
@@ -218,8 +218,8 @@
       </div>
     </div>
       <div class="modal-footer">
-        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
-        <button type="submit" class="btn btn-primary">Add myself</button>
+        <button type="button" class="button button--secondary" data-dismiss="modal">Close</button>
+        <button type="submit" class="button button--primary">Add myself</button>
       </div>
       </form>
     </div>
@@ -245,8 +245,8 @@
         </div>
       </div>
       <div class="modal-footer">
-        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
-        <button type="submit" class="btn btn-primary">Remove myself</button>
+        <button type="button" class="button button--secondary" data-dismiss="modal">Close</button>
+        <button type="submit" class="button button--primary">Remove myself</button>
       </div>
       </form>
     </div>
@@ -268,8 +268,8 @@
         <p>Are you sure you want to remove this attendee from the event? This action cannot be undone.</p>
           </div>
         <div class="modal-footer">
-          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
-          <button type="submit" class="btn btn-danger">Remove attendee</button>
+          <button type="button" class="button button--secondary" data-dismiss="modal">Close</button>
+          <button type="submit" class="button button--danger">Remove attendee</button>
         </div>
         </form>
       </div>
@@ -286,14 +286,14 @@
     <form id="commentForm" action="/post/comment/{{eventData.id}}/" method="post">
       <label for="commentAuthor">Name</label>
       <div class="form-group">
-        <input type="text" class="form-control" id="commentAuthor" name="commentAuthor" placeholder="Your name" data-validation="required length" data-validation-length="1-60">
+        <input type="text" class="form-control" id="commentAuthor" name="commentAuthor" placeholder="Your name" required>
       </div>
       <label for="commentContent">Comment</label>
       <div class="form-group">
-        <div class="input-group">
-          <textarea class="form-control" id="commentContent" name="commentContent" style="resize: none;" placeholder="What would you like to say?" data-validation="required length" data-validation-length="1-280"></textarea>
+        <div class="d-flex flex-gap">
+          <textarea class="form-control" id="commentContent" name="commentContent" style="resize: none;" placeholder="What would you like to say?" required></textarea>
           <div class="input-group-append">
-            <button type="submit" class="btn btn-primary btn-block h-100" id="postComment">Send <i class="fas fa-chevron-right"></i></button>
+            <button type="submit" class="button button--primary" id="postComment">Send <i class="fas fa-chevron-right"></i></button>
           </div>
         </div>
       </div>
@@ -322,12 +322,12 @@
               {{/if}}
             </div>
             <div class="col-lg-3 commentMetadata text-right">
-              <button type="button" class="btn btn-outline-primary btn-sm openReplyBox">
+              <button type="button" class="button button--outline button--sm openReplyBox">
                 <i class="fas fa-comment"></i> Reply
               </button>
               {{#if ../editingEnabled}}
                 <form class="d-inline" action="/deletecomment/{{../eventData.id}}/{{this._id}}/{{../eventData.editToken}}" method="post">
-                  <button type="submit" class="btn btn-outline-danger btn-sm deleteComment">
+                  <button type="submit" class="button button--outline button--sm deleteComment">
                     <i class="fas fa-trash"></i> Delete
                   </button>
                 </form>
@@ -338,13 +338,13 @@
             <div class="col-md">
               <form id="replyForm" action="/post/reply/{{../eventData.id}}/{{this._id}}" method="post">
                 <div class="form-group">
-                  <input type="text" class="form-control form-control-sm" id="replyAuthor" name="replyAuthor" placeholder="Your name" data-validation="required length" data-validation-length="1-60">
+                  <input type="text" class="form-control form-control-sm" id="replyAuthor" name="replyAuthor" placeholder="Your name" required>
                 </div>
                 <div class="form-group">
-                  <div class="input-group">
-                    <textarea class="form-control form-control-sm" id="replyContent" name="replyContent" style="resize: none;" placeholder="What would you like to reply?" data-validation="required length" data-validation-length="1-280"></textarea>
+                  <div class="d-flex flex-gap">
+                    <textarea class="form-control form-control-sm" id="replyContent" name="replyContent" style="resize: none;" placeholder="What would you like to reply?" required></textarea>
                     <div class="input-group-append">
-                      <button type="submit" class="btn btn-primary btn-block h-100 btn-sm" id="postReply">Reply <i class="fas fa-chevron-right"></i></button>
+                      <button type="submit" class="button button--primary button--sm" id="postReply">Reply <i class="fas fa-chevron-right"></i></button>
                     </div>
                   </div>
                 </div>
@@ -381,8 +381,8 @@
         </div>
       </div>
       <div class="modal-footer">
-        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
-        <button type="submit" class="btn btn-primary">Edit event</button>
+        <button type="button" class="button button--secondary" data-dismiss="modal">Close</button>
+        <button type="submit" class="button button--primary">Edit event</button>
       </div>
       </form>
     </div>
@@ -408,8 +408,8 @@
         <p>Are you sure you want to delete this event? This action cannot be undone.</p>
       </div>
       <div class="modal-footer">
-        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
-        <button type="submit" class="btn btn-danger">Delete event</button>
+        <button type="button" class="button button--secondary" data-dismiss="modal">Close</button>
+        <button type="submit" class="button button--danger">Delete event</button>
       </div>
       </form>
     </div>
diff --git a/views/eventgroup.handlebars b/views/eventgroup.handlebars
index 9fb2276..8fbedbc 100755
--- a/views/eventgroup.handlebars
+++ b/views/eventgroup.handlebars
@@ -10,9 +10,9 @@
   </div>
   <div class="col-lg-2 ml-2 edit-buttons">
     {{#if editingEnabled}}
-      <button type="button" id="editGroup" class="btn btn-success text-nowrap" data-event-id="{{eventGroupData.id}}" data-toggle="modal" data-target="#editModal"><i class="fas fa-edit"></i> Edit group</button>
+      <button type="button" id="editGroup" class="button button--primary text-nowrap" data-event-id="{{eventGroupData.id}}" data-toggle="modal" data-target="#editModal"><i class="fas fa-edit"></i> Edit group</button>
     {{else}}
-      <button type="button" id="editGroup" class="btn btn-success text-nowrap" data-event-id="{{eventGroupData.id}}" data-toggle="modal" data-target="#editTokenModal"><i class="fas fa-edit"></i> Edit group</button>
+      <button type="button" id="editGroup" class="button button--primary text-nowrap" data-event-id="{{eventGroupData.id}}" data-toggle="modal" data-target="#editTokenModal"><i class="fas fa-edit"></i> Edit group</button>
     {{/if}}
   </div>
 </div>
@@ -52,7 +52,7 @@
             <i class="fas fa-share-square"></i>
           </span>
           <a href="https://{{domain}}/group/{{eventGroupData.id}}">https://{{domain}}/group/{{eventGroupData.id}}</a>
-          <button type="button" id="copyEventLink" class="eventInformationAction btn btn-outline-secondary btn-sm" data-clipboard-text="https://{{domain}}/group/{{eventGroupData.id}}">
+          <button type="button" id="copyEventLink" class="eventInformationAction button button--outline-secondary button--sm" data-clipboard-text="https://{{domain}}/group/{{eventGroupData.id}}">
             <i class="fas fa-copy"></i> Copy
           </button>
         </li>
@@ -63,7 +63,7 @@
           <a
             href="https://{{domain}}/group/{{eventGroupData.id}}/feed.ics">https://{{domain}}/group/{{eventGroupData.id}}/feed.ics</a>&nbsp;
           <button type="button" id="copyFeedLink"
-            class="eventInformationAction btn btn-outline-secondary btn-sm"
+            class="eventInformationAction button button--outline-secondary button--sm"
             data-clipboard-text="https://{{domain}}/group/{{eventGroupData.id}}/feed.ics">
             <i class="fas fa-copy"></i> Copy
           </button>
@@ -74,14 +74,14 @@
     </div> <!-- /card -->
   </div>
   <aside id="event__actions">
-    <div class="btn-group-vertical d-flex" role="group" aria-label="Event group actions">
-      <button type="button" class="btn btn-outline-secondary btn-sm"
+    <div class="button-stack" role="group" aria-label="Event group actions">
+      <button type="button" class="button button--outline-secondary button--sm"
         data-event-id="{{eventGroupData.id}}" data-toggle="modal"
         data-target="#subscribeModal">
         <i class="fas fa-envelope"></i> Subscribe to updates
       </button>
-      <button type="button" id="exportICS" class="btn btn-outline-secondary
-        btn-sm" data-event-id="{{eventGroupData.id}}">
+      <button type="button" id="exportICS" class="button button--outline-secondary
+        button--sm" data-event-id="{{eventGroupData.id}}">
         <i class="fas fa-download"></i> Export as ICS
       </button>
     </div>
@@ -152,8 +152,8 @@
         <p>This will <strong>not</strong> delete the individual events contained in this group. They can be linked to another group later.</p>
       </div>
       <div class="modal-footer">
-        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
-        <button type="submit" class="btn btn-danger">Delete event group</button>
+        <button type="button" class="button button--secondary" data-dismiss="modal">Close</button>
+        <button type="submit" class="button button--danger">Delete event group</button>
       </div>
       </form>
     </div>
@@ -184,8 +184,8 @@
         </div>
       </div>
       <div class="modal-footer">
-        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
-        <button type="submit" class="btn btn-success">Subscribe</button>
+        <button type="button" class="button button--secondary" data-dismiss="modal">Close</button>
+        <button type="submit" class="button button--primary">Subscribe</button>
       </div>
       </form>
     </div>
@@ -214,8 +214,8 @@
         </div>
       </div>
       <div class="modal-footer">
-        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
-        <button type="submit" class="btn btn-primary">Edit group</button>
+        <button type="button" class="button button--secondary" data-dismiss="modal">Close</button>
+        <button type="submit" class="button button--primary">Edit group</button>
       </div>
       </form>
     </div>
diff --git a/views/home.handlebars b/views/home.handlebars
index 7b4608a..aa98823 100755
--- a/views/home.handlebars
+++ b/views/home.handlebars
@@ -1,19 +1,7 @@
 <main class="page">
-<p class="lead">Gathio is a simple, federated, privacy-first event hosting platform.</p>
+<p class="lead text-center">Gathio is a simple, federated, privacy-first event hosting platform.</p>
 
-<div class="card mb-3 border-primary">
-<div class="card-header">
-  This instance, <strong>{{siteName}}</strong>, has the following features:
-</div>
-
-<div class="card-body m-0 p-0">
-  <ul class="list-group list-group-flush">
-    {{#each instanceRules}}
-      <li class="list-group-item"><i class="{{this.icon}} fa-fw mr-2"></i> {{this.text}}</li>
-    {{/each}}
-  </ul>
-</div>
-</div>
+{{> instanceRules }}
 
 <div id="example-event" class="text-center w-100 mt-4 mb-5">
   <img alt ="An example event page for a picnic. The page shows the event's location, host, date and time, and description, as well as buttons to save the event to Google Calendar, export it, and open the location in OpenStreetMap and Google Maps." src="images/example-event-2023.png" class="img-fluid w-75 mx-auto shadow-lg rounded">
diff --git a/views/newevent.handlebars b/views/newevent.handlebars
index 9df69db..0bc7b05 100755
--- a/views/newevent.handlebars
+++ b/views/newevent.handlebars
@@ -1,14 +1,15 @@
 <main class="page">
-<div class="container mb-4">
+<h2 class="mb-3 text-center">What would you like to do?</h2>
+<div class="container-fluid mb-4">
   <div class="row">
-    <div class="col-sm-4 p-2">
-      <button type="button" id="showNewEventFormButton" class="btn btn-secondary w-100"><i class="fas fa-calendar-day"></i> Create a new event</button>
+    <div class="col-lg-4 p-2">
+      <button type="button" id="showNewEventFormButton" class="button button--secondary w-100"><i class="fas fa-calendar-day"></i> Create a new event</button>
     </div>
-    <div class="col-sm-4 p-2">
-      <button type="button" id="showImportEventFormButton" class="btn btn-secondary w-100"><i class="fas fa-file-import"></i> Import an existing event</button>
+    <div class="col-lg-4 p-2">
+      <button type="button" id="showImportEventFormButton" class="button button--secondary w-100"><i class="fas fa-file-import"></i> Import an existing event</button>
     </div>
-    <div class="col-sm-4 p-2">
-      <button type="button" id="showNewEventGroupFormButton" class="btn btn-secondary w-100"><i class="fas fa-calendar-alt"></i> Create a new event group </button>
+    <div class="col-lg-4 p-2">
+      <button type="button" id="showNewEventGroupFormButton" class="button button--secondary w-100"><i class="fas fa-calendar-alt"></i> Create a new event group </button>
     </div>
   </div>
 </div>
@@ -34,9 +35,9 @@
         <button
           id="newEventFormSubmit"
           type="submit"
-          class="btn btn-primary w-50"
+          class="button button--primary w-50"
           x-bind:disabled="submitting"
-          x-bind:class="submitting ? 'btn--loading' : ''"
+          x-bind:class="submitting ? 'button--loading' : ''"
           x-text="submitting ? 'Creating...' : 'Create'"
         ></button>
       </div>
@@ -58,9 +59,9 @@
       <div class="col-sm-12 pt-3 pb-3 text-center">
         <button
           type="submit"
-          class="btn btn-primary w-50"
+          class="button button--primary w-50"
           x-bind:disabled="submitting"
-          x-bind:class="submitting ? 'btn--loading' : ''"
+          x-bind:class="submitting ? 'button--loading' : ''"
           x-text="submitting ? 'Creating...' : 'Create'"
         ></button>
       </div>
diff --git a/views/partials/editeventgroupmodal.handlebars b/views/partials/editeventgroupmodal.handlebars
index 41e7f00..046d15e 100644
--- a/views/partials/editeventgroupmodal.handlebars
+++ b/views/partials/editeventgroupmodal.handlebars
@@ -16,20 +16,20 @@
             <div class="card border-danger mb-3">
               <div class="card-header text-danger">Delete this event group</div>
               <div class="card-body text-danger">
-                <button type="button" id="deleteEvent" class="btn btn-danger" data-toggle="modal" data-target="#deleteModal"><i class="fas fa-trash"></i> Delete event group</button>
+                <button type="button" id="deleteEvent" class="button button--danger" data-toggle="modal" data-target="#deleteModal"><i class="fas fa-trash"></i> Delete event group</button>
               </div>
             </div>
           </div>
         </form>
       </div>
       <div class="modal-footer">
-        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+        <button type="button" class="button button--secondary" data-dismiss="modal">Close</button>
         <button
           type="submit"
-          class="btn btn-primary"
+          class="button button--primary"
           @click="submitForm"
           x-bind:disabled="submitting"
-          x-bind:class="submitting ? 'btn--loading' : ''"
+          x-bind:class="submitting ? 'button--loading' : ''"
           x-text="submitting ? 'Saving...' : 'Save'"
         ></button>
       </div>
diff --git a/views/partials/editeventmodal.handlebars b/views/partials/editeventmodal.handlebars
index 528dc1e..986da9c 100644
--- a/views/partials/editeventmodal.handlebars
+++ b/views/partials/editeventmodal.handlebars
@@ -21,7 +21,7 @@
             <div class="card border-danger mb-3">
               <div class="card-header text-danger">Delete this event</div>
               <div class="card-body text-danger">
-                <button type="button" id="deleteEvent" class="btn btn-danger" data-toggle="modal"
+                <button type="button" id="deleteEvent" class="button button--danger" data-toggle="modal"
                   data-target="#deleteModal" data-event-id="{{eventData.id}}"><i class="fas fa-trash"></i>
                   Delete</button>
               </div>
@@ -30,13 +30,13 @@
         </form>
       </div>
       <div class="modal-footer">
-        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+        <button type="button" class="button button--secondary" data-dismiss="modal">Close</button>
         <button
           type="submit"
-          class="btn btn-primary"
+          class="button button--primary"
           @click="submitForm"
           x-bind:disabled="submitting"
-          x-bind:class="submitting ? 'btn--loading' : ''"
+          x-bind:class="submitting ? 'button--loading' : ''"
           x-text="submitting ? 'Saving...' : 'Save'"
         ></button>
       </div>
diff --git a/views/partials/eventForm.handlebars b/views/partials/eventForm.handlebars
index 9227300..161f44b 100755
--- a/views/partials/eventForm.handlebars
+++ b/views/partials/eventForm.handlebars
@@ -52,7 +52,7 @@
     <small class="form-text">Recommended dimensions (w x h): 920px by 300px.</small>
     {{#if eventData.image}}
       <div class="form-group my-2">
-        <button type="button" class="btn btn-danger" id="deleteImage">Delete image</button>
+        <button type="button" class="button button--danger" id="deleteImage">Delete image</button>
       </div>
     {{/if}}
   </div>
@@ -109,7 +109,7 @@
             </template> 
           </select>
         </div>
-        <button type="button" class="btn btn-outline-secondary w-100 text-center" x-on:click="manualGroupInputVisible = !manualGroupInputVisible">
+        <button type="button" class="button button--outline-primary w-100 text-center" x-on:click="manualGroupInputVisible = !manualGroupInputVisible">
           Enter group details manually <i class="fas" :class="{'fa-caret-down': !manualGroupInputVisible, 'fa-caret-up': manualGroupInputVisible}"></i>
         </button>
         <div
diff --git a/views/partials/importeventform.handlebars b/views/partials/importeventform.handlebars
index ac3c673..a8c0f0e 100644
--- a/views/partials/importeventform.handlebars
+++ b/views/partials/importeventform.handlebars
@@ -40,9 +40,9 @@
   </div>
   <button
     type="submit"
-    class="d-block mt-3 mx-auto btn btn-primary w-50 mb-4"
+    class="d-block mx-auto button button--primary w-50"
     x-bind:disabled="submitting"
-    x-bind:class="submitting ? 'btn--loading' : ''"
+    x-bind:class="submitting ? 'button--loading' : ''"
     x-text="submitting ? 'Importing...' : 'Import'"
   ></button>
 </form>
diff --git a/views/partials/instanceRules.handlebars b/views/partials/instanceRules.handlebars
new file mode 100644
index 0000000..c7fa9be
--- /dev/null
+++ b/views/partials/instanceRules.handlebars
@@ -0,0 +1,11 @@
+<div class="card mb-4">
+    <div class="card-header">
+        <h6 class="mb-1">Instance settings</h6>
+    </div>
+
+    <ul class="list-group list-group-flush">
+        {{#each instanceRules}}
+        <li class="list-group-item"><i class="{{this.icon}} fa-fw mr-2"></i> {{this.text}}</li>
+        {{/each}}
+    </ul>
+</div>
\ No newline at end of file
diff --git a/views/partials/sidebar.handlebars b/views/partials/sidebar.handlebars
index 6aa13b3..43ff8c2 100755
--- a/views/partials/sidebar.handlebars
+++ b/views/partials/sidebar.handlebars
@@ -2,7 +2,7 @@
     <h1><a href="/">gathio</a></h1>
 
     <ul id="sidebar__nav">
-        <li><a class="btn btn-success" href="/new"><i class="far fa-calendar-plus"></i> New</a></li>
+        <li><a class="button button--primary" href="/new"><i class="far fa-calendar-plus"></i> New</a></li>
         {{#if showPublicEventList}}
             <li><a href="/events">View events</a></li>
             <li><a href="/about">About</a></li>
diff --git a/views/publicEventList.handlebars b/views/publicEventList.handlebars
index 1dbeffc..8dccaaa 100644
--- a/views/publicEventList.handlebars
+++ b/views/publicEventList.handlebars
@@ -1,12 +1,21 @@
 <main class="page" x-data="{currentTab: 'events'}">
-<h2 class="mb-4">{{siteName}}</h2>
-<p><strong>{{siteName}}</strong> runs on <a href="/about">Gathio</a> — a simple, federated, privacy-first event hosting platform.</p>
-<ul class="nav nav-pills">
-  <li class="nav-item">
-    <a id="eventsTab" class="nav-link" x-bind:class="currentTab === 'events' && 'active'" aria-current="page" href="#" x-on:click.prevent="currentTab = 'events'">Events</a>
+
+<h2 class="mb-3 pb-2 text-center border-bottom">{{siteName}}</h2>
+
+{{#if instanceDescription}}
+    <div class="instance-description mb-4">
+        {{{instanceDescription}}}
+    </div>
+{{/if}}
+
+{{> instanceRules }}
+
+<ul class="nav d-flex flex-gap--small">
+  <li>
+    <a id="eventsTab" class="button button--lg" x-bind:class="currentTab === 'events' ? 'button--primary' : 'button--secondary'" aria-current="page" href="#" x-on:click.prevent="currentTab = 'events'">Events</a>
   </li>
-  <li class="nav-item">
-    <a id="groupsTab" class="nav-link" x-bind:class="currentTab === 'groups' && 'active'" href="#" x-on:click.prevent="currentTab = 'groups'">Groups</a>
+  <li>
+    <a id="groupsTab" class="button button--lg" x-bind:class="currentTab === 'groups' ? 'button--primary' : 'button--secondary'" href="#" x-on:click.prevent="currentTab = 'groups'">Groups</a>
   </li>
 </ul>
 
-- 
cgit v1.2.3


From 42fea055924bfa55991720f2f6b01ec111985200 Mon Sep 17 00:00:00 2001
From: Raphael Kabo <raphaelkabo@hey.com>
Date: Fri, 29 Mar 2024 11:19:58 +0000
Subject: Use Alpine.js on new event page

---
 views/newevent.handlebars | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

(limited to 'views')

diff --git a/views/newevent.handlebars b/views/newevent.handlebars
index 0bc7b05..932479b 100755
--- a/views/newevent.handlebars
+++ b/views/newevent.handlebars
@@ -1,15 +1,15 @@
-<main class="page">
-<h2 class="mb-3 text-center">What would you like to do?</h2>
+<main class="page" x-data="{currentTab: null}">
+<h2 class="mb-3 pb-2 text-center border-bottom">What would you like to do?</h2>
 <div class="container-fluid mb-4">
   <div class="row">
     <div class="col-lg-4 p-2">
-      <button type="button" id="showNewEventFormButton" class="button button--secondary w-100"><i class="fas fa-calendar-day"></i> Create a new event</button>
+      <button type="button" id="showNewEventFormButton" class="button w-100" x-bind:class="currentTab === 'event' ? 'button--primary' : 'button--secondary'" x-on:click="currentTab = 'event'"><i class="fas fa-calendar-day"></i> Create a new event</button>
     </div>
     <div class="col-lg-4 p-2">
-      <button type="button" id="showImportEventFormButton" class="button button--secondary w-100"><i class="fas fa-file-import"></i> Import an existing event</button>
+      <button type="button" id="showImportEventFormButton" class="button w-100" x-bind:class="currentTab === 'importEvent' ? 'button--primary' : 'button--secondary'" x-on:click="currentTab = 'importEvent'"><i class="fas fa-file-import"></i> Import an existing event</button>
     </div>
     <div class="col-lg-4 p-2">
-      <button type="button" id="showNewEventGroupFormButton" class="button button--secondary w-100"><i class="fas fa-calendar-alt"></i> Create a new event group </button>
+      <button type="button" id="showNewEventGroupFormButton" class="button w-100" x-bind:class="currentTab === 'group' ? 'button--primary' : 'button--secondary'" x-on:click="currentTab = 'group'"><i class="fas fa-calendar-alt"></i> Create a new event group </button>
     </div>
   </div>
 </div>
@@ -18,7 +18,7 @@
   <i class="fas fa-exclamation-circle"></i> Events are visible to anyone who knows the link.
 </div>
 
-<div id="newEventFormContainer">
+<div id="newEventFormContainer" x-show="currentTab === 'event'">
   <h4 class="mb-2">Create an event</h4>
   <form
     id="newEventForm"
@@ -45,11 +45,11 @@
   </form>
 </div>
 
-<div id="importEventFormContainer">
+<div id="importEventFormContainer" x-show="currentTab === 'importEvent'">
   {{>importeventform}}
 </div>
 
-<div id="newEventGroupFormContainer">
+<div id="newEventGroupFormContainer" x-show="currentTab === 'group'">
   <h4 class="mb-2">Create an event group</h4>
   <p class="text-muted">An event group is a holding area for a set of linked events, like a recurring game night, a festival, or a band tour. You can share a public link to your event group just like an individual event link, and people who know the secret editing code will be able to add future events to the group.</p>
   <p class="text-muted">Event groups do not get automatically removed like events do, but events which have been removed from {{siteName}} will of course not show up in an event group.</p>
-- 
cgit v1.2.3


From 0f6c06d3b37dbc277b211521a062223d96c540d0 Mon Sep 17 00:00:00 2001
From: Raphael Kabo <raphaelkabo@hey.com>
Date: Fri, 29 Mar 2024 11:20:49 +0000
Subject: Refactor instance description

---
 views/home.handlebars | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

(limited to 'views')

diff --git a/views/home.handlebars b/views/home.handlebars
index aa98823..0d294d3 100755
--- a/views/home.handlebars
+++ b/views/home.handlebars
@@ -1,8 +1,18 @@
 <main class="page">
-<p class="lead text-center">Gathio is a simple, federated, privacy-first event hosting platform.</p>
+<h2 class="mb-3 pb-2 text-center border-bottom">About {{siteName}}</h2>
+
+{{#if instanceDescription}}
+    <div class="instance-description mb-4">
+        {{{instanceDescription}}}
+    </div>
+{{/if}}
 
 {{> instanceRules }}
 
+<h2 class="mb-3 mt-5 pb-2 text-center border-bottom">About Gathio</h2>
+
+<p class="lead text-center">Gathio is a simple, federated, privacy-first event hosting platform.</p>
+
 <div id="example-event" class="text-center w-100 mt-4 mb-5">
   <img alt ="An example event page for a picnic. The page shows the event's location, host, date and time, and description, as well as buttons to save the event to Google Calendar, export it, and open the location in OpenStreetMap and Google Maps." src="images/example-event-2023.png" class="img-fluid w-75 mx-auto shadow-lg rounded">
 </div>
-- 
cgit v1.2.3


From 36bf3611026db0722e94050495fbf17f33479b61 Mon Sep 17 00:00:00 2001
From: Raphael Kabo <raphaelkabo@hey.com>
Date: Sun, 26 May 2024 17:01:44 +0100
Subject: De-emphasise editing buttons in public pages

---
 views/event.handlebars            | 6 ++++--
 views/partials/sidebar.handlebars | 2 +-
 2 files changed, 5 insertions(+), 3 deletions(-)

(limited to 'views')

diff --git a/views/event.handlebars b/views/event.handlebars
index 5f5f831..cd1645a 100755
--- a/views/event.handlebars
+++ b/views/event.handlebars
@@ -12,8 +12,6 @@
   <div class="col-lg-3 ml-2 edit-buttons">
     {{#if editingEnabled}}
       <button type="button" id="editEvent" class="button button--primary" {{#if eventHasConcluded}}disabled{{/if}} data-event-id="{{eventData.id}}" data-toggle="modal" data-target="#editModal"><i class="fas fa-edit"></i> Edit event</button>
-    {{else}}
-      <button type="button" id="editEvent" class="button button--primary" {{#if eventHasConcluded}}disabled{{/if}} data-event-id="{{eventData.id}}" data-toggle="modal" data-target="#editTokenModal"><i class="fas fa-edit"></i> Edit event</button>
     {{/if}}
   </div>
 </div>
@@ -108,6 +106,10 @@
         <i class="fas fa-map-marked"></i> Show on OpenStreetMap
       </a>
     </div>
+
+    {{#unless editingEnabled}}
+        <button type="button" id="editEvent" class="button button--outline-secondary button--sm" {{#if eventHasConcluded}}disabled{{/if}} data-event-id="{{eventData.id}}" data-toggle="modal" data-target="#editTokenModal"><i class="fas fa-edit"></i> Switch to editing mode</button>
+    {{/unless}}
   </aside> <!-- #event__actions -->
 </div>
 
diff --git a/views/partials/sidebar.handlebars b/views/partials/sidebar.handlebars
index 43ff8c2..c1184be 100755
--- a/views/partials/sidebar.handlebars
+++ b/views/partials/sidebar.handlebars
@@ -2,7 +2,7 @@
     <h1><a href="/">gathio</a></h1>
 
     <ul id="sidebar__nav">
-        <li><a class="button button--primary" href="/new"><i class="far fa-calendar-plus"></i> New</a></li>
+        <li><a class="button button--primary" href="/new"><i class="far fa-calendar-plus"></i> Create an event</a></li>
         {{#if showPublicEventList}}
             <li><a href="/events">View events</a></li>
             <li><a href="/about">About</a></li>
-- 
cgit v1.2.3


From e5a2f1ae6f6c1341e02d2f24a14f8f374a2e61a8 Mon Sep 17 00:00:00 2001
From: Raphael Kabo <raphaelkabo@hey.com>
Date: Sun, 26 May 2024 17:01:58 +0100
Subject: Fix Alpine.js tabs on new event pages

---
 views/newevent.handlebars | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

(limited to 'views')

diff --git a/views/newevent.handlebars b/views/newevent.handlebars
index 932479b..d6d7024 100755
--- a/views/newevent.handlebars
+++ b/views/newevent.handlebars
@@ -18,7 +18,7 @@
   <i class="fas fa-exclamation-circle"></i> Events are visible to anyone who knows the link.
 </div>
 
-<div id="newEventFormContainer" x-show="currentTab === 'event'">
+<div id="newEventFormContainer" x-show="currentTab === 'event'" style="display: none">
   <h4 class="mb-2">Create an event</h4>
   <form
     id="newEventForm"
@@ -45,11 +45,11 @@
   </form>
 </div>
 
-<div id="importEventFormContainer" x-show="currentTab === 'importEvent'">
+<div id="importEventFormContainer" x-show="currentTab === 'importEvent'" style="display: none">
   {{>importeventform}}
 </div>
 
-<div id="newEventGroupFormContainer" x-show="currentTab === 'group'">
+<div id="newEventGroupFormContainer" x-show="currentTab === 'group'" style="display: none">
   <h4 class="mb-2">Create an event group</h4>
   <p class="text-muted">An event group is a holding area for a set of linked events, like a recurring game night, a festival, or a band tour. You can share a public link to your event group just like an individual event link, and people who know the secret editing code will be able to add future events to the group.</p>
   <p class="text-muted">Event groups do not get automatically removed like events do, but events which have been removed from {{siteName}} will of course not show up in an event group.</p>
@@ -73,4 +73,4 @@
 
 <script src="/js/generate-timezones.js"></script>
 <script src="/js/modules/new.js"></script>
-<script src="/js/modules/group-linker.js"></script>
\ No newline at end of file
+<script src="/js/modules/group-linker.js"></script>
-- 
cgit v1.2.3