Search display formatting

Change-Id: Ideac871019a8115a986ab0c81455627464c0586d
Issue-ID: CCSDK-1275
Signed-off-by: Ezhilarasi <ezhrajam@in.ibm.com>

2 files changed, 51 insertions, 11 deletions

diff --git a/cds-ui/client/src/app/feature-modules/blueprint/select-template/search-template/search-from-database/search-from-database.component.html b/cds-ui/client/src/app/feature-modules/blueprint/select-template/search-template/search-from-database/search-from-database.component.html
index ca260394b..6683dba59 100644
--- a/cds-ui/client/src/app/feature-modules/blueprint/select-template/search-template/search-from-database/search-from-database.component.html
+++ b/cds-ui/client/src/app/feature-modules/blueprint/select-template/search-template/search-from-database/search-from-database.component.html
@@ -32,7 +32,24 @@ limitations under the License.
     </mat-autocomplete> -->
     </mat-form-field>
 </form>
-<mat-grid-list cols="8">
+<div class="searchcontainer">
+    <div class="flexBox">
+        <div *ngFor="let option of options" style="position: relative !important;width:20% !important">
+            <mat-card class="example-card">
+                <mat-card-content class="card-content">
+                    {{option.blueprintModel.artifactName}}
+                    <br>{{option.blueprintModel.updatedBy}}
+                </mat-card-content>
+                <mat-card-actions class="flexBox">
+                    <button mat-menu-item (click)="editCBA(option.blueprintModel.artifactName,edit)">Edit</button>
+                    <button mat-menu-item (click)="editCBA(option.blueprintModel.artifactName,clone)">Clone</button>
+                    <button mat-menu-item (click)="editCBA(option.blueprintModel.artifactName,info)">Info</button>
+                </mat-card-actions>
+            </mat-card>
+        </div>
+    </div>
+</div>
+<!-- <mat-grid-list cols="8">
     <mat-grid-tile *ngFor="let option of options">
         <mat-card class="example-card">
             <mat-card-content class="card-content">
@@ -44,4 +61,4 @@ limitations under the License.
             </mat-card-actions>
         </mat-card>
     </mat-grid-tile>
-</mat-grid-list>
\ No newline at end of file
+</mat-grid-list> -->
\ No newline at end of file
diff --git a/cds-ui/client/src/app/feature-modules/blueprint/select-template/search-template/search-from-database/search-from-database.component.scss b/cds-ui/client/src/app/feature-modules/blueprint/select-template/search-template/search-from-database/search-from-database.component.scss
index 6692764ae..f84213f48 100644
--- a/cds-ui/client/src/app/feature-modules/blueprint/select-template/search-template/search-from-database/search-from-database.component.scss
+++ b/cds-ui/client/src/app/feature-modules/blueprint/select-template/search-template/search-from-database/search-from-database.component.scss
@@ -20,25 +20,39 @@ limitations under the License.
 */
 
 .example-card {
-    min-width: 150px;
-    max-height: 150px;
+    // min-width: 300px;
+    max-height: 200px;
     background-color: #ebebeb;
+    position: relative;
+    width: 250px;
+    margin: 5px;
+}
+
+.mat-grid-tile {
+    position: absolute;
+    width: 240px !important;
+}
+
+.mat-grid-list div {
+    position: relative;
 }
 
 button.mat-menu-item {
     width: auto;
     float: left;
-    // margin-top: 10px;
-    // margin-bottom: 5px;
     border-radius: 4px;
-    // min-width: 6em;
     background-color: #3f51b5;
-    margin: 1px;
-    // padding: 1px;
+    margin: 5px;
     cursor: pointer;
     color: white;
 }
 
+.flexBox {
+    display: flex;
+    flex-flow: row;
+    flex-wrap: wrap;
+}
+
 .card-deck-container {
     position: relative;
     border-radius: 1px;
@@ -47,10 +61,19 @@ button.mat-menu-item {
     // background-color: #f5f5f5;
 }
 
-.grid-container {
-    margin: 20px;
+.searchcontainer {
+    min-height: 300px;
+    overflow-x: hidden;
+    overflow-y: scroll;
 }
 
 .card-content {
     text-align: center;
+    margin: 5px;
+}
+
+.mat-card-actions {
+    margin-left: 0px !important;
+    margin-right: 0px !important;
+    padding: 0px 0 !important;
 }
\ No newline at end of file