Merge pull request #4230 from camptocamp/gmf_wrap_icon_img_in_div

fixes distored images in IE11 by wrapping img in div
camptocamp · Sep 24, 2018 · 3227013 · 3227013
2 parents 866a9eb + ceec206
commit 3227013
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 4 deletions.
diff --git a/contribs/gmf/apps/mobile/index.html.ejs b/contribs/gmf/apps/mobile/index.html.ejs
@@ -84,6 +84,7 @@
     <nav class="gmf-mobile-nav-left" gmf-mobile-nav>
       <header>
         <a class="gmf-mobile-nav-go-back" href>{{'Back' | translate}}</a>
+        <span class="gmf-mobile-nav-header-title">{{'Data' | translate}}</span
       </header>
       <!-- main menu -->
       <div class="gmf-mobile-nav-active gmf-mobile-nav-slide">
@@ -119,6 +120,7 @@
     <nav class="gmf-mobile-nav-right" gmf-mobile-nav>
       <header>
         <a class="gmf-mobile-nav-go-back" href>{{'Back' | translate}}</a>
+        <span class="gmf-mobile-nav-header-title">{{'Tools' | translate}}</span
       </header>
       <!-- main menu -->
       <div class="gmf-mobile-nav-active gmf-mobile-nav-slide">

diff --git a/contribs/gmf/apps/mobile_alt/index.html.ejs b/contribs/gmf/apps/mobile_alt/index.html.ejs
@@ -91,6 +91,7 @@
     <nav class="gmf-mobile-nav-left" gmf-mobile-nav>
       <header>
         <a class="gmf-mobile-nav-go-back" href>{{'Back' | translate}}</a>
+        <span class="gmf-mobile-nav-header-title">{{'Data' | translate}}</span
       </header>
       <!-- main menu -->
       <div class="gmf-mobile-nav-active gmf-mobile-nav-slide">
@@ -127,6 +128,7 @@
     <nav class="gmf-mobile-nav-right" gmf-mobile-nav>
       <header>
         <a class="gmf-mobile-nav-go-back" href>{{'Back' | translate}}</a>
+        <span class="gmf-mobile-nav-header-title">{{'Tools' | translate}}</span
       </header>
       <!-- main menu -->
       <div class="gmf-mobile-nav-active gmf-mobile-nav-slide">

diff --git a/contribs/gmf/src/controllers/mobile-nav.scss b/contribs/gmf/src/controllers/mobile-nav.scss
@@ -109,6 +109,13 @@ nav.gmf-mobile-nav-right {
     line-height: $nav-bar-height;
     background-color: $nav-header-bg;
 
+    .gmf-mobile-nav-header-title {
+      font-weight: bold;
+      color: white;
+      padding-left: 1em;
+      text-shadow: 0 0 1px black;
+    }
+
     .gmf-mobile-nav-go-back {
       position: absolute;
       left: 0;

diff --git a/contribs/gmf/src/layertree/component.html b/contribs/gmf/src/layertree/component.html
@@ -33,10 +33,12 @@
     ng-if="::!layertreeCtrl.node.children && gmfLayertreeCtrl.getLegendIconURL(layertreeCtrl)"
     class="gmf-layertree-layer-icon"
   >
-    <img
-      ng-if="::(legendIconUrl=gmfLayertreeCtrl.getLegendIconURL(layertreeCtrl))"
-      ng-src="{{::legendIconUrl}}">
-    </img>
+    <div><!--This div is required for flex issues with IE11-->
+      <img
+        ng-if="::(legendIconUrl=gmfLayertreeCtrl.getLegendIconURL(layertreeCtrl))"
+        ng-src="{{::legendIconUrl}}">
+      </img>
+    </div>
   </a>
   <a
     href