form-jekyll 0.4.2 → 0.4.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 1e45546fe7f704b3781861c946e21f369761d572724f1476977df834ccb63b5e
-  data.tar.gz: 1bb01c8be4ee7a95d3e2089e7ab0d72210a0f6307fbd426233faf016076a0738
+  metadata.gz: 9d4eedf7d115d897a02d59f493e7119a4f67af9f789986fd8960399e97dc87c7
+  data.tar.gz: c4608e50096dc277fa83b97bb80bd077e89c32c6bf48a518455bbb07af0a2fbf
 SHA512:
-  metadata.gz: eedf2b33692e184c218042aa7d6cdb82e6d635c2fad2f35cb65172772fdabc0a6f80b00e8d030ee22dbef1e67de77ca8e2f557de305e7a1a32c108b5096763b9
-  data.tar.gz: 69a48cb0d587dafd55a1802a2c03049e11702c2f9b5674b8d3a6f5f85cfca06bf5f2f44366ea3c0506fd734d32d361c48607a3e51d114766173f215de3d262fc
+  metadata.gz: 52ee297c15aae4ac4a3e1ed27c924daf55ecf7e79ea7b95eb34c2821e36618999bbc6d39ca9aa039c0231b5d752e156eceb1430f2e1c5cb0794c83e1aadea695
+  data.tar.gz: 19b70cc8bd8f7ae572935aca6cce0fa3ada77b8c06b2acdba860816ac4617cccae0a152c1f1c76dce7f1227ecb53730c4033cddb69fd170a61a178a45ed84ee1

data/_includes/elements/annotation.html

@@ -1,3 +1,3 @@
-{% if annotation %}
-  <div class="field-annotation">{{ annotation | markdownify | improve}}</div>
+{% if include.annotation %}
+  <div class="field-annotation">{{ include.annotation | markdownify | improve}}</div>
 {% endif %}

data/_includes/fields/checkbox.html

@@ -7,6 +7,7 @@
     {% if options %}
       {% for option in options %}
         <label class="checkbox">
+          {% include elements/annotation.html annotation=option.annotation %}
           <input type="checkbox" value="{{ option.label  }}" name="{{ name }}"
           {% if option.checked %}checked="checked"{% endif %}
           {% if option.shows %} data-shows="{{ option.shows }}"{% endif %}

data/_includes/fields/radio.html

@@ -5,6 +5,7 @@
   <div class="field-container valtype" data-valtype="radios">
     {% for option in options %}
       <label class="radio">
+        {% include elements/annotation.html  annotation=option.annotation %}
         <input type="radio" value="{{ option.label  }}" name="{{ name }}"
         {% if option.checked %} checked="checked"{% endif %}
         {% if option.shows %} data-shows="{{ option.shows }}"{% endif %}

data/_includes/render_field.html

@@ -44,16 +44,16 @@
   {% elsif field.type == 'link' %}
     {% include {{ includepath }} %}
   {% elsif field.type == 'address' %}
-    <div class="field-address {% if field.hidden %}field-hidden{% endif %}">
+    <div class="field-address" {% if field.hidden %}data-hidden="true"{% endif %}>
 
-      {% include elements/annotation.html %}
+      {% include elements/annotation.html annotation=annotation %}
       {% include {{ includepath }} %}
 
     </div>
   {% else %}
-    <div class="form-group field-{{ field.type }} {% if field.hidden %}field-hidden{% endif %}">
+    <div class="form-group field-{{ field.type }}" {% if field.hidden %}data-hidden="true"{% endif %}>
 
-      {% include elements/annotation.html %}
+      {% include elements/annotation.html annotation=annotation %}
 
       {% if field.type %}
         {% include {{ includepath }} %}

data/_includes/render_form.html

@@ -1,19 +1,35 @@
 {% capture currentform %}{{ include.form }}{% endcapture %}
 
-{% for page in site.data[currentform] %}
+{% for currentpage in site.data[currentform] %}
 
-  {% assign fields = page.fields %}
-  {% assign label = page.title %}
+  {% assign fields = currentpage.fields %}
+  {% assign label = currentpage.title %}
 
-  <div class="form-section"{% if page.group %} data-group="{{ page.group }}"{% endif %}>
+  {% assign length = forloop.length %}
 
-    {% comment %} Page headers {% endcomment %}
-    <header class="hero-banner default">
+  {% assign percentdone = forloop.index | times: '100' | divided_by: forloop.length %}
+
+  <div class="form-section"{% if currentpage.group %} data-group="{{ currentpage.group }}"{% endif %}>
+
+    <header class="hero-banner default" id="page-{{ forloop.index }}">
+      <div class="form-header-meta">
+        {% comment %} Form title {% endcomment %}
+        <h2>{{ page.title }}</h2>
+
+        <div class="form-progress">
+          {% if length < 6 %}
+            <div class="form-progress-bubble">Page {{ forloop.index }} of {{ length }}</div>
+          {% else %}
+            {% comment %} Progress bar {% endcomment %}
+            <div class="form-progress-bar form-progress-bar-{{ percentdone }}">{{ percentdone }}% done</div>
+          {% endif %}
+        </div>
+      </div>
       <h1>
         {{ label | markdownify | remove: '<p>' | remove: '</p>' }}
       </h1>
-      {% if page.description %}
-        {{ page.description | markdownify | improve }}
+      {% if currentpage.description %}
+        {{ currentpage.description | markdownify | improve }}
       {% endif %}
     </header>
 
@@ -23,7 +39,7 @@
         <div class="nav-on-top">
           {% include pagination.html %}
         </div>
-        {% comment %} Render fields in the page {% endcomment %}
+        {% comment %} Render fields in the currentpage {% endcomment %}
         {% include render_field.html %}
 
         {% include pagination.html %}

data/_includes/sfgov/header.html

@@ -1,4 +1,4 @@
-<header role="banner">
+<header role="banner" id="sfgov-header">
   <div class="sfgov-nav-container">
     <div class="sfgov-nav-container__content">
       <div class="sfgov-logo__container">

data/assets/css/main.scss

@@ -587,23 +587,34 @@ option:not(:checked) {
   @include line-height-to-rem(27);
 }
 
-h1 {
+@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, .h2 {
   @include h2;
 }
 
-h3 {
+h3, .h3 {
   @include h3;
 }
 
-h4 {
+h4, .h4 {
   @include h4;
 }
 
-h5 {
+h5, .h5 {
   @include h5;
 }
 
@@ -627,6 +638,13 @@ h5 {
   @include contain-1090;
 }
 
+.form-header-meta {
+  position: relative;
+  margin-bottom: 1.5rem;
+}
+
+.form-header-meta,
+.form-section h1,
 .form-content-inner {
   max-width: 38rem;
 }
@@ -768,7 +786,7 @@ h5 {
   }
 }
 
-.field-hidden {
+div[data-hidden] {
   position: absolute;
   width: 1px;
   height: 1px;
@@ -902,8 +920,65 @@ h5 {
   }
 }
 
-// Field length
+// 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} {
@@ -912,4 +987,12 @@ h5 {
   }
 }
 
+// Header
+
+.hero-banner h2 {
+  font-size: 1rem;
+  font-weight: $t-normal;
+  margin-bottom: 0.25rem;
+}
+
 @import 'sfgov';

data/assets/css/style.scss

@@ -148,6 +148,12 @@ $shadow: 0 1px 4px rgba(#000, 0.06);
   z-index: 20;
   border-radius: 2px;
 
+  .radio &,
+  .checkbox & {
+    left: 8rem;
+    top: 0;
+  }
+
   p {
     margin: 0 0 0.25rem;
 
@@ -201,7 +207,7 @@ $shadow: 0 1px 4px rgba(#000, 0.06);
   }
 }
 
-.show-hidden .field-hidden {
+.show-hidden div[data-hidden] {
   position: static;
   width: inherit;
   height: inherit;

data/assets/js/script.js

@@ -76,6 +76,9 @@ $(document).ready(function(){
       } else {
         // If the page is visible, show it
         activePage.addClass('active');
+
+        // Scroll to the top of the page
+        document.getElementById("sfgov-header").scrollIntoView();
       }
     }
 

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: form-jekyll
 version: !ruby/object:Gem::Version
-  version: 0.4.2
+  version: 0.4.3
 platform: ruby
 authors:
 - Josh Rubenoff
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2019-10-05 00:00:00.000000000 Z
+date: 2019-10-09 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll