refactor:  clean up css
MODIFY
src/app/components/marketplace-api-description/marketplace-api-description.component.html
src/app/components/marketplace-api-description/marketplace-api-description.component.html
-<mat-expansion-panel [expanded]="isLatest">
+<mat-expansion-panel [expanded]="isLatest" xmlns="http://www.w3.org/1999/html">
<mat-expansion-panel-header>
<mat-panel-title>
<div id="version-info">
<p id="shortDescription">{{ shortDescription }}</p>
</div>
- <mat-grid-list cols="4" rowHeight="1:1">
- <mat-grid-tile colspan="3" id="long-description-tile">
- <div class="box" data-simplebar>
+ <div class="container">
+ <div class="box" id="long-description-tile" data-simplebar>
<markdown [data]="api.extendedDescription"></markdown>
</div>
- </mat-grid-tile>
- <mat-grid-tile colspan="1">
- <div class="box" id="key-features">
+ <div class="box" id="key-features" *ngIf="features.length > 0">
<h1 class="primary">Key Features</h1>
<mat-list>
- <!--To-Do-->
- <!--Use features of API instead of hard-coded value-->
<mat-list-item *ngFor="let feature of features">
<mat-icon matListIcon class="primary material-icons-outlined mr-8"
>folder_outline</mat-icon
</mat-list-item>
</mat-list>
</div>
- </mat-grid-tile>
- </mat-grid-list>
+ </div>
<app-plan-card-list [apiVersion]="api"></app-plan-card-list>
</mat-expansion-panel>

MODIFY
src/app/components/marketplace-api-description/marketplace-api-description.component.scss
src/app/components/marketplace-api-description/marketplace-api-description.component.scss
.box{
width: 100%;
height: 100%;
-}
-
-mat-divider {
- height: 80%;
- margin-left: 2em;
- margin-right: 2em;
+ padding-left: 1%;
+ padding-right: 1%;
}
mat-panel-title {
@@ -37,12 +33,7 @@ mat-grid-list {
#long-description-tile {
border: 1px solid rgba(0,0,0,0.2);
- background: rgba(0,0,0,0.02)
-}
-
-.box {
- padding-left: 1%;
- padding-right: 1%
+ background: rgba(0,0,0,0.02);
}
#key-features {
@@ -69,3 +60,9 @@ mat-grid-list {
.mat-expansion-panel-header.mat-expanded{
background-color: rgba(0, 0, 0, 0.04) !important;
}
+
+.container {
+ display: grid;
+ grid-template-columns: 3fr 1fr;
+ gap: 40px;
+}

refactor:  clean up css