Debug css on displayWindowComponent

camptocamp · Mar 8, 2018 · 8877fd5 · 8877fd5
1 parent af6937d
commit 8877fd5
Show file tree

Hide file tree

Showing 6 changed files with 42 additions and 17 deletions.
diff --git a/contribs/gmf/apps/desktop_alt/less/main.less b/contribs/gmf/apps/desktop_alt/less/main.less
@@ -14,3 +14,10 @@
 }
 
 @theme-selector-columns: 3;
+
+div .ngeo-displaywindow {
+  @displaywindow-min-height: 24rem;
+  left: @app-margin + @left-panel-width + @displaywindow-min-height / 2;
+  right: initial;
+  top: @topbar-height + @app-margin + 3 * @map-tools-size;
+}
diff --git a/contribs/gmf/less/displayquerywindow.less b/contribs/gmf/less/displayquerywindow.less
@@ -4,13 +4,31 @@
 @displayquerywindow-detailed-header-height: 5rem;
 @displayquerywindow-detailed-details-line-height: 2rem;
 @displayquerywindow-detailed-details-height: 8 * @displayquerywindow-detailed-details-line-height;
+
+.gmf-displayquerywindow {
+  .details {
+    display: none;
+  }
+  .animation-container {
+    // height with 2em: 1em per text (title, subtitle)
+    height: calc(4 * @app-margin + @half-app-margin + @map-tools-size ~"+ 2em");
+  }
+}
+
+.ngeo-displaywindow {
+  .animation-container {
+    height: 100%;
+    width: 100%;
+  }
+}
+
 .gmf-displayquerywindow, .ngeo-displaywindow {
-  width: @displayquerywindow-tablet-width;
-  max-width: @displayquerywindow-tablet-width;
-  margin-left: -@displayquerywindow-tablet-width / 2;
   right: @app-margin + @map-tools-size + @app-margin;
   left: initial;
   bottom: @app-margin;
+  width: @displayquerywindow-tablet-width;
+  max-width: @displayquerywindow-tablet-width;
+  margin-left: -@displayquerywindow-tablet-width / 2;
   max-height: 10 * @map-tools-size;
   position: fixed;
   z-index: @above-menus-index;
@@ -29,17 +47,16 @@
   .collapse-button-down::after {
     content: @fa-var-chevron-down;
   }
-  .gmf-displayquerywindow-container {
+  .windowcontainer {
     background-color: @nav-bg;
     border: solid 1px @border-color;
     position: relative;
+    height: 100%;
     width: 100%;
   }
   .animation-container {
     position: relative;
     overflow: hidden;
-    // height with 2em: 1em per text (title, subtitle)
-    height: calc(4 * @app-margin + @half-app-margin + @map-tools-size ~"+ 2em");
     margin: 0;
     transition: 0.3s ease-in all;
     .slide-animation {
@@ -98,7 +115,6 @@
     font-weight: bold;
   }
   .details {
-    display: none;
     flex: 1;
     line-height: @displayquerywindow-detailed-details-line-height;
     overflow-x: hidden;
@@ -178,8 +194,8 @@
     }
   }
   &.desktop {
-    .gmf-displayquerywindow-container {
-      height: 24rem
+    .windowcontainer {
+      height: 24rem;
     }
   }
 }

diff --git a/contribs/gmf/src/query/windowComponent.html b/contribs/gmf/src/query/windowComponent.html
@@ -17,7 +17,7 @@
     ng-class="[ctrl.collapsed ? 'collapse-button-up' : 'collapse-button-down']">
   </button>
 
-  <div class="gmf-displayquerywindow-container">
+  <div class="windowcontainer">
 
     <button
       type="button"

diff --git a/contribs/gmf/src/query/windowComponent.js b/contribs/gmf/src/query/windowComponent.js
@@ -308,11 +308,11 @@ gmf.query.windowComponent.Controller_.prototype.$onInit = function() {
   highlightFeaturesOverlay.setStyle(highlightFeatureStyle);
 
   if (this.desktop) {
-    this.element_.find('.gmf-displayquerywindow .gmf-displayquerywindow-container').draggable({
+    this.element_.find('.gmf-displayquerywindow .windowcontainer').draggable({
       'cancel': 'input,textarea,button,select,option,tr',
       'containment': this.draggableContainment
     });
-    this.element_.find('.gmf-displayquerywindow .gmf-displayquerywindow-container').resizable({
+    this.element_.find('.gmf-displayquerywindow .windowcontainer').resizable({
       'minHeight': 240,
       'minWidth': 240
     });

diff --git a/src/message/displaywindowComponent.html b/src/message/displaywindowComponent.html
@@ -4,7 +4,7 @@
   ng-style="$ctrl.style"
 >
 
-  <div class="gmf-displayquerywindow-container">
+  <div class="windowcontainer">
 
     <button
       type="button"
@@ -29,6 +29,8 @@
           <iframe
             frameborder="0"
             type="text/html"
+            height="100%"
+            width="100%"
             ng-src="{{ $ctrl.urlTrusted }}"></iframe>
         </div>
       </div>

diff --git a/src/message/displaywindowComponent.js b/src/message/displaywindowComponent.js
@@ -178,14 +178,14 @@ ngeo.message.displaywindowComponent.Controller_ = class {
 
     // Draggable
     if (this.draggable) {
-      this.element_.find('.ngeo-displaywindow .container').draggable({
+      this.element_.find('.ngeo-displaywindow .windowcontainer').draggable({
         'containment': this.draggableContainment
       });
     }
 
     // Resizable
     if (this.resizable) {
-      this.element_.find('.ngeo-displaywindow .container').resizable({
+      this.element_.find('.ngeo-displaywindow .windowcontainer').resizable({
         'minHeight': 240,
         'minWidth': 240
       });
@@ -208,8 +208,8 @@ ngeo.message.displaywindowComponent.Controller_ = class {
    */
   get style() {
     return {
-      'height': this.height || undefined,
-      'width': this.height || undefined
+      'height': this.height || '240px',
+      'width': this.height || '240px'
     };
   }