TEIIDTOOLS-364 UI Issues with the Connection and Dataservice Wizards

- wizard scrolling no longer includes breadcrumbs or wizard step indicator
- wizard center section is the only section that scrolls (button bar does not scroll)
- should not get any double vertical scroll bars
- modified scrolling of preview and quicklook areas also

ngapp/src/app/connections/connection-type-cards/connection-type-cards.component.html

@@ -1,5 +1,5 @@
-<div class="row-cards-pf">
-  <div class="col-xs-12 col-sm-2 col-md-2" *ngFor="let connType of connectionTypes">
+<div class="object-card-container">
+  <div *ngFor="let connType of connectionTypes">
     <app-connection-type-card [connectionType]="connType"
                               [selectedConnectionTypes]="selectedConnectionTypes"
                               (selectEvent)="onSelectEvent($event)"></app-connection-type-card>

ngapp/src/app/connections/connections-cards/connections-cards.component.css

@@ -0,0 +1,4 @@
+.connections-container {
+  height: 90vh;
+  overflow: auto;
+}

ngapp/src/app/connections/connections-cards/connections-cards.component.html

@@ -1,9 +1,8 @@
-<div class="object-card-container">
+<div class="object-card-container connections-container">
   <div *ngFor="let connection of connections">
     <app-connection-card [connection]="connection"
                          [selectedConnections]="selectedConnections"
                          (cardEvent)="onCardEvent($event)"
                          (selectEvent)="onSelectEvent($event)"></app-connection-card>
   </div>
 </div>
-

ngapp/src/app/dataservices/dataservices-cards/dataservices-cards.component.css

@@ -0,0 +1,4 @@
+.dataservices-container {
+  height: 90vh;
+  overflow: auto;
+}

ngapp/src/app/dataservices/dataservices-cards/dataservices-cards.component.html

@@ -1,4 +1,4 @@
-<div class="object-card-container">
+<div class="object-card-container dataservices-container">
   <div *ngFor="let dataservice of dataservices">
     <app-dataservice-card-component [dataservice]="dataservice"
                                     [selectedDataservices]="selectedDataservices"

ngapp/src/app/dataservices/sql-control/sql-control.component.css

@@ -1,3 +1,13 @@
+.preview-control {
+  height: 90vh;
+  overflow: auto;
+}
+
+.quick-look-control {
+  height: 50vh;
+  overflow: auto;
+}
+
 .view-table-full-div {
   padding-left: 0;
   padding-right: 0;

ngapp/src/app/dataservices/sql-control/sql-control.component.html

@@ -1,4 +1,4 @@
-<div class="row">
+<div [ngClass]="quicklook ? 'row quick-look-control': 'row preview-control'">
   <div class="col-sm-12">
     <div [ngClass]="quicklook ? 'col-sm-3 view-table-quicklook-div': 'col-sm-3 view-table-full-div'">
       <pfng-table

ngapp/src/styles.css

@@ -32,6 +32,7 @@
   --card-description-margin-bottom: 10px;
   --card-description-padding: 0 5px 5px 5px;
   --card-footer-background-color: #ececec;
+  --card-height: 300px;
   --card-hover-color: var(--hover-color);
   --card-title-font-size: 16px;
   --card-title-font-weight: bold;
@@ -50,6 +51,7 @@
   --card-toolbar-margin-bottom: 6px;
   --card-toolbar-margin-top: 0;
   --card-toolbar-padding: 0 0 0 4px;
+  --card-width: 300px;
   --inline-icon-color: var(--card-border-color);
   --inline-icon-display: inline-block;
   --page-background-color: #fafafa;
@@ -122,15 +124,18 @@
 .object-card .card-pf,
 .object-card-selected .card-pf {
   margin: 8px 0;
+  flex: 0 0 var(--card-width);
 }
 
 .object-card-container {
   display: grid;
-  grid-template-columns: repeat( auto-fill, minmax( 300px, 300px ) );
+  grid-row-gap: 10px;
+  grid-column-gap: 10px;
+  grid-template-columns: repeat( auto-fill, var(--card-width) );
+  grid-template-rows: repeat( auto-fill, minmax( 225px, 225px) );
 }
 
 .object-card-container>* {
-  flex: 1 1 80px;
   margin: 5px;
 }
 
@@ -196,8 +201,6 @@
 
 .object-collection-page {
   background-color: var(--page-background-color);
-  height: 75vh;
-  overflow-y: auto;
 }
 
 .object-collection-page .empty-state {
@@ -288,6 +291,11 @@
   width: 100%;
 }
 
+.pfng-wizard-position-override {
+  height: 50vh;
+  overflow-y: auto;
+}
+
 /* Patternfly-NG kebab dropdown actions. */
 .secondary-action:before {
   color: var(--card-toolbar-dropdown-action-icon-color);
@@ -307,3 +315,8 @@
 .toolbar-pf-actions {
   margin-bottom: 0;
 }
+
+.wizard-pf-steps-indicator {
+  height: 75px;
+  padding: 0;
+}