504 modal intro page

docs/_includes/tool-footer.html

@@ -1,5 +1,8 @@
 <script src="js/core/router.js"></script>
-<script src="js/external/bootstrap.min.js"></script>
-<script src="js/external/semantic.min.js"></script>
 <script src="js/core/housing-insights.js"></script>
+
+<!--stuff not needed right away-->
 <script src="js/external/papaparse.min.js"></script>
+<script src="js/external/tether.js"></script>
+<script src="js/external/shepherd.min.js"></script>
+<link href="css/shepherd-theme-arrows.css" rel="stylesheet" type="text/css" />

docs/_includes/tool-header.html

@@ -5,7 +5,8 @@
 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.8.0/d3.min.js"></script>
 <script src='https://api.mapbox.com/mapbox-gl-js/v0.39.1/mapbox-gl.js'></script>
 <link href='https://api.mapbox.com/mapbox-gl-js/v0.39.1/mapbox-gl.css' rel='stylesheet' />
-
+<script src="js/external/bootstrap.min.js"></script>
+<script src="js/external/semantic.min.js"></script>
 <!--
 For use while working without internet
 <script src="js/external/offline-use/d3.min.js"></script>

docs/tool/css/shepherd-theme-arrows.css

@@ -0,0 +1,229 @@
+.shepherd-element-attached-bottom.shepherd-element-attached-right.shepherd-target-attached-top.shepherd-target-attached-left .shepherd-content:before,
+.shepherd-element-attached-bottom.shepherd-element-attached-left.shepherd-target-attached-top.shepherd-target-attached-right .shepherd-content:before,
+.shepherd-element-attached-top.shepherd-element-attached-right.shepherd-target-attached-bottom.shepherd-target-attached-left .shepherd-content:before,
+.shepherd-element-attached-top.shepherd-element-attached-left.shepherd-target-attached-bottom.shepherd-target-attached-right .shepherd-content:before {
+  display: none; }
+
+.shepherd-element, .shepherd-element:after, .shepherd-element:before, .shepherd-element *, .shepherd-element *:after, .shepherd-element *:before {
+  box-sizing: border-box; }
+
+.shepherd-element {
+  position: absolute;
+  display: none; }
+  .shepherd-element.shepherd-open {
+    display: block; }
+
+.shepherd-element.shepherd-theme-arrows {
+  max-width: 100%;
+  max-height: 100%; }
+  .shepherd-element.shepherd-theme-arrows .shepherd-content {
+    border-radius: 5px;
+    position: relative;
+    font-family: inherit;
+    background: #fff;
+    color: #444;
+    padding: 1em;
+    font-size: 1.1em;
+    line-height: 1.5em;
+    -webkit-transform: translateZ(0);
+            transform: translateZ(0);
+    -webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
+            filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2)); }
+    .shepherd-element.shepherd-theme-arrows .shepherd-content:before {
+      content: "";
+      display: block;
+      position: absolute;
+      width: 0;
+      height: 0;
+      border-color: transparent;
+      border-width: 16px;
+      border-style: solid;
+      pointer-events: none; }
+  .shepherd-element.shepherd-theme-arrows.shepherd-element-attached-bottom.shepherd-element-attached-center .shepherd-content {
+    margin-bottom: 16px; }
+    .shepherd-element.shepherd-theme-arrows.shepherd-element-attached-bottom.shepherd-element-attached-center .shepherd-content:before {
+      top: 100%;
+      left: 50%;
+      margin-left: -16px;
+      border-top-color: #fff; }
+  .shepherd-element.shepherd-theme-arrows.shepherd-element-attached-top.shepherd-element-attached-center .shepherd-content {
+    margin-top: 16px; }
+    .shepherd-element.shepherd-theme-arrows.shepherd-element-attached-top.shepherd-element-attached-center .shepherd-content:before {
+      bottom: 100%;
+      left: 50%;
+      margin-left: -16px;
+      border-bottom-color: #fff; }
+  .shepherd-element.shepherd-theme-arrows.shepherd-element-attached-right.shepherd-element-attached-middle .shepherd-content {
+    margin-right: 16px; }
+    .shepherd-element.shepherd-theme-arrows.shepherd-element-attached-right.shepherd-element-attached-middle .shepherd-content:before {
+      left: 100%;
+      top: 50%;
+      margin-top: -16px;
+      border-left-color: #fff; }
+  .shepherd-element.shepherd-theme-arrows.shepherd-element-attached-left.shepherd-element-attached-middle .shepherd-content {
+    margin-left: 16px; }
+    .shepherd-element.shepherd-theme-arrows.shepherd-element-attached-left.shepherd-element-attached-middle .shepherd-content:before {
+      right: 100%;
+      top: 50%;
+      margin-top: -16px;
+      border-right-color: #fff; }
+  .shepherd-element.shepherd-theme-arrows.shepherd-element-attached-left.shepherd-target-attached-center .shepherd-content {
+    left: -32px; }
+  .shepherd-element.shepherd-theme-arrows.shepherd-element-attached-right.shepherd-target-attached-center .shepherd-content {
+    left: 32px; }
+  .shepherd-element.shepherd-theme-arrows.shepherd-element-attached-top.shepherd-element-attached-left.shepherd-target-attached-middle .shepherd-content {
+    margin-top: 16px; }
+    .shepherd-element.shepherd-theme-arrows.shepherd-element-attached-top.shepherd-element-attached-left.shepherd-target-attached-middle .shepherd-content:before {
+      bottom: 100%;
+      left: 16px;
+      border-bottom-color: #fff; }
+  .shepherd-element.shepherd-theme-arrows.shepherd-element-attached-top.shepherd-element-attached-right.shepherd-target-attached-middle .shepherd-content {
+    margin-top: 16px; }
+    .shepherd-element.shepherd-theme-arrows.shepherd-element-attached-top.shepherd-element-attached-right.shepherd-target-attached-middle .shepherd-content:before {
+      bottom: 100%;
+      right: 16px;
+      border-bottom-color: #fff; }
+  .shepherd-element.shepherd-theme-arrows.shepherd-element-attached-bottom.shepherd-element-attached-left.shepherd-target-attached-middle .shepherd-content {
+    margin-bottom: 16px; }
+    .shepherd-element.shepherd-theme-arrows.shepherd-element-attached-bottom.shepherd-element-attached-left.shepherd-target-attached-middle .shepherd-content:before {
+      top: 100%;
+      left: 16px;
+      border-top-color: #fff; }
+  .shepherd-element.shepherd-theme-arrows.shepherd-element-attached-bottom.shepherd-element-attached-right.shepherd-target-attached-middle .shepherd-content {
+    margin-bottom: 16px; }
+    .shepherd-element.shepherd-theme-arrows.shepherd-element-attached-bottom.shepherd-element-attached-right.shepherd-target-attached-middle .shepherd-content:before {
+      top: 100%;
+      right: 16px;
+      border-top-color: #fff; }
+  .shepherd-element.shepherd-theme-arrows.shepherd-element-attached-top.shepherd-element-attached-left.shepherd-target-attached-bottom .shepherd-content {
+    margin-top: 16px; }
+    .shepherd-element.shepherd-theme-arrows.shepherd-element-attached-top.shepherd-element-attached-left.shepherd-target-attached-bottom .shepherd-content:before {
+      bottom: 100%;
+      left: 16px;
+      border-bottom-color: #fff; }
+  .shepherd-element.shepherd-theme-arrows.shepherd-element-attached-top.shepherd-element-attached-right.shepherd-target-attached-bottom .shepherd-content {
+    margin-top: 16px; }
+    .shepherd-element.shepherd-theme-arrows.shepherd-element-attached-top.shepherd-element-attached-right.shepherd-target-attached-bottom .shepherd-content:before {
+      bottom: 100%;
+      right: 16px;
+      border-bottom-color: #fff; }
+  .shepherd-element.shepherd-theme-arrows.shepherd-element-attached-bottom.shepherd-element-attached-left.shepherd-target-attached-top .shepherd-content {
+    margin-bottom: 16px; }
+    .shepherd-element.shepherd-theme-arrows.shepherd-element-attached-bottom.shepherd-element-attached-left.shepherd-target-attached-top .shepherd-content:before {
+      top: 100%;
+      left: 16px;
+      border-top-color: #fff; }
+  .shepherd-element.shepherd-theme-arrows.shepherd-element-attached-bottom.shepherd-element-attached-right.shepherd-target-attached-top .shepherd-content {
+    margin-bottom: 16px; }
+    .shepherd-element.shepherd-theme-arrows.shepherd-element-attached-bottom.shepherd-element-attached-right.shepherd-target-attached-top .shepherd-content:before {
+      top: 100%;
+      right: 16px;
+      border-top-color: #fff; }
+  .shepherd-element.shepherd-theme-arrows.shepherd-element-attached-top.shepherd-element-attached-right.shepherd-target-attached-left .shepherd-content {
+    margin-right: 16px; }
+    .shepherd-element.shepherd-theme-arrows.shepherd-element-attached-top.shepherd-element-attached-right.shepherd-target-attached-left .shepherd-content:before {
+      top: 16px;
+      left: 100%;
+      border-left-color: #fff; }
+  .shepherd-element.shepherd-theme-arrows.shepherd-element-attached-top.shepherd-element-attached-left.shepherd-target-attached-right .shepherd-content {
+    margin-left: 16px; }
+    .shepherd-element.shepherd-theme-arrows.shepherd-element-attached-top.shepherd-element-attached-left.shepherd-target-attached-right .shepherd-content:before {
+      top: 16px;
+      right: 100%;
+      border-right-color: #fff; }
+  .shepherd-element.shepherd-theme-arrows.shepherd-element-attached-bottom.shepherd-element-attached-right.shepherd-target-attached-left .shepherd-content {
+    margin-right: 16px; }
+    .shepherd-element.shepherd-theme-arrows.shepherd-element-attached-bottom.shepherd-element-attached-right.shepherd-target-attached-left .shepherd-content:before {
+      bottom: 16px;
+      left: 100%;
+      border-left-color: #fff; }
+  .shepherd-element.shepherd-theme-arrows.shepherd-element-attached-bottom.shepherd-element-attached-left.shepherd-target-attached-right .shepherd-content {
+    margin-left: 16px; }
+    .shepherd-element.shepherd-theme-arrows.shepherd-element-attached-bottom.shepherd-element-attached-left.shepherd-target-attached-right .shepherd-content:before {
+      bottom: 16px;
+      right: 100%;
+      border-right-color: #fff; }
+
+.shepherd-element.shepherd-theme-arrows.shepherd-element-attached-top.shepherd-element-attached-center.shepherd-has-title .shepherd-content:before, .shepherd-element.shepherd-theme-arrows.shepherd-element-attached-top.shepherd-element-attached-right.shepherd-target-attached-bottom.shepherd-has-title .shepherd-content:before, .shepherd-element.shepherd-theme-arrows.shepherd-element-attached-top.shepherd-element-attached-left.shepherd-target-attached-bottom.shepherd-has-title .shepherd-content:before {
+  border-bottom-color: #eee; }
+
+.shepherd-element.shepherd-theme-arrows.shepherd-has-title .shepherd-content header {
+  background: #eee;
+  padding: 1em; }
+  .shepherd-element.shepherd-theme-arrows.shepherd-has-title .shepherd-content header a.shepherd-cancel-link {
+    padding: 0;
+    margin-bottom: 0; }
+
+.shepherd-element.shepherd-theme-arrows.shepherd-has-cancel-link .shepherd-content header h3 {
+  float: left; }
+
+.shepherd-element.shepherd-theme-arrows .shepherd-content {
+  padding: 0; }
+  .shepherd-element.shepherd-theme-arrows .shepherd-content * {
+    font-size: inherit; }
+  .shepherd-element.shepherd-theme-arrows .shepherd-content header {
+    *zoom: 1;
+    border-radius: 5px 5px 0 0; }
+    .shepherd-element.shepherd-theme-arrows .shepherd-content header:after {
+      content: "";
+      display: table;
+      clear: both; }
+    .shepherd-element.shepherd-theme-arrows .shepherd-content header h3 {
+      margin: 0;
+      line-height: 1;
+      font-weight: normal; }
+    .shepherd-element.shepherd-theme-arrows .shepherd-content header a.shepherd-cancel-link {
+      float: right;
+      text-decoration: none;
+      font-size: 1.25em;
+      line-height: .8em;
+      font-weight: normal;
+      color: rgba(0, 0, 0, 0.5);
+      opacity: 0.25;
+      position: relative;
+      top: .1em;
+      padding: .8em;
+      margin-bottom: -.8em; }
+      .shepherd-element.shepherd-theme-arrows .shepherd-content header a.shepherd-cancel-link:hover {
+        opacity: 1; }
+  .shepherd-element.shepherd-theme-arrows .shepherd-content .shepherd-text {
+    padding: 1em; }
+    .shepherd-element.shepherd-theme-arrows .shepherd-content .shepherd-text p {
+      margin: 0 0 .5em 0;
+      line-height: 1.3em; }
+      .shepherd-element.shepherd-theme-arrows .shepherd-content .shepherd-text p:last-child {
+        margin-bottom: 0; }
+  .shepherd-element.shepherd-theme-arrows .shepherd-content footer {
+    padding: 0 1em 1em; }
+    .shepherd-element.shepherd-theme-arrows .shepherd-content footer .shepherd-buttons {
+      text-align: right;
+      list-style: none;
+      padding: 0;
+      margin: 0; }
+      .shepherd-element.shepherd-theme-arrows .shepherd-content footer .shepherd-buttons li {
+        display: inline;
+        padding: 0;
+        margin: 0; }
+        .shepherd-element.shepherd-theme-arrows .shepherd-content footer .shepherd-buttons li .shepherd-button {
+          display: inline-block;
+          vertical-align: middle;
+          *vertical-align: auto;
+          *zoom: 1;
+          *display: inline;
+          border-radius: 3px;
+          cursor: pointer;
+          border: 0;
+          margin: 0 .5em 0 0;
+          font-family: inherit;
+          text-transform: uppercase;
+          letter-spacing: .1em;
+          font-size: .8em;
+          line-height: 1em;
+          padding: .75em 2em;
+          background: #3288e6;
+          color: #fff; }
+          .shepherd-element.shepherd-theme-arrows .shepherd-content footer .shepherd-buttons li .shepherd-button.shepherd-button-secondary {
+            background: #eee;
+            color: #888; }
+        .shepherd-element.shepherd-theme-arrows .shepherd-content footer .shepherd-buttons li:last-child .shepherd-button {
+          margin-right: 0; }

docs/tool/css/styles.css

@@ -377,7 +377,7 @@ button.nullValuesToggleSubmit::before {
     max-width: 300px;
     top: 80px;
     bottom: 0;
-    z-index: 9999;
+    z-index: 1000;
     background-color: rgba(255, 255, 255, 0.95);
     transform: translate(-100%, 0);
     transition: transform 0.2s linear;
@@ -799,4 +799,20 @@ dl.inline dt{
 /*patches semantic ui bug that search helper text is cut off after clearing a pillbox*/
 input.search {
     width:200px !important;
+}
+
+
+/*fixes spinning box background when a icon-button has a loading icon*/
+.ui.labeled.icon.button> .icon{
+    background-color: rgba(0,0,0,0);
+}
+
+#welcomeModal .actions {
+    margin-top:30px;
+}
+
+
+.shepherd-skinny {
+    max-width:300px !important;
+    z-index:1000 !important;
 }

docs/tool/index.html

@@ -11,8 +11,15 @@
 Housing Insights (banner content / menu to come)
 </div>
 -->
-    <div id="body-wrapper"></div>
+<div id="body-wrapper"></div>
 <div id="loading-state-screen">Loading saved state . . .</div>
+
+<div id="loading-tool-dimmer" class="ui page dimmer">
+  <div class="content">
+    <div class="ui indeterminate massive text loader">Loading</div>
+  </div>
+</div>
+
 <!-- Modal -->
   <div class="modal fade" id="exportDataModal" role="dialog">
     <div class="modal-dialog">

docs/tool/js/core/router.js

@@ -1,3 +1,7 @@
+---
+frontmatter: isneeded
+---
+
 "use strict";
 
 var router = {
@@ -226,8 +230,9 @@ if ( window.location.hash.indexOf('#/HI/') !== -1 ) {
         router.initBuilding();
     } else {
         router.hasInitialFilterState = true;
+        //router.screenLoad(); //Replaced by semantic ui loading screen and welcome modal
     }
-    router.screenLoad();
+
 } else {
     router.hasInitialFilterState = false;
 }