refactor: change css grid to have the same spacing everywhere
MODIFY
src/app/components/charts/gauge-chart/gauge-chart.component.html
src/app/components/charts/gauge-chart/gauge-chart.component.html
<!--
- ~ Copyright 2021 Scheer PAS Schweiz AG
+ ~ Copyright 2022 Scheer PAS Schweiz AG
~
~ Licensed under the Apache License, Version 2.0 (the "License");
~ you may not use this file except in compliance with the License.
[max]="gaugeData.limit!"
[legendPosition]="legendPosition"
[scheme]="colorScheme"
- [view]="[380, 256]"
[valueFormatting]="disableValueLabel">
</ngx-charts-gauge>
- </div>
<div class="info-icon">
- <mat-icon class="material-icons-outlined" [inline]="true" color="primary">{{
- icon
- }}</mat-icon>
+ <mat-icon
+ class="material-icons-outlined"
+ [inline]="true"
+ color="primary"
+ >{{ icon }}</mat-icon
+ >
</div>
<div class="infos">
</div>
</div>
</div>
+</div>

MODIFY
src/app/components/charts/gauge-chart/gauge-chart.component.scss
src/app/components/charts/gauge-chart/gauge-chart.component.scss
/*!
- * Copyright 2021 Scheer PAS Schweiz AG
+ * Copyright 2022 Scheer PAS Schweiz AG
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
@@ -19,9 +19,6 @@ h2, h3, h4 {
}
.chart{
- display: flex;
- flex-direction: column;
- width: 308px;
height: 320px;
}
@@ -31,17 +28,15 @@ h2, h3, h4 {
.infos {
position: relative;
- bottom: 147px;
- display: flex;
- flex-direction: column;
+ bottom: 150px;
text-align: center;
}
.info-icon{
text-align: center;
- bottom: 176px;
+ bottom: 175px;
position: relative;
- font-size: 52px;
+ font-size: 50px;
}
.bottom-area{
@@ -50,18 +45,12 @@ h2, h3, h4 {
}
.chart-header{
- margin: 8px auto;
-}
-
-.info-bottom{
- display: flex;
- flex-direction: column;
+ margin: 0px auto;
+ padding: 8px;
}
.ngx-wrapper{
- display: flex;
-}
-
-::ng-deep .ngx-charts{
- margin-left: -38px !important;
+ max-height: 260px;
+ display: grid;
+ place-items: center;
}

MODIFY
src/app/components/my-apps-policies/my-apps-policies.component.html
src/app/components/my-apps-policies/my-apps-policies.component.html
<div class="policies" *ngIf="policies">
<app-policy-card [policy]="policy"></app-policy-card>
</div>
- <div class="grid-divider"><div></div></div>
<div class="policy-charts-grid" *ngIf="policy.probe; else noProbe">
<div>
<app-gauge-chart

MODIFY
src/app/components/my-apps-policies/my-apps-policies.component.scss
src/app/components/my-apps-policies/my-apps-policies.component.scss
/*!
- * Copyright 2021 Scheer PAS Schweiz AG
+ * Copyright 2022 Scheer PAS Schweiz AG
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
.summary {
display: grid;
- justify-content: space-between;
align-items: center;
- grid-template-columns: 1.24fr auto 2.2fr;
+ grid-template-columns: 4fr 6fr;
+ grid-gap: 6rem;
}
.policies {
display: grid;
- justify-content: space-around;
gap: 20px;
}
@@ -31,12 +30,12 @@ h2, h3 {
text-align: center;
}
-.grid .divider-left {
- margin-bottom: -4rem;
-}
-
.policy-charts-grid {
- display: flex;
- justify-content: space-evenly;
+ display: grid;
+ grid-template-columns: 1fr 1fr;
grid-column-gap: 4rem;
+ //https://stackoverflow.com/a/11149311
+ margin-left: -3rem;
+ padding-left: 3rem;
+ border-left: 2px solid var(--primary);
}

MODIFY
src/app/components/my-apps-summary/my-apps-summary.component.html
src/app/components/my-apps-summary/my-apps-summary.component.html
[downloadEnabled]="true"></app-api-documentation-buttons>
</div>
</div>
- <div class="grid-divider"><div></div></div>
<div *ngIf="contract!.policies.length > 0; else noPolicies" class="policies">
<ng-container *ngFor="let policy of contract!.policies">
<app-policy-card-light
<!-- No policies found for this API -->
<ng-template #noPolicies>
<app-no-data
- class="dp-center"
+ class="grid-center"
[textClass]="'text-big2'"
[text]="'CLIENTS.NO_POLICIES_FOR_API' | translate"></app-no-data>
</ng-template>

MODIFY
src/app/components/my-apps-summary/my-apps-summary.component.scss
src/app/components/my-apps-summary/my-apps-summary.component.scss
/*!
- * Copyright 2021 Scheer PAS Schweiz AG
+ * Copyright 2022 Scheer PAS Schweiz AG
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
.summary{
display: grid;
- justify-content: center;
- align-items: center;
- grid-template-columns: 4.2fr auto 9fr;
+ grid-template-columns: 4fr 6fr;
+ grid-gap: 4rem;
margin-bottom: 1rem;
}
.endpoints {
- display: grid;
- justify-content: space-around;
- align-items: start;
- grid-column-gap: 0px;
div.api-endpoint,.api-key,.auth-endpoint,.auth-key{
display: grid;
justify-content: space-around;
align-items: center;
- grid-template-columns: 2fr 14fr;
+ grid-template-columns: auto 1fr;
+
}
+ //https://stackoverflow.com/a/11149311
+ margin-right: -2rem;
+ padding-right: 2rem;
+ border-right: 2px solid var(--primary);
}
mat-form-field{
- width: 340px;
+ width: 100%;
margin-right: 1rem;
}
@@ -47,8 +47,11 @@ mat-form-field{
.policies{
display: grid;
- justify-content: space-evenly;
- align-items: stretch;
- grid-template-columns: 38% 38%;
- grid-row-gap: 2rem;
+ grid-template-columns: 1fr 1fr;
+ grid-column-gap: 2rem;
+}
+
+.grid-center {
+ display: grid;
+ place-items: center;
}

MODIFY
src/app/components/my-apps-use-api/my-apps-use-api.component.scss
src/app/components/my-apps-use-api/my-apps-use-api.component.scss
/*!
- * Copyright 2021 Scheer PAS Schweiz AG
+ * Copyright 2022 Scheer PAS Schweiz AG
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
grid-template-columns: 1fr 1fr;
grid-column-gap: 8px;
grid-row-gap: 32px;
- margin-bottom: 2.2rem;
}
p{

MODIFY
src/app/components/my-apps/my-apps.component.html
src/app/components/my-apps/my-apps.component.html
{{ 'CLIENTS.SUMMARY' | translate }}
</span>
</div>
- <div *ngIf="contract!.api.status !== 'Retired'">
+ <ng-container *ngIf="contract!.api.status !== 'Retired'">
<div>
<span
(click)="setSection(contract, 'use-api')"
{{ 'CLIENTS.POLICIES' | translate }}
</span>
</div>
- </div>
+ </ng-container>
<div>
<!-- TODO Add this later -->
<!-- <span-->
<div class="app-api-content mat-elevation-z2">
<div class="app-api-header">
<app-img-or-icon-selector
+ class="app-api-header-icon-wrapper"
[imgUrl]="contract.api.api.image"
[dimension]="'44'">
</app-img-or-icon-selector>

MODIFY
src/app/components/my-apps/my-apps.component.scss
src/app/components/my-apps/my-apps.component.scss
.app-header{
display: grid;
align-items: center;
- grid-template-columns: 65px 6fr 3.4fr;
+ grid-template-columns: auto 1fr auto;
grid-column-gap: 22px;
}
}
.app-api{
- margin-top: 3rem;
+ margin-top: 2rem;
display: grid;
justify-content: space-between;
align-items: start;
- grid-template-columns: auto 11fr;
+ grid-template-columns: auto 1fr;
grid-column-gap: 0;
grid-row-gap: 32px;
}
cursor: default !important;
}
-.app-api-menu-entry{
- // color: red;
-}
-
.app-api-content{
margin-right: 1rem;
padding-bottom: 1rem ;
display: grid;
justify-content: space-between;
align-items: center;
- grid-template-columns: 44px 8fr 8fr;
+ grid-template-columns: auto 1fr auto;
grid-column-gap: 16px;
margin: 0.4rem 1rem 1rem 1rem;
}

MODIFY
src/app/components/toc/toc.component.scss
src/app/components/toc/toc.component.scss
/*!
- * Copyright 2021 Scheer PAS Schweiz AG
+ * Copyright 2022 Scheer PAS Schweiz AG
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
}
}
+.toc:after {
+ //https://stackoverflow.com/a/22666488
+ content: "";
+ position: absolute;
+ z-index: 1;
+ bottom: 0;
+ left: 0;
+ background-image: linear-gradient(to bottom,
+ rgba(255, 255, 255, 0),
+ rgba(255, 255, 255, 0.9)
+ 100%);
+ height: 2rem;
+ width: 100%;
+}
+
.content-wrapper {
max-height: 60vh;
}

refactor: change css grid to have the same spacing everywhere