events/models.py

@@ -409,6 +409,18 @@ class RSVP(TimestampedModel):
 
         return new_page
 
+    @property
+    def has_previous_page(self) -> bool:
+        return self.page not in (self.Page.EMAIL)
+
+    @property
+    def has_next_page(self) -> bool:
+        return self.page not in (self.Page.NOTES, self.Page.COMPLETED)
+
+    @property
+    def is_finished(self) -> bool:
+        return self.status in (self.Status.YES_JOINING)
+
     def is_page_finished(self, page: Page) -> bool:
         """return `True` if page is previous to the furthest reached page"""
         return is_previous_page(page, self.Page(self.furthest_page))

events/static/css/styles.css

@@ -326,4 +326,15 @@ button {
 
 .hidden {
     display: none;
+}
+
+.sticky-button-row {
+    position: sticky;
+    bottom: 0;
+}
+
+.sticky-button-row .button {
+    box-shadow: 0px 0px 30px 2px rgba(0,0,0,0.49);
+    -webkit-box-shadow: 0px 0px 30px 2px rgba(0,0,0,0.49);
+    -moz-box-shadow: 0px 0px 30px 2px rgba(0,0,0,0.49);
 }

events/templates/rsvp/rsvp.html

@@ -24,26 +24,8 @@
      hx-trigger="load">
 </div>
 
-<div class="button-row">
+<div id="rsvp-buttons">
 
-   <a class="button bg-orange hover"
-      hx-get="{% url 'events:rsvp-page-change' rsvp.id "previous" %}"
-      hx-target="#rsvp-flow"
-   >Previous</a>
-
-   <a class="button bg-blue hover"
-      hx-get="{% url 'events:rsvp-page-change' rsvp.id "next" %}"
-      hx-target="#rsvp-flow"
-   >Next</a>
-
-   <div class="button-row-right">
-
-      <a class="button bg-red hover"
-         href="{% url 'events:rsvp-decline' rsvp.id %}" >Not coming</a>
-
-      <a class="button bg-green hover"
-         href="{% url 'events:event' event.slug %}" >Back to event</a>
-   </div>
 </div>
 
 {% endif %}

events/templates/rsvp/rsvp_buttons.html

@@ -0,0 +1,25 @@
+<div id="rsvp-buttons" class="sticky-button-row button-row" hx-swap-oob="true">
+
+    {% if rsvp.has_previous_page %}
+   <a class="button bg-orange hover"
+      hx-get="{% url 'events:rsvp-page-change' rsvp.id "previous" %}"
+      hx-target="#rsvp-flow"
+   >Previous</a>
+   {% endif %}
+
+   <a class="button {% if rsvp.has_next_page %}bg-blue{% else %}bg-green{% endif %} hover"
+      hx-get="{% url 'events:rsvp-page-change' rsvp.id "next" %}"
+      hx-target="#rsvp-flow"
+   >{% if rsvp.has_next_page %}Next{% else %}Finish{% endif %}</a>
+
+   <div class="button-row-right">
+
+      <a class="button bg-red hover"
+         href="{% url 'events:rsvp-decline' rsvp.id %}" >Not coming</a>
+
+      {% if rsvp.has_next_page %}
+      <a class="button bg-green hover"
+         href="{% url 'events:event' event.slug %}" {% if not rsvp.is_finished %}onclick="return confirm('You have not finished, are you sure?');"{% endif %}>Back to event</a>
+      {% endif %}
+   </div>
+</div>

events/templates/rsvp/rsvp_pages.html

@@ -6,4 +6,6 @@
 
 {{ page_questions }}
 
-{{ page_notes }}
+{{ page_notes }}
+
+{{ buttons }}

events/views/rsvp.py

@@ -131,6 +131,7 @@ def rsvp_pages(request, rid: str, page: str, error: str = ""):
         "page_activities": _render_page_activities(request, context, page),
         "page_questions": _render_page_questions(request, context, page),
         "page_notes": _render_page_notes(request, context, page),
+        "buttons": _render_buttons(request, context, page),
     }
 
     response = render(request, "rsvp/rsvp_pages.html", rendercontent)
@@ -320,6 +321,14 @@ def _render_page(
     return True, template.render(context=context, request=request)
 
 
+def _render_buttons(request, context, page) -> str:
+
+    add_to_context(context, "page", page)
+
+    template = get_template("rsvp/rsvp_buttons.html")
+    return template.render(context=context, request=request)
+
+
 # Change the page of the request
 def page_change(request, rid: str, page: str):
     logger.debug("page_change: id=%s, page=%s", rid, page)