Merge pull request #5297 from camptocamp/fix-theme-selector-width

Fix theme selector on desktop alt
camptocamp · Nov 14, 2019 · 2db7e7a · 2db7e7a
2 parents 6ea9afb + 61f3ac5
commit 2db7e7a
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 20 deletions.
diff --git a/contribs/gmf/apps/desktop_alt/sass/desktop_alt.scss b/contribs/gmf/apps/desktop_alt/sass/desktop_alt.scss
@@ -1,6 +1,12 @@
 
 .gmf-theme-selector li {
   flex-direction: column;
+  span.gmf-text {
+    width: auto;
+  }
+}
+.gmf-theme-selector .gmf-thumb {
+  height: 3rem;
 }
 
 .gmf-layertree-node .gmf-layertree-legend {

diff --git a/contribs/gmf/apps/desktop_alt/sass/vars_desktop_alt.scss b/contribs/gmf/apps/desktop_alt/sass/vars_desktop_alt.scss
@@ -2,3 +2,4 @@ $brand-primary: #9FB6CC;
 $brand-secondary: #D3DBE3;
 
 $theme-selector-columns: 3;
+$theme-selector-column-width: 8rem;
diff --git a/contribs/gmf/src/controllers/desktop.scss b/contribs/gmf/src/controllers/desktop.scss
@@ -2,21 +2,7 @@
  * Entry point for all styles required for the desktop application.
  */
 
-$map-tools-size: 1.9rem !default;
-$left-panel-width: 20rem !default;
-$right-panel-width: 17.5rem !default;
-$streeview-width: 25rem !default;
-$topbar-height: 2.8rem !default;
-$search-width: 8 * $map-tools-size !default;
-
 @import '~gmf/sass/vars_only.scss';
-
-$padding-base-vertical: $half-app-margin !default;
-$padding-base-horizontal: $app-margin !default;
-$form-group-margin-bottom: $app-margin !default;
-$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";
 @import "~bootstrap/scss/_variables.scss";
 @import "~@fortawesome/fontawesome-free/scss/_variables.scss";
@@ -33,6 +19,23 @@ $border-color: darken($brand-primary, $standard-variation) !default;
 @import '~gmf/layertree/desktop.scss';
 
 
+$map-tools-size: 1.9rem !default;
+$left-panel-width: 20rem !default;
+$right-panel-width: 17.5rem !default;
+$streeview-width: 25rem !default;
+$topbar-height: 2.8rem !default;
+$search-width: 8 * $map-tools-size !default;
+$theme-selector-columns: 2 !default;
+$theme-selector-column-width: $left-panel-width / 4 * 3 !default;
+$theme-selector-height: 1.5 * $left-panel-width !default;
+
+$padding-base-vertical: $half-app-margin !default;
+$padding-base-horizontal: $app-margin !default;
+$form-group-margin-bottom: $app-margin !default;
+$search-results-max-height: calc(100vh - #{$topbar-height} + #{$map-tools-size} + (2 * #{$app-margin})) !default;
+$border-color: darken($brand-primary, $standard-variation) !default;
+
+
 html, body {
   position: relative;
   height: 100%;
@@ -290,8 +293,8 @@ gmf-search {
 }
 
 gmf-themeselector {
-  width: 1.5 * $left-panel-width;
-  max-height: 1.5 * $left-panel-width;
+  width: $half-app-margin * 2 + $theme-selector-columns * $theme-selector-column-width;
+  max-height: $theme-selector-height;
   overflow: hidden;
   overflow-y: auto;
 }
@@ -300,10 +303,9 @@ gmf-backgroundlayerselector {
 }
 gmf-themeselector,
 gmf-backgroundlayerselector {
-  padding: $half-app-margin !important;
+  padding: $half-app-margin;
 }
 
-$theme-selector-columns: 2;
 .gmf-theme-selector li {
   float: left;
   width: calc((100% - #{$theme-selector-columns} * 2 * #{$half-app-margin}) / #{$theme-selector-columns});

diff --git a/contribs/gmf/src/sass/vars_only.scss b/contribs/gmf/src/sass/vars_only.scss
@@ -23,9 +23,9 @@ $nav-width: 20rem !default;
 $input-border-focus: darken($brand-primary, $standard-variation) !default;
 $light-box-shadow: 0 0.37rem 0.75rem rgba(0, 0, 0, 0.1) !default;
 $eavy-box-shadow: 0 0.37rem 0.75rem rgba(0, 0, 0, 0.3) !default;
-$icon-font-size: 1.25rem;
+$icon-font-size: 1.25rem !default;
 
-$displayquerywindow-desktop-height: 15rem;
+$displayquerywindow-desktop-height: 15rem !default;
 
 // Z-indexes
 $below-content-index: 1;