Changed behaviour of summary cards as the window is resized

- cards now say a constant size - cards wrap as necessary
teiid · Mar 8, 2018 · c50afcc · c50afcc
1 parent 74a5199
commit c50afcc
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 13 deletions.
diff --git a/ngapp/src/app/connections/connections-cards/connections-cards.component.html b/ngapp/src/app/connections/connections-cards/connections-cards.component.html
@@ -1,5 +1,5 @@
-<div class="row-cards-pf">
-  <div class="col-xs-12 col-sm-3 col-md-3" *ngFor="let connection of connections">
+<div class="object-card-container">
+  <div *ngFor="let connection of connections">
     <app-connection-card [connection]="connection"
                          [selectedConnections]="selectedConnections"
                          (cardEvent)="onCardEvent($event)"

diff --git a/ngapp/src/app/dataservices/dataservices-cards/dataservices-cards.component.css b/ngapp/src/app/dataservices/dataservices-cards/dataservices-cards.component.css
@@ -1,8 +0,0 @@
-.container-cards-pf {
-  padding: 0;
-  margin-top: 0;
-}
-
-.row-cards-pf {
-  padding: 0;
-}

diff --git a/ngapp/src/app/dataservices/dataservices-cards/dataservices-cards.component.html b/ngapp/src/app/dataservices/dataservices-cards/dataservices-cards.component.html
@@ -1,5 +1,5 @@
-<div class="row-cards-pf">
-  <div class="col-xs-12 col-sm-3 col-md-3" *ngFor="let dataservice of dataservices">
+<div class="object-card-container">
+  <div *ngFor="let dataservice of dataservices">
     <app-dataservice-card-component [dataservice]="dataservice"
                                     [selectedDataservices]="selectedDataservices"
                                     (cardEvent)="onCardEvent($event)"

diff --git a/ngapp/src/styles.css b/ngapp/src/styles.css
@@ -116,14 +116,23 @@
 //-ms-transition: background-color 300ms;
   -o-transition: background-color 300ms;
   transition: background-color 300ms;
-  height: 160px;
 }
 
 .object-card .card-pf,
 .object-card-selected .card-pf {
   margin: 8px 0;
 }
 
+.object-card-container {
+  display: grid;
+  grid-template-columns: repeat( auto-fill, minmax( 300px, 300px ) );
+}
+
+.object-card-container>* {
+  flex: 1 1 80px;
+  margin: 5px;
+}
+
 .object-card-selected .card-pf {
   border: var(--card-border-width) var(--card-border-style) var(--card-border-color);
 }