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

Enable tour features #639

Merged
merged 9 commits into from
Jan 3, 2018
Merged

Enable tour features #639

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
c30d674
Enable tour features
ZachTRice Dec 7, 2017
9a7f1c3
Fix joyride not initating on click and errors related to feedback.js
ZachTRice Dec 8, 2017
6cd8292
Fix tour styles
ZachTRice Dec 13, 2017
54fa7d2
Merge branch 'module-loaders' of https://github.com/nasa-gibs/worldvi…
ZachTRice Dec 19, 2017
ad3509a
Merge branch 'module-loaders' of https://github.com/nasa-gibs/worldvi…
ZachTRice Dec 21, 2017
de3b251
Restore tour pagination and fix styles
ZachTRice Dec 21, 2017
de3c47f
Restore previous buttons to jquery joyride
ZachTRice Jan 2, 2018
a094ee6
Fix page count position, dialog box appearing unexpectedly, nub position
ZachTRice Jan 2, 2018
cc0fc12
Move parameters inside the feedback function and assign to self
ZachTRice Jan 2, 2018
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
47 changes: 45 additions & 2 deletions web/css/tour.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,10 @@
width: 450px;
}

.joyride-close-tip {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We didn't have custom .joyride CSS before, and we're including the Joyride stylesheet in this branch already.

We shouldn't have to add custom CSS to our stylesheets to achieve style parity with production. @ZachTRice @Benjaki2 I might have missed something when I included the dependency stylesheets. Maybe the paths aren't correct, or maybe they're in the wrong order or something. Both of you have added dependency styles to stylesheets in your PRs, but I think maybe there's a problem with how I did the CSS originally. Have either of you looked into that?

Copy link
Contributor Author

@ZachTRice ZachTRice Jan 2, 2018 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The version we were using before was modified to add css directly to the plugin. Here is the css blame: https://github.com/nasa-gibs/worldview/blame/master/web/ext/tour/joyride-2.0.3-3/joyride.css

color: rgba(38, 43, 49, 0.4) !important;
}

.tour h3 {
color: rgb(38, 43, 49);
font: 18px 'Open Sans', sans-serif;
Expand Down Expand Up @@ -279,6 +283,7 @@ button.done:hover {
.joyride-tip-guide {
z-index: 293;
background: rgb(175, 181, 196);
padding-bottom: 32px;
}

.joyride-tip-guide[data-index="0"] {
Expand Down Expand Up @@ -311,6 +316,19 @@ button.done:hover {
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#f4f5f5, endColorstr=#dfdddd);
}

.joyride-tip-guide .joyride-next-tip:hover {
border: 1px solid #bfc4c4 !important;
background-color: #d9dddd;
color: #000;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #d9dddd), color-stop(100%, #c6c3c3));
background-image: -webkit-linear-gradient(top, #d9dddd, #c6c3c3);
background-image: -moz-linear-gradient(top, #d9dddd, #c6c3c3);
background-image: -ms-linear-gradient(top, #d9dddd, #c6c3c3);
background-image: -o-linear-gradient(top, #d9dddd, #c6c3c3);
background-image: linear-gradient(to bottom, #d9dddd, #c6c3c3);
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#d9dddd, endColorstr=#c6c3c3);
}

table.splash td.splash-info {
vertical-align: top;
}
Expand All @@ -324,9 +342,13 @@ table.splash td.splash-info {
}

p.wv-tour-page-count {
text-align: right;
margin-top: 7px;
font: 400 13px/16px 'Open Sans', sans-serif;
color: #262b31;
text-align: right;
position: absolute;
bottom: 0;
right: 0;
margin: 12px;
}

.wv-tour-visible-icon {
Expand Down Expand Up @@ -399,9 +421,30 @@ p.wv-tour-page-count {
pointer-events: none;
}

.joyride-tip-guide span.joyride-nub.top {
border-color: #afb5c4 !important;
border-top-color: transparent !important;
border-left-color: transparent !important;
border-right-color: transparent !important;
}

.joyride-tip-guide span.joyride-nub.right {
border-color: #afb5c4 !important;
border-top-color: transparent !important;
border-right-color: transparent !important;
border-bottom-color: transparent !important;
}

.joyride-tip-guide span.joyride-nub.bottom {
border-color: #afb5c4 !important;
border-bottom-color: transparent !important;
border-left-color: transparent !important;
border-right-color: transparent !important;
}

.joyride-tip-guide span.joyride-nub.left {
border-color: #afb5c4 !important;
border-top-color: transparent !important;
border-left-color: transparent !important;
border-bottom-color: transparent !important;
}
6 changes: 6 additions & 0 deletions web/pages/tour.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -119,6 +119,7 @@ <h3>Timeline</h3>
<li>Change the interval to "Days" and explore the imagery for that month.</li>
</ul>
</div>
<p class="wv-tour-page-count">(page 1 of 6)</p>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

How were these <p> tags being added before?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The plugin was a complete hack before. These were added into the core plugin before. There is no native support for this type of functionality.

</li>

<!-- Timeline - Continued -->
Expand Down Expand Up @@ -152,6 +153,7 @@ <h3>Timeline - Continued</h3>
<li>Click on the day text, type in "23", and press the return key.</li>
</ul>
</div>
<p class="wv-tour-page-count">(page 2 of 6)</p>
</li>

<!-- Layer Picker - Base Layers -->
Expand Down Expand Up @@ -183,6 +185,7 @@ <h3>Layer Picker - Base Layers</h3>
<li>Drag "Corrected Reflectance (True Color) Aqua / MODIS" back to the top of the list.</li>
</ul>
</div>
<p class="wv-tour-page-count">(page 3 of 6)</p>
</li>

<!-- Layer Picker - Continued -->
Expand Down Expand Up @@ -225,6 +228,7 @@ <h3>Layer Picker - Continued</h3>
tab to see the layers that have been added.</li>
</ul>
</div>
<p class="wv-tour-page-count">(page 4 of 6)</p>
</li>

<!-- Map -->
Expand Down Expand Up @@ -254,6 +258,7 @@ <h3>Map</h3>
</p>
<img src="images/tour-fire-location.png" alt="Location" class="wv-tour-map"/>
</div>
<p class="wv-tour-page-count">(page 5 of 6)</p>
</li>

<!-- Toolbar -->
Expand Down Expand Up @@ -299,6 +304,7 @@ <h3>Toolbar</h3>
</table>
</div>
</li>
<p class="wv-tour-page-count">(page 6 of 6)</p>

</ol>

Expand Down