diff --git a/src/app/geosource/components/dataset-detail/dataset-table-map/dataset-table-map.component.scss b/src/app/geosource/components/dataset-detail/dataset-table-map/dataset-table-map.component.scss index e9cdefcec52965967876b8721f528c7c2c8251e7..83d3e5a02989b02a4938c33b18d6872fda8ebe68 100644 --- a/src/app/geosource/components/dataset-detail/dataset-table-map/dataset-table-map.component.scss +++ b/src/app/geosource/components/dataset-detail/dataset-table-map/dataset-table-map.component.scss @@ -11,12 +11,32 @@ background-color: $grey-background-color; padding: 0.75rem 0.875rem 0.75rem 0.875rem; + @media screen and (max-width: $desktop) { + flex-wrap: wrap-reverse; + + .left-section, + .right-section { + flex-grow: 1; + width: 100%; + align-items: center; + } + + .right-section { + display: flex; + margin-bottom: 0.5rem; + } + } + .button { height: 2.25rem; } .left-section { display: flex; + + @media screen and (max-width: $tablet) { + flex-wrap: wrap; + } } .properties-dropdown button { @@ -33,15 +53,30 @@ .right-section .button { margin-left: 1rem; + + @media screen and (max-width: $desktop) { + &.button-toogle-table-map { + flex-grow: 1; + justify-content: center; + } + + &:first-of-type { + margin-left: 0; + } + } } .left-section .button { margin-right: 1rem; } - .button-research button { + .button-research .button { background-color: $blue-color; + @media screen and (max-width: $tablet) { + margin-right: 0; + } + .icon, i { color: white; @@ -49,8 +84,21 @@ } .search-bar { + @media screen and (max-width: $desktop) { + flex-grow: 1; + + .research-input { + width: 100%; + display: flex; + } + + .input { + flex-grow: 1; + } + } + .field { - height: 100%; + height: 2.25rem; .reset-research-icon { cursor: pointer; @@ -64,11 +112,14 @@ .button, .input, .reset-research-icon { - height: 100%; + height: 2.25rem; } .input { - width: 18.75rem; + @media screen and (min-width: $desktop) { + width: 18.75rem; + } + box-shadow: none; } } @@ -79,6 +130,11 @@ position: relative; align-self: center; padding-bottom: 0.2rem; + + @media screen and (max-width: $tablet) { + width: 100%; + margin-top: 0.5rem; + } } .result-number-bar {