Style for Map

eea · Aug 30, 2020 · ad8e11d · ad8e11d
1 parent a5e4e1a
commit ad8e11d
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 6 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -1047,6 +1047,7 @@ body.has-sidebar {
   .ui.menu {
     border: none;
     box-shadow: none;
+    background-color: transparent;
     &.red-menu {
       .item {
         color: #D63D27;