diff --git a/app/components/default-modal.js b/app/components/default-modal.js new file mode 100644 index 00000000..2ffc7f88 --- /dev/null +++ b/app/components/default-modal.js @@ -0,0 +1,31 @@ +import Component from '@ember/component'; + +const TOTAL_SLIDES = 7; + +export default Component.extend({ + tagName: '', + open: true, + slideNumber: Math.floor(Math.random() * TOTAL_SLIDES) + 1, // start on a random slide + + actions: { + toggleModal() { + this.toggleProperty('open'); + }, + nextSlide() { + if (this.slideNumber < TOTAL_SLIDES) { + this.set('slideNumber', this.slideNumber + 1); + } else { + // comment out the line below to disable infinite looping + this.set('slideNumber', 1); + } + }, + prevSlide() { + if (this.slideNumber > 1) { + this.set('slideNumber', this.slideNumber - 1); + } else { + // comment out the line below to disable infinite looping + this.set('slideNumber', TOTAL_SLIDES); + } + }, + }, +}); diff --git a/app/controllers/application.js b/app/controllers/application.js index 84799092..d85a094b 100644 --- a/app/controllers/application.js +++ b/app/controllers/application.js @@ -200,6 +200,19 @@ export default class ApplicationController extends Controller.extend( return values.every(({ changed }) => changed === false); } + @tracked + openModal = !window.localStorage.hideMessage; + + @tracked + dontShowModalAgain = false; + + @action toggleModal() { + this.openModal = !this.openModal; + if (this.dontShowModalAgain) { + window.localStorage.hideMessage = true; + } + } + @action async toggleLeftSideMenuVisibility() { this.leftSideMenuVisibilty = !this.leftSideMenuVisibilty; diff --git a/app/styles/app.scss b/app/styles/app.scss index d0865094..c9833f87 100644 --- a/app/styles/app.scss +++ b/app/styles/app.scss @@ -21,6 +21,7 @@ @include foundation-close-button; @include foundation-menu; @include foundation-label; +@include foundation-reveal; @include foundation-switch; @include foundation-visibility-classes; @include foundation-float-classes; @@ -46,7 +47,7 @@ @import 'modules/_m-maps'; @import 'modules/_m-noui'; @import 'modules/_m-search'; - +@import 'modules/_m-reveal-modal'; @import 'ember-power-select'; @import 'layouts/_l-print'; diff --git a/app/styles/modules/_m-reveal-modal.scss b/app/styles/modules/_m-reveal-modal.scss new file mode 100644 index 00000000..c4997975 --- /dev/null +++ b/app/styles/modules/_m-reveal-modal.scss @@ -0,0 +1,97 @@ +// -------------------------------------------------- +// Module: Reveal Modal +// -------------------------------------------------- + +#reveal-modal-container { + z-index: 3; +} + +@include breakpoint(1280px up) { + .mobile-header, + .mobile-body { + display: none; + } +} + + +.reveal-overlay { + padding: 1rem; + + @include breakpoint(medium) { + padding: 8rem 1rem; + // position: absolute; + } +} + +.reveal-overlay-target { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; +} + +.reveal { + border: 0; + box-shadow: 0 0 0 rem-calc(4) rgba(0,0,0,0.1); + top: 0; + border-radius: 5px; + padding-top: 40px; + + &:focus { + outline: none; + } +} + +/* Slideshow container */ +.slideshow-container { + position: relative; + /* should we keep this? */ + min-height: 10rem; +} + +/* Next & previous buttons */ +.slideshow-prev, .slideshow-next { + cursor: pointer; + position: absolute; + top: 50%; + width: auto; + padding: 16px; + margin-top: -22px; + color: white; + font-weight: bold; + font-size: 48px; + transition: 0.6s ease; + border-radius: 0 3px 3px 0; + user-select: none; + background-color: rgba(0,0,0,0.1); +} + +/* Position the "next button" to the right */ +.slideshow-next { + right: 0; + border-radius: 3px 0 0 3px; +} + +/* On hover, add a black background color with a little bit see-through */ +.slideshow-prev:hover, .slideshow-next:hover { + background-color: rgba(0,0,0,0.8); +} + +.slideshow-content { + text-align: center; + margin-bottom: 1rem; +} + +.slide { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + padding-top: 1rem; + background-color: lightgray; +} + +.slide img { + height: 350px; +} \ No newline at end of file diff --git a/app/templates/application.hbs b/app/templates/application.hbs index d52c5a91..0222c4cc 100644 --- a/app/templates/application.hbs +++ b/app/templates/application.hbs @@ -1,3 +1,4 @@ +
Homepage diff --git a/app/templates/components/default-modal.hbs b/app/templates/components/default-modal.hbs new file mode 100644 index 00000000..b2112af2 --- /dev/null +++ b/app/templates/components/default-modal.hbs @@ -0,0 +1,24 @@ + +

+ We're excited to share some new features we've added to ZoLa! Scroll through the updates below, or select the "Features" tab at any time to view the new additions. +

+ +
+ ❮ + + ❯ +
+ + {{input type="checkbox" checked=this.dontShowModalAgain}} + Don't show this message again + + {{!-- Uncomment the below to show a message only on mobile --}} + {{!--

+ labs-zola is optimized for desktop screen widths. +

+

+ Mobile support for ZoLa will be added in the future. + For the best experience, please use a browser with a minimum width of + 1280px. +

--}} + \ No newline at end of file diff --git a/app/templates/components/main-header.hbs b/app/templates/components/main-header.hbs index 58b08bcd..075aed37 100644 --- a/app/templates/components/main-header.hbs +++ b/app/templates/components/main-header.hbs @@ -35,7 +35,12 @@ About
  • - Features + + Features + + New! + +
  • Data diff --git a/app/templates/components/reveal-modal.hbs b/app/templates/components/reveal-modal.hbs new file mode 100644 index 00000000..17e9ef71 --- /dev/null +++ b/app/templates/components/reveal-modal.hbs @@ -0,0 +1,17 @@ +{{#if @open}} +
    +
    + +
    +{{/if}} diff --git a/app/templates/components/slideshow-contents.hbs b/app/templates/components/slideshow-contents.hbs new file mode 100644 index 00000000..914eb77f --- /dev/null +++ b/app/templates/components/slideshow-contents.hbs @@ -0,0 +1,38 @@ +
    + {{#if (eq @slideNumber 1)}} +
    +

    Access what you're looking for more quickly using your search history

    + A video showing the search history functionality +
    + {{else if (eq @slideNumber 2)}} +
    +

    See more of the map by hiding the layers menu

    + A video showing the sidebar toggle functionality +
    + {{else if (eq @slideNumber 3)}} +
    +

    Select two tax lots for side-by-side comparison

    + A video showing the tax lot comparison functionality +
    + {{else if (eq @slideNumber 4)}} +
    +

    Turn off all layers with the click of a button

    + A video showing the all layer toggle button functionality +
    + {{else if (eq @slideNumber 5)}} +
    +

    Bookmark your selected layers to return to later

    + A video showing the layer bookmark functionality +
    + {{else if (eq @slideNumber 6)}} +
    +

    Sum the area or distance of multiple measurements

    + A video showing the multiple measurement functionality +
    + {{else if (eq @slideNumber 7)}} +
    +

    New links to sites related to the selected tax lot

    + A video showing the relevant links functionality +
    + {{/if}} +
    diff --git a/app/templates/features.hbs b/app/templates/features.hbs index d4fe39a4..12666739 100644 --- a/app/templates/features.hbs +++ b/app/templates/features.hbs @@ -8,6 +8,122 @@
    +

    + New Features! +

    +

    + Search History +

    +
    +
    + + A video showing the search history functionality + +
    +
    +

    + Access what you're looking for more quickly using your search history. +

    +
    +
    + +

    + Compare Tax Lots +

    +
    +
    + + A video showing the tax lot comparison functionality + +
    +
    +

    + Select two tax lots for side-by-side comparison. +

    +
    +
    + +

    + Bookmark Sets of Layers +

    +
    +
    + + A video showing the layer bookmark functionality + +
    +
    +

    + Bookmark your selected layers to return to later. +

    +
    +
    + +

    + Access Relevant Links +

    +
    +
    + + A video showing the relevant links functionality + +
    +
    +

    + Get the information you need faster by using the new links to sites related to the selected tax lot. +

    +
    +
    + +

    + Improved Measurement Tools +

    +
    +
    + + A video showing the multiple measurement functionality + +
    +
    +

    + Sum the area or distance of multiple measurements. +

    +
    +
    + +

    + Hide the sidebar +

    +
    +
    + + A video showing the sidebar toggle functionality + +
    +
    +

    + See more of the map by hiding the layers menu. +

    +
    +
    + +

    + Turn Off Layers +

    +
    +
    + + A video showing the all layer toggle button functionality + +
    +
    +

    + Turn off all layers with the click of a button. +

    +
    +
    +
    +

    Features

    diff --git a/public/img/slideshow/bookmark-layer-sets.gif b/public/img/slideshow/bookmark-layer-sets.gif new file mode 100644 index 00000000..ecd16e14 Binary files /dev/null and b/public/img/slideshow/bookmark-layer-sets.gif differ diff --git a/public/img/slideshow/multiple-measurements.gif b/public/img/slideshow/multiple-measurements.gif new file mode 100644 index 00000000..ed39ba9a Binary files /dev/null and b/public/img/slideshow/multiple-measurements.gif differ diff --git a/public/img/slideshow/relevant-links.gif b/public/img/slideshow/relevant-links.gif new file mode 100644 index 00000000..06c77c4e Binary files /dev/null and b/public/img/slideshow/relevant-links.gif differ diff --git a/public/img/slideshow/search-history.gif b/public/img/slideshow/search-history.gif new file mode 100644 index 00000000..2532b052 Binary files /dev/null and b/public/img/slideshow/search-history.gif differ diff --git a/public/img/slideshow/side-by-side.gif b/public/img/slideshow/side-by-side.gif new file mode 100644 index 00000000..0722ea9d Binary files /dev/null and b/public/img/slideshow/side-by-side.gif differ diff --git a/public/img/slideshow/toggle-all-layers-off.gif b/public/img/slideshow/toggle-all-layers-off.gif new file mode 100644 index 00000000..33e72aa2 Binary files /dev/null and b/public/img/slideshow/toggle-all-layers-off.gif differ diff --git a/public/img/slideshow/toggle-sidebar.gif b/public/img/slideshow/toggle-sidebar.gif new file mode 100644 index 00000000..2fff7019 Binary files /dev/null and b/public/img/slideshow/toggle-sidebar.gif differ