Added confirmation modals, fixed reply to emails, and added premailer
This commit is contained in:
Godwin
@@ -1,4 +1,17 @@
|
||||
(function() {
|
||||
window.onerror = function(message, url, lineNumber) {
|
||||
//save error and send to server for example.
|
||||
var request = new XMLHttpRequest();
|
||||
request.open('POST', '/js_error', true);
|
||||
request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
|
||||
request.send(
|
||||
'message=' + encodeURI(message) +
|
||||
'&url=' + encodeURI(url) +
|
||||
'&lineNumber=' + encodeURI(lineNumber) +
|
||||
'&location=' + encodeURI(window.location.href)
|
||||
);
|
||||
return false;
|
||||
};
|
||||
Array.prototype.forEach.call(document.querySelectorAll('.number-field,.email-field,.text-field'), function(field) {
|
||||
var input = field.querySelector('input');
|
||||
var positionLabel = function(input) {
|
||||
@@ -9,6 +22,55 @@
|
||||
input.addEventListener('blur', function(event) { field.classList.remove('focused'); });
|
||||
input.addEventListener('focus', function(event) { field.classList.add('focused'); });
|
||||
});
|
||||
var body = document.querySelector('body');
|
||||
var primaryContent = document.getElementById('primary-content');
|
||||
var overlay = document.getElementById('content-overlay');
|
||||
primaryContent.addEventListener('keydown', function(event) {
|
||||
event.stopPropagation();
|
||||
return false;
|
||||
//if (body.classList.contains('has-overlay')) {
|
||||
// return false;
|
||||
//}
|
||||
});
|
||||
document.addEventListener('focus', function(event) {
|
||||
if (overlay.querySelector('.dlg.open') && !overlay.querySelector('.dlg.open :focus')) {
|
||||
overlay.querySelector('.dlg.open').focus();
|
||||
}
|
||||
}, true);
|
||||
function openDlg(dlg, link) {
|
||||
body.setAttribute('style', 'width: ' + body.clientWidth + 'px');
|
||||
dlg.querySelector('.message').innerHTML = decodeURI(link.dataset.confirmation);
|
||||
dlg.querySelector('.confirm').setAttribute('href', link.getAttribute('href'));
|
||||
primaryContent.setAttribute('aria-hidden', 'true');
|
||||
document.getElementById('overlay').onclick =
|
||||
dlg.querySelector('.delete').onclick = function() { closeDlg(dlg); };
|
||||
body.classList.add('has-overlay');
|
||||
dlg.removeAttribute('aria-hidden');
|
||||
dlg.setAttribute('role', 'alertdialog');
|
||||
dlg.setAttribute('tabindex', '0');
|
||||
dlg.focus();
|
||||
setTimeout(function() { dlg.classList.add('open'); }, 100);
|
||||
}
|
||||
function closeDlg(dlg) {
|
||||
setTimeout(function() {
|
||||
body.classList.remove('has-overlay');
|
||||
body.removeAttribute('style');
|
||||
}, 250);
|
||||
primaryContent.removeAttribute('aria-hidden');
|
||||
dlg.setAttribute('aria-hidden', 'true');
|
||||
dlg.removeAttribute('tabindex');
|
||||
dlg.classList.remove('open');
|
||||
dlg.removeAttribute('role');
|
||||
}
|
||||
var confirmationDlg = document.getElementById('confirmation-dlg');
|
||||
Array.prototype.forEach.call(document.querySelectorAll('a[data-confirmation]'), function(link) {
|
||||
link.addEventListener('click', function(event) {
|
||||
event.preventDefault();
|
||||
openDlg(confirmationDlg, link);
|
||||
return false;
|
||||
});
|
||||
});
|
||||
|
||||
var errorField = document.querySelector('.input-field.has-error input, .input-field.has-error textarea');
|
||||
if (errorField) {
|
||||
errorField.focus();
|
||||
@@ -16,7 +78,10 @@
|
||||
|
||||
var htmlNode = document.documentElement;
|
||||
document.addEventListener('keydown', function(event) {
|
||||
if (htmlNode.dataset.input != 'kb' && ["input", "select", "option"].includes("input".toLowerCase())) {
|
||||
if (htmlNode.dataset.input != 'kb' &&
|
||||
!["input", "textarea", "select", "option"].includes(event.target.nodeName.toLowerCase()) &&
|
||||
!event.target.attributes.contenteditable) {
|
||||
console.log()
|
||||
htmlNode.setAttribute('data-input', 'kb');
|
||||
}
|
||||
});
|
||||
|
||||
@@ -90,6 +90,7 @@ table {
|
||||
button,
|
||||
.button {
|
||||
@include button;
|
||||
vertical-align: top;
|
||||
|
||||
#main &[type="submit"] {
|
||||
background-color: $colour-5;
|
||||
@@ -111,6 +112,7 @@ button,
|
||||
background-color: $colour-5;
|
||||
}
|
||||
|
||||
&.delete,
|
||||
#main &.delete {
|
||||
background-color: $colour-4;
|
||||
}
|
||||
@@ -1280,6 +1282,97 @@ $header-tilt: 8deg;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
#primary-content {
|
||||
@include _(transition, 'filter 250ms ease-in-out, -webkit-filter 250ms ease-in-out');
|
||||
}
|
||||
|
||||
&.has-overlay {
|
||||
overflow: hidden;
|
||||
|
||||
#primary-content {
|
||||
-webkit-filter: blur(5px);
|
||||
@include _(filter, blur(5px));
|
||||
}
|
||||
|
||||
#overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
cursor: pointer;
|
||||
z-index: 1000;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#content-overlay {
|
||||
display: none;
|
||||
|
||||
body.has-overlay & {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.dlg {
|
||||
@include before {
|
||||
content: '';
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background-color: rgba($black, 0);
|
||||
@include _(transition, background-color 250ms ease-in-out);
|
||||
}
|
||||
|
||||
&.open {
|
||||
@include before {
|
||||
background-color: rgba($black, 0.5);
|
||||
}
|
||||
|
||||
.dlg-content {
|
||||
@include _(transform, rotateZ(0deg));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dlg-content {
|
||||
position: fixed;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
max-width: 50rem;
|
||||
margin: auto;
|
||||
z-index: 1001;
|
||||
background-color: $white;
|
||||
text-align: center;
|
||||
@include _(transition, transform 500ms ease-in-out);
|
||||
@include _(transform, rotateX(-90deg));
|
||||
@include _(transform-origin, center 250%);
|
||||
}
|
||||
|
||||
.title {
|
||||
padding: 0.5em;
|
||||
background-color: $colour-5;
|
||||
color: $white;
|
||||
@include _(text-stroke, 1px rgba(0, 0, 0, 0.25));
|
||||
}
|
||||
|
||||
.dlg-inner {
|
||||
padding: 0 2em 2em;
|
||||
}
|
||||
|
||||
button, .button {
|
||||
margin: 0 0.25em;
|
||||
}
|
||||
|
||||
.message {
|
||||
font-size: 1.5em;
|
||||
margin-bottom: 2em;
|
||||
}
|
||||
}
|
||||
|
||||
@include keyframes(fade-out) {
|
||||
to {
|
||||
@include _(opacity, 0.25);
|
||||
@@ -1296,33 +1389,6 @@ html :focus {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
html[data-input="kb"] {
|
||||
:focus,
|
||||
input[type="submit"]:focus,
|
||||
.check-box-field input:focus + label,
|
||||
.radio-button-field input:focus + label,
|
||||
.select-field select:focus,
|
||||
.workshop-link:focus .title,
|
||||
#main-nav .nav a:focus .title {
|
||||
outline: 0.25rem solid rgba($colour-2, 0.5);
|
||||
outline-offset: 0.2rem;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#main-nav .logo:focus {
|
||||
outline-offset: -0.2em;
|
||||
}
|
||||
|
||||
/*input:focus,
|
||||
textarea:focus,
|
||||
select:focus,
|
||||
.textarea {*/
|
||||
.workshop-link:focus,
|
||||
#main-nav .nav a:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin header-colour($page, $colour) {
|
||||
body.#{$page} {
|
||||
#header-title {
|
||||
@@ -2259,6 +2325,29 @@ html[data-lingua-franca-example="html"] {
|
||||
}
|
||||
|
||||
@include breakpoint(medium) {
|
||||
html[data-input="kb"] {
|
||||
:focus,
|
||||
input[type="submit"]:focus,
|
||||
.check-box-field input:focus + label,
|
||||
.radio-button-field input:focus + label,
|
||||
.select-field select:focus,
|
||||
.workshop-link:focus .title,
|
||||
#main-nav .nav a:focus .title {
|
||||
outline: 0.25rem solid rgba($colour-2, 0.5);
|
||||
outline-offset: 0.2rem;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#main-nav .logo:focus {
|
||||
outline-offset: -0.2em;
|
||||
}
|
||||
|
||||
.workshop-link:focus,
|
||||
#main-nav .nav a:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
@@ -4,7 +4,7 @@ body {
|
||||
width: 100% !important;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
-ms-text-size-adjust: 100%;
|
||||
margin: 0;
|
||||
margin: 1em;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
@@ -69,12 +69,25 @@ a {
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 1em;
|
||||
color: $black !important;
|
||||
}
|
||||
|
||||
p, blockquote {
|
||||
margin: 1em;
|
||||
font-size: 1.5em;
|
||||
line-height: 1.3333em;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
font-style: italic;
|
||||
margin-bottom: 2em;
|
||||
color: #666 !important;
|
||||
border: 0.1em solid #CCC;
|
||||
padding: 1em;
|
||||
border-style: none none solid solid;
|
||||
background-color: #F8F8F8;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
color: $black !important;
|
||||
|
||||
@@ -117,6 +130,48 @@ table#ecxbb_full_width {
|
||||
}
|
||||
}
|
||||
|
||||
.error-report {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
border: 0.15em solid #CCC;
|
||||
background-color: #EEE;
|
||||
font-size: 1.25em;
|
||||
margin-bottom: 2em;
|
||||
|
||||
th {
|
||||
background-color: #CCC;
|
||||
}
|
||||
|
||||
td, th {
|
||||
padding: 0.25em 0.5em;
|
||||
|
||||
&:last-child {
|
||||
border-left: 0.15em solid #CCC;
|
||||
min-width: 40em;
|
||||
}
|
||||
}
|
||||
|
||||
td:last-child {
|
||||
font-family: monospace;
|
||||
word-break: break-word;
|
||||
background-color: #FFF;
|
||||
font-size: 0.75em;
|
||||
}
|
||||
}
|
||||
|
||||
code {
|
||||
color: #C33;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
pre {
|
||||
font-size: 1.5em;
|
||||
padding: 1em;
|
||||
background-color: #333;
|
||||
color: antiquewhite;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.diff, .ecxdiff {
|
||||
margin: 1em 0 5em 1em;
|
||||
overflow: auto;
|
||||
|
||||
Reference in New Issue
Block a user