diff --git a/src/app/app.component.html b/src/app/app.component.html
index 276a399b6bb1b15fec9c754c42fe730045b47972..14a884b8acd6462942398f322c1d529eccd0aa37 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -38,7 +38,9 @@
>
</dlcm-main-toolbar-mobile>
</div>
- <div class="body">
+ <div class="body"
+ [class.ignore-grid]="ignoreGrid"
+ >
<div class="instance-logo-wrapper"
(click)="navigateToHome()"
>
@@ -48,12 +50,18 @@
>
</div>
- <dlcm-shared-breadcrumb (navigateChange)="navigate($event)"></dlcm-shared-breadcrumb>
+ <div class="breadcrumb-wrapper">
+ <dlcm-shared-breadcrumb class="breadcrumb"
+ (navigateChange)="navigate($event)"
+ ></dlcm-shared-breadcrumb>
+ </div>
<main class="content mat-typography"
[dlcmSpinner]="!(isApplicationInitializedObs | async)"
>
- <router-outlet></router-outlet>
+ <div class="router-outlet-wrapper">
+ <router-outlet></router-outlet>
+ </div>
</main>
<dlcm-footer [updateVersion]="appStatusService.updateAvailable | async"
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
index 3b0af400af8e91d5dccba2a0c0b72a3815d99922..11478fbdc81b827f27d7baa1dc166c70d9843fb6 100644
--- a/src/app/app.component.scss
+++ b/src/app/app.component.scss
@@ -44,6 +44,31 @@ dlcm-main-toolbar-desktop-vertical {
height: 100%;
display: flex;
flex-direction: column;
+
+ &.ignore-grid {
+ .breadcrumb-wrapper {
+ .breadcrumb {
+ max-width: initial;
+ }
+ }
+
+ .content {
+ .router-outlet-wrapper {
+ max-width: initial;
+ }
+ }
+ }
+}
+
+.breadcrumb-wrapper {
+ background-color: $background-grey;
+ display: flex;
+ justify-content: center;
+
+ .breadcrumb {
+ max-width: $grid-width;
+ width: 100%;
+ }
}
.content {
@@ -51,6 +76,12 @@ dlcm-main-toolbar-desktop-vertical {
display: flex;
overflow-y: auto;
justify-content: center;
+
+ .router-outlet-wrapper {
+ display: flex;
+ flex: 1;
+ max-width: $grid-width;
+ }
}
// Display toolbar on left for dlcm theme on desktop only
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 2020afa306c07f431ecbd046446e63612ea2dd0d..fbbeb004304b6b1ee0bf68281bfebab2cd3cc5f1 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -59,6 +59,7 @@ export class AppComponent extends SharedAbstractPresentational {
@Select((state: LocalStateModel) => state.application.theme) themeObs: Observable<ThemeEnum>;
@Select((state: LocalStateModel) => state.application.userRoles) userRolesObs: Observable<ApplicationRoleEnum[]>;
@Select((state: LocalStateModel) => state.application.application_user.current) currentUserObs: Observable<UserExtended>;
+ ignoreGrid: boolean = false;
@HostListener("window:beforeunload", ["$event"])
leaveWithoutSaveNotification($event: Event): void {
@@ -137,10 +138,15 @@ export class AppComponent extends SharedAbstractPresentational {
this.subscribe(this.urlStateObs
.pipe(
tap(urlState => {
+ this.ignoreGrid = false;
if (urlState) {
const url = urlState.url;
if (url.startsWith(urlSeparator + RoutesEnum.homePage)) {
this.currentModule = RoutesEnum.homePage;
+
+ if (url.startsWith(urlSeparator + RoutesEnum.homePageBrowsing)) {
+ this.ignoreGrid = true;
+ }
return;
}
diff --git a/src/app/features/home/components/presentationals/home-archive-form/home-archive-detail.presentational.scss b/src/app/features/home/components/presentationals/home-archive-form/home-archive-detail.presentational.scss
index 74083918550f575fbb4926ef306370c4d95235d3..13986a63ed027744a01465ce14d9dcc563c63829 100644
--- a/src/app/features/home/components/presentationals/home-archive-form/home-archive-detail.presentational.scss
+++ b/src/app/features/home/components/presentationals/home-archive-form/home-archive-detail.presentational.scss
@@ -2,54 +2,59 @@
$padding-bottom-desktop: 20px;
-.line {
- display: flex;
- flex-direction: row;
- overflow: hidden;
-
- @include respond-to-breakpoint('xs') {
- flex-direction: column;
+:host {
+ display: block;
+ padding-bottom: 25px;
+
+ .line {
+ display: flex;
+ flex-direction: row;
+ overflow: hidden;
+
+ @include respond-to-breakpoint('xs') {
+ flex-direction: column;
+ }
}
-}
-dt {
- font-weight: bold;
- width: 160px;
- clear: left;
- text-align: left;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
-
- @include respond-to-breakpoint-and-bigger('sm') {
- padding-bottom: $padding-bottom-desktop;
+ dt {
+ font-weight: bold;
+ width: 160px;
+ clear: left;
+ text-align: left;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+
+ @include respond-to-breakpoint-and-bigger('sm') {
+ padding-bottom: $padding-bottom-desktop;
+ }
}
-}
-dd {
- margin-left: 0;
- padding-bottom: 10px;
- word-break: break-word;
+ dd {
+ margin-left: 0;
+ padding-bottom: 10px;
+ word-break: break-word;
- @include respond-to-smaller-than-breakpoint('sm') {
- width: 100%;
+ @include respond-to-smaller-than-breakpoint('sm') {
+ width: 100%;
+ }
}
-}
-.pre {
- font-size: 13px;
- line-height: 1.42857143;
- word-break: break-all;
- word-wrap: break-word;
- background-color: #f5f5f5;
- border: 1px solid #ccc;
- border-radius: 4px;
- overflow-x: auto;
-}
+ .pre {
+ font-size: 13px;
+ line-height: 1.42857143;
+ word-break: break-all;
+ word-wrap: break-word;
+ background-color: #f5f5f5;
+ border: 1px solid #ccc;
+ border-radius: 4px;
+ overflow-x: auto;
+ }
-.code {
- font-family: monospace;
- white-space: pre-line;
- padding-top: 0;
+ .code {
+ font-family: monospace;
+ white-space: pre-line;
+ padding-top: 0;
+ }
}
diff --git a/src/app/shared/components/presentationals/shared-breadcrumb/shared-breadcrumb.presentational.scss b/src/app/shared/components/presentationals/shared-breadcrumb/shared-breadcrumb.presentational.scss
index 53865af57bf5d9eb852c73f2b4e8bf088d2314e8..99d5cad88439b237d8d25bbdd39d1d55e5847965 100644
--- a/src/app/shared/components/presentationals/shared-breadcrumb/shared-breadcrumb.presentational.scss
+++ b/src/app/shared/components/presentationals/shared-breadcrumb/shared-breadcrumb.presentational.scss
@@ -1,36 +1,36 @@
@import "../../../../../sass/abstracts/variables";
-.breadcrumb {
- padding: 10px 25px;
- margin: 0;
- list-style: none !important;
- list-style-type: none;
- background-color: $background-grey;
-}
-
-li {
- display: inline;
- font-size: 14px;
-}
+:host {
+ display: block;
-li + li:before {
- padding: 8px;
- line-height: 30px;
- color: $dark-grey;
- content: "/";
-}
+ .breadcrumb {
+ padding: 10px 25px;
+ line-height: 30px;
-a {
- &.current {
- text-decoration: none;
- cursor: initial;
+ li {
+ display: inline;
+ font-size: 14px;
+ }
- &:hover {
- color: $primary-color;
+ li + li:before {
+ padding: 0 8px;
+ color: $dark-grey;
+ content: "/";
}
- &:hover:before {
- visibility: hidden;
+ a {
+ &.current {
+ text-decoration: none;
+ cursor: initial;
+
+ &:hover {
+ color: $primary-color;
+ }
+
+ &:hover:before {
+ visibility: hidden;
+ }
+ }
}
}
}
diff --git a/src/sass/abstracts/_variables.scss b/src/sass/abstracts/_variables.scss
index aac57f50c4d8f81c5172c86bcf534defd1c86e23..0678dd812c9287f27f369b1ce2095d9212b863c0 100644
--- a/src/sass/abstracts/_variables.scss
+++ b/src/sass/abstracts/_variables.scss
@@ -4,6 +4,8 @@ $primary-color-darker: var(--primary-color-darker);
$accent-color: var(--accent-color);
$text-color: #292F33;
+$grid-width: 1400px;
+
$red: #f44336;
$green: #01b500;
$background-grey: #f5f5f5;
diff --git a/src/sass/main.scss b/src/sass/main.scss
index 8c360b63cb10e431ec12151dd84439af41654e6b..5b41846e282befff6fc0a5b40a49528c4fc22341 100644
--- a/src/sass/main.scss
+++ b/src/sass/main.scss
@@ -110,7 +110,7 @@ ul {
}
}
-ul, li {
+ul, ol, li {
padding: 0;
margin-top: 0;
margin-bottom: 0;