Fixed browse the data ('Map') mobile responsive

eea · Sep 10, 2020 · a5038f0 · a5038f0
1 parent 81cfd76
commit a5038f0
Show file tree

Hide file tree

Showing 5 changed files with 194 additions and 119 deletions.
diff --git a/src/components/manage/Blocks/DiscodataOpenlayersMapBlock/View.jsx b/src/components/manage/Blocks/DiscodataOpenlayersMapBlock/View.jsx
@@ -166,6 +166,7 @@ const OpenlayersMapView = (props) => {
             const options = opt_options || {};
             const buttonContainer = document.createElement('div');
             buttonContainer.setAttribute('id', 'map-sidebar-button');
+            buttonContainer.setAttribute('class', 'ol-unselectable ol-control');
             Control.call(this, {
               element: buttonContainer,
               target: options.target,
@@ -187,6 +188,7 @@ const OpenlayersMapView = (props) => {
             const options = opt_options || {};
             const buttonContainer = document.createElement('div');
             buttonContainer.setAttribute('id', 'map-view-your-area-button');
+            buttonContainer.setAttribute('class', 'ol-unselectable ol-control');
             Control.call(this, {
               element: buttonContainer,
               target: options.target,
@@ -661,7 +663,7 @@ const OpenlayersMapView = (props) => {
               stateRef.current.updateMapPosition,
             );
           var url =
-            'https://services.arcgis.com/LcQjj2sL7Txk9Lag/arcgis/rest/services/SiteMap/FeatureServer/0/query/?f=json&' +
+            'https://services.arcgis.com/LcQjj2sL7Txk9Lag/arcgis/rest/services/SiteMap_v2/FeatureServer/0/query/?f=json&' +
             'returnGeometry=true&spatialRel=esriSpatialRelIntersects&geometry=' +
             encodeURIComponent(
               '{"xmin":' +
@@ -1013,9 +1015,18 @@ const OpenlayersMapView = (props) => {
                   <div className="column  column-12">
                     <Header as="h3">Pollutant emissions</Header>
                   </div>
-                  <div className="column  column-12">
+                  <div className="column  column-12 description">
                     {state.popupDetails.properties.pollutants ? (
-                      <p>{state.popupDetails.properties.pollutants}</p>
+                      <p>
+                        {state.popupDetails.properties.pollutants}
+                        {/* {state.popupDetails.properties.pollutants.substring(
+                          0,
+                          256,
+                        )}
+                        {state.popupDetails.properties.pollutants.length > 256
+                          ? '...'
+                          : ''} */}
+                      </p>
                     ) : (
                       <p>There are no data regarding the pollutants</p>
                     )}
@@ -1050,7 +1061,7 @@ const OpenlayersMapView = (props) => {
                 }}
                 className="solid dark-blue"
               >
-                VIEW SITE DETAIL
+                Site Details
               </button>
             </div>
           </>

diff --git a/src/components/manage/Blocks/DiscodataOpenlayersMapBlock/style.css b/src/components/manage/Blocks/DiscodataOpenlayersMapBlock/style.css
@@ -124,6 +124,12 @@
   text-decoration: underline;
 }
 
+#popup-details .popover-body .description {
+  overflow: auto;
+  word-break: break-word;
+  max-height: 100px;
+}
+
 #popup-details .popover-body .row {
   margin-bottom: 1rem;
 }
@@ -206,21 +212,19 @@
   padding-top: 1rem;
 }
 
-.ol-overlaycontainer-stopevent #dynamic-filter-toggle {
-  display: none;
-  top: 80px;
-  left: .5em;
+.ol-overlaycontainer-stopevent #map-sidebar-button {
+  top: 2.5em;
+  right: 30px;
 }
 
-.ol-overlaycontainer-stopevent #view-your-area {
-  top: 55px;
-  left: .5em;
+.ol-overlaycontainer-stopevent #map-view-your-area-button {
+  top: .5em;
+  right: 30px;
 }
 
 @media only screen and (max-width: 600px) {
   .ol-dynamic-filter {
     left: 0 !important;
-    width: 100% !important;
   }
 
   .ol-dynamic-filter #dynamic-filter {
@@ -247,6 +251,12 @@
   }
 }
 
+@media only screen and (max-width: 460px) {
+  #popup-details {
+    min-width: 220px;
+  }
+}
+
 
 p.mb-1,
 p.mb-1:first-child {

diff --git a/src/components/manage/Blocks/FiltersBlock/style.css b/src/components/manage/Blocks/FiltersBlock/style.css
@@ -214,3 +214,16 @@
 #dynamic-filter {
   display: none;
 }
+
+
+@media (max-width: 500px) {
+  .filters-container {
+    flex-flow: column;
+  }
+  .filters-container > .search-input-container {
+    margin-right: 0;
+  }
+  .filters-container .buttons-container button {
+    width: 100%;
+  }
+}
diff --git a/theme/site/collections/menu.overrides b/theme/site/collections/menu.overrides
@@ -198,17 +198,17 @@
   box-shadow: none;
 
   .item {
-    color: @linkColor;
+    // color: @linkColor;
 
-    &:before {
-      display: none;
-    }
+    // &:before {
+    //   display: none;
+    // }
   }
 
   .active.item {
-    background: none;
-    color: @linkColor;
-    font-weight: 700;
-    border-bottom: 2px solid @linkColor;
+    // background: none;
+    // color: @linkColor;
+    // font-weight: 700;
+    // border-bottom: 2px solid @linkColor;
   }
 }