refactor(ui): set max width for content
On wide or ultra-wide screens the content is displayed over the whole screen, therefore you could overlook them.
In order to fix this problem we introduced a max width for every content of the application, including main content as well as hero overlays.
Closes:
MODIFY
src/app/app.component.scss
src/app/app.component.scss
.content-container {
padding: 2vh 5vw;
+ max-width: 2560px;
+ margin: 0 auto;
}
// Header: 32vh

MODIFY
src/app/components/api-card-list/api-card-list.component.html
src/app/components/api-card-list/api-card-list.component.html
[textClass]="'text-big2'"></app-no-data>
</div>
</ng-template>
-<div id="show-all-wrapper" *ngIf="listType === 'featuredApi' && ready">
- <button
- id="show-all-btn"
- mat-raised-button
- color="primary"
- [routerLink]="['/marketplace']">
- {{ 'HOME.SHOW_ALL' | translate }}
- </button>
-</div>

MODIFY
src/app/components/api-card-list/api-card-list.component.scss
src/app/components/api-card-list/api-card-list.component.scss
#search-form-field {
width: 234px;
}
-
-#show-all-wrapper {
- margin-top: 2rem;
- text-align: right;
-}

MODIFY
src/app/components/api-status-tag/api-status-tag.component.scss
src/app/components/api-status-tag/api-status-tag.component.scss
@@ -4,7 +4,7 @@ mat-icon {
}
.green-icon {
- color: green;
+ color: mediumseagreen;
}
.dark-accent-icon {

MODIFY
src/app/components/header/header.component.html
src/app/components/header/header.component.html
-->
<div id="hero-image" [ngClass]="{ 'hero-large': heroService.hero.large }">
- <div id="hero-overlay">
+ <div id="hero-overlay" class="content-container">
<div id="hero-overlay-box">
<h1 class="mt-40" id="hero-title">{{ heroService.hero.title }}</h1>
<p id="hero-subtitle">{{ heroService.hero.subtitle }}</p>

MODIFY
src/app/components/header/header.component.scss
src/app/components/header/header.component.scss
@@ -30,12 +30,21 @@ p {
position: relative;
}
-#hero-overlay-box {
- position: absolute;
- top: 22px;
- left: 3%;
- padding: 2px 12px 8px;
+#hero-overlay {
+ display: grid;
+ grid-template-columns: 1fr auto;
+ align-items: center;
+ max-width: 2560px;
+ height: 10vh;
+ margin: auto;
+
+ @media screen and (max-width: 2560px) {
+ margin-left: 2vw;
+ margin-right: 2vw;
+ }
+}
+#hero-overlay-box {
h1 {
margin-top: 0;
}
@@ -49,12 +58,6 @@ p {
cursor: pointer;
}
-#hero-actions {
- position: absolute;
- top: 22px;
- right: 3%;
-}
-
#hero-actions-logged-in {
align-items: center;
display: flex;

MODIFY
src/app/components/marketplace-api-description/marketplace-api-description.component.html
src/app/components/marketplace-api-description/marketplace-api-description.component.html
<!-- Public Endpoint -->
<app-api-public-endpoint
- *ngIf="api.publicAPI"
+ *ngIf="api.publicAPI && api.publicDiscoverability"
[publicApiVersion]="api"></app-api-public-endpoint>
</mat-expansion-panel>

MODIFY
src/app/components/marketplace-signup-stepper/marketplace-signup-stepper.component.scss
src/app/components/marketplace-signup-stepper/marketplace-signup-stepper.component.scss
* imitations under the License.
*/
-@media only screen and (max-width: 1279px) {
mat-stepper {
width: 100%;
- }
-}
-@media only screen and (min-width: 1280px) {
- mat-stepper {
+ @media screen and (min-width: 1920px) {
width: 80%;
}
-}
-@media only screen and (min-width: 1920px) {
- mat-stepper {
+ @media screen and (min-width: 2560px) {
width: 60%;
}
}

MODIFY
src/assets/i18n/de.json
src/assets/i18n/de.json
"HOME": {
"TITLE": "API Entwickler Portal",
"SUBTITLE": "",
- "SHOW_ALL": "Alles zeigen",
"NO_APIS_FOUND": "Es wurden keine APIs gefunden"
},
"MPLACE": {

MODIFY
src/assets/i18n/en.json
src/assets/i18n/en.json
"HOME": {
"TITLE": "API Developer Portal",
"SUBTITLE": "",
- "SHOW_ALL": "Show all",
"NO_APIS_FOUND": "No APIs were found"
},
"MPLACE": {

refactor(ui): set max width for content

On wide or ultra-wide screens the content is displayed over the whole screen, therefore you could overlook them.
In order to fix this problem we introduced a max width for every content of the application, including main content as well as hero overlays.

Closes: #152