RubyGems - form-jekyll - Versions diffs - 0.5.4 → 0.6.0 - Mend

form-jekyll 0.5.4 → 0.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (11) hide show

checksums.yaml CHANGED

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 42389114a6687daf7c995b9657c034543520661c381521992432c23157fad195
-  data.tar.gz: a913583b765b3492e1ce5f0f69d1e5f724279e247ed9f59af31dc67e98ca5e4a
+  metadata.gz: 335e1b2e85abf468baa09079c46f6b2830233a6d603a05a62a8e98cfb7450a6f
+  data.tar.gz: 581b6e0a22cfe7352c32c153ffaa018d0143171d073e78e5daffb50444a93cb1
 SHA512:
-  metadata.gz: 99106739dc67a6b45f47cb26fd650cdf8dcb93bf45a98da787b403888f143ac280fbe66ada582a97978f9bb896a617f2c3e76da95741d39c325dedd6063b46c5
-  data.tar.gz: d64d2cddbea8a61f2a9ed6c6e7bf1bb65985a391cc23a0c4f5e632929bdf0042d2a3dd9fdc208d896ba5efc0d08c3ceb7b7145bd34ef866739bbbe6cda6df7a9
+  metadata.gz: b794bea6eddf0460a83967870c0e08a63df2c188b60de9a724977833641caac47eea0b329bec2f0fb24d2be5fd871eb8564f1401af79976936d22a0209214c37
+  data.tar.gz: e8fa0c886b53996d9b07510f2d69bf6abd13db3333ce338912806f807fae61e177fff547eefc2ddc05549a415aaa5289aab982b8dbb1e31ae04e1819c838780a

data/_includes/pagination.html CHANGED

@@ -1,13 +1,13 @@
 {% if forloop.length > 1 %}
   <div class="form-group pagination">
     {% if forloop.first %}
-      <a href="javascript:void(0);" class="btn btn-lg form-section-next">Start</a>
+      <button class="btn btn-lg form-section-next">Start</button>
     {% else %}
-      <a href="javascript:void(0);" class="btn btn-lg form-section-prev">Previous</a>
+      <button class="btn btn-lg form-section-prev">Previous</button>
       {% if forloop.last %}
-        <a href="javascript:void(0);" id="submit" class="btn btn-lg submit">Submit</a>
+        <button id="submit" class="btn btn-lg form-section-submit">Submit</button>
       {% else %}
-        <a href="javascript:void(0);" class="btn btn-lg form-section-next">Next</a>
+        <button class="btn btn-lg form-section-next">Next</button>
       {% endif %}
     {% endif %}
   </div>

data/_includes/render_field.html CHANGED

@@ -1,4 +1,23 @@
 {% for field in fields %}
+  {% comment %}
+    Assign field IDs
+  {% endcomment %}
+  {% if field.type == 'email' %}       {% assign id = "c04" %}
+  {% elsif field.type == 'phone' %}    {% assign id = "c06" %}
+  {% elsif field.type == 'date' %}     {% assign id = "d02" %}
+  {% elsif field.type == 'time' %}     {% assign id = "d04" %}
+  {% elsif field.type == 'number' %}   {% assign id = "d06" %}
+  {% elsif field.type == 'price' %}    {% assign id = "d08" %}
+  {% elsif field.type == 'url' %}      {% assign id = "d10" %}
+  {% elsif field.type == 'textarea' %} {% assign id = "i14" %}
+  {% elsif field.type == 'file' %}     {% assign id = "m13" %}
+  {% elsif field.type == 'select' %}   {% assign id = "s02" %}
+  {% elsif field.type == 'checkbox' %} {% assign id = "s06" %}
+  {% elsif field.type == 'radio' %}    {% assign id = "s08" %}
+  {% else %}     {% assign id = "i02" %}
+  {% endif %}
   {% comment %}
     Assign variables
   {% endcomment %}
@@ -51,7 +70,7 @@
     </div>
   {% else %}
-    <div class="form-group field-{{ field.type }}" {% if field.hidden %}data-hidden="true"{% endif %}>
+    <div class="form-group field-{{ id }}" {% if field.hidden %}data-hidden="true"{% endif %}>
       {% include elements/annotation.html annotation=annotation %}

data/_layouts/base.html CHANGED

@@ -11,6 +11,7 @@
     <link href="https://fonts.googleapis.com/css?family=Rubik:300,400,400i,500" rel="stylesheet">
     <script src="/assets/js/jquery.js"></script>
     <script src="/assets/js/validator.js"></script>
+    <script src="/assets/js/mousetrap.js"></script>
     <script src="/assets/js/script.js"></script>
 </head>
 <body>

data/_layouts/default.html CHANGED

@@ -12,7 +12,9 @@ layout: base
     </span>
     <form class="form">
-      {% include render_form.html form=page.form %}
+      <div class="sections-container">
+        {% include render_form.html form=page.form %}
+      </div>
     </form>
   </main>
@@ -21,7 +23,7 @@ layout: base
 {{ content }}
-<div class="form-settings">
+<div class="form-settings active">
   <h5>Show&hellip;</h5>
   <a href="javascript:void(0);" class="form-settings-toggle" title="Toggle settings">
@@ -29,27 +31,36 @@ layout: base
   </a>
-  <label>
+<div class="form-group field-s06">
+  <label class="checkbox">
     <input type="checkbox" id="settings-all-pages">
     <span class="inline-label">Every page</span>
   </label>
+</div>
-  <label>
+<div class="form-group field-s06">
+  <label class="checkbox">
     <input type="checkbox" id="settings-all-conditionals">
     <span class="inline-label">All conditionals</span>
   </label>
+</div>
-  <label>
+<div class="form-group field-s06">
+  <label class="checkbox">
     <input type="checkbox" id="settings-all-annotations">
     <span class="inline-label">Annotations</span>
   </label>
+</div>
-  <label>
+<div class="form-group field-s06">
+  <label class="checkbox">
     <input type="checkbox" id="settings-show-hidden">
     <span class="inline-label">Hidden fields</span>
   </label>
+</div>
-  <label>
+<div class="form-group field-s06">
+  <label class="checkbox">
     <input type="checkbox" id="settings-top-nav">
     <span class="inline-label">Page navigation on top</span>
   </label>

data/_sass/sfgov.scss CHANGED

@@ -437,35 +437,4 @@ main[role="main"] {
       margin: 0;
     }
   }
-}
-.hero-banner.default {
-  @include contain-1090;
-  padding-top: 40px;
-  @include media($medium-screen) {
-    padding-top: 60px;
-  }
-  h1 {
-    @include fs-h1-default;
-    margin-top: 0;
-    color: $black;
-    margin-bottom: 40px;
-    @include media($medium-screen) {
-      margin-left: -5px;
-    }
-  }
-  .lead-paragraph {
-    color: $black;
-  }
-  .path-frontpage & {
-    h1 {
-      @include fs-h1-home;
-      margin-bottom: 27px;
-    }
-  }
 }

data/assets/css/main.scss CHANGED

@@ -1,789 +1,38 @@
 ---
 ---
-@import 'variables';
+@import url('https://fonts.googleapis.com/css?family=Rubik:300,400,400i,500&display=swap');
-html, body {
-  margin: 0;
-  padding: 0;
-}
+@import '../node_modules/sf-design-system/src/components/00-design-tokens/colors';
+@import '../node_modules/sf-design-system/src/components/00-design-tokens/breakpoints';
+@import '../node_modules/sf-design-system/src/components/00-design-tokens/typography-mixins';
+@import '../node_modules/sf-design-system/src/components/00-design-tokens/typography';
+@import '../node_modules/sf-design-system/src/components/00-design-tokens/mixins';
+@import '../node_modules/sf-design-system/src/components/00-design-tokens/variables';
+@import '../node_modules/sf-design-system/src/components/00-design-tokens/base';
-fieldset {
-  margin: 0;
-  padding: 0;
-  border: 0;
-}
-label,
-.label,
-legend {
-  display: block;
-  margin: 0 0 0.25rem;
-  padding: 0;
-  line-height: 1.5;
-}
+@import '../node_modules/sf-design-system/src/components/03-layout/headers/hero-banner';
+@import '../node_modules/sf-design-system/src/components/04-forms/field-types/form-fields';
+@import '../node_modules/sf-design-system/src/components/04-forms/layout/pagination';
-div[data-group] {
-  display: none;
-}
+@import 'sfgov';
-label:empty,
-legend:empty,
-p:empty {
+body {
   margin: 0;
-}
-.field-legend:after,
-.field-wrapper:after,
-.form-group:after {
-  display: table;
-  content: "";
-  clear: both;
-}
-.valtype {
-  input,
-  label {
-    &:last-of-type {
-      margin-bottom: 0;
-    }
-  }
-}
-input,
-textarea {
-  border: 1px solid #777;
-  width: 100%;
-  padding: 0.5rem;
-}
-textarea {
-  resize: vertical;
-  &.textarea-small {
-    height: 1.75rem * 3;
-  }
-  &.textarea-medium {
-    height: 1.75rem * 5;
-  }
-  &.textarea-large {
-    height: 1.75rem * 9;
-  }
-}
-.help-block {
-  margin: 0.5rem 0 0;
-  color: #666;
-}
-.help-block ul {
-  margin: 0;
-}
-.help-block.with-errors:empty {
-  height: 0;
-}
-.help-block .list-unstyled {
   padding: 0;
 }
-.has-error .help-block {
-  color: red;
-}
-.form-section,
-.form-section-header {
-  display: none;
-}
-.form-section.active,
-.form-section-header.active {
-  display: block;
-}
-.form-section-header {
-  font-size: 1.5em;
-}
-.form-section-prev,
-.form-section-next {
-  margin-top: 1.5rem;
-}
-.form-section-prev {
-  float: left;
-}
-.form-section-next {
-  float: right;
-}
-.form-section-nav {
-  display: none;
-}
-.form-section-nav li {
-  list-style: none;
-  padding: 0.5rem 1rem;
-  display: block;
-}
-.form-section-nav li.active {
-  font-weight: bold;
-  position: relative;
-}
-.form-section-nav li.active:before {
-  content: "";
-  border-radius: 50%;
-  width: 0.5rem;
-  height: 0.5rem;
-  position: absolute;
-  left: 0;
-  top: 50%;
-  margin-top: -0.25rem;
-  background: currentColor;
-}
-@media screen and (min-width: 40rem) {
-  .form-section-nav,
-  .form-horizontal {
-    float: left;
-  }
-  .form-section-nav {
-    display: block;
-    width: 20%;
-    margin-right: 5%;
-  }
-  .form-horizontal {
-    width: 60%;
-  }
-}
-@media screen and (min-width: 70rem) {
-  .form-section-nav {
-    width: 15%;
-    margin-right: 5%;
-  }
-  .form-horizontal {
-    width: 70%;
-  }
-}
-/* Hacks */
- input[formtype="m11"] {
-    display: none;
- }
-/* Add a cursor to .form-section-nav elements */
-.form-section-nav li {
-  cursor: pointer;
-}
-/* Label .form-section-nav */
-.form-section-nav {
-  position: relative;
-  padding-top: 1rem;
-}
-.form-section-nav:before {
-  content: "Choose a Page";
-  position: absolute;
-  font-size: 1.25rem;
-  color: #666;
-  top: -1rem;
-}
-/* Only display legend to screen readers*/
-#SFDSWFB-legend {
-  position: absolute !important;
-  height: 1px;
-  width: 1px;
-  overflow: hidden;
-  clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
-  clip: rect(1px, 1px, 1px, 1px);
-}
-// Branding stylesheet
-@import url('https://fonts.googleapis.com/css?family=Rubik:300,400,500');
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-}
-// Mixins
-@mixin font-smoothing {
-  -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-}
-@mixin font-size-to-rem($number) {
-  font-size: ($number * 1rem) / $base-font-size;
-}
-@mixin line-height-to-rem($number) {
-  line-height: $number * 1rem / $base-font-size;
-}
-@mixin input-border {
-  border-color: $slate-blue;
-  border-width: 2px;
-  border-style: solid;
-  border-radius: 8px;
-  background-color: $white;
-}
-@mixin input-border-focus {
-  border-color: $bright-blue;
-  box-shadow: inset 0 0 0 2px $bright-blue;
-  outline: none;
-}
-// Global styles
-body,
-input,
-textarea,
-select,
-button {
-  @include rubik;
-  @include fs-body-short;
-  color: $slate-blue;
-  font-weight: $t-normal;
-  -webkit-font-size-adjust: 100%;
-}
-input,
-textarea,
-select {
-  color: $slate-blue;
-}
-.site {
-  font-size: 1.0625em;
-}
-label,
-legend {
-  font-size: (24em / 17);
-  letter-spacing: -0.016em;
-  line-height: 1.5;
-  @include font-smoothing;
-  margin-bottom: 0.5rem;
-}
-legend {
-  margin-bottom: 0.75rem;
-}
-b, strong {
-  font-weight: $t-bold;
-}
-// Make italic fonts bold, since we're
-// not loading italic font weights
-em, i {
-  font-style: normal;
-  font-weight: $t-bold;
-}
-input,
-textarea,
-select {
-  @include input-border;
-  border-radius: 8px;
-  &:focus {
-    @include input-border-focus;
-  }
-}
-input[type='text'],
-input[type='email'],
-input[type='url'],
-input[type='tel'],
-input[type='number'],
-input[type='password'],
-input[type='date'],
-input[type='time'],
-input[type='search'],
-textarea,
-select {
-  padding: 0.64rem 1rem;
-}
-// Cross-browser consistency / bug fixes
-input::-webkit-outer-spin-button,
-input::-webkit-inner-spin-button,
-input::-webkit-calendar-picker-indicator {
-    -webkit-appearance: none;
-    margin: 0;
-}
-input[type=number] {
-    -moz-appearance: textfield;
-}
-input[type='search'] {
-  -webkit-appearance: none;
-}
-::-webkit-input-placeholder { /* Chrome/Opera/Safari */
-  color: rgba($slate-blue, 0.6);
-}
-::-moz-placeholder { /* Firefox 19+ */
-  color: rgba($slate-blue, 0.6);
-}
-:-ms-input-placeholder { /* IE 10+ */
-  color: rgba($slate-blue, 0.6);
-}
-:-moz-placeholder { /* Firefox 18- */
-  color: rgba($slate-blue, 0.6);
-}
-button,
-input[type='submit'] {
-  -webkit-appearance: none;
-  -moz-appearance: none;
-}
-input[type='date'],
-input[type='time'] {
-  // Fix styling inconsistencies with
-  // date and time inputs on iOS
-  -webkit-appearance: textfield;
-  -moz-appearance: textfield;
-  min-height: 3rem;
-}
-input[type='file'] {
-  border: none;
-  padding: 0;
-}
-// Checkbox and radio button styles
-$rc-size: 3rem;
-.checkbox,
-.radio {
-  position: relative;
-  padding-left: $rc-size + 0.75rem;
-  margin-bottom: 1rem;
-  min-height: $rc-size;
-  input,
-  .inline-label::before {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: $rc-size;
-    height: $rc-size;
-  }
-  input {
-    -webkit-appearance: none;
-    -moz-appearance: none;
-    opacity: 0;
-    padding: 0;
-    margin: 0;
-    &:focus + .inline-label:before {
-      @include input-border-focus;
-    }
-  }
-  .inline-label {
-    display: block;
-    font-size: initial;
-    padding-top: 0.75rem;
-    &::before {
-      content: '';
-      @include input-border;
-    }
-  }
-}
-.radio {
-  .inline-label::before,
-  .inline-label::after {
-    border-radius: 50%;
-  }
-  .inline-label::after {
-    content: '';
-    width: $rc-size * 0.625;
-    height: $rc-size * 0.625;
-    top: $rc-size * 0.1875;
-    left: $rc-size * 0.1875;
-    z-index: 2;
-    position: absolute;
-  }
-  input:checked {
-   + .inline-label::after {
-      background: $slate-blue;
-    }
-    &:focus + .inline-label:after {
-      background: $bright-blue;
-    }
-  }
-  input:focus + .inline-label:before {
-    background: $white;
-  }
-}
-.checkbox input:checked {
-  + .inline-label::before {
-    background-size: 50% 40%;
-    background-repeat: no-repeat;
-    background-position: center;
-    background-image: url('data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNNS43NTAwOSAxNi43NTVDNS41ODU3OSAxNi43NTU2IDUuNDIzIDE2LjcyMzYgNS4yNzExMSAxNi42NjFDNS4xMTkyMSAxNi41OTg0IDQuOTgxMjIgMTYuNTA2MyA0Ljg2NTA5IDE2LjM5TDAuMzY1MDkgMTEuODlDMC4yNDU4NzYgMTEuNzc0NiAwLjE1MDg1NCAxMS42MzY1IDAuMDg1NTY3OCAxMS40ODM5QzAuMDIwMjgxMyAxMS4zMzEzIC0wLjAxMzk2MjMgMTEuMTY3MiAtMC4wMTUxNjQ5IDExLjAwMTNDLTAuMDE2MzY3NiAxMC44MzUzIDAuMDE1NDk0NyAxMC42NzA3IDAuMDc4NTYyOSAxMC41MTcyQzAuMTQxNjMxIDEwLjM2MzcgMC4yMzQ2NDIgMTAuMjI0MyAwLjM1MjE3IDEwLjEwNzFDMC40Njk2OTcgOS45ODk4OCAwLjYwOTM4OCA5Ljg5NzI2IDAuNzYzMDkgOS44MzQ2M0MwLjkxNjc5MyA5Ljc3MiAxLjA4MTQzIDkuNzQwNiAxLjI0NzQgOS43NDIyN0MxLjQxMzM2IDkuNzQzOTQgMS41NzczMyA5Ljc3ODY1IDEuNzI5NzQgOS44NDQzN0MxLjg4MjE1IDkuOTEwMDkgMi4wMTk5NSAxMC4wMDU1IDIuMTM1MDkgMTAuMTI1TDUuNzUwMDkgMTMuNzRMMTcuODcwMSAxLjYyMDA0QzE4LjEwNjIgMS4zOTI2NSAxOC40MjIxIDEuMjY3MDkgMTguNzQ5OSAxLjI3MDM5QzE5LjA3NzYgMS4yNzM2OSAxOS4zOTA5IDEuNDA1NiAxOS42MjI0IDEuNjM3NjlDMTkuODUzOCAxLjg2OTc5IDE5Ljk4NDkgMi4xODM1MSAxOS45ODcyIDIuNTExMjdDMTkuOTg5NiAyLjgzOTAzIDE5Ljg2MzEgMy4xNTQ2MSAxOS42MzUxIDMuMzkwMDRMNi42MzUwOSAxNi4zOUM2LjUxODk2IDE2LjUwNjMgNi4zODA5NyAxNi41OTg0IDYuMjI5MDcgMTYuNjYxQzYuMDc3MTggMTYuNzIzNiA1LjkxNDM5IDE2Ljc1NTYgNS43NTAwOSAxNi43NTVaIiBmaWxsPSIjMUMzRTU3Ii8+Cjwvc3ZnPg==');
-  }
-  &:focus + .inline-label::before {
-    background-color: $bright-blue;
-    background-image: url('data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNNS43NTAwOSAxNi43NTVDNS41ODU3OSAxNi43NTU2IDUuNDIzIDE2LjcyMzYgNS4yNzExMSAxNi42NjFDNS4xMTkyMSAxNi41OTg0IDQuOTgxMjIgMTYuNTA2MyA0Ljg2NTA5IDE2LjM5TDAuMzY1MDkgMTEuODlDMC4yNDU4NzYgMTEuNzc0NiAwLjE1MDg1NCAxMS42MzY1IDAuMDg1NTY3OCAxMS40ODM5QzAuMDIwMjgxMyAxMS4zMzEzIC0wLjAxMzk2MjMgMTEuMTY3MiAtMC4wMTUxNjQ5IDExLjAwMTNDLTAuMDE2MzY3NiAxMC44MzUzIDAuMDE1NDk0NyAxMC42NzA3IDAuMDc4NTYyOSAxMC41MTcyQzAuMTQxNjMxIDEwLjM2MzcgMC4yMzQ2NDIgMTAuMjI0MyAwLjM1MjE3IDEwLjEwNzFDMC40Njk2OTcgOS45ODk4OCAwLjYwOTM4OCA5Ljg5NzI2IDAuNzYzMDkgOS44MzQ2M0MwLjkxNjc5MyA5Ljc3MiAxLjA4MTQzIDkuNzQwNiAxLjI0NzQgOS43NDIyN0MxLjQxMzM2IDkuNzQzOTQgMS41NzczMyA5Ljc3ODY1IDEuNzI5NzQgOS44NDQzN0MxLjg4MjE1IDkuOTEwMDkgMi4wMTk5NSAxMC4wMDU1IDIuMTM1MDkgMTAuMTI1TDUuNzUwMDkgMTMuNzRMMTcuODcwMSAxLjYyMDA0QzE4LjEwNjIgMS4zOTI2NSAxOC40MjIxIDEuMjY3MDkgMTguNzQ5OSAxLjI3MDM5QzE5LjA3NzYgMS4yNzM2OSAxOS4zOTA5IDEuNDA1NiAxOS42MjI0IDEuNjM3NjlDMTkuODUzOCAxLjg2OTc5IDE5Ljk4NDkgMi4xODM1MSAxOS45ODcyIDIuNTExMjdDMTkuOTg5NiAyLjgzOTAzIDE5Ljg2MzEgMy4xNTQ2MSAxOS42MzUxIDMuMzkwMDRMNi42MzUwOSAxNi4zOUM2LjUxODk2IDE2LjUwNjMgNi4zODA5NyAxNi41OTg0IDYuMjI5MDcgMTYuNjYxQzYuMDc3MTggMTYuNzIzNiA1LjkxNDM5IDE2Ljc1NTYgNS43NTAwOSAxNi43NTVaIiBmaWxsPSIjZmZmIi8+Cjwvc3ZnPg==');
-  }
-}
-// Buttons
-button,
-input[type='submit'],
-.btn {
-  border-radius: $radius;
-  font-weight: $t-bold;
-  padding: 0.75rem 1.5rem;
-  display: inline-block;
-  text-decoration: none;
-  margin: 0 0.4375rem 0.875rem 0;
-}
-button,
-input[type='submit'] {
-  border: 3px solid $bright-blue;
-  background: $bright-blue;
-  color: $white;
-  line-height: 1.75;
-  &:hover, &:focus {
-    background: darken($bright-blue, 10%);
-    border-color: darken($bright-blue, 10%);
-  }
-  &:active {
-    background: darken($bright-blue, 15%);
-    border-color: darken($bright-blue, 15%);
-  }
-  &:hover, &:active, &:focus, &:visited {
-    color: $white;
-    text-decoration: none;
-  }
-}
-// Dropdowns
-select {
-  display: block;
-  background-repeat: no-repeat;
-  -moz-appearance: none;
-  -webkit-appearance: none;
-  // Background gradient needed for <= IE9
-  // See https://www.filamentgroup.com/lab/select-css.html
-  background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTEiIHZpZXdCb3g9IjAgMCAxOCAxMSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTguOTYwMDggMTAuNzU1QzguNzk1NzcgMTAuNzU1NiA4LjYzMjk4IDEwLjcyMzYgOC40ODEwOSAxMC42NjFDOC4zMjkyIDEwLjU5ODMgOC4xOTEyMSAxMC41MDYyIDguMDc1MDggMTAuMzlMMC41NzUwNzUgMi44OUMwLjM0MDM1OSAyLjY1NTI4IDAuMjA4NDk2IDIuMzM2OTQgMC4yMDg0OTYgMi4wMDVDMC4yMDg0OTYgMS42NzMwNiAwLjM0MDM1OSAxLjM1NDcxIDAuNTc1MDc1IDEuMTJDMC44MDk3OTIgMC44ODUyOCAxLjEyODE0IDAuNzUzNDE4IDEuNDYwMDggMC43NTM0MThDMS43OTIwMSAwLjc1MzQxOCAyLjExMDM2IDAuODg1MjggMi4zNDUwOCAxLjEyTDguOTYwMDggNy43NEwxNS41NzUxIDEuMTJDMTUuODA5OCAwLjg4NTI4IDE2LjEyODEgMC43NTM0MTggMTYuNDYwMSAwLjc1MzQxOEMxNi43OTIgMC43NTM0MTggMTcuMTEwNCAwLjg4NTI4IDE3LjM0NTEgMS4xMkMxNy41Nzk4IDEuMzU0NzEgMTcuNzExNyAxLjY3MzA2IDE3LjcxMTcgMi4wMDVDMTcuNzExNyAyLjMzNjk0IDE3LjU3OTggMi42NTUyOCAxNy4zNDUxIDIuODlMOS44NDUwOCAxMC4zOUM5LjcyODk0IDEwLjUwNjIgOS41OTA5NSAxMC41OTgzIDkuNDM5MDYgMTAuNjYxQzkuMjg3MTcgMTAuNzIzNiA5LjEyNDM4IDEwLjc1NTYgOC45NjAwOCAxMC43NTVaIiBmaWxsPSIjMUMzRTU3Ii8+Cjwvc3ZnPgo='), linear-gradient(#fff, #fff);
-  &:focus {
-    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTEiIHZpZXdCb3g9IjAgMCAxOCAxMSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTguOTYwMDggMTAuNzU1QzguNzk1NzcgMTAuNzU1NiA4LjYzMjk4IDEwLjcyMzYgOC40ODEwOSAxMC42NjFDOC4zMjkyIDEwLjU5ODMgOC4xOTEyMSAxMC41MDYyIDguMDc1MDggMTAuMzlMMC41NzUwNzUgMi44OUMwLjM0MDM1OSAyLjY1NTI4IDAuMjA4NDk2IDIuMzM2OTQgMC4yMDg0OTYgMi4wMDVDMC4yMDg0OTYgMS42NzMwNiAwLjM0MDM1OSAxLjM1NDcxIDAuNTc1MDc1IDEuMTJDMC44MDk3OTIgMC44ODUyOCAxLjEyODE0IDAuNzUzNDE4IDEuNDYwMDggMC43NTM0MThDMS43OTIwMSAwLjc1MzQxOCAyLjExMDM2IDAuODg1MjggMi4zNDUwOCAxLjEyTDguOTYwMDggNy43NEwxNS41NzUxIDEuMTJDMTUuODA5OCAwLjg4NTI4IDE2LjEyODEgMC43NTM0MTggMTYuNDYwMSAwLjc1MzQxOEMxNi43OTIgMC43NTM0MTggMTcuMTEwNCAwLjg4NTI4IDE3LjM0NTEgMS4xMkMxNy41Nzk4IDEuMzU0NzEgMTcuNzExNyAxLjY3MzA2IDE3LjcxMTcgMi4wMDVDMTcuNzExNyAyLjMzNjk0IDE3LjU3OTggMi42NTUyOCAxNy4zNDUxIDIuODlMOS44NDUwOCAxMC4zOUM5LjcyODk0IDEwLjUwNjIgOS41OTA5NSAxMC41OTgzIDkuNDM5MDYgMTAuNjYxQzkuMjg3MTcgMTAuNzIzNiA5LjEyNDM4IDEwLjc1NTYgOC45NjAwOCAxMC43NTVaIiBmaWxsPSIjNEY2NkVFIi8+Cjwvc3ZnPgo='), linear-gradient(#fff, #fff);
-  }
-  background-size: 18px 11px;
-  background-position: right 1rem top 50%;
-  padding-right: 3rem;
-  border: 2px solid $slate-blue;
-  option {
-    font-weight: normal;
-    font-size: 100%;
-  }
-}
-select:-moz-focusring {
-  color: transparent;
-  text-shadow: 0 0 0 $bright-blue;
-}
-select::-ms-expand {
-  // Hide browser-standard chevron on IE
-  display: none;
-}
-option:not(:checked) {
-  color: $black;
-}
-// Section headers
-@mixin h1 {
-  color: $slate-blue;
-  font-weight: $t-bold;
-  margin: 1.75rem 0 0;
-  @include font-size-to-rem(33);
-  @include line-height-to-rem(44);
-  &.title {
-    line-height: normal;
-    font-weight: $t-light;
-  }
-  @media screen and (min-width: 40rem) {
-    @include font-size-to-rem(62);
-    line-height: normal;
-    letter-spacing: -0.3px;
-    &.title {
-      @include font-size-to-rem(50);
-      letter-spacing: 0;
-    }
-  }
-}
-@mixin h2 {
-  color: $slate-blue;
-  font-weight: $t-bold;
-  margin: 1.25rem 0 0.875rem;
-  @include font-size-to-rem(40);
-  line-height: normal;
-}
-@mixin h3 {
-  color: $slate-blue;
-  font-weight: $t-bold;
-  margin: 1.25rem 0 0.875rem;
-  @include font-size-to-rem(30);
-  @include line-height-to-rem(42);
-}
-@mixin h4 {
-  font-weight: $t-normal;
-  margin: 1.25rem 0 0.875rem;
-  @include font-size-to-rem(24);
-  @include line-height-to-rem(34);
-}
-@mixin h5 {
-  margin: 1rem 0 0.875rem;
-  font-weight: $t-bold;
-  @include font-size-to-rem(20);
-  @include line-height-to-rem(27);
-}
-@mixin display-2 {
-  font-weight: $t-light;
-  @include font-size-to-rem(50);
-  @include line-height-to-rem(59);
-  letter-spacing: -1px;
-}
-.t-display-2 {
-  @include display-2;
-}
-h1, .h1 {
-  @include h1;
-}
-h2, .h2 {
-  @include h2;
-}
-h3, .h3 {
-  @include h3;
-}
-h4, .h4 {
-  @include h4;
-}
-h5, .h5 {
-  @include h5;
-}
-// Form layout
-.form-section-header {
-  @include h3;
-  margin-top: 0;
-}
-.form-group {
-  margin-bottom: 2.5rem;
-  p + &,
-  ul + & {
-    margin-top: 2rem;
-  }
-}
-.form-content {
+form {
   @include contain-1090;
 }
-.form-header-meta {
-  position: relative;
-  margin-bottom: 1.5rem;
+.form-group {
+  @include clearfix;
 }
-.form-header-meta,
-.form-section h1,
-.form-content-inner {
+.sections-container {
   max-width: 38rem;
-}
-.form-section-nav {
-  background: $blue-1;
-  border-radius: $radius;
-  padding: 4.5rem 0 1.5rem;
-  &::before {
-    top: 1.75rem;
-    left: 2rem;
-    @include h5;
-    color: $slate-blue;
-    margin-top: 0;
-  }
-  li {
-    padding: 1rem 2rem;
-    color: $bright-blue;
-    &.active {
-      font-weight: $t-bold;
-      background: $bright-blue;
-      color: $white;
-      @include font-smoothing;
-      &::before {
-        content: none;
-      }
-    }
-  }
-}
-@media screen and (min-width: 40rem), screen and (min-width: 70rem) {
-  .form-horizontal {
-    width: 60%;
-  }
-  .form-section-nav {
-    width: 33%;
-    margin-right: 5%;
-  }
-}
-.help-text {
-  color: $slate-blue;
-  font-size: (15rem / 17);
-  p:first-child {
-    margin-top: 0.5rem;
-  }
-  p, ul {
-    margin: 0;
-  }
-}
-.has-error .help-block {
-  font-size: 1rem;
-  background: $red-4;
-  color: $white;
-  padding: 0.25rem 0.75rem;
-  border-radius: $radius;
-  display: inline-block;
-  @include font-smoothing;
-  &.with-errors-inline {
-    @include fs-small-text;
-    padding: 0;
-    background: transparent;
-    color: $red-4;
-    position: relative;
-    top: -0.25rem;
-    margin: 0 0 1rem;
-  }
-  li {
-    list-style-type: none;
-  }
-}
-.form-section-prev,
-.form-section-next {
-  border: 3px solid $bright-blue;
-  color: $bright-blue;
-  background-size: 20px 16px;
-  font-weight: $t-bold;
-  &:hover, &:focus, &:active {
-    box-shadow: 0 0 0 1px $bright-blue;
-    background-color: rgba($bright-blue, 0.05);
-  }
-}
-.form-section-prev {
-  padding-left: 3rem;
-  background: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAyMCAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTAuMzY0NjggOC44ODQ5M0w2LjcyOTY4IDE1LjI0OTlDNi44Mzk5MiAxNS4zODQ2IDYuOTc3MDUgMTUuNDk0NyA3LjEzMjI5IDE1LjU3MzNDNy4yODc1NCAxNS42NTE5IDcuNDU3NDkgMTUuNjk3MiA3LjYzMTI1IDE1LjcwNjNDNy44MDUwMSAxNS43MTU0IDcuOTc4NzcgMTUuNjg4MiA4LjE0MTM5IDE1LjYyNjNDOC4zMDQwMiAxNS41NjQ0IDguNDUxOTMgMTUuNDY5MiA4LjU3NTY3IDE1LjM0NjlDOC42OTk0MSAxNS4yMjQ2IDguNzk2MjQgMTUuMDc3NyA4Ljg1OTk3IDE0LjkxNThDOC45MjM3IDE0Ljc1MzkgOC45NTI5MiAxNC41ODA1IDguOTQ1NzcgMTQuNDA2NkM4LjkzODYxIDE0LjIzMjggOC44OTUyNCAxNC4wNjIzIDguODE4NDMgMTMuOTA2MkM4Ljc0MTYxIDEzLjc1MDEgOC42MzMwNSAxMy42MTE3IDguNDk5NjggMTMuNDk5OUw0LjI2OTY4IDkuMjQ5OTNIMTguNzY5N0MxOS4xMDEyIDkuMjQ5OTMgMTkuNDE5MSA5LjExODIzIDE5LjY1MzYgOC44ODM4MUMxOS44ODggOC42NDkzOSAyMC4wMTk3IDguMzMxNDUgMjAuMDE5NyA3Ljk5OTkzQzIwLjAxOTcgNy42Njg0MSAxOS44ODggNy4zNTA0NiAxOS42NTM2IDcuMTE2MDRDMTkuNDE5MSA2Ljg4MTYyIDE5LjEwMTIgNi43NDk5MyAxOC43Njk3IDYuNzQ5OTNINC4yNjk2OEw4LjQ5OTY4IDIuNDk5OTNDOC42OTY5IDIuMjU5MDcgOC43OTcxNSAxLjk1MzMgOC43ODA4MiAxLjY0MjQzQzguNzY0NDkgMS4zMzE1NyA4LjYzMjc1IDEuMDM3OTggOC40MTEzOCAwLjgxOTExOEM4LjE5MDAyIDAuNjAwMjUzIDcuODk0OTUgMC40NzE4NjIgNy41ODM5MiAwLjQ1OTA2NUM3LjI3Mjg5IDAuNDQ2MjY5IDYuOTY4MjggMC41NDk5ODcgNi43Mjk2OCAwLjc0OTkyN0wwLjM2NDY4IDcuMTE0OTNDMC4xMzA3OTggNy4zNTAwOSAtMC4wMDA0ODgyODEgNy42NjgyNiAtMC4wMDA0ODgyODEgNy45OTk5M0MtMC4wMDA0ODgyODEgOC4zMzE1OSAwLjEzMDc5OCA4LjY0OTc3IDAuMzY0NjggOC44ODQ5M1oiIGZpbGw9IiM0RjY2RUUiLz4KPC9zdmc+Cg==')left 1rem top 50% no-repeat;
-}
-.form-section-next {
-  padding-right: 3rem;
-  background: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAyMCAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE5LjYzNSA3LjExNDkzTDEzLjI3IDAuNzQ5OTI3QzEzLjAzMTQgMC41NDk5ODcgMTIuNzI2OCAwLjQ0NjI2OSAxMi40MTU4IDAuNDU5MDY1QzEyLjEwNDcgMC40NzE4NjIgMTEuODA5NyAwLjYwMDI1MyAxMS41ODgzIDAuODE5MTE4QzExLjM2NjkgMS4wMzc5OCAxMS4yMzUyIDEuMzMxNTcgMTEuMjE4OSAxLjY0MjQzQzExLjIwMjUgMS45NTMzIDExLjMwMjggMi4yNTkwNyAxMS41IDIuNDk5OTNMMTUuNzMgNi43Mjk5M0gxLjI1QzAuOTE4NDc5IDYuNzI5OTMgMC42MDA1MzcgNi44NjE2MiAwLjM2NjExNyA3LjA5NjA0QzAuMTMxNjk2IDcuMzMwNDYgMCA3LjY0ODQxIDAgNy45Nzk5M0MwIDguMzExNDUgMC4xMzE2OTYgOC42MjkzOSAwLjM2NjExNyA4Ljg2MzgxQzAuNjAwNTM3IDkuMDk4MjMgMC45MTg0NzkgOS4yMjk5MyAxLjI1IDkuMjI5OTNIMTUuNzVMMTEuNSAxMy40OTk5QzExLjI2NTMgMTMuNzM0NiAxMS4xMzM0IDE0LjA1MyAxMS4xMzM0IDE0LjM4NDlDMTEuMTMzNCAxNC43MTY5IDExLjI2NTMgMTUuMDM1MiAxMS41IDE1LjI2OTlDMTEuNzM0NyAxNS41MDQ2IDEyLjA1MzEgMTUuNjM2NSAxMi4zODUgMTUuNjM2NUMxMi43MTY5IDE1LjYzNjUgMTMuMDM1MyAxNS41MDQ2IDEzLjI3IDE1LjI2OTlMMTkuNjM1IDguODg0OTNDMTkuODY4OSA4LjY0OTc3IDIwLjAwMDIgOC4zMzE1OSAyMC4wMDAyIDcuOTk5OTNDMjAuMDAwMiA3LjY2ODI2IDE5Ljg2ODkgNy4zNTAwOSAxOS42MzUgNy4xMTQ5M1oiIGZpbGw9IiM0RjY2RUUiLz4KPC9zdmc+Cg==') right 1rem top 50% no-repeat;
-}
-.btn.submit {
-  float: right;
-}
-// Field-specific styles
-.field-number {
-  input, .units {
-    display: inline-block;
-  }
-  .units {
-    margin-left: 0.5rem;
-  }
-}
-.field-price {
-  input {
-    width: 10rem;
-  }
-  input, .dollar {
-    display: inline-block;
-  }
-  .dollar {
-    font-weight: $t-light;
-    font-size: 3rem;
-    line-height: 1;
-    position: relative;
-    top: 0.75rem;
-    margin-right: 0.5rem;
-    color: $slate-blue;
-  }
+  padding-bottom: 60px;
 }
 div[data-hidden] {
@@ -798,22 +47,6 @@ div[data-hidden] {
   border: 0;
 }
-.field-address {
-  .form-group {
-    margin-bottom: 0;
-  }
-  label {
-    font-size: (15rem / 17);
-    margin: 0 0 0.25rem;
-  }
-  input {
-    margin-bottom: 0.75rem;
-  }
-}
 .optional {
   opacity: 0.8;
 }
@@ -840,159 +73,4 @@ div[data-hidden] {
   line-height: 1;
   padding: 0.5rem;
   height: 2.5rem;
-}
-@media screen and (min-width: 48rem) {
-  .field-address-state,
-  .field-address-zip {
-    display: inline-block;
-  }
-  .field-address-state {
-    margin-right: 0.75rem;
-  }
-}
-.field-link {
-  a {
-    display: block;
-    border: 3px solid $bright-blue;
-    padding: 2rem;
-    @include h5;
-    color: $bright-blue;
-    text-decoration: none;
-    border-radius: 8px;
-  }
-}
-.field-file {
-  label {
-    position: relative;
-    cursor: pointer;
-    height: 6.5rem;
-  }
-  input {
-    min-width: 14rem;
-    margin: 0;
-    filter: alpha(opacity=0);
-    opacity: 0;
-  }
-  .file-custom {
-    font-size: 1rem;
-    position: absolute;
-    padding-top: 2.75rem;
-    top: 0;
-    right: 0;
-    left: 0;
-    z-index: 5;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    -webkit-user-select: none;
-       -moz-user-select: none;
-        -ms-user-select: none;
-            user-select: none;
-    &::after {
-      content: attr(data-filename);
-    }
-    &::before {
-      @extend button;
-      z-index: 6;
-      content: "Choose a file";
-      background: $white;
-      color: $bright-blue;
-      background-size: 20px 16px;
-      font-weight: $t-bold;
-    }
-    &:hover, &:focus, &:active {
-      &::before {
-        box-shadow: inset 0 0 0 2px darken($bright-blue, 10%);
-        color: darken($bright-blue, 10%);
-        background-color: rgba($bright-blue, 0.05);
-        color: $bright-blue;
-      }
-    }
-  }
-}
-// Progress
-.form-progress {
-  position: absolute;
-  top: 0;
-  right: 0;
-}
-.form-progress-bubble {
-  background: $purple-1;
-  padding: 0.25rem 1rem;
-  border-radius: 1.5rem;
-  position: relative;
-  top: -0.25rem;
-  font-size: 1rem;
-}
-.form-progress-bar {
-  font-size: 0;
-  color: transparent;
-  background: $purple-1;
-  height: 0.75rem;
-  display: inline-block;
-  width: 10rem;
-  position: relative;
-  top: -0.125rem;
-  border-radius: 0.375rem;
-  &::before {
-    content: '';
-    background: #6b8292;
-    height: 0.75rem;
-    border-radius: 0.375rem 0 0 0.375rem;
-    position: absolute;
-    top: 0;
-    left: 0;
-  }
-}
-@for $i from 1 to 90 {
-  .form-progress-bar-#{$i}::before {
-    width: $i * 1%;
-  }
-}
-@for $i from 91 to 99 {
-  .form-progress-bar-#{$i} {
-    background: #6b8292;
-    &::before {
-      background: $purple-1;
-      left: auto;
-      right: 0;
-      border-radius: 0 0.375rem 0.375rem 0;
-      width: (100% - ($i * 1%));
-    }
-  }
-}
-// Field length
-@for $i from 1 to 16 {
-  .length-#{$i} {
-    width: 2.5rem + (0.65rem * $i);
-    margin-bottom: 1rem;
-  }
-}
-// Header
-.hero-banner h2 {
-  font-size: 1rem;
-  font-weight: $t-normal;
-  margin-bottom: 0.25rem;
-}
-@import 'sfgov';
+}

data/assets/css/style.scss CHANGED

@@ -89,8 +89,48 @@ $shadow: 0 1px 4px rgba(#000, 0.06);
   }
 }
+// Annotations
+.field-annotation {
+  display: none;
+  background: $yellow-1;
+  padding: 0.75rem;
+  font-size: 0.875rem;
+  position: absolute;
+  top: 2.5rem;
+  left: 0;
+  box-shadow: 0 3px 0 $slate-blue;
+  border: 1px solid $slate-blue;
+  z-index: 20;
+  border-radius: 2px;
+  .radio &,
+  .checkbox & {
+    left: 8rem;
+    top: 0;
+  }
+  p {
+    margin: 0 0 0.25rem;
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+}
 // Form settings
+.form-settings,
+hypothesis-adder,
+.annotator-outer {
+  display: none;
+  .admin & {
+    display: block;
+  }
+}
 .form-settings {
   $offset: 4.5rem;
   background: #fff;
@@ -126,6 +166,10 @@ $shadow: 0 1px 4px rgba(#000, 0.06);
     }
   }
+  .form-group {
+    margin-bottom: 0.5rem;
+  }
   &.active {
     transform: translateY($offset);
@@ -135,35 +179,6 @@ $shadow: 0 1px 4px rgba(#000, 0.06);
   }
 }
-.field-annotation {
-  display: none;
-  background: $yellow-1;
-  padding: 0.75rem;
-  font-size: 0.875rem;
-  position: absolute;
-  top: 2.5rem;
-  left: 0;
-  box-shadow: 0 3px 0 $slate-blue;
-  border: 1px solid $slate-blue;
-  z-index: 20;
-  border-radius: 2px;
-  .radio &,
-  .checkbox & {
-    left: 8rem;
-    top: 0;
-  }
-  p {
-    margin: 0 0 0.25rem;
-    &:last-child {
-      margin-bottom: 0;
-    }
-  }
-}
 // Settings body classes
 .all-pages {

data/assets/js/mousetrap.js ADDED

@@ -0,0 +1,11 @@
+/* mousetrap v1.6.3 craig.is/killing/mice */
+(function(q,u,c){function v(a,b,g){a.addEventListener?a.addEventListener(b,g,!1):a.attachEvent("on"+b,g)}function z(a){if("keypress"==a.type){var b=String.fromCharCode(a.which);a.shiftKey||(b=b.toLowerCase());return b}return n[a.which]?n[a.which]:r[a.which]?r[a.which]:String.fromCharCode(a.which).toLowerCase()}function F(a){var b=[];a.shiftKey&&b.push("shift");a.altKey&&b.push("alt");a.ctrlKey&&b.push("ctrl");a.metaKey&&b.push("meta");return b}function w(a){return"shift"==a||"ctrl"==a||"alt"==a||
+"meta"==a}function A(a,b){var g,d=[];var e=a;"+"===e?e=["+"]:(e=e.replace(/\+{2}/g,"+plus"),e=e.split("+"));for(g=0;g<e.length;++g){var m=e[g];B[m]&&(m=B[m]);b&&"keypress"!=b&&C[m]&&(m=C[m],d.push("shift"));w(m)&&d.push(m)}e=m;g=b;if(!g){if(!p){p={};for(var c in n)95<c&&112>c||n.hasOwnProperty(c)&&(p[n[c]]=c)}g=p[e]?"keydown":"keypress"}"keypress"==g&&d.length&&(g="keydown");return{key:m,modifiers:d,action:g}}function D(a,b){return null===a||a===u?!1:a===b?!0:D(a.parentNode,b)}function d(a){function b(a){a=
+a||{};var b=!1,l;for(l in p)a[l]?b=!0:p[l]=0;b||(x=!1)}function g(a,b,t,f,g,d){var l,E=[],h=t.type;if(!k._callbacks[a])return[];"keyup"==h&&w(a)&&(b=[a]);for(l=0;l<k._callbacks[a].length;++l){var c=k._callbacks[a][l];if((f||!c.seq||p[c.seq]==c.level)&&h==c.action){var e;(e="keypress"==h&&!t.metaKey&&!t.ctrlKey)||(e=c.modifiers,e=b.sort().join(",")===e.sort().join(","));e&&(e=f&&c.seq==f&&c.level==d,(!f&&c.combo==g||e)&&k._callbacks[a].splice(l,1),E.push(c))}}return E}function c(a,b,c,f){k.stopCallback(b,
+b.target||b.srcElement,c,f)||!1!==a(b,c)||(b.preventDefault?b.preventDefault():b.returnValue=!1,b.stopPropagation?b.stopPropagation():b.cancelBubble=!0)}function e(a){"number"!==typeof a.which&&(a.which=a.keyCode);var b=z(a);b&&("keyup"==a.type&&y===b?y=!1:k.handleKey(b,F(a),a))}function m(a,g,t,f){function h(c){return function(){x=c;++p[a];clearTimeout(q);q=setTimeout(b,1E3)}}function l(g){c(t,g,a);"keyup"!==f&&(y=z(g));setTimeout(b,10)}for(var d=p[a]=0;d<g.length;++d){var e=d+1===g.length?l:h(f||
+A(g[d+1]).action);n(g[d],e,f,a,d)}}function n(a,b,c,f,d){k._directMap[a+":"+c]=b;a=a.replace(/\s+/g," ");var e=a.split(" ");1<e.length?m(a,e,b,c):(c=A(a,c),k._callbacks[c.key]=k._callbacks[c.key]||[],g(c.key,c.modifiers,{type:c.action},f,a,d),k._callbacks[c.key][f?"unshift":"push"]({callback:b,modifiers:c.modifiers,action:c.action,seq:f,level:d,combo:a}))}var k=this;a=a||u;if(!(k instanceof d))return new d(a);k.target=a;k._callbacks={};k._directMap={};var p={},q,y=!1,r=!1,x=!1;k._handleKey=function(a,
+d,e){var f=g(a,d,e),h;d={};var k=0,l=!1;for(h=0;h<f.length;++h)f[h].seq&&(k=Math.max(k,f[h].level));for(h=0;h<f.length;++h)f[h].seq?f[h].level==k&&(l=!0,d[f[h].seq]=1,c(f[h].callback,e,f[h].combo,f[h].seq)):l||c(f[h].callback,e,f[h].combo);f="keypress"==e.type&&r;e.type!=x||w(a)||f||b(d);r=l&&"keydown"==e.type};k._bindMultiple=function(a,b,c){for(var d=0;d<a.length;++d)n(a[d],b,c)};v(a,"keypress",e);v(a,"keydown",e);v(a,"keyup",e)}if(q){var n={8:"backspace",9:"tab",13:"enter",16:"shift",17:"ctrl",
+18:"alt",20:"capslock",27:"esc",32:"space",33:"pageup",34:"pagedown",35:"end",36:"home",37:"left",38:"up",39:"right",40:"down",45:"ins",46:"del",91:"meta",93:"meta",224:"meta"},r={106:"*",107:"+",109:"-",110:".",111:"/",186:";",187:"=",188:",",189:"-",190:".",191:"/",192:"`",219:"[",220:"\\",221:"]",222:"'"},C={"~":"`","!":"1","@":"2","#":"3",$:"4","%":"5","^":"6","&":"7","*":"8","(":"9",")":"0",_:"-","+":"=",":":";",'"':"'","<":",",">":".","?":"/","|":"\\"},B={option:"alt",command:"meta","return":"enter",
+escape:"esc",plus:"+",mod:/Mac|iPod|iPhone|iPad/.test(navigator.platform)?"meta":"ctrl"},p;for(c=1;20>c;++c)n[111+c]="f"+c;for(c=0;9>=c;++c)n[c+96]=c.toString();d.prototype.bind=function(a,b,c){a=a instanceof Array?a:[a];this._bindMultiple.call(this,a,b,c);return this};d.prototype.unbind=function(a,b){return this.bind.call(this,a,function(){},b)};d.prototype.trigger=function(a,b){if(this._directMap[a+":"+b])this._directMap[a+":"+b]({},a);return this};d.prototype.reset=function(){this._callbacks={};
+this._directMap={};return this};d.prototype.stopCallback=function(a,b){if(-1<(" "+b.className+" ").indexOf(" mousetrap ")||D(b,this.target))return!1;if("composedPath"in a&&"function"===typeof a.composedPath){var c=a.composedPath()[0];c!==a.target&&(b=c)}return"INPUT"==b.tagName||"SELECT"==b.tagName||"TEXTAREA"==b.tagName||b.isContentEditable};d.prototype.handleKey=function(){return this._handleKey.apply(this,arguments)};d.addKeycodes=function(a){for(var b in a)a.hasOwnProperty(b)&&(n[b]=a[b]);p=null};
+d.init=function(){var a=d(u),b;for(b in a)"_"!==b.charAt(0)&&(d[b]=function(b){return function(){return a[b].apply(a,arguments)}}(b))};d.init();q.Mousetrap=d;"undefined"!==typeof module&&module.exports&&(module.exports=d);"function"===typeof define&&define.amd&&define(function(){return d})}})("undefined"!==typeof window?window:null,"undefined"!==typeof window?document:null);

data/assets/js/script.js CHANGED

@@ -14,6 +14,10 @@ $(document).ready(function(){
   // Initialize bootstrap-validator
   $(".form").validator();
+  Mousetrap.bind(['command+alt+.', 'ctrl+alt+.'], function(e) {
+    $('body').toggleClass('admin');
+  });
   // --- Settings checkboxes ---
   function settingInit(setting) {
@@ -86,6 +90,12 @@ $(document).ready(function(){
     event.preventDefault();
   }
+  function validPage() {
+    var activePage = $('.form-section.active');
+    $('.form-section.active').validator('validate');
+    return activePage.children('.has-error').length === 0 ? true : false;
+  }
   // Previous page
   $('.form-section-prev').click(function() {
     paginate(-1);
@@ -93,7 +103,9 @@ $(document).ready(function(){
   // Next page
   $('.form-section-next').click(function() {
-    paginate(1);
+    if (validPage()) {
+      paginate(1);
+    }
   });
   //  ---- Conditionals  ----

metadata CHANGED

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: form-jekyll
 version: !ruby/object:Gem::Version
-  version: 0.5.4
+  version: 0.6.0
 platform: ruby
 authors:
 - Josh Rubenoff
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2019-11-08 00:00:00.000000000 Z
+date: 2019-12-19 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll
@@ -105,6 +105,7 @@ files:
 - assets/images/settings-toggle.svg
 - assets/images/sfgov.svg
 - assets/js/jquery.js
+- assets/js/mousetrap.js
 - assets/js/script.js
 - assets/js/validator.js
 homepage: https://github.com/sfdigitalservices/form-jekyll