Merge feature-pwa into release-3.21.0 (#3850)

* WV-2130: Implement Service Worker (#3803) * WV-2128 Adding files to make app pass basic PWA audit to make it 'installable' * WV-2128 added entry for SW.js to .eslintignore * WV-2128 -Added theme color to index.html * Added 'workbox-webpack-plugin' to devDependencies in package.json. Also added plugin to webpack.config.js. The plugin generates a new SW.js file and defines image caching limits * WV-2128 - WIP: Some changes to manifest.json. Still testing these out so WIP. * WV-2128 -Added '/web/sw.js' and 'web/sw.js.map' to .gitignore. * Added workbox JS file to .eslintignore * WV-2128: - Added "swDest: '../sw.js'" to GenerateSW so it creates a sw.js file at the web root. - Added expiratation for 24 hours for images and max entries to 30 for cache database * WV-2128: - Corrected location of 'sw.js'. -Updated theme color to NASA logo blue. * WV-2128. -Corrected location of icon and screenshots. -Added 'scope'. -Changed background_color to gray and theme to NASA logo bluue. * WV-2128: -Removed web/sw.js from git repo and added them to .gitignore * WV-2128: -Removed 'workbox-config.js' since the config now lives in webpack.config.js. -Created web/images/wv-logo-mobile.png * WV-2128 -Removed Workbox plugin from webpack.config.js. Added workbox-config.js * WV-2128 -Updated index.html to point to manifest file name. -Updated code that registers service worker JS file * Added 'workbox-cli' to devDependencies * WV-2130 -Removed all Workbox packages and config files * WV-2130 -Simplified service-worker.js file to meet minimum Lighthouse install requirements. -Updated index.html to point to new service-worker.js filename * WV-2130 -Updated manifest.webmanifest to use '/' for 'start_url' and 'scope'. -Updated display to 'fullscreen' to the mobile app fills device's available screen. 'Standalone' still displayed notification bar and other system navigation controls * WV-2130 -Added ESLint exception for service-worker.js: 'eslint-disable no restricted-globals' * WV-2130 -Removed console.log from index.html * WV-2130 -Removed Async function from service worker registration. Was only used for console logging * WV-2130 -Removed Workbox and Service Worker stuff from .gitignore and .eslintignore * WV-2130 - update pathing for manifest and service worker for dist deploy * WV-2130 - correct start_url and scope - remove less attractive screenshot * WV-2130 -Changed manifest variables to actual name of app * WV-2130 -Removed <script> tag from web/index.html and moved the JS code to web/js/main.js * WV-2130 -Updated tasks/dist.js to translate variables in build/worldview/manifest.webmanifest * WV-2130 -Updated manifest.webmanifest to use variables for 'short_name' and 'name' Co-authored-by: Jason Kent <[email protected]> * PWA: Theme Color, Apple Touch Icon, Maskable Icon (#3826) * pwa-icons-theme: - Added <link> tag to index.html for apple-touch-icon.png. - Added maskable icon code to manifest.webmanifest * Updated theme and background so they match. Darker, cobalt blue * WV-2198: -Added newly design WorldView icons for PWA app * -Replaced icons with white versions. -Updated manifest so that background and theme color is white * -Fixed webmanifest colors not set to white * -Fixed index.html theme-color so that it is set to white * Update mobile styles - Improve sidebar tab sizes on mobile - Move bottom buttons up to prevent obfuscation by phone bezels * fix mobile anim and compare positions * use vars for media query breakpoint sizes * fix more sidebar sizes - make sure group headers are mobile sized in landscape - make sure layer list takes up max avail space * fix embed sidebar collapsed button * fix orientation change for PWA * fix rotate button sizes Co-authored-by: Jason Kent <[email protected]>
nasa-gibs · Mar 25, 2022 · 233b374 · 233b374
1 parent ac89e10
commit 233b374
Show file tree

Hide file tree

Showing 40 changed files with 312 additions and 243 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -11,4 +11,3 @@ web/dist/*
 web/build/*
 test/*
 web/js/lib/*
-
diff --git a/tasks/dist.js b/tasks/dist.js
@@ -30,6 +30,7 @@ const applyTo = [
   'build/worldview/build/wv.js',
   'build/worldview/brand/about/*.html',
   'build/worldview/pages/*.html',
+  'build/worldview/manifest.webmanifest',
 ];
 
 // Build date shown in the About box

diff --git a/web/images/maskable_icon.png b/web/images/maskable_icon.png
diff --git a/web/images/wv-logo-apple-icon.png b/web/images/wv-logo-apple-icon.png
diff --git a/web/images/wv-logo-mobile.png b/web/images/wv-logo-mobile.png
diff --git a/web/index.html b/web/index.html
@@ -63,6 +63,10 @@
 
   <link type="text/css" rel="Stylesheet" href="build/wv.css?v=@BUILD_NONCE@">
   <script type="text/javascript" src="build/wv.js?v=@BUILD_NONCE@"></script>
+
+  <link rel="apple-touch-icon" href="images/wv-logo-apple-icon.png">
+  <link rel="manifest" href="manifest.webmanifest">
+  <meta name="theme-color" content="#FFFFFF"/>
 </head>
 
 <body>

diff --git a/web/js/components/sidebar/collapsed-button.js b/web/js/components/sidebar/collapsed-button.js
@@ -6,28 +6,29 @@ import { UncontrolledTooltip } from 'reactstrap';
 class CollapsedButton extends PureComponent {
   render() {
     const {
+      isEmbed,
       isMobile,
       numberOfLayers,
       onclick,
     } = this.props;
     const buttonId = 'accordion-toggler-button';
     const labelText = 'Expand sidebar';
+    const classes = `sidebar-expand ${isMobile && !isEmbed ? 'mobile' : ''}`;
 
     return (
       <div
         id="productsHoldertoggleButtonHolder"
-        className="toggleButtonHolder"
+        className={classes}
       >
         <a
           id={buttonId}
           aria-label={labelText}
-          className="accordionToggler dateHolder staticLayers"
           onClick={onclick}
         >
           <UncontrolledTooltip placement="right" target={buttonId}>
             {labelText}
           </UncontrolledTooltip>
-          <FontAwesomeIcon icon="layer-group" />
+          <FontAwesomeIcon className="layer-icon" icon="layer-group" />
           {isMobile
             ? (
               <span className="layer-count mobile">
@@ -39,12 +40,14 @@ class CollapsedButton extends PureComponent {
                 {`${numberOfLayers.toString()} Layers`}
               </span>
             )}
+          {!isMobile && <FontAwesomeIcon className="expand-icon" icon="caret-down" />}
         </a>
       </div>
     );
   }
 }
 CollapsedButton.propTypes = {
+  isEmbed: PropTypes.bool,
   isMobile: PropTypes.bool,
   numberOfLayers: PropTypes.number,
   onclick: PropTypes.func,

diff --git a/web/js/components/sidebar/nav/nav-case.js b/web/js/components/sidebar/nav/nav-case.js
@@ -1,9 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Nav, UncontrolledTooltip } from 'reactstrap';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import CustomNavItem from './nav-item';
 
-
 const tabClasses = 'sidebar-tab';
 
 function NavCase (props) {
@@ -87,16 +87,16 @@ function NavCase (props) {
       />
       {!isEventsTabDisabledEmbed && renderEvents()}
       {renderDataDownload()}
-      <div className="toggleIconHolder">
-        <UncontrolledTooltip placement="right" target="accordion-toggler-button">
-          Hide sidebar
-        </UncontrolledTooltip>
-        <a
+
+      <div id="toggleIconHolder" className="sidebar-collapse" onClick={toggleSidebar}>
+        <FontAwesomeIcon
           id="accordion-toggler-button"
-          className="accordionToggler atcollapse arrow"
-          onClick={toggleSidebar}
+          icon="caret-up"
           aria-label="Hide sidebar"
         />
+        <UncontrolledTooltip placement="right" target="toggleIconHolder">
+          Hide sidebar
+        </UncontrolledTooltip>
       </div>
     </Nav>
   );

diff --git a/web/js/containers/sidebar/compare.js b/web/js/containers/sidebar/compare.js
@@ -9,7 +9,6 @@ import { toggleActiveCompareState as toggleActiveCompareStateAction } from '../.
 import { getCompareDates } from '../../modules/compare/selectors';
 import MonospaceDate from '../../components/util/monospace-date';
 
-const tabHeight = 32;
 const CompareCase = (props) => {
   const {
     isActive,
@@ -62,14 +61,14 @@ const CompareCase = (props) => {
               <LayersContainer
                 isActive={isCompareA}
                 compareState="active"
-                height={height - tabHeight}
+                height={height}
               />
             </TabPane>
             <TabPane tabId="2">
               <LayersContainer
                 isActive={!isCompareA}
                 compareState="activeB"
-                height={height - tabHeight}
+                height={height}
               />
             </TabPane>
           </TabContent>

diff --git a/web/js/containers/sidebar/events.js b/web/js/containers/sidebar/events.js
@@ -41,7 +41,7 @@ function Events(props) {
     selectedCategories,
   } = props;
 
-  const filterControlHeight = 72;
+  const filterControlHeight = 115;
   const maxHeight = Math.max(height - filterControlHeight, 166);
   const scrollbarMaxHeight = isEmbedModeActive ? '50vh' : `${maxHeight}px`;
 

diff --git a/web/js/containers/sidebar/layers-container.js b/web/js/containers/sidebar/layers-container.js
@@ -26,9 +26,7 @@ function LayersContainer (props) {
     groupOverlays,
     height,
     isActive,
-    isCompareActive,
     isEmbedModeActive,
-    isMobile,
     isAnimating,
     overlayGroups,
     overlays,
@@ -111,11 +109,8 @@ function LayersContainer (props) {
     </DragDropContext>
   );
 
-  const mobileHeightCoeff = isCompareActive ? -30 : 20;
   let minHeight = '100px';
-  let maxHeight = isMobile
-    ? height + mobileHeightCoeff
-    : height;
+  let maxHeight = height;
 
   if (isEmbedModeActive) {
     minHeight = '25px';

diff --git a/web/js/containers/sidebar/sidebar.js b/web/js/containers/sidebar/sidebar.js
@@ -100,19 +100,20 @@ class Sidebar extends React.Component {
 
   updateDimensions() {
     const { subComponentHeight } = this.state;
-    const { isMobile, screenHeight } = this.props;
+    const { isMobile, screenHeight, isCompareMode } = this.props;
     const footerHeight = lodashGet(this, 'footerElement.clientHeight') || 20;
-    const tabHeight = 32;
+    const tabHeight = isMobile ? isCompareMode ? 80 : 40 : 32;
+    const groupCheckboxHeight = 35;
     let newHeight;
     if (!isMobile) {
       const iconHeight = 53;
       const topOffset = 10;
       const basePadding = 130;
       newHeight = screenHeight
-        - (iconHeight + topOffset + tabHeight + basePadding + footerHeight)
+        - (iconHeight + topOffset + tabHeight + groupCheckboxHeight + basePadding + footerHeight)
         - 10;
     } else {
-      newHeight = screenHeight - (tabHeight + footerHeight);
+      newHeight = screenHeight - (tabHeight + groupCheckboxHeight + footerHeight);
     }
     // Issue #1415: This was checking for subComponentHeight !== newHeight.
     // Sometimes it would get stuck in a loop in which the newHeight
@@ -155,7 +156,7 @@ class Sidebar extends React.Component {
     } if (!isCompareMode) {
       return (
         <LayersContainer
-          height={subComponentHeight - 48}
+          height={subComponentHeight}
           isActive={activeTab === 'layers'}
           compareState={activeString}
         />
@@ -248,11 +249,12 @@ class Sidebar extends React.Component {
           {this.renderSidebarLogo()}
           <>
             {!isDistractionFreeModeActive && isCollapsed && (
-            <CollapsedButton
-              isMobile={isMobile}
-              onclick={this.toggleSidebar}
-              numberOfLayers={numberOfLayers}
-            />
+              <CollapsedButton
+                isMobile={isMobile}
+                isEmbed={isEmbedModeActive}
+                onclick={this.toggleSidebar}
+                numberOfLayers={numberOfLayers}
+              />
             )}
             <div
               id="products-holder"

diff --git a/web/js/containers/timeline/timeline.js b/web/js/containers/timeline/timeline.js
@@ -872,10 +872,10 @@ class Timeline extends React.Component {
 
     // default positioning
     let mobileLeft = 190;
-    let mobileBottom = 10;
+    let mobileBottom = 20;
     if (isEmbedModeActive) {
       mobileLeft = 145;
-      mobileBottom = 10;
+      mobileBottom = 20;
     }
     // positioning will change depending on a combination of:
     // 1) subdaily (mobile date picker width);
@@ -888,10 +888,10 @@ class Timeline extends React.Component {
       }
     } else if (isScreenWidthLessThan484) {
       mobileLeft = isCompareModeActive ? 112 : 10;
-      mobileBottom = 65;
+      mobileBottom = 75;
       if (isEmbedModeActive) {
         mobileLeft = isCompareModeActive ? 90 : 10;
-        mobileBottom = 50;
+        mobileBottom = 60;
       }
     }
 

diff --git a/web/js/main.js b/web/js/main.js
@@ -205,6 +205,10 @@ window.onload = () => {
         };
         render(config, parameters, legacyState);
       });
+
+      if ('serviceWorker' in navigator) {
+        navigator.serviceWorker.register('service-worker.js');
+      }
     }).catch((error) => console.error(error));
 };
 

diff --git a/web/js/map/ui.js b/web/js/map/ui.js
@@ -233,7 +233,7 @@ export default function mapui(models, config, store, ui) {
     events.on('redux:action-dispatched', subscribeToStore);
     events.on('map:reload-layers', reloadLayers);
     window.addEventListener('orientationchange', () => {
-      updateProjection(true);
+      setTimeout(() => { updateProjection(true); }, 200);
     });
     updateProjection(true);
   };

diff --git a/web/manifest.webmanifest b/web/manifest.webmanifest
@@ -0,0 +1,31 @@
+{
+  "short_name": "@NAME@",
+  "name": "@LONG_NAME@",
+  "icons": [
+    {
+      "src": "images/wv-logo-mobile.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    },
+    {
+      "src": "images/maskable_icon.png",
+      "type": "image/png",
+      "sizes": "512x512",
+      "purpose": "any maskable"
+    }
+  ],
+  "start_url": ".",
+  "scope": ".",
+  "id":"/",
+  "background_color": "#FFFFFF",
+  "display": "fullscreen",
+  "theme_color": "#FFFFFF",
+  "description": "@DESCRIPTION@",
+  "screenshots": [
+    {
+      "src": "images/readme-preview.jpg",
+      "type": "image/jpg",
+      "sizes": "1200x800"
+    }
+  ]
+}
diff --git a/web/scss/components/alert.scss b/web/scss/components/alert.scss
@@ -72,7 +72,7 @@
   margin-top: 10px;
 }
 
-@media (max-width: 768px) {
+@media (max-width: $mobile-max-width) {
   .wv-alert {
     min-height: 50px;
     font-size: 12px;

diff --git a/web/scss/components/facets.scss b/web/scss/components/facets.scss
@@ -95,7 +95,7 @@
   }
 }
 
-@media (max-width: 768px) {
+@media (max-width: $mobile-max-width) {
   .facet-container {
     max-width: 100%;
     display: flex;

diff --git a/web/scss/components/tooltip.scss b/web/scss/components/tooltip.scss
@@ -205,7 +205,7 @@
   }
 }
 
-@media (max-width: 768px) {
+@media (max-width: $mobile-max-width) {
   .tooltip-custom-black {
     &.tooltip-coordinates-container {
       max-width: 320px;

diff --git a/web/scss/features/about.scss b/web/scss/features/about.scss
@@ -157,7 +157,7 @@
   }
 }
 
-@media (min-width: 769px) {
+@media (min-width: $tablet-min-width) {
   .about-page .keyboard-shortcuts-section {
     display: block;
   }

diff --git a/web/scss/features/anim-widget.scss b/web/scss/features/anim-widget.scss
@@ -3,7 +3,7 @@
   z-index: 100;
 }
 
-@media (min-width: 769px) {
+@media (min-width: $tablet-min-width) {
   .wv-animation-widget-wrapper {
     bottom: 88px;
 
@@ -19,7 +19,7 @@
   bottom: 0;
 
   &.minimized {
-    bottom: 10px;
+    bottom: 20px;
     left: 188px;
 
     &.landscape {
@@ -32,7 +32,7 @@
     left: 165px;
 
     &.landscape {
-      bottom: 10px;
+      bottom: 20px;
       left: 420px;
     }
   }
@@ -182,7 +182,7 @@
     }
 
     /* No hover styles on mobile */
-    @media (min-width: 769px) {
+    @media (min-width: $tablet-min-width) {
       &:hover {
         color: #999;
         cursor: pointer;
@@ -203,7 +203,7 @@ a .wv-animation-widget-icon {
   left: 50%;
   top: 50%;
 
-  @media (min-width: 769px) {
+  @media (min-width: $tablet-min-width) {
     &:hover {
       color: #fff;
       opacity: 0.5;

diff --git a/web/scss/features/compare.scss b/web/scss/features/compare.scss
@@ -178,7 +178,7 @@
   border: thin solid #333;
   background-color: $wv-transparent-black;
   position: absolute;
-  bottom: 65px;
+  bottom: 75px;
   left: 10px;
   display: flex;
   overflow: hidden;