diff --git a/contribs/gmf/apps/desktop/index.html.ejs b/contribs/gmf/apps/desktop/index.html.ejs index e68f1284f46e..15788366b4a7 100644 --- a/contribs/gmf/apps/desktop/index.html.ejs +++ b/contribs/gmf/apps/desktop/index.html.ejs @@ -20,7 +20,7 @@
- diff --git a/contribs/gmf/apps/desktop_alt/index.html.ejs b/contribs/gmf/apps/desktop_alt/index.html.ejs index f299b35f6723..a4484c397033 100644 --- a/contribs/gmf/apps/desktop_alt/index.html.ejs +++ b/contribs/gmf/apps/desktop_alt/index.html.ejs @@ -20,7 +20,7 @@
- + Loading... diff --git a/contribs/gmf/apps/oeedit/index.html.ejs b/contribs/gmf/apps/oeedit/index.html.ejs index 3fbbfdd00c59..65458e102227 100644 --- a/contribs/gmf/apps/oeedit/index.html.ejs +++ b/contribs/gmf/apps/oeedit/index.html.ejs @@ -19,7 +19,7 @@
- diff --git a/contribs/gmf/apps/oeview/index.html.ejs b/contribs/gmf/apps/oeview/index.html.ejs index 8adef20ec3e8..365367c9a45d 100644 --- a/contribs/gmf/apps/oeview/index.html.ejs +++ b/contribs/gmf/apps/oeview/index.html.ejs @@ -19,7 +19,7 @@
- diff --git a/contribs/gmf/src/authentication/component.html b/contribs/gmf/src/authentication/component.html index a213b578630c..55f4493b238b 100644 --- a/contribs/gmf/src/authentication/component.html +++ b/contribs/gmf/src/authentication/component.html @@ -14,7 +14,7 @@
@@ -61,7 +61,7 @@
@@ -132,7 +132,7 @@

diff --git a/contribs/gmf/src/controllers/desktop.scss b/contribs/gmf/src/controllers/desktop.scss index 105253b37c62..46fd0ccd882e 100644 --- a/contribs/gmf/src/controllers/desktop.scss +++ b/contribs/gmf/src/controllers/desktop.scss @@ -2,19 +2,19 @@ * Entry point for all styles required for the desktop application. */ -$map-tools-size: 1.88rem !default; -$button-size: 2.50rem !default; +$map-tools-size: 1.9rem !default; +$button-size: 2.5rem !default; $left-panel-width: 20rem !default; -$right-panel-width: 17.50rem !default; -$topbar-height: 2.81rem !default; +$right-panel-width: 17.5rem !default; +$topbar-height: 2.8rem !default; $search-width: 8 * $map-tools-size !default; $padding-base-vertical: 0.31rem !default; $padding-base-horizontal: 0.62rem !default; $form-group-margin-bottom: 0.62rem !default; -$search-results-max-height: calc(100vh - $topbar-height + $map-tools-size + (2 * $app-margin)) !default; @import '~gmf/sass/vars_only.scss'; +$search-results-max-height: calc(100vh - #{$topbar-height} + #{$map-tools-size} + (2 * #{$app-margin})) !default; $border-color: darken($brand-primary, $standard-variation) !default; @import "~bootstrap/scss/_functions.scss"; @@ -42,7 +42,6 @@ html, body { body { padding-top: $topbar-height; - font-size: 0.8rem; } header { @@ -70,6 +69,16 @@ main { overflow: hidden; } +.dropdown-menu > li > a { + color: $color; + padding: $input-btn-padding-y $input-btn-padding-x; + display: block; + &:hover { + text-decoration: none; + background-color: $onhover-color; + } +} + $footer-height: $input-height-base + 2 * $padding-base-vertical; .gmf-app-map-container { @@ -115,7 +124,7 @@ $footer-height: $input-height-base + 2 * $padding-base-vertical; button.gmf-app-map-info { position: absolute; /* button is supposed to be .btn-sm */ - bottom: $footer-height - 1; + bottom: $footer-height; border-top-left-radius: $border-radius-base; border-top-right-radius: $border-radius-base; border-bottom-left-radius: 0; @@ -246,7 +255,7 @@ gmf-backgroundlayerselector { $theme-selector-columns: 2; .gmf-theme-selector li { float: left; - width: calc((100% - $theme-selector-columns * 2 * $half-app-margin) / $theme-selector-columns); + width: calc((100% - #{$theme-selector-columns} * 2 * #{$half-app-margin}) / #{$theme-selector-columns}); } .gmf-backgroundlayerselector { margin-bottom: 0; @@ -539,13 +548,18 @@ gmf-featurestyle { left: $app-margin; button { + background-color: $map-tools-bg-color; padding: $padding-small-vertical; + &::after { + display: none !important; + } } button, gmf-backgroundlayerselector { box-shadow: 0 0.37rem 0.75rem rgba(0, 0, 0, 0.175); } + } .gmf-displayquerywindow { @@ -565,7 +579,7 @@ $bgselector-image-size: 3.00rem; .gmf-app-map-messages { position: absolute; vertical-align: bottom; - left: calc(2 * $app-margin + $bgselector-image-size + 2 * $padding-small-vertical); + left: calc(2 * #{$app-margin} + #{$bgselector-image-size} + 2 * #{$padding-small-vertical}); } diff --git a/contribs/gmf/src/controllers/mobile-nav.scss b/contribs/gmf/src/controllers/mobile-nav.scss index 6606c0aa38d9..2d450ca86c72 100644 --- a/contribs/gmf/src/controllers/mobile-nav.scss +++ b/contribs/gmf/src/controllers/mobile-nav.scss @@ -204,7 +204,7 @@ nav.gmf-mobile-nav-right { .gmf-mobile-nav-slide { position: fixed; - height: calc(100% - $nav-bar-height); + height: calc(100% - #{$nav-bar-height}); width: $nav-width; transform: translateX(100%); transition: transform $duration, opacity $duration; diff --git a/contribs/gmf/src/editing/editFeatureComponent.html b/contribs/gmf/src/editing/editFeatureComponent.html index aa8bf44310f6..36d0a6e7fe5b 100644 --- a/contribs/gmf/src/editing/editFeatureComponent.html +++ b/contribs/gmf/src/editing/editFeatureComponent.html @@ -112,7 +112,7 @@

diff --git a/contribs/gmf/src/filters/filterselectorcomponent.html b/contribs/gmf/src/filters/filterselectorcomponent.html index 927158056dd4..d4d5ca3a47d0 100644 --- a/contribs/gmf/src/filters/filterselectorcomponent.html +++ b/contribs/gmf/src/filters/filterselectorcomponent.html @@ -97,7 +97,7 @@

{{'Save filter' | translate}}

type="button" ng-click="$ctrl.saveFilterSave()" ng-disabled="$ctrl.saveFilterName === ''" - class="btn btn-primary">{{'Save' | translate}} + class="btn prime">{{'Save' | translate}}
diff --git a/contribs/gmf/src/layertree/timeslider.scss b/contribs/gmf/src/layertree/timeslider.scss index a75c725c3603..88caa3754dd5 100644 --- a/contribs/gmf/src/layertree/timeslider.scss +++ b/contribs/gmf/src/layertree/timeslider.scss @@ -4,7 +4,7 @@ .gmf-time-slider { // 1.75rem come from bootstrap popover class .popover-content { padding: 0.56rem 0.87rem; } - min-width: calc($popover-max-width - 1.75rem); + min-width: calc(#{$popover-max-width} - 1.75rem); .ui-widget-content { border: none; diff --git a/contribs/gmf/src/lidarprofile/lidarprofile.scss b/contribs/gmf/src/lidarprofile/lidarprofile.scss index b5047f445abb..3b0c964e80de 100644 --- a/contribs/gmf/src/lidarprofile/lidarprofile.scss +++ b/contribs/gmf/src/lidarprofile/lidarprofile.scss @@ -11,7 +11,7 @@ $profile-legend-width: 9.38rem; display: flex; .lidarprofile { - width: calc(100% - $profile-legend-width); + width: calc(100% - #{$profile-legend-width}); background-color: #f5f5f5; } @@ -32,8 +32,8 @@ $profile-legend-width: 9.38rem; margin: $app-margin; padding-left: 6.25rem; padding-top: 6.25rem; - width: calc(100% - 3.12rem - $profile-legend-width); - height: calc($lidarprofile-height - 3.12rem); + width: calc(100% - 3.12rem - #{$profile-legend-width}); + height: calc(#{$lidarprofile-height} - 3.12rem); font-size: 1.5em; opacity: 1; background: #e1f1f7; @@ -51,7 +51,7 @@ $profile-legend-width: 9.38rem; } .gmf-lidarprofile-chart-active main { - height: calc(100% - $lidarprofile-height); + height: calc(100% - #{$lidarprofile-height}); } .gmf-tooltip-measure { diff --git a/contribs/gmf/src/permalink/shareComponent.html b/contribs/gmf/src/permalink/shareComponent.html index 4da00b0151d3..1972d7372005 100644 --- a/contribs/gmf/src/permalink/shareComponent.html +++ b/contribs/gmf/src/permalink/shareComponent.html @@ -43,7 +43,7 @@

Share this map

diff --git a/contribs/gmf/src/profile/profile.scss b/contribs/gmf/src/profile/profile.scss index 93b1b8c3541d..9848e8a5b867 100644 --- a/contribs/gmf/src/profile/profile.scss +++ b/contribs/gmf/src/profile/profile.scss @@ -11,7 +11,7 @@ $profile-height: 12.50rem; display: flex; .ngeo-profile { - width: calc(100% - $profile-legend-width); + width: calc(100% - #{$profile-legend-width}); background-color: #f5f5f5; } @@ -37,5 +37,5 @@ $profile-height: 12.50rem; } .gmf-profile-chart-active main { - height: calc(100% - $profile-height); + height: calc(100% - #{$profile-height}); } diff --git a/contribs/gmf/src/query/grid.scss b/contribs/gmf/src/query/grid.scss index ab378c288f82..8e698e3db8cc 100644 --- a/contribs/gmf/src/query/grid.scss +++ b/contribs/gmf/src/query/grid.scss @@ -84,5 +84,5 @@ $table-height: $grid-height - $app-margin - 2 * $map-tools-size; } .gmf-query-grid-active main { - height: calc(100% - $grid-height); + height: calc(100% - #{$grid-height}); } diff --git a/contribs/gmf/src/query/window.scss b/contribs/gmf/src/query/window.scss index eba419e34f3e..3782abb5bdbc 100644 --- a/contribs/gmf/src/query/window.scss +++ b/contribs/gmf/src/query/window.scss @@ -203,7 +203,7 @@ div.ngeo-displaywindow { font-size: 1.31rem; } .slide-animation { - height: calc(100% - ($map-tools-size + $app-margin)); + height: calc(100% - (#{$map-tools-size} + #{$app-margin})); } .animation-container { @@ -226,12 +226,12 @@ div.ngeo-displaywindow { /** prevent glitch for swipe animation **/ .details table { .details-key { - min-width: calc(30vw - 2 * $app-margin); - max-width: calc(30vw - 2 * $app-margin); + min-width: calc(30vw - 2 * #{$app-margin}); + max-width: calc(30vw - 2 * #{$app-margin}); } .details-value { - min-width: calc(70vw - 2 * $app-margin); - max-width: calc(70vw - 2 * $app-margin); + min-width: calc(70vw - 2 * #{$app-margin}); + max-width: calc(70vw - 2 * #{$app-margin}); } } } diff --git a/contribs/gmf/src/sass/base.scss b/contribs/gmf/src/sass/base.scss index 765c87ce3129..7084a3038798 100644 --- a/contribs/gmf/src/sass/base.scss +++ b/contribs/gmf/src/sass/base.scss @@ -27,6 +27,22 @@ a { display: none !important; } +.pull-right { + float: right; +} + +.btn.prime { + background-color: $brand-primary; + border-color: darken($brand-primary, 10%); + color: white; +} + +.btn.btn-default { + background-color: $map-tools-bg-color; + border-color: darken($map-tools-bg-color, 20%); + color: $map-tools-color; +} + /** * The blur filter is used to avoid the loading icon to shake on firefox. * See: https://github.com/FortAwesome/Font-Awesome/issues/671 @@ -65,9 +81,11 @@ i, cite, em, var, address, dfn { .modal-content { border-radius: 0; } + .modal-body, .modal-header { padding: 0.62rem; } + .modal-title { font-weight: bold; font-size: inherit; diff --git a/contribs/gmf/src/sass/fullscreenpopup.scss b/contribs/gmf/src/sass/fullscreenpopup.scss index 091cac4981dc..2c0ac8c7baea 100644 --- a/contribs/gmf/src/sass/fullscreenpopup.scss +++ b/contribs/gmf/src/sass/fullscreenpopup.scss @@ -6,10 +6,10 @@ top: 0; left: auto; right: auto; - max-width: calc(100vw - 2 * $app-margin); - width: calc(100vw - 2 * $app-margin); - height: calc(100vh - 2 * $app-margin); - max-height: calc(100vh - 2 * $app-margin); + max-width: calc(100vw - 2 * #{$app-margin}); + width: calc(100vw - 2 * #{$app-margin}); + height: calc(100vh - 2 * #{$app-margin}); + max-height: calc(100vh - 2 * #{$app-margin}); margin: $app-margin; /* Like bootstrap modal border-radius */ border-radius: 0.37rem; @@ -41,14 +41,14 @@ position: fixed; top: $fullscreenpopup-tablet-top; left: $nav-width; - max-width: calc(100vw - (2 * $nav-width + 2 * $app-margin)); + max-width: calc(100vw - (2 * #{$nav-width} + 2 * #{$app-margin})); width: $fullscreenpopup-tablet-width; - max-height: calc(100vh - ($fullscreenpopup-tablet-top + $app-margin)); + max-height: calc(100vh - (#{$fullscreenpopup-tablet-top} + #{$app-margin})); height: $fullscreenpopup-tablet-width + $map-tools-size; } .popover-content { overflow: auto; - height: calc(100% - 4 * $app-margin); + height: calc(100% - 4 * #{$app-margin}); } } } diff --git a/contribs/gmf/src/sass/map.scss b/contribs/gmf/src/sass/map.scss index ea02134d4893..bbd633077da8 100644 --- a/contribs/gmf/src/sass/map.scss +++ b/contribs/gmf/src/sass/map.scss @@ -148,6 +148,7 @@ button[ngeo-mobile-geolocation] { .alert-dismissable .close, .alert-dismissible .close { right: -0.31rem; + padding: $half-app-margin $app-margin; height: inherit; } } diff --git a/contribs/gmf/src/sass/popover.scss b/contribs/gmf/src/sass/popover.scss index d88a409cfd26..2969c93caf56 100644 --- a/contribs/gmf/src/sass/popover.scss +++ b/contribs/gmf/src/sass/popover.scss @@ -28,7 +28,7 @@ $popover-text-color : $color-light; i { margin-right: $half-app-margin; - max-width: calc($popover-icon-max-width - $half-app-margin); + max-width: calc(#{$popover-icon-max-width} - #{$half-app-margin}); } span { @@ -42,7 +42,7 @@ $popover-text-color : $color-light; input { margin-left: $half-app-margin; display: inline-block; - max-width: calc($popover-action-max-width - $half-app-margin); + max-width: calc(#{$popover-action-max-width} - #{$half-app-margin}); /* fix issue with IE11 not sizing correctly the popover box */ padding: 0; } diff --git a/contribs/gmf/src/sass/vars_only.scss b/contribs/gmf/src/sass/vars_only.scss index 39b5e7c79966..ea630d8db2f4 100644 --- a/contribs/gmf/src/sass/vars_only.scss +++ b/contribs/gmf/src/sass/vars_only.scss @@ -1,9 +1,8 @@ +$fa-font-path: "~@fortawesome/fontawesome-free/webfonts" !default; + $brand-primary: #94ac9a !default; $brand-secondary: #d3e5d7 !default; -$primary: $brand-primary; -$secondary: $brand-secondary; $font-size-small: 0.9em !default; - $app-margin: 0.62rem !default; $half-app-margin: 0.31rem !default; $micro-app-margin: 0.12rem !default; @@ -12,14 +11,16 @@ $nav-bg: white !default; $color: #555 !default; $color-light: lighten($color, $standard-variation); $nav-header-bg: darken($nav-bg, 50%) !default; -$link-color: hsl(hue($brand-primary), 40%, 60%) !default; +$link-color: hsl(hue($brand-primary), 25%, 50%) !default; $map-tools-size: 2rem !default; $map-tools-bg-color: white !default; $map-tools-color: black !default; $onhover-color: darken($nav-bg, $standard-variation) !default; $main-bg-color: #e2e3df !default; // grey light $search-width: 6 * $map-tools-size !default; - +$border-radius-base: 0 !default; +$nav-width: 20rem !default; +$input-border-focus: darken($brand-primary, $standard-variation) !default; // Z-indexes $below-content-index: 1; @@ -31,20 +32,21 @@ $above-search-index: 6; $zindex-navbar-fixed: 7; $above-all: 9999; - -$nav-width: 20rem !default; - -$border-radius-base: 2px !default; -$border-radius-small: 1px !default; -$input-border-focus: darken($brand-primary, $standard-variation) !default; - -$fa-font-path: "~@fortawesome/fontawesome-free/webfonts" !default; - // Bootstrap 3 compatibility layer $gray-base: #000 !default; $gray-dark: lighten($gray-base, 20%) !default; // #333 $padding-small-vertical: 0.36rem !default; $padding-small-horizontal: 0.72rem !default; -$input-height-base: 1.5rem !default; +$input-height-base: 1.88rem !default; $btn-default-border: #ccc !default; $text-color: $gray-dark !default; + +// Bootstrap 4 customization +$border-radius: $border-radius-base !default; +$border-radius-lg: $border-radius-base !default; +$border-radius-sm: $border-radius-base !default; +$font-size-base: 0.8rem !default; +$input-btn-padding-y: 0.25rem !default; +$input-btn-padding-x: 0.5rem !default; +$primary: $brand-primary !default; +$secondary: $brand-secondary !default; diff --git a/contribs/gmf/src/search/search.scss b/contribs/gmf/src/search/search.scss index 81e0ef09f38b..5fab5f1ff0e7 100644 --- a/contribs/gmf/src/search/search.scss +++ b/contribs/gmf/src/search/search.scss @@ -1,7 +1,7 @@ @import '~gmf/sass/vars.scss'; @import "~gmf/sass/typeahead.scss"; -$search-results-max-height: calc(100vh - 6 * $app-margin); +$search-results-max-height: calc(100vh - 6 * #{$app-margin}); gmf-search { top: $app-margin; @@ -27,7 +27,6 @@ gmf-search { } .gmf-clear-button { position: absolute; - top: $half-app-margin; right: $app-margin; height: $map-tools-size; opacity: 0.5; @@ -128,7 +127,7 @@ gmf-search { font-family: FontAwesome; color: $color; position: absolute; - font-size: 1.25rem; + font-size: 0.9rem; top: $half-app-margin; left: $app-margin; } diff --git a/contribs/gmf/src/theme/selectorComponent.js b/contribs/gmf/src/theme/selectorComponent.js index 0531dd0fb68f..5d428a0c8717 100644 --- a/contribs/gmf/src/theme/selectorComponent.js +++ b/contribs/gmf/src/theme/selectorComponent.js @@ -52,7 +52,7 @@ function gmfThemeSelectorTemplateUrl($attrs, gmfThemeSelectorTemplateUrl) { * * Example: * - * + * * * * Theme: @@ -75,7 +75,7 @@ function gmfThemeSelectorTemplateUrl($attrs, gmfThemeSelectorTemplateUrl) { * * Example in 'add' mode: * - * + * * * Themes * diff --git a/src/message/Disclaimer.js b/src/message/Disclaimer.js index 6ff44542bd33..f51c3b0369c1 100644 --- a/src/message/Disclaimer.js +++ b/src/message/Disclaimer.js @@ -132,7 +132,7 @@ exports.prototype.showMessage = function(message) { } else { // display the message using a boostrap dismissible alert - const classNames = ['alert', 'fade', 'alert-dismissible']; + const classNames = ['alert', 'fade', 'alert-dismissible', 'show']; switch (type) { case ngeoMessageMessage.Type.ERROR: classNames.push('alert-danger'); diff --git a/src/message/Notification.js b/src/message/Notification.js index 1e8fd8bd9c0d..67004a150b70 100644 --- a/src/message/Notification.js +++ b/src/message/Notification.js @@ -92,7 +92,7 @@ exports.prototype.showMessage = function(message) { const type = message.type; googAsserts.assertString(type, 'Type should be set.'); - const classNames = ['alert', 'fade']; + const classNames = ['alert', 'fade', 'show']; switch (type) { case ngeoMessageMessage.Type.ERROR: classNames.push('alert-danger'); diff --git a/src/routing/routing.html b/src/routing/routing.html index 0ce84175ce7f..dc3e7e58c2a8 100644 --- a/src/routing/routing.html +++ b/src/routing/routing.html @@ -20,7 +20,7 @@ ngeo-routing-feature-on-change="$ctrl.handleChange">
-
@@ -37,13 +37,13 @@
- - -