theme for entity pages

resources/i18n/en.json

@@ -109,6 +109,16 @@
       "link": {
         "simple": "Simple item page",
         "full": "Full item page"
+      },
+      "journal": {
+        "search": {
+          "title": "Articles in this journal"
+        }
+      },
+      "person": {
+        "search": {
+          "title": "Articles by this author"
+        }
       }
     },
     "select": {

src/app/+item-page/simple/item-types/journal-issue/journal-issue.component.ts

@@ -11,8 +11,8 @@ import { filterRelationsByTypeLabel, relationsToItems } from '../shared/item-rel
 @rendersItemType('JournalIssue', ItemViewMode.Full)
 @Component({
   selector: 'ds-journal-issue',
-  styleUrls: ['./journal-issue.component.scss'],
+  styleUrls: ['./themes/journal-issue.component.mantis.scss'],
-  templateUrl: './journal-issue.component.html'
+  templateUrl: './themes/journal-issue.component.mantis.html'
 })
 /**
  * The component for displaying metadata and relations of an item of the type Journal Issue

src/app/+item-page/simple/item-types/journal-issue/themes/journal-issue.component.mantis.html

@@ -0,0 +1,72 @@
+<div class="top-item-page">
+    <div class="container">
+        <div class="row">
+
+            <div class="col-12 col-md-2 d-flex flex-md-column justify-content-between">
+                <ds-metadata-field-wrapper>
+                    <ds-thumbnail [thumbnail]="this.item.getThumbnail() | async"></ds-thumbnail>
+                </ds-metadata-field-wrapper>
+                <div>
+                    <a class="btn btn-secondary"
+                       [routerLink]="['/items/' + item.id + '/full']">
+                        {{"item.page.link.full" | translate}}
+                    </a>
+                </div>
+            </div>
+            <div class="col-12 col-md-10">
+                <h2 class="item-page-title-field">
+                    <ds-metadata-values
+                            [mdValues]="item?.allMetadata(['dc.title'])"></ds-metadata-values>
+                </h2>
+                <div class="row">
+                    <div class="col-12 col-md-6">
+                        <ds-generic-item-page-field [item]="item"
+                                                    [fields]="['journal.title']"
+                                                    [label]="'journalissue.page.journal-title'">
+                        </ds-generic-item-page-field>
+                        <ds-generic-item-page-field [item]="item"
+                                                    [fields]="['journalissue.identifier.number']"
+                                                    [label]="'journalissue.page.number'">
+                        </ds-generic-item-page-field>
+                        <ds-generic-item-page-field [item]="item"
+                                                    [fields]="['journal.identifier.issn']"
+                                                    [label]="'journalissue.page.journal-issn'">
+                        </ds-generic-item-page-field>
+                    </div>
+                    <div class="col-12 col-md-6">
+                        <ds-generic-item-page-field [item]="item"
+                                                    [fields]="['journalissue.issuedate']"
+                                                    [label]="'journalissue.page.issuedate'">
+                        </ds-generic-item-page-field>
+                        <ds-generic-item-page-field [item]="item"
+                                                    [fields]="['journalissue.identifier.description']"
+                                                    [label]="'journalissue.page.description'">
+                        </ds-generic-item-page-field>
+                        <ds-generic-item-page-field [item]="item"
+                                                    [fields]="['journalissue.identifier.keyword']"
+                                                    [label]="'journalissue.page.keyword'">
+                        </ds-generic-item-page-field>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+<div class="relationships-item-page" *ngIf="(volumes$ | async) || (publications$ | async)">
+    <div class="container">
+        <div class="row">
+            <div class="col-12 col-md-4" *ngIf="volumes$ | async">
+                <ds-related-items
+                        [items]="volumes$ | async"
+                        [label]="'relationships.isSingleVolumeOf' | translate">
+                </ds-related-items>
+            </div>
+            <div class="col-12 col-md-4" *ngIf="publications$ | async">
+                <ds-related-items
+                        [items]="publications$ | async"
+                        [label]="'relationships.isPublicationOfJournalIssue' | translate">
+                </ds-related-items>
+            </div>
+        </div>
+    </div>
+</div>

src/app/+item-page/simple/item-types/journal-issue/themes/journal-issue.component.mantis.scss

@@ -0,0 +1,30 @@
+@import '../../../../../../styles/variables.scss';
+
+:host {
+    > * {
+        display: block;
+        padding-top: $content-spacing;
+        padding-bottom: $content-spacing;
+    }
+
+    .top-item-page {
+        background-color: $gray-100;
+        margin-top: -$content-spacing;
+    }
+
+    .relationships-item-page {
+        padding-bottom: $content-spacing - $spacer;
+    }
+
+    ds-metadata-field-wrapper {
+        @media screen and (max-width: map-get($grid-breakpoints, md)) {
+            flex: 1;
+            padding-right: $spacer/2;
+        }
+
+        ds-thumbnail {
+            display: block;
+            max-width: $thumbnail-max-width;
+        }
+    }
+}

src/app/+item-page/simple/item-types/journal-volume/journal-volume.component.ts

@@ -11,8 +11,8 @@ import { filterRelationsByTypeLabel, relationsToItems } from '../shared/item-rel
 @rendersItemType('JournalVolume', ItemViewMode.Full)
 @Component({
   selector: 'ds-journal-volume',
-  styleUrls: ['./journal-volume.component.scss'],
+  styleUrls: ['./themes/journal-volume.component.mantis.scss'],
-  templateUrl: './journal-volume.component.html'
+  templateUrl: './themes/journal-volume.component.mantis.html'
 })
 /**
  * The component for displaying metadata and relations of an item of the type Journal Volume

src/app/+item-page/simple/item-types/journal-volume/themes/journal-volume.component.mantis.html

@@ -0,0 +1,61 @@
+<div class="top-item-page">
+    <div class="container">
+        <div class="row">
+
+            <div class="col-12 col-md-2 d-flex flex-md-column justify-content-between">
+                <ds-metadata-field-wrapper>
+                    <ds-thumbnail [thumbnail]="this.item.getThumbnail() | async"></ds-thumbnail>
+                </ds-metadata-field-wrapper>
+                <div>
+                    <a class="btn btn-secondary"
+                       [routerLink]="['/items/' + item.id + '/full']">
+                        {{"item.page.link.full" | translate}}
+                    </a>
+                </div>
+            </div>
+            <div class="col-12 col-md-10">
+                <h2 class="item-page-title-field">
+                    <ds-metadata-values
+                            [mdValues]="item?.allMetadata(['dc.title'])"></ds-metadata-values>
+                </h2>
+                <div class="row">
+                    <div class="col-12 col-md-6">
+
+                        <ds-generic-item-page-field [item]="item"
+                                                    [fields]="['journalvolume.identifier.volume']"
+                                                    [label]="'journalvolume.page.volume'">
+                        </ds-generic-item-page-field>
+                        <ds-generic-item-page-field [item]="item"
+                                                    [fields]="['journalvolume.issuedate']"
+                                                    [label]="'journalvolume.page.issuedate'">
+                        </ds-generic-item-page-field>
+                    </div>
+                    <div class="col-12 col-md-6">
+                        <ds-generic-item-page-field [item]="item"
+                                                    [fields]="['journalvolume.identifier.description']"
+                                                    [label]="'journalvolume.page.description'">
+                        </ds-generic-item-page-field>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+<div class="relationships-item-page" *ngIf="(journals$ | async) || (issues$ | async)">
+    <div class="container">
+        <div class="row">
+            <div class="col-12 col-md-4" *ngIf="journals$ | async">
+                <ds-related-items
+                        [items]="journals$ | async"
+                        [label]="'relationships.isSingleJournalOf' | translate">
+                </ds-related-items>
+            </div>
+            <div class="col-12 col-md-4" *ngIf="issues$ | async">
+                <ds-related-items
+                        [items]="issues$ | async"
+                        [label]="'relationships.isIssueOf' | translate">
+                </ds-related-items>
+            </div>
+        </div>
+    </div>
+</div>

src/app/+item-page/simple/item-types/journal-volume/themes/journal-volume.component.mantis.scss

@@ -0,0 +1,30 @@
+@import '../../../../../../styles/variables.scss';
+
+:host {
+    > * {
+        display: block;
+        padding-top: $content-spacing;
+        padding-bottom: $content-spacing;
+    }
+
+    .top-item-page {
+        background-color: $gray-100;
+        margin-top: -$content-spacing;
+    }
+
+    .relationships-item-page {
+        padding-bottom: $content-spacing - $spacer;
+    }
+
+    ds-metadata-field-wrapper {
+        @media screen and (max-width: map-get($grid-breakpoints, md)) {
+            flex: 1;
+            padding-right: $spacer/2;
+        }
+
+        ds-thumbnail {
+            display: block;
+            max-width: $thumbnail-max-width;
+        }
+    }
+}

src/app/+item-page/simple/item-types/journal/themes/journal.component.mantis.html

@@ -1,8 +1,7 @@
 <div class="top-item-page">
     <div class="container">
         <div class="row">
-
+            <div class="col-12 col-md-2 d-flex flex-md-column justify-content-between">
-            <div class="col-12 col-md-2 d-flex flex-column justify-content-between">
                 <ds-metadata-field-wrapper>
                     <ds-thumbnail [thumbnail]="this.item.getThumbnail() | async"></ds-thumbnail>
                 </ds-metadata-field-wrapper>
@@ -45,10 +44,10 @@
         </div>
     </div>
 </div>
-<div>
+<div class="relationships-item-page" *ngIf="volumes$ | async">
     <div class="container">
         <div class="row">
-            <div class="col-12 col-md-6">
+            <div class="col-12 col-md-4" *ngIf="volumes$ | async">
                 <ds-related-items
                         [items]="volumes$ | async"
                         [label]="'relationships.isVolumeOf' | translate">
@@ -57,6 +56,11 @@
         </div>
     </div>
 </div>
-<ds-related-entities-search [item]="item"
+<div>
-                            [relationType]="'isJournalOfPublication'">
+    <div class="container search-container">
-</ds-related-entities-search>
+        <h3 class="h2">{{"item.page.journal.search.title" | translate}}</h3>
+    </div>
+    <ds-related-entities-search [item]="item"
+                                [relationType]="'isJournalOfPublication'">
+    </ds-related-entities-search>
+</div>

src/app/+item-page/simple/item-types/journal/themes/journal.component.mantis.scss

@@ -1,11 +1,38 @@
 @import '../../../../../../styles/variables.scss';
+
 :host {
     > * {
         display: block;
-        padding-top: $spacer;
+        padding-top: $content-spacing;
-        padding-bottom: $spacer;
+        padding-bottom: $content-spacing;
     }
+
     .top-item-page {
         background-color: $gray-100;
+        margin-top: -$content-spacing;
+    }
+
+    .relationships-item-page {
+        padding-bottom: $content-spacing - $spacer;
+    }
+
+    ds-metadata-field-wrapper {
+        @media screen and (max-width: map-get($grid-breakpoints, md)) {
+            flex: 1;
+            padding-right: $spacer/2;
+        }
+
+        ds-thumbnail {
+            display: block;
+            max-width: $thumbnail-max-width;
+        }
+    }
+
+    .search-container {
+        margin-bottom: $spacer;
+        @media screen and (max-width: map-get($grid-breakpoints, lg)) {
+            width: 100%;
+            max-width: none;
+        }
     }
 }

src/app/+item-page/simple/item-types/orgunit/orgunit.component.ts

@@ -11,8 +11,8 @@ import { filterRelationsByTypeLabel, relationsToItems } from '../shared/item-rel
 @rendersItemType('OrgUnit', ItemViewMode.Full)
 @Component({
   selector: 'ds-orgunit',
-  styleUrls: ['./orgunit.component.scss'],
+  styleUrls: ['./themes/orgunit.component.mantis.scss'],
-  templateUrl: './orgunit.component.html'
+  templateUrl: './themes/orgunit.component.mantis.html'
 })
 /**
  * The component for displaying metadata and relations of an item of the type Organisation Unit

src/app/+item-page/simple/item-types/orgunit/themes/orgunit.component.mantis.html

@@ -0,0 +1,75 @@
+<div class="top-item-page">
+    <div class="container">
+        <div class="row">
+
+            <div class="col-12 col-md-2 d-flex flex-md-column justify-content-between">
+                <ds-metadata-field-wrapper>
+                    <ds-thumbnail [thumbnail]="this.item.getThumbnail() | async"
+                                  [defaultImage]="'assets/images/orgunit-placeholder.jpg'"></ds-thumbnail>
+                </ds-metadata-field-wrapper>
+                <div>
+                    <a class="btn btn-secondary"
+                       [routerLink]="['/items/' + item.id + '/full']">
+                        {{"item.page.link.full" | translate}}
+                    </a>
+                </div>
+            </div>
+            <div class="col-12 col-md-10">
+                <h2 class="item-page-title-field">
+                    <ds-metadata-values
+                            [mdValues]="item?.allMetadata(['orgunit.identifier.name'])"></ds-metadata-values>
+                </h2>
+                <div class="row">
+                    <div class="col-12 col-md-6">
+                        <ds-generic-item-page-field [item]="item"
+                                                    [fields]="['orgunit.identifier.dateestablished']"
+                                                    [label]="'orgunit.page.dateestablished'">
+                        </ds-generic-item-page-field>
+                        <ds-generic-item-page-field [item]="item"
+                                                    [fields]="['orgunit.identifier.city']"
+                                                    [label]="'orgunit.page.city'">
+                        </ds-generic-item-page-field>
+                        <ds-generic-item-page-field [item]="item"
+                                                    [fields]="['orgunit.identifier.country']"
+                                                    [label]="'orgunit.page.country'">
+                        </ds-generic-item-page-field>
+                        <ds-generic-item-page-field [item]="item"
+                                                    [fields]="['orgunit.identifier.id']"
+                                                    [label]="'orgunit.page.id'">
+                        </ds-generic-item-page-field>
+                    </div>
+                    <div class="col-12 col-md-6">
+                        <ds-generic-item-page-field [item]="item"
+                                                    [fields]="['orgunit.identifier.description']"
+                                                    [label]="'orgunit.page.description'">
+                        </ds-generic-item-page-field>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+<div class="relationships-item-page" *ngIf="(people$ | async) || (projects$ | async) || (publications$ | async)">
+    <div class="container">
+        <div class="row">
+            <div class="col-12 col-md-4" *ngIf="people$ | async">
+                <ds-related-items
+                        [items]="people$ | async"
+                        [label]="'relationships.isPersonOf' | translate">
+                </ds-related-items>
+            </div>
+            <div class="col-12 col-md-4" *ngIf="projects$ | async">
+                <ds-related-items
+                        [items]="projects$ | async"
+                        [label]="'relationships.isProjectOf' | translate">
+                </ds-related-items>
+            </div>
+            <div class="col-12 col-md-4" *ngIf="publications$ | async">
+                <ds-related-items
+                        [items]="publications$ | async"
+                        [label]="'relationships.isPublicationOf' | translate">
+                </ds-related-items>
+            </div>
+        </div>
+    </div>
+</div>

src/app/+item-page/simple/item-types/orgunit/themes/orgunit.component.mantis.scss

@@ -0,0 +1,30 @@
+@import '../../../../../../styles/variables.scss';
+
+:host {
+    > * {
+        display: block;
+        padding-top: $content-spacing;
+        padding-bottom: $content-spacing;
+    }
+
+    .top-item-page {
+        background-color: $gray-100;
+        margin-top: -$content-spacing;
+    }
+
+    .relationships-item-page {
+        padding-bottom: $content-spacing - $spacer;
+    }
+
+    ds-metadata-field-wrapper {
+        @media screen and (max-width: map-get($grid-breakpoints, md)) {
+            flex: 1;
+            padding-right: $spacer/2;
+        }
+
+        ds-thumbnail {
+            display: block;
+            max-width: $thumbnail-max-width;
+        }
+    }
+}

src/app/+item-page/simple/item-types/person/person.component.ts

@@ -12,8 +12,8 @@ import { filterRelationsByTypeLabel, relationsToItems } from '../shared/item-rel
 @rendersItemType('Person', ItemViewMode.Full)
 @Component({
   selector: 'ds-person',
-  styleUrls: ['./person.component.scss'],
+  styleUrls: ['./themes/person.component.mantis.scss'],
-  templateUrl: './person.component.html'
+  templateUrl: './themes/person.component.mantis.html'
 })
 /**
  * The component for displaying metadata and relations of an item of the type Person

src/app/+item-page/simple/item-types/person/themes/person.component.mantis.html

@@ -0,0 +1,85 @@
+<div class="top-item-page">
+    <div class="container">
+        <div class="row">
+
+            <div class="col-12 col-md-2 d-flex flex-md-column justify-content-between">
+                <ds-metadata-field-wrapper>
+                    <ds-thumbnail [thumbnail]="this.item.getThumbnail() | async"
+                                  [defaultImage]="'assets/images/person-placeholder.png'"></ds-thumbnail>
+                </ds-metadata-field-wrapper>
+                <div>
+                    <a class="btn btn-secondary"
+                       [routerLink]="['/items/' + item.id + '/full']">
+                        {{"item.page.link.full" | translate}}
+                    </a>
+                </div>
+            </div>
+            <div class="col-12 col-md-10">
+                <h2 class="item-page-title-field">
+                    <ds-metadata-values
+                            [mdValues]="item?.allMetadata(['dc.contributor.author'])"></ds-metadata-values>
+                </h2>
+                <div class="row">
+                    <div class="col-12 col-md-6">
+                        <ds-generic-item-page-field [item]="item"
+                                                    [fields]="['person.identifier.email']"
+                                                    [label]="'person.page.email'">
+                        </ds-generic-item-page-field>
+                        <ds-generic-item-page-field [item]="item"
+                                                    [fields]="['person.identifier.orcid']"
+                                                    [label]="'person.page.orcid'">
+                        </ds-generic-item-page-field>
+                        <ds-generic-item-page-field [item]="item"
+                                                    [fields]="['person.identifier.birthdate']"
+                                                    [label]="'person.page.birthdate'">
+                        </ds-generic-item-page-field>
+                        <ds-generic-item-page-field [item]="item"
+                                                    [fields]="['person.identifier.staffid']"
+                                                    [label]="'person.page.staffid'">
+                        </ds-generic-item-page-field>
+                    </div>
+                    <div class="col-12 col-md-6">
+                        <ds-generic-item-page-field [item]="item"
+                                                    [fields]="['person.identifier.jobtitle']"
+                                                    [label]="'person.page.jobtitle'">
+                        </ds-generic-item-page-field>
+                        <ds-generic-item-page-field [item]="item"
+                                                    [fields]="['person.identifier.lastname']"
+                                                    [label]="'person.page.lastname'">
+                        </ds-generic-item-page-field>
+                        <ds-generic-item-page-field [item]="item"
+                                                    [fields]="['person.identifier.firstname']"
+                                                    [label]="'person.page.firstname'">
+                        </ds-generic-item-page-field>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+<div class="relationships-item-page" *ngIf="(projects$ | async) || (orgUnits$ | async)">
+    <div class="container">
+        <div class="row">
+            <div class="col-12 col-md-4" *ngIf="projects$ | async">
+                <ds-related-items
+                        [items]="projects$ | async"
+                        [label]="'relationships.isProjectOf' | translate">
+                </ds-related-items>
+            </div>
+            <div class="col-12 col-md-4" *ngIf="orgUnits$ | async">
+                <ds-related-items
+                        [items]="orgUnits$ | async"
+                        [label]="'relationships.isOrgUnitOf' | translate">
+                </ds-related-items>
+            </div>
+        </div>
+    </div>
+</div>
+<div>
+    <div class="container search-container">
+        <h3 class="h2">{{"item.page.person.search.title" | translate}}</h3>
+    </div>
+<ds-related-entities-search [item]="item"
+                            [relationType]="'isAuthorOfPublication'">
+</ds-related-entities-search>
+</div>

src/app/+item-page/simple/item-types/person/themes/person.component.mantis.scss

@@ -0,0 +1,38 @@
+@import '../../../../../../styles/variables.scss';
+
+:host {
+    > * {
+        display: block;
+        padding-top: $content-spacing;
+        padding-bottom: $content-spacing;
+    }
+
+    .top-item-page {
+        background-color: $gray-100;
+        margin-top: -$content-spacing;
+    }
+
+    .relationships-item-page {
+        padding-bottom: $content-spacing - $spacer;
+    }
+
+    ds-metadata-field-wrapper {
+        @media screen and (max-width: map-get($grid-breakpoints, md)) {
+            flex: 1;
+            padding-right: $spacer/2;
+        }
+
+        ds-thumbnail {
+            display: block;
+            max-width: $thumbnail-max-width;
+        }
+    }
+
+    .search-container {
+        margin-bottom: $spacer;
+        @media screen and (max-width: map-get($grid-breakpoints, lg)) {
+            width: 100%;
+            max-width: none;
+        }
+    }
+}

src/app/+item-page/simple/item-types/project/project.component.ts

@@ -12,8 +12,8 @@ import { filterRelationsByTypeLabel, relationsToItems } from '../shared/item-rel
 @rendersItemType('Project', ItemViewMode.Full)
 @Component({
   selector: 'ds-project',
-  styleUrls: ['./project.component.scss'],
+  styleUrls: ['./themes/project.component.mantis.scss'],
-  templateUrl: './project.component.html'
+  templateUrl: './themes/project.component.mantis.html'
 })
 /**
  * The component for displaying metadata and relations of an item of the type Project

src/app/+item-page/simple/item-types/project/themes/project.component.mantis.html

@@ -0,0 +1,76 @@
+<div class="top-item-page">
+    <div class="container">
+        <div class="row">
+
+            <div class="col-12 col-md-2 d-flex flex-md-column justify-content-between">
+                <ds-metadata-field-wrapper>
+                    <ds-thumbnail [thumbnail]="this.item.getThumbnail() | async"
+                                  [defaultImage]="'assets/images/project-placeholder.png'"></ds-thumbnail>
+                </ds-metadata-field-wrapper>
+                <div>
+                    <a class="btn btn-secondary"
+                       [routerLink]="['/items/' + item.id + '/full']">
+                        {{"item.page.link.full" | translate}}
+                    </a>
+                </div>
+            </div>
+            <div class="col-12 col-md-10">
+                <h2 class="item-page-title-field">
+                    <ds-metadata-values
+                            [mdValues]="item?.allMetadata(['project.identifier.name'])"></ds-metadata-values>
+                </h2>
+                <div class="row">
+                    <div class="col-12 col-md-6">
+                        <ds-generic-item-page-field [item]="item"
+                                                    [fields]="['project.identifier.status']"
+                                                    [label]="'project.page.status'">
+                        </ds-generic-item-page-field>
+                        <ds-generic-item-page-field [item]="item"
+                                                    [fields]="['project.identifier.id']"
+                                                    [label]="'project.page.id'">
+                        </ds-generic-item-page-field>
+                        <ds-generic-item-page-field [item]="item"
+                                                    [fields]="['project.identifier.expectedcompletion']"
+                                                    [label]="'project.page.expectedcompletion'">
+                        </ds-generic-item-page-field>
+                    </div>
+                    <div class="col-12 col-md-6">
+                        <ds-generic-item-page-field [item]="item"
+                                                    [fields]="['project.identifier.description']"
+                                                    [label]="'project.page.description'">
+                        </ds-generic-item-page-field>
+                        <ds-generic-item-page-field [item]="item"
+                                                    [fields]="['project.identifier.keyword']"
+                                                    [label]="'project.page.keyword'">
+                        </ds-generic-item-page-field>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+<div class="relationships-item-page" *ngIf="(people$ | async) || (publications$ | async) || (orgUnits$ | async)">
+    <div class="container">
+        <div class="row">
+            <div class="col-12 col-md-4" *ngIf="people$ | async">
+                <ds-related-items
+                        [items]="people$ | async"
+                        [label]="'relationships.isPersonOf' | translate">
+                </ds-related-items>
+            </div>
+            <div class="col-12 col-md-4" *ngIf="publications$ | async">
+                <ds-related-items
+                        [items]="publications$ | async"
+                        [label]="'relationships.isPublicationOf' | translate">
+                </ds-related-items>
+            </div>
+            <div class="col-12 col-md-4" *ngIf="orgUnits$ | async">
+                <ds-related-items
+                        [items]="orgUnits$ | async"
+                        [label]="'relationships.isOrgUnitOf' | translate">
+                </ds-related-items>
+            </div>
+        </div>
+    </div>
+</div>
+

src/app/+item-page/simple/item-types/project/themes/project.component.mantis.scss

@@ -0,0 +1,30 @@
+@import '../../../../../../styles/variables.scss';
+
+:host {
+    > * {
+        display: block;
+        padding-top: $content-spacing;
+        padding-bottom: $content-spacing;
+    }
+
+    .top-item-page {
+        background-color: $gray-100;
+        margin-top: -$content-spacing;
+    }
+
+    .relationships-item-page {
+        padding-bottom: $content-spacing - $spacer;
+    }
+
+    ds-metadata-field-wrapper {
+        @media screen and (max-width: map-get($grid-breakpoints, md)) {
+            flex: 1;
+            padding-right: $spacer/2;
+        }
+
+        ds-thumbnail {
+            display: block;
+            max-width: $thumbnail-max-width;
+        }
+    }
+}

src/app/+item-page/simple/item-types/publication/publication.component.ts

@@ -15,8 +15,8 @@ import { filterRelationsByTypeLabel, relationsToItems } from '../shared/item-rel
 @rendersItemType(DEFAULT_ITEM_TYPE, ItemViewMode.Full)
 @Component({
   selector: 'ds-publication',
-  styleUrls: ['./publication.component.scss'],
+  styleUrls: ['./themes/publication.component.mantis.scss'],
-  templateUrl: './publication.component.html',
+  templateUrl: './themes/publication.component.mantis.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class PublicationComponent extends ItemComponent implements OnInit {

src/app/+item-page/simple/item-types/publication/themes/publication.component.mantis.html

@@ -0,0 +1,83 @@
+<div class="top-item-page">
+    <div class="container">
+        <div class="row">
+
+            <div class="col-12 col-md-2 d-flex flex-md-column justify-content-between">
+                <ds-metadata-field-wrapper>
+                    <ds-thumbnail [thumbnail]="this.item.getThumbnail() | async"></ds-thumbnail>
+                </ds-metadata-field-wrapper>
+                <div>
+                    <a class="btn btn-secondary"
+                       [routerLink]="['/items/' + item.id + '/full']">
+                        {{"item.page.link.full" | translate}}
+                    </a>
+                </div>
+            </div>
+            <div class="col-12 col-md-10">
+                <ds-item-page-title-field [item]="item"></ds-item-page-title-field>
+                <div class="row">
+                    <div class="col-12 col-md-6">
+                        <ds-metadata-representation-list
+                                [label]="'relationships.isAuthorOf' | translate"
+                                [representations]="authors$ | async">
+                        </ds-metadata-representation-list>
+                        <ds-item-page-file-section [item]="item"></ds-item-page-file-section>
+                        <ds-item-page-date-field [item]="item"></ds-item-page-date-field>
+                        <ds-item-page-author-field *ngIf="!(authors$ | async)"
+                                                   [item]="item"></ds-item-page-author-field>
+                        <ds-generic-item-page-field [item]="item"
+                                                    [fields]="['journal.title']"
+                                                    [label]="'publication.page.journal-title'">
+                        </ds-generic-item-page-field>
+                        <ds-generic-item-page-field [item]="item"
+                                                    [fields]="['journal.identifier.issn']"
+                                                    [label]="'publication.page.journal-issn'">
+                        </ds-generic-item-page-field>
+                        <ds-generic-item-page-field [item]="item"
+                                                    [fields]="['journalvolume.identifier.name']"
+                                                    [label]="'publication.page.volume-title'">
+                        </ds-generic-item-page-field>
+                    </div>
+                    <div class="col-12 col-md-6">
+                        <ds-item-page-abstract-field [item]="item"></ds-item-page-abstract-field>
+                        <ds-generic-item-page-field [item]="item"
+                                                    [fields]="['dc.subject']"
+                                                    [separator]="','"
+                                                    [label]="'item.page.subject'">
+                        </ds-generic-item-page-field>
+                        <ds-generic-item-page-field [item]="item"
+                                                    [fields]="['dc.identifier.citation']"
+                                                    [label]="'item.page.citation'">
+                        </ds-generic-item-page-field>
+                        <ds-item-page-uri-field [item]="item"></ds-item-page-uri-field>
+                        <ds-item-page-collections [item]="item"></ds-item-page-collections>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+<div class="relationships-item-page" *ngIf="(projects$ | async) || (orgUnits$ | async) || (journalIssues$ | async)">
+    <div class="container">
+        <div class="row">
+            <div class="col-12 col-md-4" *ngIf="projects$ | async">
+                <ds-related-items
+                        [items]="projects$ | async"
+                        [label]="'relationships.isProjectOf' | translate">
+                </ds-related-items>
+            </div>
+            <div class="col-12 col-md-4" *ngIf="orgUnits$ | async">
+                <ds-related-items
+                        [items]="orgUnits$ | async"
+                        [label]="'relationships.isOrgUnitOf' | translate">
+                </ds-related-items>
+            </div>
+            <div class="col-12 col-md-4" *ngIf="journalIssues$ | async">
+                <ds-related-items
+                        [items]="journalIssues$ | async"
+                        [label]="'relationships.isJournalIssueOf' | translate">
+                </ds-related-items>
+            </div>
+        </div>
+    </div>
+</div>

src/app/+item-page/simple/item-types/publication/themes/publication.component.mantis.scss

@@ -0,0 +1,30 @@
+@import '../../../../../../styles/variables.scss';
+
+:host {
+    > * {
+        display: block;
+        padding-top: $content-spacing;
+        padding-bottom: $content-spacing;
+    }
+
+    .top-item-page {
+        background-color: $gray-100;
+        margin-top: -$content-spacing;
+    }
+
+    .relationships-item-page {
+        padding-bottom: $content-spacing - $spacer;
+    }
+
+    ds-metadata-field-wrapper {
+        @media screen and (max-width: map-get($grid-breakpoints, md)) {
+            flex: 1;
+            padding-right: $spacer/2;
+        }
+
+        ds-thumbnail {
+            display: block;
+            max-width: $thumbnail-max-width;
+        }
+    }
+}

src/app/app.component.scss

@@ -31,6 +31,8 @@ body {
 .main-content {
   z-index: $main-z-index;
   flex: 1 1 100%;
+  margin-top: $content-spacing;
+  margin-bottom: $content-spacing;
 }
 
 .alert.hide {

src/app/shared/object-list/item-list-element/item-types/publication/publication-list-element.component.html

@@ -12,6 +12,7 @@
                   class="item-list-authors">
                     <span *ngFor="let author of allMetadataValues(['dc.contributor.author', 'dc.creator', 'dc.contributor.*']); let last=last;">
                         <span [innerHTML]="author"><span [innerHTML]="author"></span></span>
+                        <span *ngIf="!last">; </span>
                     </span>
             </span>
         </ds-truncatable-part>

src/styles/_custom_variables.scss

@@ -32,3 +32,5 @@ $submission-sections-margin-bottom: .5rem !default;
 $edit-item-button-min-width: 100px;
 $edit-item-metadata-field-width: 190px;
 $edit-item-language-field-width: 43px;
+
+$thumbnail-max-width: 175px;