Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

504 modal intro page #549

Merged
merged 6 commits into from
Sep 18, 2017
Merged

504 modal intro page #549

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
e7520ea
- Working demo of dimmer w/ callback that decides action based on whi…
NealHumphrey Sep 13, 2017
220cb41
"Loading" dimmer is displayed if the page is not yet loaded when the …
NealHumphrey Sep 13, 2017
af2fd2f
Shows proper buttons based on whether we're loading a saved state or not
NealHumphrey Sep 13, 2017
1f987d6
- Now load example using the url and decodeState()
NealHumphrey Sep 14, 2017
a455a25
Adds text to the welcome modal and adds notification if someone is lo…
NealHumphrey Sep 14, 2017
17879f8
- Adds disabled spinning loading icons to all modal buttons while pag…
NealHumphrey Sep 14, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 5 additions & 2 deletions docs/_includes/tool-footer.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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" />
3 changes: 2 additions & 1 deletion docs/_includes/tool-header.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
229 changes: 229 additions & 0 deletions docs/tool/css/shepherd-theme-arrows.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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; }
18 changes: 17 additions & 1 deletion docs/tool/css/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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;
}
9 changes: 8 additions & 1 deletion docs/tool/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
7 changes: 6 additions & 1 deletion docs/tool/js/core/router.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
---
frontmatter: isneeded
---

"use strict";

var router = {
Expand Down Expand Up @@ -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;
}
Loading