Merge pull request #5286 from camptocamp/GSGMF-1145

Clean mapswiper CSS
camptocamp · Nov 8, 2019 · 9534a0a · 9534a0a
2 parents f699089 + 527ec88
commit 9534a0a
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 22 deletions.
diff --git a/contribs/gmf/src/controllers/desktop.scss b/contribs/gmf/src/controllers/desktop.scss
@@ -146,7 +146,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;
+      bottom: $footer-height - 0.06rem;
       border-top-left-radius: $border-radius-base;
       border-top-right-radius: $border-radius-base;
       border-bottom-left-radius: 0;
@@ -289,10 +289,12 @@ gmf-search {
     padding: 0.8rem 0.25rem;
     position: relative;
     top: calc(50% - #{$icon-font-size});
+    cursor: pointer;
   }
 
   .ui-resizable-e {
     background-color: darken($brand-secondary, $standard-variation);
+    cursor: ew-resize;
     border: {
       left: $border;
       right: $border;

diff --git a/contribs/gmf/src/sass/swipe.scss b/contribs/gmf/src/sass/swipe.scss
@@ -6,16 +6,16 @@ ngeo-mapswipe {
   .ngeo-swipe-line-draggable {
     position: absolute;
     left: calc(50% - 16px);
-    width: 32px;
+    width: 33px;
     height: 100%;
     z-index: 1;
-    cursor: pointer;
+    cursor: ew-resize;
 
     .ngeo-swipe-line {
       position: absolute;
       left: 50%;
-      width: 6px;
-      margin-left: -2px;
+      width: 7px;
+      margin-left: -3.5px;
       height: 100%;
       background-color: darken($brand-secondary, $standard-variation);
       border: {
@@ -24,25 +24,12 @@ ngeo-mapswipe {
       }
     }
 
-    .ngeo-swipe-close::before {
-      color: #fff;
-      content: "\00d7";
-      display: inline-block;
-      font-size: 20px;
-      font-weight: bold;
-      line-height: normal;
-      text-align: center;
-    }
-
     .ngeo-swipe-close {
       position: absolute;
-      width: 100%;
-      height: 1.5rem;
-      right: 50%;
-      background-color: $brand-primary;
-      color: #fff;
-      border: $border;
+      height: 20px;
+      width: 20px;
       z-index: $above-content-index;
+      padding: 0;
     }
 
     .ngeo-swipe-arrow {

diff --git a/src/map/swipe.html b/src/map/swipe.html
@@ -1,5 +1,7 @@
 <div class="ngeo-swipe-line-draggable">
-  <button class="ngeo-swipe-close" ng-click="$ctrl.deactivate()"></button>
+  <button class="ngeo-swipe-close btn prime btn-sm" ng-click="$ctrl.deactivate()">
+    <i class="fas fa-times"></i>
+  </button>
   <div class="ngeo-swipe-line"></div>
   <div class="ngeo-swipe-arrow"><%=require('ngeo/icons/swipe.svg?viewbox&height=1em')%></div>
 </div>