Skip to content
Snippets Groups Projects
Commit c36c3835 authored by frekk's avatar frekk
Browse files

update templates & site styling

parent 50f5b679
Branches
Tags
No related merge requests found
Hide whitespace changes
Inline Side-by-side
gms/memberdb/static/memberdb.css
+ 11
− 13
View file @ c36c3835
...@@ -15,16 +15,11 @@ html { ...@@ -15,16 +15,11 @@ html {
} }
.form-container { .form-container {
background-color: #ffe; margin: 20px 0;
border: 2px solid #8fc;
border-radius: 5px;
padding: 20px;
margin: 20px;
} }
.form-header { .text-center, .form-header {
text-align: center; text-align: center;
/*padding: 10px 10px 20px 10px;*/
} }
.form-header .tips { .form-header .tips {
...@@ -89,7 +84,7 @@ fieldset { ...@@ -89,7 +84,7 @@ fieldset {
} }
.help { .help {
margin: 0 40px; margin: 8px 8px 0 8px;
} }
.help a { .help a {
...@@ -107,7 +102,7 @@ ul.errorlist { ...@@ -107,7 +102,7 @@ ul.errorlist {
nav { nav {
background-color: #333; background-color: #333;
height: 60px; overflow: auto; /* make navbar expand in case the tab buttons flow to a second row */
} }
.navtab { .navtab {
...@@ -118,9 +113,12 @@ nav { ...@@ -118,9 +113,12 @@ nav {
font-size: 22px; font-size: 22px;
font-variant-caps: all-petite-caps; font-variant-caps: all-petite-caps;
font-weight: 400; font-weight: 400;
line-height: 40px; line-height: 26px;
padding: 10px 20px; padding: 17px 20px; /* line-height and padding adds up to minimum 60px element height */
border-left: 1.5px solid #555; border-style: solid;
border-color: #555;
border-width: 0 1px 0 1px;
margin-right: -1px;
background-color: #3c3c3c; background-color: #3c3c3c;
} }
...@@ -131,4 +129,4 @@ nav { ...@@ -131,4 +129,4 @@ nav {
.navtab:last-child { .navtab:last-child {
border-right: 1.5px solid #555; border-right: 1.5px solid #555;
} }
\ No newline at end of file
gms/memberdb/static/shared.css
+ 5
− 0
View file @ c36c3835
...@@ -58,6 +58,11 @@ body { ...@@ -58,6 +58,11 @@ body {
color: #333; color: #333;
} }
/* make div expand to contain float children */
.float-container {
overflow: auto;
display: inline-block;
}
......
gms/memberdb/templates/base.html
+ 6
− 5
View file @ c36c3835
...@@ -45,13 +45,14 @@ ...@@ -45,13 +45,14 @@
{% block header %}{% endblock %} {% 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> </div>
{% endblock %}<!-- END Header --> {% 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 --> <!-- Content -->
<div id="content"> <div id="content">
......
gms/squarepay/static/squarepay.css
+ 6
− 3
View file @ c36c3835
...@@ -117,14 +117,17 @@ div#sq-expiration-date, div#sq-card-number, div#sq-cvv { ...@@ -117,14 +117,17 @@ div#sq-expiration-date, div#sq-card-number, div#sq-cvv {
background-color: #4281CB; background-color: #4281CB;
} }
#form-container { .payment-info {
position: relative; float: left;
width: 380px; width: 380px;
margin: 20px auto; margin: 20px auto;
box-sizing: content-box; box-sizing: content-box;
border: 2px solid #eee; border: 2px solid #eee;
background-color: white; background-color: white;
padding: 16px ; padding: 16px;
margin: 10px;
text-align: left;
height: 100%;
} }
.form-row { .form-row {
......
gms/squarepay/templates/done.html 0 → 100644
+ 37
− 0
View file @ c36c3835
{% 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 %}
gms/squarepay/templates/payment_form.html
+ 58
− 48
View file @ c36c3835
...@@ -19,59 +19,69 @@ var amount = {{ payment.amount }}; ...@@ -19,59 +19,69 @@ var amount = {{ payment.amount }};
{% endblock %} {% endblock %}
{% block content_title %}<h1>Pay with card</h1>{% endblock %} {% block content_title %}<h1>Checkout</h1>{% endblock %}
{% block content %} {% block content %}
<div class="form-container"> <div class="form-container text-center">
<div class="form-header"> <div class="form-header">
<span class="tips">{% block tips %}<b><i>Please fill in your card details below.</i></b>{% endblock %}</span> <span class="tips {% if payment.is_paid %}error{% endif %}">{% block tips %}
{% if payment.is_paid %}<span class="tips"> {% if payment.is_paid %}
<p><b>It appears you have already successfully attempted this payment.</b><br><br> <p><b>It appears you have already successfully attempted this payment.</b>
Note that you will not be charged twice if even you submit again.</p> {% if payment.completed_url %}
</span>{% endif %} <br><br>Perhaps you were meaning to find <a href="{{ payment.completed_url }}">this page</a>.
<noscript> {% endif %}</p>
<span class="tips error">Please enable javascript to use the payment form.</span> {% else %}
</noscript> <b><i>Please fill in your card details below.</i></b>
</div> {% endif %}
<!-- the element #form-container is used to create the Square payment form (hardcoded) --> {% endblock %}</span>
<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>
<fieldset> <noscript>
<div class="form-row"> <span class="tips error">Please enable javascript to use the payment form.</span>
<span class="label">Card Number</span> </noscript>
<div id="sq-card-number"></div> </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>
</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"> <fieldset>
<div class="half"> <div class="form-row">
<span class="label">Expiration</span> <span class="label">Card Number</span>
<div id="sq-expiration-date"></div> <div id="sq-card-number"></div>
</div> </div>
<div class="half"> <div class="form-row">
<span class="label">CVV</span> <div class="half">
<div id="sq-cvv"></div> <span class="label">Expiration</span>
</div> <div id="sq-expiration-date"></div>
</div> </div>
</fieldset>
<button id="sq-creditcard" class="button-credit-card" onclick="requestCardNonce(event)" disabled>Pay with card</button> <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 -->
After a nonce is generated it will be assigned to this hidden input field. <input type="hidden" id="card-nonce" name="nonce">
--> </form>
<input type="hidden" id="card-nonce" name="nonce"> </div> <!-- end #sq-ccbox -->
</form> </div> <!-- end #form-container -->
</div> <!-- end #sq-ccbox --> </div>
</div> <!-- end #form-container -->
</div> </div>
</div> </div>
{% endblock %} {% endblock %}
\ No newline at end of file
gms/templates/admin/base_site.html
+ 2
− 1
View file @ c36c3835
...@@ -47,6 +47,7 @@ ...@@ -47,6 +47,7 @@
{% endif %} {% endif %}
{% endblock %} {% endblock %}
{% block nav-global %}{% endblock %} {% block nav-global %}{% endblock %}
</div> </div>
{% endblock header %} {% endblock header %}
...@@ -62,4 +63,4 @@ ...@@ -62,4 +63,4 @@
<!-- admin content --> <!-- admin content -->
{% block object-tools %}{% endblock %} {% block object-tools %}{% endblock %}
{{ content }} {{ content }}
{% endblock %} {% endblock %}
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment