From a5038f0b5fab26be621068a02e41ffae9776c429 Mon Sep 17 00:00:00 2001 From: Miu Razvan Date: Thu, 10 Sep 2020 18:51:32 +0300 Subject: [PATCH] Fixed browse the data ('Map') mobile responsive --- .../DiscodataOpenlayersMapBlock/View.jsx | 19 +- .../DiscodataOpenlayersMapBlock/style.css | 26 +- .../manage/Blocks/FiltersBlock/style.css | 13 + theme/site/collections/menu.overrides | 16 +- theme/site/globals/site.overrides | 239 ++++++++++-------- 5 files changed, 194 insertions(+), 119 deletions(-) diff --git a/src/components/manage/Blocks/DiscodataOpenlayersMapBlock/View.jsx b/src/components/manage/Blocks/DiscodataOpenlayersMapBlock/View.jsx index 636c2472..6e9dab2e 100644 --- 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) => {
Pollutant emissions
-
+
{state.popupDetails.properties.pollutants ? ( -

{state.popupDetails.properties.pollutants}

+

+ {state.popupDetails.properties.pollutants} + {/* {state.popupDetails.properties.pollutants.substring( + 0, + 256, + )} + {state.popupDetails.properties.pollutants.length > 256 + ? '...' + : ''} */} +

) : (

There are no data regarding the pollutants

)} @@ -1050,7 +1061,7 @@ const OpenlayersMapView = (props) => { }} className="solid dark-blue" > - VIEW SITE DETAIL + Site Details
diff --git a/src/components/manage/Blocks/DiscodataOpenlayersMapBlock/style.css b/src/components/manage/Blocks/DiscodataOpenlayersMapBlock/style.css index 2ce4d3be..cf245ed0 100644 --- 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 index 481758e4..05d9be96 100644 --- 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%; + } +} \ No newline at end of file diff --git a/theme/site/collections/menu.overrides b/theme/site/collections/menu.overrides index 196324f4..700ecd35 100644 --- 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; } } diff --git a/theme/site/globals/site.overrides b/theme/site/globals/site.overrides index 2f00f4b2..7ab045ab 100644 --- a/theme/site/globals/site.overrides +++ b/theme/site/globals/site.overrides @@ -647,81 +647,134 @@ p { .ui.table { border: none; + // border-collapse: separate; + // border-spacing: 0 4px; + color: #323232; - tr { - border: none; + thead { + tr { + th { + border: none; + background: #fff; + color: #000; + font-weight: bold; + text-transform: none; + } + } + } - &.hidden-row { - &.hide { + tbody { + tr { + border: none; + background-color: #F8F8F8; + &.hidden-row { + border: none; + display: none; td { + padding: 0; + .table-flex-container { - padding: 0; - max-height: 0; - opacity: 0; + display: flex; + justify-content: space-between; + overflow: hidden; + transition: opacity 0.4s cubic-bezier(0, 0, 1, 1); + padding: 0 0.4rem; + + &.action { + padding: 0; + } + + >div { + position: relative; + flex: 1; + margin: 0 0.4rem; + } + + span.header { + font-weight: bold; + color: #4296B2; + margin-bottom: 1em; + } + + a.view-site-link { + width: 100%; + text-align: center; + background: #32536B; + color: white; + font-weight: bold; + text-transform: uppercase; + border-radius: 5rem; + padding: 1.5rem 3rem; + } + } + } + + &.show { + border: none; + display: table-row; + td { + padding: 20px 16px 20px 16px; + .table-flex-container { + padding: 1em; + max-height: fit-content; + opacity: 1; + &.action { + padding: 0; + margin-top: 1em; + } + &.white { + color: #000; + background: #fff; + } + } } } } - - &.show { + + &.hide { td { .table-flex-container { - padding: 20px 30px 40px 30px; - max-height: fit-content; - opacity: 1; + padding: 0; + max-height: 0; + opacity: 0; } } } - - td { + + button { + cursor: pointer; + background: transparent; + border: none; padding: 0; - - .table-flex-container { - display: flex; - justify-content: space-between; - overflow: hidden; - transition: opacity 0.4s cubic-bezier(0, 0, 1, 1); - padding: 0 0.4rem; - - >div { - position: relative; - flex: 1; - margin: 0 0.4rem; - } - - span.header { - font-weight: bold; - } - - a.view-site-link { - width: 100%; - text-align: center; - background: #32536B; - color: white; - font-weight: bold; - text-transform: uppercase; - border-radius: 5rem; - padding: 1.5rem 3rem; + + &:focus { + outline: none; + } + + svg.icon { + fill: #878787 !important; + + &:focus { + outline: none; } } } - } - } - - td { - border: none; - padding: 0.8em 0.8em; - } - - thead { - tr { - border-bottom: 1px solid #CBCBCB; - - th { - border: none; - background: #fff; - color: #000; + + &.row-active { font-weight: bold; - text-transform: none; + button { + svg.icon { + fill: #D63D27 !important; + } + } + } + + &:hover:not(.hidden-row):not(.row-active) { + button { + svg.icon { + fill: #D63D27 !important; + } + } } } } @@ -729,43 +782,36 @@ p { tfoot { th { border: none; + padding: 0.78571429em 0; } } - } - - button { - cursor: pointer; - background: transparent; - border: none; - padding: 0; - &:focus { - outline: none; + td { + border: none; + padding: 4px 16px; } + } - svg.icon { - fill: #D63D27 !important; - + .ui.pagination.menu { + border: 1px solid rgba(34,36,38,.15); + box-shadow: 0 1px 2px 0 rgba(34,36,38,.15); + border-radius: .28571429rem; + .item { + &:before { + position: absolute; + content: ''; + top: 0; + right: 0; + height: 100%; + width: 1px; + background: rgba(34,36,38,.1); + } + &:focus { - outline: none; + outline: none !important; } } } - - .ui.pagination.menu .item { - color: #6B6B6B; - min-width: 0; - padding: 1em 0.4em; - - &:focus { - outline: none !important; - } - } - - .ui.pagination.menu .active.item { - color: #000; - border-bottom: none; - } } .ui.grid { @@ -1042,12 +1088,13 @@ space-around { // } // } -button { +button, +a { cursor: pointer; outline: none; + text-decoration: none; &.outline { position: relative; - z-index: 3; background: transparent; color: #1172c4; font-size: 14px; @@ -1058,7 +1105,7 @@ button { padding: 10px 40px; transition: all 0.2s linear; a { - text-decoration: none; + text-decoration: none; } &:hover { color: white; @@ -1105,7 +1152,7 @@ button { padding: 10px 40px; transition: all 0.2s linear; a { - text-decoration: none; + text-decoration: none; } &:hover { color: white; @@ -1258,6 +1305,9 @@ body.has-sidebar { width: 0; background-color: transparent !important; } + &:first-child { + margin-left: 0 !important; + } } .active.item { background-color: transparent !important; @@ -1312,15 +1362,6 @@ body.has-sidebar { } } - -.ui.menu { - &.pagination { - .active.item { - background-color: transparent !important; - } - } -} - .react-grid-item { .block-container { .block-wrapper {