From ab0013aa1ecc4a3e5813f2ac08ffa14a61d799e1 Mon Sep 17 00:00:00 2001
From: Chris Lawton <31627284+chris-lawton@users.noreply.github.com>
Date: Mon, 11 Nov 2019 09:41:34 +0000
Subject: [PATCH] add submit and save report confirmation modals (#1678)
---
.../application_projects/report_form.html | 35 +++++++++++++++++--
1 file changed, 33 insertions(+), 2 deletions(-)
diff --git a/opentech/apply/projects/templates/application_projects/report_form.html b/opentech/apply/projects/templates/application_projects/report_form.html
index 5ba50eeae..d161b86d5 100644
--- a/opentech/apply/projects/templates/application_projects/report_form.html
+++ b/opentech/apply/projects/templates/application_projects/report_form.html
@@ -1,6 +1,11 @@
{% extends "base-apply.html" %}
{% load static %}
+{% block extra_css %}
+{{ block.super }}
+<link rel="stylesheet" href="{% static 'css/apply/fancybox.css' %}">
+{% endblock %}
+
{% block title %}Edit Report | {{ object.project.title }}{% endblock %}
{% block content %}
<div class="admin-bar">
@@ -34,13 +39,39 @@
{{ field }}
{% endif %}
{% endfor %}
- <input class="button button--submit button--top-space button--white" type="submit" name="save" value="Save" />
- <input class="button button--submit button--top-space button--primary" type="submit" name="submit" value="Submit" />
+
+ <input type="submit" id="submit-report-form" class="is-hidden" />
+ <input data-fancybox data-src="#save-report" class="button button--submit button--top-space button--white" type="button" value="Save" />
+ <input data-fancybox data-src="#submit-report" class="button button--primary" type="button" value="Submit" />
+
+ <!-- Save report modal -->
+ <div class="modal" id="save-report">
+ <h4 class="modal__header-bar">Save report</h4>
+ <div class="modal__copy">
+ <p>Saving a draft means this report will be visible to you and staff from your project page.</p>
+ </div>
+ <div class="modal__buttons">
+ <button data-fancybox-close class="button button--submit button--white">Cancel</button>
+ <label class="button button--submit button--top-space button--primary" for="submit-report-form" tabindex="0">Save</label>
+ </div>
+ </div>
+
+ <!-- Submit report modal -->
+ <div class="modal" id="submit-report">
+ <h4 class="modal__header-bar">Submit report</h4>
+ <p>Are you sure you want to submit your report?</p>
+ <div class="modal__buttons">
+ <button data-fancybox-close class="button button--submit button--white">Cancel</button>
+ <label class="button button--submit button--top-space button--primary" for="submit-report-form" tabindex="0">Submit</label>
+ </div>
+ </div>
</form>
</div>
</div>
{% endblock %}
{% block extra_js %}
+<script src="//cdnjs.cloudflare.com/ajax/libs/fancybox/3.4.1/jquery.fancybox.min.js"></script>
<script src="{% static 'js/apply/list-input-files.js' %}"></script>
+<script src="{% static 'js/apply/fancybox-global.js' %}"></script>
{% endblock %}
--
GitLab