diff --git a/gms/memberdb/static/memberdb.css b/gms/memberdb/static/memberdb.css
index 8cc358527bc311f8fd9bf06254a70d4d6f81ce8d..74752c0452c888d7de41dae8c9f5102bac1806e1 100644
--- a/gms/memberdb/static/memberdb.css
+++ b/gms/memberdb/static/memberdb.css
@@ -15,16 +15,11 @@ html {
}
.form-container {
- background-color: #ffe;
- border: 2px solid #8fc;
- border-radius: 5px;
- padding: 20px;
- margin: 20px;
+ margin: 20px 0;
}
-.form-header {
+.text-center, .form-header {
text-align: center;
- /*padding: 10px 10px 20px 10px;*/
}
.form-header .tips {
@@ -89,7 +84,7 @@ fieldset {
}
.help {
- margin: 0 40px;
+ margin: 8px 8px 0 8px;
}
.help a {
@@ -107,7 +102,7 @@ ul.errorlist {
nav {
background-color: #333;
- height: 60px;
+ overflow: auto; /* make navbar expand in case the tab buttons flow to a second row */
}
.navtab {
@@ -118,9 +113,12 @@ nav {
font-size: 22px;
font-variant-caps: all-petite-caps;
font-weight: 400;
- line-height: 40px;
- padding: 10px 20px;
- border-left: 1.5px solid #555;
+ line-height: 26px;
+ padding: 17px 20px; /* line-height and padding adds up to minimum 60px element height */
+ border-style: solid;
+ border-color: #555;
+ border-width: 0 1px 0 1px;
+ margin-right: -1px;
background-color: #3c3c3c;
}
@@ -131,4 +129,4 @@ nav {
.navtab:last-child {
border-right: 1.5px solid #555;
-}
\ No newline at end of file
+}
diff --git a/gms/memberdb/static/shared.css b/gms/memberdb/static/shared.css
index 38baf50bb680d7e97606289144ee1e42ee4bafa5..5868b79900cd6252d97d3839b79729d5cc5fa1fc 100644
--- a/gms/memberdb/static/shared.css
+++ b/gms/memberdb/static/shared.css
@@ -58,6 +58,11 @@ body {
color: #333;
}
+/* make div expand to contain float children */
+.float-container {
+ overflow: auto;
+ display: inline-block;
+}
diff --git a/gms/memberdb/templates/base.html b/gms/memberdb/templates/base.html
index c88c5a0dca27fa474978fe2bb9ac51b2bf9499a0..5235fd7ed52521382fbcecc91f39aba6da035af3 100644
--- a/gms/memberdb/templates/base.html
+++ b/gms/memberdb/templates/base.html
@@ -45,13 +45,14 @@
{% block header %}{% endblock %}
- {% block messages %}{% if messages %}
- <ul class="messagelist">{% for message in messages %}
- <li{% if message.tags %} class="{{ message.tags }}"{% endif %}>{{ message|capfirst }}</li>
- {% endfor %}</ul>
- {% endif %}{% endblock messages %}
</div>
{% endblock %}<!-- END Header -->
+ {% block breadcrumbs %}{% endblock %}
+ {% block messages %}{% if messages %}
+ <ul class="messagelist">{% for message in messages %}
+ <li{% if message.tags %} class="{{ message.tags }}"{% endif %}>{{ message|capfirst }}</li>
+ {% endfor %}</ul>
+ {% endif %}{% endblock messages %}
<!-- Content -->
<div id="content">
diff --git a/gms/squarepay/static/squarepay.css b/gms/squarepay/static/squarepay.css
index f84f01fa02f65cf6c8b9f1a4f6f365d0fb43a26f..91776e920b9cb75bf8848afdb097b613b29b2c02 100644
--- a/gms/squarepay/static/squarepay.css
+++ b/gms/squarepay/static/squarepay.css
@@ -117,14 +117,17 @@ div#sq-expiration-date, div#sq-card-number, div#sq-cvv {
background-color: #4281CB;
}
-#form-container {
- position: relative;
+.payment-info {
+ float: left;
width: 380px;
margin: 20px auto;
box-sizing: content-box;
border: 2px solid #eee;
background-color: white;
- padding: 16px ;
+ padding: 16px;
+ margin: 10px;
+ text-align: left;
+ height: 100%;
}
.form-row {
diff --git a/gms/squarepay/templates/done.html b/gms/squarepay/templates/done.html
new file mode 100644
index 0000000000000000000000000000000000000000..23c3a6e80e63517b28a75486c01180ad0e4b1091
--- /dev/null
+++ b/gms/squarepay/templates/done.html
@@ -0,0 +1,37 @@
+{% extends "base.html" %}
+{% load static %}
+
+{% block title %}UCC Payment Gateway{% endblock %}
+
+{% block extrahead %}
+<!-- link to the SqPaymentForm library -->
+<script type="text/javascript" src="https://js.squareup.com/v2/paymentform"></script>
+
+{# bring the location IDs into javascript so the next bits know about them #}
+<script type="text/javascript">
+var applicationId = "{{ app_id }}";
+var locationId = "{{ loc_id }}";
+var amount = {{ payment.amount }};
+</script>
+
+<script type="text/javascript" src="{% static 'squarepay.js' %}"></script>
+<link rel="stylesheet" type="text/css" href="{% static 'squarepay.css' %}">
+{% endblock %}
+
+
+{% block content_title %}<h1>Checkout</h1>{% endblock %}
+{% block content %}
+<div class="form-container text-center">
+ <div class="form-header">
+ <span class="tips">{% block tips %}<b></b>{% endblock %}</span>
+ {% if payment.is_paid %}<span class="tips">
+ <p><b>It appears you have already successfully attempted this payment.</b><br><br>
+ Note that you will not be charged twice if even you submit again.</p>
+ </span>{% endif %}
+ <noscript>
+ <span class="tips error">Please enable javascript to use the payment form.</span>
+ </noscript>
+ </div>
+</div>
+</div>
+{% endblock %}
diff --git a/gms/squarepay/templates/payment_form.html b/gms/squarepay/templates/payment_form.html
index 51751cf7f3ec5607b0f6d0446d23479648e3ad30..bd2f08bb66ff362ff02742d8ed6f848bd45ce971 100644
--- a/gms/squarepay/templates/payment_form.html
+++ b/gms/squarepay/templates/payment_form.html
@@ -19,59 +19,69 @@ var amount = {{ payment.amount }};
{% endblock %}
-{% block content_title %}<h1>Pay with card</h1>{% endblock %}
+{% block content_title %}<h1>Checkout</h1>{% endblock %}
{% block content %}
-<div class="form-container">
-<div class="form-header">
- <span class="tips">{% block tips %}<b><i>Please fill in your card details below.</i></b>{% endblock %}</span>
- {% if payment.is_paid %}<span class="tips">
- <p><b>It appears you have already successfully attempted this payment.</b><br><br>
- Note that you will not be charged twice if even you submit again.</p>
- </span>{% endif %}
- <noscript>
- <span class="tips error">Please enable javascript to use the payment form.</span>
- </noscript>
-</div>
-<!-- the element #form-container is used to create the Square payment form (hardcoded) -->
-<div id="form-container">
-
- <div id="sq-ccbox">
- <!--
- Be sure to replace the action attribute of the form with the path of
- the Transaction API charge endpoint URL you want to POST the nonce to
- (for example, "/process-card")
- -->
- <form id="nonce-form" novalidate action="#" method="post">
- {% csrf_token %}
- <div id="error"></div>
+<div class="form-container text-center">
+ <div class="form-header">
+ <span class="tips {% if payment.is_paid %}error{% endif %}">{% block tips %}
+ {% if payment.is_paid %}
+ <p><b>It appears you have already successfully attempted this payment.</b>
+ {% if payment.completed_url %}
+ <br><br>Perhaps you were meaning to find <a href="{{ payment.completed_url }}">this page</a>.
+ {% endif %}</p>
+ {% else %}
+ <b><i>Please fill in your card details below.</i></b>
+ {% endif %}
+ {% endblock %}</span>
- <fieldset>
- <div class="form-row">
- <span class="label">Card Number</span>
- <div id="sq-card-number"></div>
+ <noscript>
+ <span class="tips error">Please enable javascript to use the payment form.</span>
+ </noscript>
+ </div>
+ <div class="float-container">
+ <div class="payment-info">
+ <div class="form-row readonly">
+ <label for="id_desc">Item:</label>
+ <span class="text" id="id_desc">{{ object.description }}</span>
+ </div>
+ <div class="form-row readonly">
+ <label for="id_amount">Amount:</label>
+ <span class="text" id="id_amount">{{ amount }}</span>
</div>
+ </div>
+ <!-- the element #form-container is used to create the Square payment form (hardcoded) -->
+ <div id="form-container" class="payment-info">
+ <div id="sq-ccbox">
+ <form id="nonce-form" novalidate action="#" method="post">
+ {% csrf_token %}
+ <div id="error"></div>
- <div class="form-row">
- <div class="half">
- <span class="label">Expiration</span>
- <div id="sq-expiration-date"></div>
- </div>
+ <fieldset>
+ <div class="form-row">
+ <span class="label">Card Number</span>
+ <div id="sq-card-number"></div>
+ </div>
- <div class="half">
- <span class="label">CVV</span>
- <div id="sq-cvv"></div>
- </div>
- </div>
- </fieldset>
- <button id="sq-creditcard" class="button-credit-card" onclick="requestCardNonce(event)" disabled>Pay with card</button>
+ <div class="form-row">
+ <div class="half">
+ <span class="label">Expiration</span>
+ <div id="sq-expiration-date"></div>
+ </div>
+
+ <div class="half">
+ <span class="label">CVV</span>
+ <div id="sq-cvv"></div>
+ </div>
+ </div>
+ </fieldset>
+ <button id="sq-creditcard" class="button-credit-card" onclick="requestCardNonce(event)" disabled>Pay {{ amount }}</button>
- <!--
- After a nonce is generated it will be assigned to this hidden input field.
- -->
- <input type="hidden" id="card-nonce" name="nonce">
- </form>
- </div> <!-- end #sq-ccbox -->
-</div> <!-- end #form-container -->
+ <!-- after a nonce is generated it will be assigned to this hidden input field -->
+ <input type="hidden" id="card-nonce" name="nonce">
+ </form>
+ </div> <!-- end #sq-ccbox -->
+ </div> <!-- end #form-container -->
+ </div>
</div>
</div>
-{% endblock %}
\ No newline at end of file
+{% endblock %}
diff --git a/gms/templates/admin/base_site.html b/gms/templates/admin/base_site.html
index 9633f2146956b7a1a0474e4c50b4eb4af12e9e31..6440df7380fbd19c5ef1aaf7d03b418c76f20bee 100644
--- a/gms/templates/admin/base_site.html
+++ b/gms/templates/admin/base_site.html
@@ -47,6 +47,7 @@
{% endif %}
{% endblock %}
{% block nav-global %}{% endblock %}
+
</div>
{% endblock header %}
@@ -62,4 +63,4 @@
<!-- admin content -->
{% block object-tools %}{% endblock %}
{{ content }}
-{% endblock %}
\ No newline at end of file
+{% endblock %}