Responsive fixes (#804)

* Responsive fixes - Overlay panels made responsive - Homepage hero section made responsive * Fixed linting bugs * Made info tab responsive * Fixed overlay bug * Fixed navbar sticky position on homepage
GeoNode · Feb 7, 2022 · 695251a · 695251a
1 parent 45c8f55
commit 695251a
Show file tree

Hide file tree

Showing 11 changed files with 94 additions and 48 deletions.
diff --git a/geonode_mapstore_client/client/js/components/DetailsPanel/DetailsPanel.jsx b/geonode_mapstore_client/client/js/components/DetailsPanel/DetailsPanel.jsx
@@ -565,13 +565,13 @@ function DetailsPanel({
                         </div>
                         <ResourceStatus resource={resource} />
                         {<p className="gn-details-panel-meta-text">
-                            {resource?.owner &&  <div>{resource?.owner.avatar &&
+                            {resource?.owner &&  <>{resource?.owner.avatar &&
                             <img src={resource?.owner.avatar} alt={getUserName(resource?.owner)} className="gn-card-author-image" />
                             }
                             <ResourceMessage type={resource?.resource_type} />
-                            <AuthorInfo resource={resource} formatHref={formatHref} style={{ margin: 0 }} detailsPanel /></div>}
+                            <AuthorInfo resource={resource} formatHref={formatHref} style={{ margin: 0 }} detailsPanel /></>}
                             {(resource?.date_type && resource?.date)
-                            && <div className="gn-details-panel-meta-date">{' '}/{' '}{moment(resource.date).format('MMMM Do YYYY')}</div>}
+                            && <>{' '}/{' '}{moment(resource.date).format('MMMM Do YYYY')}</>}
                         </p>
                         }
 

diff --git a/geonode_mapstore_client/client/js/components/OverlayContainer/OverlayContainer.jsx b/geonode_mapstore_client/client/js/components/OverlayContainer/OverlayContainer.jsx
@@ -10,7 +10,7 @@ import React, { forwardRef } from 'react';
 
 const OverlayContainer = forwardRef(({
     enabled,
-    style,
+    className,
     children
 }, ref) => {
 
@@ -21,12 +21,10 @@ const OverlayContainer = forwardRef(({
     return (
         <div
             ref={ref}
-            className="gn-overlay-container"
+            className={className ? className : "gn-overlay-container"}
             style={{
                 position: 'relative',
-                width: '100%',
-                height: '100%',
-                ...style
+                height: '100%'
             }}
         >
             {children}

diff --git a/geonode_mapstore_client/client/js/components/ResourceStatus/ResourceStatus.jsx b/geonode_mapstore_client/client/js/components/ResourceStatus/ResourceStatus.jsx
@@ -29,9 +29,15 @@ const ResourceStatus = ({ resource = {} }) => {
     const getTitle = (status) => {
         const { isApproved: approved, isPublished: published } = status;
 
-        if (!approved && published) {return <Message msgId="gnhome.pendingApproval" />}
-        if (!approved && !published) {return <Message msgId="gnhome.unApprovedunPublished" />}
-        if (!published && !approved) {return <Message msgId="gnhome.unpublished" />}
+        if (!approved && published) {
+            return <Message msgId="gnhome.pendingApproval" />;
+        }
+        if (!approved && !published) {
+            return <Message msgId="gnhome.unApprovedunPublished" />;
+        }
+        if (!published && !approved) {
+            return <Message msgId="gnhome.unpublished" />;
+        }
 
         return '';
     };
@@ -40,7 +46,7 @@ const ResourceStatus = ({ resource = {} }) => {
         ? (
             <p className="gn-resource-status-text">
                 {
-                    (!isProcessing && (!isApproved || !isPublished)) && 
+                    (!isProcessing && (!isApproved || !isPublished)) &&
                         <ButtonWithTooltip variant="default" className="gn-resource-status gn-status-button" tooltip={getTitle({ isApproved, isPublished })} style={{ marginRight: (isDeleting || isDeleted || isCopying) && '0.4rem' }} tooltipPosition="top">
                             <FaIcon  name="info-circle" className="gn-resource-status-pending" />
                         </ButtonWithTooltip>

diff --git a/geonode_mapstore_client/client/js/components/ViewerLayout/ViewerLayout.jsx b/geonode_mapstore_client/client/js/components/ViewerLayout/ViewerLayout.jsx
@@ -60,14 +60,7 @@ function ViewerLayout({
                 </div>
             </div>
             <div
-                className="gn-viewer-right-overlay shadow-far"
-                style={{
-                    position: 'absolute',
-                    right: 0,
-                    height: '100%',
-                    zIndex: 2000,
-                    transform: 'all 0.3s'
-                }}>
+                className="gn-viewer-right-overlay shadow-far">
                 {rightOverlay}
             </div>
             <footer>

diff --git a/geonode_mapstore_client/client/js/plugins/DetailViewer.jsx b/geonode_mapstore_client/client/js/plugins/DetailViewer.jsx
@@ -33,7 +33,6 @@ import {
     updatingThumbnailResource
 } from '@js/selectors/resource';
 import Button from '@js/components/Button';
-import PropTypes from 'prop-types';
 import useDetectClickOut from '@js/hooks/useDetectClickOut';
 import OverlayContainer from '@js/components/OverlayContainer';
 import { withRouter } from 'react-router';
@@ -111,7 +110,6 @@ function DetailViewer({
     onEditAbstractResource,
     onEditThumbnail,
     canEdit,
-    width,
     hide,
     user,
     onClose
@@ -151,9 +149,7 @@ function DetailViewer({
         <OverlayContainer
             enabled={enabled}
             ref={node}
-            style={{
-                width
-            }}
+            className="gn-overlay-wrapper"
         >
             <ConnectedDetailsPanel
                 editTitle={handleTitleValue}
@@ -167,14 +163,6 @@ function DetailViewer({
     );
 }
 
-DetailViewer.propTypes = {
-    width: PropTypes.number
-};
-
-DetailViewer.defaultProps = {
-    width: 800
-};
-
 const DetailViewerPlugin = connect(
     createSelector(
         [

diff --git a/geonode_mapstore_client/client/js/plugins/Share.jsx b/geonode_mapstore_client/client/js/plugins/Share.jsx
@@ -85,7 +85,6 @@ const entriesTabs = [
 ];
 function Share({
     enabled,
-    width,
     resourceId,
     compactPermissions,
     layers,
@@ -114,7 +113,7 @@ function Share({
     return (
         <OverlayContainer
             enabled={enabled}
-            style={{ width }}
+            className="gn-overlay-wrapper"
         >
             <section
                 className="gn-share-panel"
@@ -147,15 +146,13 @@ function Share({
 Share.propTypes = {
     resourceId: PropTypes.oneOfType([ PropTypes.number, PropTypes.string ]),
     enabled: PropTypes.bool,
-    onClose: PropTypes.func,
-    width: PropTypes.number
+    onClose: PropTypes.func
 };
 
 Share.defaultProps = {
     resourceId: null,
     enabled: false,
-    onClose: () => {},
-    width: 800
+    onClose: () => {}
 };
 
 const SharePlugin = connect(

diff --git a/geonode_mapstore_client/client/js/routes/Viewer.jsx b/geonode_mapstore_client/client/js/routes/Viewer.jsx
@@ -50,7 +50,7 @@ function getPluginsConfiguration(name, pluginsConfig) {
     if (isMobile && pluginsConfig) {
         return pluginsConfig[`${name}_mobile`] || pluginsConfig[name] || DEFAULT_PLUGINS_CONFIG;
     }
-    return pluginsConfig[name] || DEFAULT_PLUGINS_CONFIG
+    return pluginsConfig[name] || DEFAULT_PLUGINS_CONFIG;
 }
 
 function ViewerRoute({

diff --git a/geonode_mapstore_client/client/js/routes/upload/UploadContainer.jsx b/geonode_mapstore_client/client/js/routes/upload/UploadContainer.jsx
@@ -105,7 +105,7 @@ function UploadContainer({
                                     const { files, missingExt = [] } = waitingUploads[baseName];
                                     const filesExt = Object.keys(files);
                                     const size = getSize(files, filesExt);
-;                                    return (
+                                    return (
                                         <li
                                             key={baseName}
                                         >

diff --git a/geonode_mapstore_client/client/themes/geonode/less/_base.less b/geonode_mapstore_client/client/themes/geonode/less/_base.less
@@ -186,6 +186,6 @@ body {
     }
 }
 
-.gn-theme {
+.gn-page-wrapper {
     overflow-x: hidden;
 }
diff --git a/geonode_mapstore_client/client/themes/geonode/less/_details-panel.less b/geonode_mapstore_client/client/themes/geonode/less/_details-panel.less
@@ -138,6 +138,7 @@
     }
 }
 .gn-details-panel-content-text {
+    width: 100%;
     display: flex;
     flex-direction: column;
     flex: 1;
@@ -152,6 +153,7 @@
 }
 .gn-details-panel-info{
     .tabs-info {
+        width: 100%;
         margin-top: 2em;
         .tab-content{
             padding: 2em;
@@ -304,7 +306,6 @@
     }
     .gn-details-panel-tools{
         display: flex;
-        flex: 1;
         justify-content: flex-end;
         align-items: center;
     }
@@ -321,12 +322,8 @@
 }
 
 .gn-details-panel-meta-text {
-    display: flex;
 
     div {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
         * {
             font-size: 0.8rem;
         }
@@ -338,7 +335,6 @@
 
 .gn-details-panel-type {
     margin-top: 0.25rem;
-    // margin-bottom: 0;
 }
 
 .gn-details-panel-meta-date {
@@ -398,4 +394,58 @@
     align-items: center;
     justify-content: center;
     right: 0px;
+}
+
+@media screen and (max-width: @screen-xs) {
+    .gn-details-panel-title h1 {
+        font-size: 1rem;
+    }
+
+    .gn-details-panel-content {
+        display: block;
+    }
+
+    .gn-details-panel-content-img {
+        margin: 0 0 1.2rem 0;
+    }
+
+    .gn-details-panel .editContainer.imagepreview {
+        width: 100%;
+    }
+
+    .gn-details-panel-content,
+    .gn-details-panel-info {
+        .DList-containner {
+            .DList--2cols>.DList-cell,
+            .DList--2cols>.DList-cell--medium {
+                width: 100%;
+            }
+
+            .DList-cell {
+                text-overflow: ellipsis;
+            }
+        }
+    }
+}
+
+.gn-overlay-container {
+    width: 100%;
+}
+
+.gn-overlay-wrapper {
+    width: 800px
+}
+
+.gn-viewer-right-overlay {
+    position: absolute;
+    right: 0;
+    height: 100%;
+    z-index: 2000;
+    transform: all 0.3s;
+}
+
+@media screen and (max-width: 800px) {
+    .gn-overlay-wrapper {
+        width: 100vw;
+    }
 }
diff --git a/geonode_mapstore_client/client/themes/geonode/less/_hero.less b/geonode_mapstore_client/client/themes/geonode/less/_hero.less
@@ -60,3 +60,17 @@
         }
     }
 }
+
+@media screen and (max-width: @screen-xs) {
+  .gn-hero .jumbotron .gn-hero-description {
+            word-break: break-word;
+            font-size: @font-size-base;
+            h1 { font-size: @font-size-base * 3.5; }
+            h2 { font-size: @font-size-base * 3; }
+            h3 { font-size: @font-size-base * 2.5; }
+            h4 { font-size: @font-size-base * 2; }
+            h5 { font-size: @font-size-base * 1.5; }
+            h6 { font-size: @font-size-base; }
+            p:not(.gn-hero-tools) { font-size: @font-size-base; }
+        }
+}