mirror of
https://github.com/gristlabs/grist-core.git
synced 2026-03-02 04:09:24 +00:00
(core) Forms improvements
Summary: Forms improvements and following new design - New headers - New UI - New right panel options Test Plan: Tests updated Reviewers: georgegevoian, dsagal Reviewed By: georgegevoian Subscribers: dsagal, paulfitz Differential Revision: https://phab.getgrist.com/D4158
This commit is contained in:
Jarosław Sadziński
@@ -1,156 +1,64 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf8">
|
||||
<!-- INSERT BASE -->
|
||||
{{#if BASE}}
|
||||
<base href="{{ BASE }}">
|
||||
{{/if}}
|
||||
<style>
|
||||
html,
|
||||
body {
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
background-color: #f7f7f7;
|
||||
line-height: 1.42857143;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
</style>
|
||||
<script src="forms/grist-form-submit.js"></script>
|
||||
<script src="forms/purify.min.js"></script>
|
||||
<style>
|
||||
.grist-form-container {
|
||||
color: #262633;
|
||||
background-color: #f7f7f7;
|
||||
min-height: 100%;
|
||||
width: 100%;
|
||||
padding-top: 52px;
|
||||
padding-bottom: 32px;
|
||||
font-size: 13px;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Liberation Sans", Helvetica, Arial, sans-serif,
|
||||
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
||||
}
|
||||
|
||||
.grist-form-container .grist-form-confirm {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
form.grist-form {
|
||||
padding: 32px;
|
||||
margin: 0px auto;
|
||||
background-color: white;
|
||||
border: 1px solid #E8E8E8;
|
||||
width: 640px;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
max-width: calc(100% - 32px);
|
||||
}
|
||||
|
||||
form.grist-form .grist-field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
form.grist-form .grist-field label {
|
||||
font-size: 15px;
|
||||
margin-bottom: 8px;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
form.grist-form .grist-field .grist-field-description {
|
||||
font-size: 10px;
|
||||
font-weight: 400;
|
||||
margin-top: 4px;
|
||||
color: #929299;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
form.grist-form .grist-field input[type="text"] {
|
||||
padding: 4px 8px;
|
||||
border-radius: 3px;
|
||||
border: 1px solid #D9D9D9;
|
||||
font-size: 13px;
|
||||
outline-color: #16b378;
|
||||
outline-width: 1px;
|
||||
line-height: inherit;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
form.grist-form input[type="submit"] {
|
||||
background-color: #16b378;
|
||||
border: 1px solid #16b378;
|
||||
color: white;
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
form.grist-form input[type="datetime-local"] {
|
||||
width: 100%;
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
form.grist-form input[type="date"] {
|
||||
width: 100%;
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
form.grist-form input[type="submit"]:hover {
|
||||
border-color: #009058;
|
||||
background-color: #009058;
|
||||
}
|
||||
|
||||
form.grist-form input[type="checkbox"] {
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
form.grist-form .grist-columns {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(var(--grist-columns-count), 1fr);
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
form.grist-form select {
|
||||
padding: 4px 8px;
|
||||
border-radius: 3px;
|
||||
border: 1px solid #D9D9D9;
|
||||
font-size: 13px;
|
||||
outline-color: #16b378;
|
||||
outline-width: 1px;
|
||||
background: white;
|
||||
line-height: inherit;
|
||||
flex: auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
form.grist-form .grist-choice-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<link rel="stylesheet" href="forms/form.css">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<main class='grist-form-container'>
|
||||
<form class='grist-form'
|
||||
onsubmit="event.target.parentElement.querySelector('.grist-form-confirm').style.display = 'block', event.target.style.display = 'none'"
|
||||
data-grist-doc="<!-- INSERT DOC URL -->"
|
||||
data-grist-table="<!-- INSERT TABLE ID -->">
|
||||
<script>
|
||||
document.write(DOMPurify.sanitize(`<!-- INSERT CONTENT -->`));
|
||||
</script>
|
||||
onsubmit="event.target.parentElement.querySelector('.grist-form-confirm').style.display = 'flex', event.target.style.display = 'none'"
|
||||
data-grist-doc="{{ DOC_URL }}"
|
||||
data-grist-table="{{ TABLE_ID }}"
|
||||
data-grist-success-url="{{ SUCCESS_URL }}"
|
||||
>
|
||||
{{ dompurify CONTENT }}
|
||||
<div class="grist-power-by">
|
||||
<a href="https://getgrist.com" target="_blank">
|
||||
<div>Powered by</div>
|
||||
<div class="grist-logo"></div>
|
||||
</a>
|
||||
</div>
|
||||
</form>
|
||||
<div class='grist-form-confirm' style='display: none'>
|
||||
Thank you! Your response has been recorded.
|
||||
<div>
|
||||
{{ SUCCESS_TEXT }}
|
||||
</div>
|
||||
{{#if ANOTHER_RESPONSE }}
|
||||
<button onclick="window.location.reload()">Submit another response</button>
|
||||
{{/if}}
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
// Validate choice list on submit
|
||||
document.querySelector('.grist-form input[type="submit"]').addEventListener('click', function(event) {
|
||||
// When submit is pressed make sure that all choice lists that are required
|
||||
// have at least one option selected
|
||||
const choiceLists = document.querySelectorAll('.grist-choice-list.required:not(:has(input:checked))');
|
||||
Array.from(choiceLists).forEach(function(choiceList) {
|
||||
// If the form has at least one checkbox make it required
|
||||
const firstCheckbox = choiceList.querySelector('input[type="checkbox"]');
|
||||
firstCheckbox?.setAttribute('required', 'required');
|
||||
});
|
||||
|
||||
// All other required choice lists with at least one option selected are no longer required
|
||||
const choiceListsRequired = document.querySelectorAll('.grist-choice-list.required:has(input:checked)');
|
||||
Array.from(choiceListsRequired).forEach(function(choiceList) {
|
||||
// If the form has at least one checkbox make it required
|
||||
const firstCheckbox = choiceList.querySelector('input[type="checkbox"]');
|
||||
firstCheckbox?.removeAttribute('required');
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user