selfhosted
/
formspree
mirror of https://github.com/formspree/formspree.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

close modal when clicking outside and style fixes.

This commit is contained in:
fiatjaf 2018-09-23 01:27:52 +00:00
parent 1b31f746ef
commit 9a0e6985d3
3 changed files with 88 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
formspree/js/Modal.js
View File

@ -12,21 +12,29 @@ export default class Modal extends React.Component {
render() {
return (
<div className={cs({modal: true, target: this.props.opened})}>
<div className="container">
{this.props.opened ? (
<>
<div className="x">
<h4>{this.props.title}</h4>
<a href="#" onClick={this.close}>
&times;
</a>
</div>
{this.props.children}
</>
) : null}
<>
<div
className={cs({'modal-overlay': true, open: this.props.opened})}
onClick={this.close}
/>
<div
className={cs({modal: true, react: true, target: this.props.opened})}
>
<div className="container">
{this.props.opened ? (
<>
<div className="x">
<h4>{this.props.title}</h4>
<a href="#" onClick={this.close}>
&times;
</a>
</div>
{this.props.children}
</>
) : null}
</div>
</div>
</div>
</>
)
}

53
formspree/js/forms/FormPage/Whitelabel.js
View File

@ -192,7 +192,7 @@ export default class FormSettings extends React.Component {
onClose={this.closeModal}
>
<div>
<div className="container">
<div>
<h2>Are you sure?</h2>
<p>
Reverting will discard the changes you've made to your email
@ -234,31 +234,29 @@ export default class FormSettings extends React.Component {
onClose={this.closeModal}
>
<div>
<div>
<h2>Email Syntax</h2>
<p>
the email body can contain simple HTML that's valid in an email.
No <span className="code">&lt;script&gt;</span> or{' '}
<span className="code">&lt;style&gt;</span> tags can be
included. For a list of recommended HTML tags see{' '}
<a href="" target="_blank">
the ContantContact guide to HTML in email
</a>
.
</p>
<p>
The following special variables are recognized by Formspree,
using the{' '}
<a
href="https://mustache.github.io/mustache.5.html"
target="_blank"
>
mustache
</a>{' '}
template language.
</p>
<pre>
{`
<p>
the email body can contain simple HTML that's valid in an email.
No <span className="code">&lt;script&gt;</span> or{' '}
<span className="code">&lt;style&gt;</span> tags can be included.
For a list of recommended HTML tags see{' '}
<a href="" target="_blank">
the ContantContact guide to HTML in email
</a>
.
</p>
<p>
The following special variables are recognized by Formspree, using
the{' '}
<a
href="https://mustache.github.io/mustache.5.html"
target="_blank"
>
mustache
</a>{' '}
template language.
</p>
<pre>
{`
{{ _time }} The formatted date and time of the submission.
{{ _host }} The URL (without "https://") of where the form was submitted.
{{ <fieldname> }} Any named input value in your form will be displayed.
@ -267,8 +265,7 @@ export default class FormSettings extends React.Component {
{{ _value }} … and field value.
{{/ _fields }} Closes the _fields block.
`.trim()}
</pre>
</div>
</pre>
<div className="container right">
<button onClick={this.closeModal}>OK</button>
</div>

78
formspree/scss/dashboard.scss
View File

@ -29,8 +29,11 @@
margin: 0 !important;
}
.invoice {
button + button {
margin-left: 11px;
}
.invoice {
.middle > * {
vertical-align: middle;
}
@ -340,9 +343,13 @@
.create-form {
margin: 3em 0;
form {
clear: both;
h4 {
margin: 0;
padding: 0;
margin-top: 13px;
float: left;
}
form input:not([type="checkbox"]):not([type="radio"]) {
margin-top: 0;
clear: both;
@ -360,18 +367,11 @@
text-align: right;
}
.modal:not(.js):target > *,
.modal.target > * {
top: 20%;
}
}
.modal[id^="form-"] {
textarea {
font-size: 15px;
}
}
.modal {
& > * {
background: #fefefe;
@ -387,16 +387,19 @@
transition: transform 0.5s ease-out;
padding: 0.3em 1.3em 1.3em 1.3em;
.x a {
float: right;
padding: 10px;
font-size: 1.7em;
}
h4 {
margin: 0;
padding: 0;
margin-top: 13px;
float: left;
.x {
a {
float: right;
padding: 10px;
font-size: 1.7em;
}
h4 {
margin: 0;
padding: 0;
margin-top: 13px;
float: left;
}
& + * { clear: both; }
}
}
@ -458,7 +461,6 @@
color: #2A735B;
}
}
&:not(.js):target > *,
&.target > * {
-webkit-transform: translate(0, 0);
-ms-transform: translate(0, 0);
@ -466,27 +468,29 @@
top: 10%;
}
&:before {
content: "";
display: none;
background: rgba(0, 0, 0, 0.6);
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 10;
}
&:not(.js):target:before,
&.target:before {
display: block;
}
.red {
color: $red;
}
}
.modal:not(.react):before,
.modal-overlay {
content: "";
display: none;
background: rgba(0, 0, 0, 0.6);
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 10;
}
.modal.target:not(.react):before,
.modal-overlay.open {
display: block;
}
/* icon morphing */
.fa-unlock:hover::before {
content: "\f023";