form-jekyll 0.4.5.1 → 0.5.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: ab6f99ceef816fbc0aedfbfec7fdfe8c949c6d1b60bfc9e58287f73ed938b228
-  data.tar.gz: 202fe79d39c886131d9285108a8c1dde5af5bd9a6d8c23341910a2f5dd553064
+  metadata.gz: c5b451483dfb33d2e2c6b6bbe34bfaae0dee9c0144276b6be23232e6116b871e
+  data.tar.gz: 864fb2f07825b819b45830fb560e379fbd9e900d671aaa68bb70ba78bbadfb96
 SHA512:
-  metadata.gz: 75621af60981b4ccd4cfb64d45e1084c922529213c64b173b4e4286a3a0ebf6421003925d9079d4f0ee7ec39338c243059f4dc20e5a695ed216e53acee74c964
-  data.tar.gz: 1a291b7d00d6f019a17334408a87b6034ca0b9aa3955fd18f00b75dc03f0131fd037928f18150368eea2d5c9dad9e8369d9ce1e017f1f1810be23eb506ab50ad
+  metadata.gz: 37ccfb82a467d0f0cb20696964458cc031b10083674a7f9afd6d15e6674bfc2550bc47b7e7431db77568b3a1c32c34594ed3de189e0e6df63c2616fbc066cfb7
+  data.tar.gz: 8c933c436939dcd87604bf898e99b95cff80e75c0bc5783df3b30f846543ba456e9fe552f4550795eecc09454a398ced90cac0f4e99f542197c7437c70bf8ce6

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;
 }
@@ -902,8 +920,65 @@ div[data-hidden] {
   }
 }
 
-// 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 @@ div[data-hidden] {
   }
 }
 
+// Header
+
+.hero-banner h2 {
+  font-size: 1rem;
+  font-weight: $t-normal;
+  margin-bottom: 0.25rem;
+}
+
 @import 'sfgov';

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,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: form-jekyll
 version: !ruby/object:Gem::Version
-  version: 0.4.5.1
+  version: 0.5.0
 platform: ruby
 authors:
 - Josh Rubenoff