Css improvments

eea · Dec 28, 2020 · 04ca4de · 04ca4de
1 parent 47f1a93
commit 04ca4de
Show file tree

Hide file tree

Showing 6 changed files with 95 additions and 146 deletions.
diff --git a/package.json b/package.json
@@ -124,14 +124,14 @@
     "node": "^10 || ^12"
   },
   "dependencies": {
-    "@eeacms/volto-blocks-form": "github:eea/volto-blocks-form#1.0.1",
-    "@eeacms/volto-metadata-block": "github:eea/volto-metadata-block#1.0.2",
+    "@eeacms/volto-blocks-form": "github:eea/volto-blocks-form#1.0.3",
+    "@eeacms/volto-metadata-block": "github:eea/volto-metadata-block#1.0.4",
     "@eeacms/volto-object-widget": "github:eea/volto-object-widget#1.0.3",
     "@eeacms/volto-slate-metadata-mentions": "github:eea/volto-slate-metadata-mentions#1.0.0",
     "@eeacms/volto-widget-toggle": "github:eea/volto-widget-toggle#1.0.0",
     "@eeacms/volto-widgets-view": "github:eea/volto-widgets-view#1.0.3",
     "@material/react-linear-progress": "^0.15.0",
-    "@plone/volto": "10.4.3",
+    "@plone/volto": "10.6.1",
     "axios": "^0.20.0",
     "jsonp": "^0.2.1",
     "ol": "^6.4.3",
@@ -146,7 +146,7 @@
     "react-sizeme": "^2.6.12",
     "react-tooltip": "^4.2.9",
     "react-visibility-sensor": "^5.1.1",
-    "volto-slate": "github:eea/volto-slate#1.0.5"
+    "volto-slate": "github:eea/volto-slate#1.0.6"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.4",

diff --git a/src/components/manage/Blocks/DiscodataOpenlayersMapBlock/View.jsx b/src/components/manage/Blocks/DiscodataOpenlayersMapBlock/View.jsx
@@ -68,8 +68,7 @@ let Map,
   defaultsControls,
   defaultsInteractions,
   containsExtent,
-  VOID,
-  DragRotateAndZoom;
+  VOID;
 let OL_LOADED = false;
 
 const OpenlayersMapView = (props) => {
@@ -111,6 +110,7 @@ const OpenlayersMapView = (props) => {
   const firstFilteringDone = useRef(0);
   const ToggleSidebarControl = useRef(null);
   const ViewYourAreaControl = useRef(null);
+  const ExtraControl = useRef(null);
   const siteTermRef = useRef(null);
   const mounted = useRef(false);
   const draggable = !!props.data?.draggable?.value;
@@ -175,52 +175,42 @@ const OpenlayersMapView = (props) => {
         defaultsInteractions = require('ol/interaction.js').defaults;
         containsExtent = require('ol/extent.js').containsExtent;
         VOID = require('ol/functions').VOID;
-        DragRotateAndZoom = require('ol/interaction.js').DragRotateAndZoom;
         OL_LOADED = true;
       }
-      if (OL_LOADED && !ToggleSidebarControl.current && hasSidebar) {
-        ToggleSidebarControl.current = /*@__PURE__*/ (function (Control) {
-          function ToggleSidebarControl(opt_options) {
-            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,
-            });
-          }
-          if (Control) ToggleSidebarControl.__proto__ = Control;
-          ToggleSidebarControl.prototype = Object.create(
-            Control && Control.prototype,
-          );
-          ToggleSidebarControl.prototype.constructor = ToggleSidebarControl;
 
-          return ToggleSidebarControl;
-        })(Control);
-      }
-
-      if (OL_LOADED && !ViewYourAreaControl.current) {
-        ViewYourAreaControl.current = /*@__PURE__*/ (function (Control) {
-          function ViewYourAreaControl(opt_options) {
+      if (OL_LOADED && !ExtraControl.current) {
+        ExtraControl.current = (function (Control) {
+          function ExtraControl(opt_options) {
             const options = opt_options || {};
-            const buttonContainer = document.createElement('div');
-            buttonContainer.setAttribute('id', 'map-view-your-area-button');
-            buttonContainer.setAttribute('class', 'ol-unselectable ol-control');
+            const buttonsContainer = document.createElement('div');
+            const viewYourAreaButton = document.createElement('div');
+            const toggleSidebarButton = document.createElement('div');
+            buttonsContainer.setAttribute('id', 'extra-control-buttons');
+            toggleSidebarButton.setAttribute('id', 'map-sidebar-button');
+            toggleSidebarButton.setAttribute(
+              'class',
+              'ol-unselectable ol-control',
+            );
+            viewYourAreaButton.setAttribute('id', 'map-view-your-area-button');
+            viewYourAreaButton.setAttribute(
+              'class',
+              'ol-unselectable ol-control',
+            );
+            buttonsContainer.appendChild(viewYourAreaButton);
+            buttonsContainer.appendChild(toggleSidebarButton);
             Control.call(this, {
-              element: buttonContainer,
+              element: buttonsContainer,
               target: options.target,
             });
           }
-          if (Control) ViewYourAreaControl.__proto__ = Control;
-          ViewYourAreaControl.prototype = Object.create(
-            Control && Control.prototype,
-          );
-          ViewYourAreaControl.prototype.constructor = ViewYourAreaControl;
+          if (Control) ExtraControl.__proto__ = Control;
+          ExtraControl.prototype = Object.create(Control && Control.prototype);
+          ExtraControl.prototype.constructor = ExtraControl;
 
-          return ViewYourAreaControl;
+          return ExtraControl;
         })(Control);
       }
+
       if (
         canShow(dataprotection.privacy_cookie_key) &&
         document.getElementById('map')
@@ -472,15 +462,13 @@ const OpenlayersMapView = (props) => {
       document.getElementById('map').innerHTML = '';
       const map = new Map({
         controls: draggable
-          ? hasSidebar
-            ? defaultsControls().extend([
-                new ToggleSidebarControl.current(),
-                new ViewYourAreaControl.current(),
-              ])
-            : defaultsControls().extend([new ViewYourAreaControl.current()])
+          ? defaultsControls().extend([new ExtraControl.current(hasSidebar)])
           : [],
         interactions: draggable
-          ? defaultsInteractions().extend([new DragRotateAndZoom()])
+          ? defaultsInteractions({
+              altShiftDragRotate: false,
+              pinchRotate: false,
+            })
           : [],
         target: document.getElementById('map'),
         view: new View({

diff --git a/src/components/manage/Blocks/DiscodataOpenlayersMapBlock/style.css b/src/components/manage/Blocks/DiscodataOpenlayersMapBlock/style.css
@@ -212,14 +212,21 @@
   padding-top: 1rem;
 }
 
-.ol-overlaycontainer-stopevent #map-sidebar-button {
-  top: 2.5em;
-  right: 30px;
+.ol-overlaycontainer-stopevent #extra-control-buttons {
+  position: absolute;
+  top: .5em;
+  right: .5em;
+  padding: 2px;
+}
+
+.ol-overlaycontainer-stopevent #extra-control-buttons .ol-control {
+  position: relative;
+  padding: 0;
+  margin: 1px;
 }
 
-.ol-overlaycontainer-stopevent #map-view-your-area-button {
-  top: 0.5em;
-  right: 30px;
+.ol-rotate {
+  display: none;
 }
 
 @media only screen and (max-width: 600px) {

diff --git a/theme/site/elements/container.overrides b/theme/site/elements/container.overrides
@@ -15,14 +15,18 @@
     margin-right 0.3s cubic-bezier(0.6, -0.28, 0.735, 0.045);
 }
 
-.contentWidthMedia(@width, @headerWidth, @gutter, @offset) {
+.contentWidthMedia(@width, @headerWidth, @rowWidth, @gutter, @offset) {
   .ui.container {
     width: @width !important;
     margin-right: @gutter !important;
     margin-left: @gutter !important;
     &.header-container {
       width: @headerWidth !important;
     }
+    &.row {
+      width: @rowWidth !important;
+      overflow: auto;
+    }
   }
 
   .drag.handle.wrapper {
@@ -36,7 +40,7 @@
 
 .contentWidth(@offset) {
   @media only screen and (max-width: @largestMobileScreen + @offset) {
-    .contentWidthMedia(@mobileWidth, auto, @mobileGutter, -12px);
+    .contentWidthMedia(auto, auto, 100%, @mobileGutter, -12px);
 
     [class*='mobile hidden'],
     [class*='tablet only']:not(.mobile),
@@ -48,7 +52,7 @@
     }
   }
   @media only screen and (min-width: @tabletBreakpoint + @offset) and (max-width: @largestTabletScreen + @offset) {
-    .contentWidthMedia(@tabletWidth, @tabletWidth, @tabletGutter, -30px);
+    .contentWidthMedia(@tabletWidth, @tabletWidth, @tabletWidth, @tabletGutter, -30px);
 
     [class*='mobile only']:not(.tablet),
     [class*='tablet hidden'],
@@ -60,7 +64,7 @@
     }
   }
   @media only screen and (min-width: @computerBreakpoint + @offset) and (max-width: @largestSmallMonitor + @offset) {
-    .contentWidthMedia(@computerWidth, @computerWidth, @computerGutter, -30px);
+    .contentWidthMedia(@computerWidth, @computerWidth, @computerWidth, @computerGutter, -30px);
 
     [class*='mobile only']:not(.computer),
     [class*='tablet only']:not(.computer),
@@ -72,7 +76,7 @@
     }
   }
   @media only screen and (min-width: @largeMonitorBreakpoint + @offset) {
-    .contentWidthMedia(@largeMonitorWidth, @largeMonitorWidth, @largeMonitorGutter, -30px);
+    .contentWidthMedia(@largeMonitorWidth, @largeMonitorWidth, @largeMonitorWidth, @largeMonitorGutter, -30px);
 
     [class*='mobile only']:not([class*='large screen']),
     [class*='tablet only']:not([class*='large screen']),

diff --git a/theme/site/globals/site.overrides b/theme/site/globals/site.overrides
@@ -5,7 +5,7 @@
   width: 80% !important;
 
   @media only screen and (max-width: @largestTabletScreen) {
-    margin: 0 2rem !important;
+    margin: 0 1rem !important;
     width: auto !important;
   }
 }
@@ -240,13 +240,19 @@ h4 {
 
 p {
   color: @bodyColor;
-  font-weight: @lightWeight;
+  font-weight: 300;
 
   &.documentDescription {
     color: @fullBlack;
   }
 }
 
+ul, ol {
+  li {
+    font-weight: 300;
+  }
+}
+
 .breadcrumbs {
   display: none;
 }