backport changes to wrap learn about tabs (#606)

LabKey · Nov 10, 2023 · 0da7ccf · 0da7ccf
1 parent de57d23
commit 0da7ccf
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 7 deletions.
diff --git a/theme/connector/view/_Learn.scss b/theme/connector/view/_Learn.scss
@@ -101,6 +101,12 @@ div.learnview {
   }
 }
 
+.learnheader {
+  display: flex;
+  display: -webkit-flex;
+  flex-wrap: wrap;
+}
+
 .learn-data-available-module {
   .x-panel-body-default {
     border-width: 0;

diff --git a/webapp/Connector/src/app/view/LearnGrid.js b/webapp/Connector/src/app/view/LearnGrid.js
@@ -92,17 +92,17 @@ Ext.define('Connector.app.view.LearnGrid', {
         };
 
         this.listeners.learnGridResizeHeight = function (viewHeight) {
-            this.setHeight(viewHeight - this.learnView.headerViews.main.height);
+            this.setHeight(viewHeight - this.learnView.headerViews.main.getHeight());
             this.setTitleColumnWidth();
         };
 
         this.listeners.learnDetailsGridResizeHeight = function (viewHeight) {
-            this.setHeight(viewHeight - this.learnView.headerViews.main.height);
+            this.setHeight(viewHeight - this.learnView.headerViews.main.getHeight());
         };
 
         this.listeners.boxready = function (grid) {
             if (!this.isDetailLearnGrid) {
-                this.height = grid.container.getHeight() - this.learnView.headerViews.main.height;
+                this.height = grid.container.getHeight() - this.learnView.headerViews.main.getHeight();
                 this.setTitleColumnWidth();
             }
         };

diff --git a/webapp/Connector/src/view/Learn.js b/webapp/Connector/src/view/Learn.js
@@ -517,6 +517,12 @@ Ext.define('Connector.view.Learn', {
                 store.on('load', function() {
                     this.dimensionDataLoaded[dimensionName] = true;
                     this.sortAndFilterStoreDelayed(store);
+
+                    // after the grid store has loaded, fire the resize event to adjust final layout between the
+                    // header and grid, this is necessary because the learn header is no longer a fixed height because
+                    // the styling has been adjusted to allow the learn tabs to wrap if there isn't enough horizontal space
+                    var size = this.getSize();
+                    this.fireEvent('resize', this, size.width, size.height);
                 }, this);
                 if (hasHierarchy) {
                     Connector.getState().onMDXReady(function(mdx) {
@@ -851,8 +857,6 @@ Ext.define('Connector.view.LearnHeader', {
 
     alias: 'widget.learnheader',
 
-    height: 110,
-
     cls: 'header-container learnaboutheader',
 
     defaults: {
@@ -870,7 +874,6 @@ Ext.define('Connector.view.LearnHeader', {
         },{
             xtype: 'container',
             items: [this.getDataView(), this.getSearchField(), this.getExportButton()],
-            height: 56,
             id: 'learn-header-bar-id',
             cls: 'learn-header-bar',
             layout: {
@@ -890,7 +893,6 @@ Ext.define('Connector.view.LearnHeader', {
         if (!this.headerDataView) {
             this.headerDataView = Ext.create('Connector.view.LearnHeaderDataView', {
                 flex: 2,
-                minWidth: 725,
                 cls: 'learn-dim-selector',
                 dimensions: this.dimensions,
                 store: Ext.create('Ext.data.Store', {