From ad8e11d65ec484d03ab748b36895883e7c57fb3d Mon Sep 17 00:00:00 2001
From: Miu Razvan <miu.razvan28@gmail.com>
Date: Mon, 31 Aug 2020 00:35:31 +0300
Subject: [PATCH] Style for Map

---
 .../manage/Blocks/DiscodataOpenlayersMapBlock/Edit.jsx    | 8 ++++----
 .../manage/Blocks/DiscodataOpenlayersMapBlock/View.jsx    | 4 ++--
 .../manage/Blocks/DiscodataOpenlayersMapBlock/style.css   | 8 ++++++++
 theme/site/elements/container.variables                   | 1 +
 theme/site/globals/site.overrides                         | 1 +
 5 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/src/components/manage/Blocks/DiscodataOpenlayersMapBlock/Edit.jsx b/src/components/manage/Blocks/DiscodataOpenlayersMapBlock/Edit.jsx
index eec102c4..46493485 100644
--- a/src/components/manage/Blocks/DiscodataOpenlayersMapBlock/Edit.jsx
+++ b/src/components/manage/Blocks/DiscodataOpenlayersMapBlock/Edit.jsx
@@ -6,7 +6,7 @@ import RenderFields from 'volto-addons/Widgets/RenderFields';
 import View from './View';
 import { settings } from '~/config';
 
-const getSchema = props => {
+const getSchema = (props) => {
   return {
     draggable: {
       type: 'boolean',
@@ -26,7 +26,7 @@ const getSchema = props => {
   };
 };
 
-const Edit = props => {
+const Edit = (props) => {
   const [state, setState] = useState({
     schema: getSchema({ ...props, providerUrl: settings.providerUrl }),
     id: _uniqueId('block_'),
@@ -41,14 +41,14 @@ const Edit = props => {
     /* eslint-disable-next-line */
   }, [props.data.isExpandable])
   return (
-    <div>
+    <>
       <RenderFields
         schema={state.schema}
         {...props}
         title="Discodata openlayers map"
       />
       <View {...props} id={state.id} />
-    </div>
+    </>
   );
 };
 
diff --git a/src/components/manage/Blocks/DiscodataOpenlayersMapBlock/View.jsx b/src/components/manage/Blocks/DiscodataOpenlayersMapBlock/View.jsx
index 92ccd4fa..ac09b526 100644
--- a/src/components/manage/Blocks/DiscodataOpenlayersMapBlock/View.jsx
+++ b/src/components/manage/Blocks/DiscodataOpenlayersMapBlock/View.jsx
@@ -843,7 +843,7 @@ const OpenlayersMapView = (props) => {
   };
 
   return (
-    <React.Fragment>
+    <div className="openlayer-map-container">
       <div id="map" className="map" />
       <div id="popup" className="popup">
         {state.popup.element && (
@@ -971,7 +971,7 @@ const OpenlayersMapView = (props) => {
       <Dimmer id="map-loader" active={loader}>
         <Loader />
       </Dimmer>
-    </React.Fragment>
+    </div>
   );
 };
 
diff --git a/src/components/manage/Blocks/DiscodataOpenlayersMapBlock/style.css b/src/components/manage/Blocks/DiscodataOpenlayersMapBlock/style.css
index f3d531b8..5c20bf7e 100644
--- a/src/components/manage/Blocks/DiscodataOpenlayersMapBlock/style.css
+++ b/src/components/manage/Blocks/DiscodataOpenlayersMapBlock/style.css
@@ -3,6 +3,14 @@
   height: 100%;
 }
 
+.openlayer-map-container {
+  height: 100%;
+}
+
+.block-edit-wrapper .openlayer-map-container {
+  height: 90%;
+}
+
 #map-loader.ui.active {
   position: absolute !important;
   pointer-events: auto !important;
diff --git a/theme/site/elements/container.variables b/theme/site/elements/container.variables
index bf8ce4c7..5117e1de 100644
--- a/theme/site/elements/container.variables
+++ b/theme/site/elements/container.variables
@@ -7,6 +7,7 @@
 --------------------*/
 
 /* Devices */
+@mobileWidth: 100%;
 
 /* Coupling (Add Negative Margin to container size) */
 
diff --git a/theme/site/globals/site.overrides b/theme/site/globals/site.overrides
index 15afe8e1..db5ddda8 100644
--- a/theme/site/globals/site.overrides
+++ b/theme/site/globals/site.overrides
@@ -1047,6 +1047,7 @@ body.has-sidebar {
   .ui.menu {
     border: none;
     box-shadow: none;
+    background-color: transparent;
     &.red-menu {
       .item {
         color: #D63D27;