formio-sfds
Version:
The Form.io theme for sf.gov
86 lines (76 loc) • 3.18 kB
HTML
<html lang="en">
<head>
<title>formio-sfds</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="/sfgov/forms.css">
</head>
<body>
<div class="page-node-type-form-page">
<div class="form-page formio-sfds">
<div class="px-2">
<h1>formio-sfds@{{ pkg.version }}</h1>
<p>
This is the <a href="https://form.io">form.io</a> theme for
<a href="https://sf.gov">sf.gov</a> by the <a href="https://sfdigitalservices.github.io">San Francisco Digital Services</a>.
Check out <a href="https://github.com/{{ pkg.repository }}">the GitHub project</a> for more info.
</p>
<div class="d-flex flex-column flex-md-row">
<div class="pr-md-4 position-relative">
<h2 class="h2 mt-2">Examples</h1>
<div style="position: sticky; top: 0;">
<ul id="example-links" class="list-style-none">
{% for ex in examples %}
<li>
<a href="#form-{{ ex.id }}" class="d-block py-1">
{{ ex.title }}
</a>
</li>
{% endfor %}
</ul>
</div>
</div>
<div class="mt-2 pt-1">
{% for ex in examples %}
<section id="{{ ex.id }}" class="example">
<h2 class="h3">
<a href="#{{ ex.id }}" class="fg-light-slate no-underline">#</a>
{{ ex.title }}
<a href="/examples/{{ ex.id }}" class="no-underline">↗️</a>
</h2>
<div class="d-flex flex-items-start">
<div class="col-4">
<sfgov-form
id="form-{{ ex.id }}"
style="width: 100%;"
data-form="{{ ex.form | dump | e }}"
data-options="{{ ex.options | dump | e }}">
</sfgov-form>
</div>
<div class="pl-2">
<label class="fg-light-slate" for="json-{{ ex.id }}">
Submission data:
</label>
<sfgov-form-data data-form-id="form-{{ ex.id }}">
<textarea
id="json-{{ ex.id }}"
class="border-grey-4"
rows="3"
style="width: 100%; resize: vertical;">
</textarea>
</sfgov-form-data>
</div>
</div>
</section>
{% endfor %}
</div>
</div>
</div>
</div>
</div>
<script src="https://unpkg.com/formiojs@{{ pkg.dependencies.formiojs }}/dist/formio.full.min.js"></script>
<script src="/dist/formio-sfds.standalone.js"></script>
<script src="/dist/examples.js"></script>
</body>
</html>