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) => {
+
{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 {