public inbox for [email protected]  

help / color / mirror / Atom feed

From: Aditya Toshniwal <[email protected]>
To: pgadmin-hackers <[email protected]>
Subject: [pgAdmin4][patch] pgadmin responsive not working as expected for desktop
Date: Thu, 17 Jan 2019 18:02:41 +0530
Message-ID: <CAM9w-_noXCtU5OObyYg_RBPD3NkY0PTc0mhH4D1yBNKKpbAeRA@mail.gmail.com> (raw)

Hi Hackers,

Attached is the patch to fix controls alignment responsiveness to docker
size change.

Kindly review.

-- 
Thanks and Regards,
Aditya Toshniwal
Software Engineer | EnterpriseDB Software Solutions | Pune
"Don't Complain about Heat, Plant a tree"


Attachments:

  [application/octet-stream] responsive_fix.patch (3.8K, 3-responsive_fix.patch)
  download | inline diff:
diff --git a/web/pgadmin/browser/static/js/panel.js b/web/pgadmin/browser/static/js/panel.js
index f582d0b9..646a6b95 100644
--- a/web/pgadmin/browser/static/js/panel.js
+++ b/web/pgadmin/browser/static/js/panel.js
@@ -147,27 +147,28 @@ define(
           }
           p.pgResizeTimeout = setTimeout(
             function() {
-              var w = p.width();
+              var w = p.width(),
+                elAttr = 'xs';
               p.pgResizeTimeout = null;
 
               /** Calculations based on https://getbootstrap.com/docs/4.1/layout/grid/#grid-options **/
               if (w < 480) {
-                w = 'xs';
+                elAttr = 'xs';
               }
               if (w >= 480) {
-                w = 'sm';
+                elAttr = 'sm';
               }
               if (w >= 768) {
-                w = 'md';
+                elAttr = 'md';
               }
               if (w >= 992) {
-                w = 'lg';
+                elAttr = 'lg';
               }
               if (w >=1200) {
-                w = 'xl';
+                elAttr = 'xl';
               }
 
-              p.pgElContainer.attr('el', w);
+              p.pgElContainer.attr('el', elAttr);
             },
             100
           );
diff --git a/web/pgadmin/static/js/alertify.pgadmin.defaults.js b/web/pgadmin/static/js/alertify.pgadmin.defaults.js
index 0e890873..0002183f 100644
--- a/web/pgadmin/static/js/alertify.pgadmin.defaults.js
+++ b/web/pgadmin/static/js/alertify.pgadmin.defaults.js
@@ -201,28 +201,29 @@ define([
     self.pgResizeTimeout = setTimeout(
       function() {
         var $el = $(this.elements.dialog),
-          w = $el.width();
+          w = $el.width(),
+          elAttr = 'xs';
 
         this.pgResizeTimeout = null;
 
         /** Calculations based on https://getbootstrap.com/docs/4.1/layout/grid/#grid-options **/
         if (w < 480) {
-          w = 'xs';
+          elAttr = 'xs';
         }
         if (w >= 480) {
-          w = 'sm';
+          elAttr = 'sm';
         }
         if (w >= 768) {
-          w = 'md';
+          elAttr = 'md';
         }
         if (w >= 992) {
-          w = 'lg';
+          elAttr = 'lg';
         }
         if (w >=1200) {
-          w = 'xl';
+          elAttr = 'xl';
         }
 
-        $el.attr('el', w);
+        $el.attr('el', elAttr);
       }.bind(self),
       100
     );
diff --git a/web/pgadmin/static/scss/_pgadmin.grid.scss b/web/pgadmin/static/scss/_pgadmin.grid.scss
index cb1781cf..6e3af52b 100644
--- a/web/pgadmin/static/scss/_pgadmin.grid.scss
+++ b/web/pgadmin/static/scss/_pgadmin.grid.scss
@@ -41,16 +41,52 @@
       flex-grow: 1;
       max-width: 100%;
     }
+  }
 
-    @for $i from 1 through $columns {
-      .pg-el-container[el=lg],
-      .pg-el-container[el=md],
-      .pg-el-container[el=sm]
-      .pg-el#{$infix}-#{$i} {
+  @for $i from 1 through $columns {
+    .pg-el-container[el=xl] {
+      .pg-el-sm-#{$i} {
+        @include make-col($i, $columns);
+      }
+      .pg-el-md-#{$i} {
+        @include make-col($i, $columns);
+      }
+      .pg-el-lg-#{$i} {
+        @include make-col($i, $columns);
+      }
+      .pg-el-xl-#{$i} {
+        @include make-col($i, $columns);
+      }
+    }
+
+    .pg-el-container[el=lg] {
+      .pg-el-sm-#{$i} {
+        @include make-col($i, $columns);
+      }
+      .pg-el-md-#{$i} {
+        @include make-col($i, $columns);
+      }
+      .pg-el-lg-#{$i} {
+        @include make-col($i, $columns);
+      }
+    }
+
+    .pg-el-container[el=md] {
+      .pg-el-md-#{$i} {
+        @include make-col($i, $columns);
+      }
+      .pg-el-sm-#{$i} {
+        @include make-col($i, $columns);
+      }
+    }
+
+    .pg-el-container[el=sm] {
+      .pg-el-sm-#{$i} {
         @include make-col($i, $columns);
       }
     }
   }
+
 }
 
 @include make-grid-columns();

view thread (7+ messages)  latest in thread

reply

Reply instructions:

You may reply publicly to this message via plain-text email
using any one of the following methods:

* Reply to all the recipients using the --to and --cc options:
  reply via email

  To: [email protected]
  Cc: [email protected]
  Subject: Re: [pgAdmin4][patch] pgadmin responsive not working as expected for desktop
  In-Reply-To: <CAM9w-_noXCtU5OObyYg_RBPD3NkY0PTc0mhH4D1yBNKKpbAeRA@mail.gmail.com>

* Save the following mbox file, import it into your mail client,
  and reply-to-all from there: mbox

This inbox is served by agora; see mirroring instructions
for how to clone and mirror all data and code used for this inbox