Commit b825cdda authored by Aral Balkan's avatar Aral Balkan

Apply fund-us page styles to the patronage page

parent 5a7a30f5
/* Limit body width */
body {
max-width: 960px;
font-size: 20px;
}
/* Fix buttons so they appear centered. */
.swal2-actions {
text-align: center;
......@@ -16,3 +22,17 @@
background-color: #C7D4CC;
color: #304349;
}
#pause-button {
background-color: #FEE59E;
color: #783806;
}
#cancel-button {
background-color: #FFC3A7;
color: #82073B;
}
input[type='text'] {
font-size: 20px;
}
<!DOCTYPE html>
<html lang="en">
<html lang='en'>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Your Patronage</title>
<style>
html {
color: black;
background-color: white;
font-family: sans-serif;
}
${styles}
</style>
<link rel='stylesheet' href='/fund-us/css/index.css'>
<style>${styles}</style>
</head>
<body>
......@@ -39,13 +31,11 @@
<form id='resume'>
<fieldset id='resume-fields'>
<input id='resume-button' type='submit' value='Resume my patronage' />
<button id='resume-button' type='submit'>Resume my patronage</button>
</fieldset>
</form>
</section>
<p>Status: <span id='status'>offline</span></p>
${newPatronMessage}
<p><strong>Thank you for supporting our work!</strong> If you haven’t bookmarked this page, please do so now. You can return here at any time to update, pause, or cancel your patronage. If you ever want to talk to a human being, you can contact Aral and Laura at <a href='mailto:support@small-tech.org'>support@small-tech.org</a> or at <a href='https://social.small-tech.org/support'>support@social.small-tech.org</a>.</p>
......@@ -70,7 +60,7 @@
<label for='amount'>Amount (€/month):<label>
<input id='patronageAmount' type='text' value='${patronageAmount}'>
<br><br>
<input id='update-button' type='submit' value='Update my patronage' />
<button id='update-button' type='submit'>Update my patronage</button>
</fieldset>
</form>
</section>
......@@ -82,7 +72,7 @@
<form id='pause'>
<fieldset id='pause-fields' disabled>
<input id='pause-button' type='submit' value='Pause my patronage' />
<button id='pause-button' type='submit'>Pause my patronage</button>
</fieldset>
</form>
</section>
......@@ -94,7 +84,7 @@
<form id='cancel'>
<fieldset id='cancel-fields' disabled>
<input id='cancel-button' type='submit' value='Cancel my patronage' />
<button id='cancel-button' type='submit'>Cancel my patronage</button>
</fieldset>
</form>
</section>
......
const $ = document.querySelector.bind(document)
let socket = null
window.addEventListener('load', _ => {
const Modal = Swal
const socket = new WebSocket(`wss://${window.location.hostname}/patron`)
connect()
//
// Connectivity.
//
function connect () {
socket = new WebSocket(`wss://${window.location.hostname}/patron`)
// Handle connectivity.
socket.onopen = _ => {
$('#status').innerHTML = '<span style="color: green">Online</span>'
enableActions()
$('#offline-message').hidden = true
}
socket.onclose = _ => {
$('#status').innerHTML = 'Offline'
enableActions(false)
$('#offline-message').hidden = false
// Try to reconnect.
const reconnectionAttemptIntervalId = setInterval(_ => {
if (socket.readyState === WebSocket.CLOSED) {
connect()
} else {
clearInterval(reconnectionAttemptIntervalId)
}
}, 3000)
}
socket.onerror = error => {
Modal.fire('Connection error', error, 'error')
console.log('Connection error', error)
}
// Display received messages.
......@@ -89,9 +104,7 @@ window.addEventListener('load', _ => {
}
}
//
// Connectivity.
//
}
function enableActions (enabled = true) {
['update', 'pause', 'resume', 'cancel'].forEach(action => $(`#${action}-fields`).disabled = !enabled)
......
......@@ -7,6 +7,7 @@
html
{
box-sizing: border-box;
font-family: "Avenir Next", Avenir, 'Helvetica Neue', Helvetica, sans-serif;
}
*, *:before, *:after
......@@ -117,7 +118,7 @@ input[name="donationAmount"]
padding-bottom: 0px;
}
label
.patronageForm label
{
display: inline-block;
border-radius: 6px;
......@@ -242,7 +243,6 @@ input[name="donationAmount"] + label
box-sizing: border-box;
color: #4d4d4d;
display: block;
font-family: "Avenir Next", Avenir, 'Helvetica Neue', Helvetica, sans-serif;
height: 30px;
line-height: 30px;
padding: 0;
......@@ -259,13 +259,12 @@ input[name="donationAmount"] + label
}
}
#submitButton
input[type='submit'], button
{
font-size: 16px;
margin-top: 4px;
margin-bottom: 10px;
margin-right: 0;
width: 99%;
height: 50px;
border: 0;
border-radius: 5px;
......@@ -274,13 +273,13 @@ input[name="donationAmount"] + label
background-color: #E3F9A8;
}
#submitButton:hover
input[type='submit']:hover, button:hover
{
background-color: #CBE89B;
/* border: 2px solid #A4C776; */
}
#submitButton:disabled
input[type='submit']:disabled, button:disabled
{
color: #ccc;
background-color: #eee;
......@@ -288,12 +287,15 @@ input[name="donationAmount"] + label
}
@media only screen and (min-width: 380px) {
#submitButton
{
input[type='submit'], button {
font-size: 20px;
}
}
#submitButton {
width: 99%;
}
.donation-currency {
color: #7d7d7d;
display: block;
......
Markdown is supported
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