61950: Merged theming into configurable entities and started working on the entity detail pages

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

@@ -23,7 +23,7 @@ import { ItemViewMode } from '../../shared/items/item-type-decorator';
 @Component({
   selector: 'ds-item-page',
   styleUrls: ['./item-page.component.scss'],
-  templateUrl: './item-page.component.html',
+  templateUrl: './themes/item-page.component.mantis.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
   animations: [fadeInOut]
 })

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

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

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

@@ -0,0 +1,62 @@
+<div class="top-item-page">
+    <div class="container">
+        <div class="row">
+
+            <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>
+                <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 class="item-page-fields" [item]="item"
+                                                    [fields]="['journal.identifier.issn']"
+                                                    [label]="'journal.page.issn'">
+                        </ds-generic-item-page-field>
+                        <ds-generic-item-page-field class="item-page-fields" [item]="item"
+                                                    [fields]="['journal.publisher']"
+                                                    [label]="'journal.page.publisher'">
+                        </ds-generic-item-page-field>
+                        <ds-generic-item-page-field [item]="item"
+                                                    [fields]="['journal.contributor.editor']"
+                                                    [label]="'journal.page.editor'">
+                        </ds-generic-item-page-field>
+                    </div>
+                    <div class="col-12 col-md-6">
+                        <ds-generic-item-page-field class="item-page-fields" [item]="item"
+                                                    [fields]="['journal.identifier.description']"
+                                                    [label]="'journal.page.description'">
+                        </ds-generic-item-page-field>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+<div>
+    <div class="container">
+        <div class="row">
+            <div class="col-12 col-md-6">
+                <ds-related-items
+                        [items]="volumes$ | async"
+                        [label]="'relationships.isVolumeOf' | translate">
+                </ds-related-items>
+            </div>
+        </div>
+    </div>
+</div>
+<ds-related-entities-search [item]="item"
+                            [relationType]="'isJournalOfPublication'">
+</ds-related-entities-search>

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

@@ -0,0 +1,11 @@
+@import '../../../../../../styles/variables.scss';
+:host {
+    > * {
+        display: block;
+        padding-top: $spacer;
+        padding-bottom: $spacer;
+    }
+    .top-item-page {
+        background-color: $gray-100;
+    }
+}

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

@@ -0,0 +1,9 @@
+<div *ngVar="(itemRD$ | async) as itemRD">
+  <div class="item-page" *ngIf="itemRD?.hasSucceeded" @fadeInOut>
+    <div *ngIf="itemRD?.payload as item">
+      <ds-item-type-switcher [object]="item" [viewMode]="viewMode"></ds-item-type-switcher>
+    </div>
+  </div>
+  <ds-error *ngIf="itemRD?.hasFailed" message="{{'error.item' | translate}}"></ds-error>
+  <ds-loading *ngIf="itemRD?.isLoading" message="{{'loading.item' | translate}}"></ds-loading>
+</div>

src/app/app.component.scss

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

src/app/thumbnail/themes/thumbnail.component.mantis.scss

@@ -0,0 +1,4 @@
+@import '../../../styles/variables.scss';
+img {
+  width: 100%;
+}

src/app/thumbnail/thumbnail.component.ts

@@ -9,7 +9,7 @@ import { Bitstream } from '../core/shared/bitstream.model';
 
 @Component({
   selector: 'ds-thumbnail',
-  styleUrls: ['./thumbnail.component.scss'],
+  styleUrls: ['./themes/thumbnail.component.mantis.scss'],
   templateUrl: './thumbnail.component.html'
 })
 export class ThumbnailComponent {
@@ -21,7 +21,7 @@ export class ThumbnailComponent {
   /**
    * The default 'holder.js' image
    */
-  @Input() defaultImage? = 'data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2293%22%20height%3D%22120%22%20viewBox%3D%220%200%2093%20120%22%20preserveAspectRatio%3D%22none%22%3E%3C!--%0ASource%20URL%3A%20holder.js%2F93x120%3Ftext%3DNo%20Thumbnail%0ACreated%20with%20Holder.js%202.8.2.%0ALearn%20more%20at%20http%3A%2F%2Fholderjs.com%0A(c)%202012-2015%20Ivan%20Malopinsky%20-%20http%3A%2F%2Fimsky.co%0A--%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%3C!%5BCDATA%5B%23holder_1543e460b05%20text%20%7B%20fill%3A%23AAAAAA%3Bfont-weight%3Abold%3Bfont-family%3AArial%2C%20Helvetica%2C%20Open%20Sans%2C%20sans-serif%2C%20monospace%3Bfont-size%3A10pt%20%7D%20%5D%5D%3E%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_1543e460b05%22%3E%3Crect%20width%3D%2293%22%20height%3D%22120%22%20fill%3D%22%23EEEEEE%22%2F%3E%3Cg%3E%3Ctext%20x%3D%2235.6171875%22%20y%3D%2257%22%3ENo%3C%2Ftext%3E%3Ctext%20x%3D%2210.8125%22%20y%3D%2272%22%3EThumbnail%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E';
+  @Input() defaultImage? = 'data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2293%22%20height%3D%22120%22%20viewBox%3D%220%200%2093%20120%22%20preserveAspectRatio%3D%22none%22%3E%3C!--%0ASource%20URL%3A%20holder.js%2F93x120%3Ftext%3DNo%20Thumbnail%0ACreated%20with%20Holder.js%202.8.2.%0ALearn%20more%20at%20http%3A%2F%2Fholderjs.com%0A(c)%202012-2015%20Ivan%20Malopinsky%20-%20http%3A%2F%2Fimsky.co%0A--%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%3C!%5BCDATA%5B%23holder_1543e460b05%20text%20%7B%20fill%3A%23AAAAAA%3Bfont-weight%3Abold%3Bfont-family%3AArial%2C%20Helvetica%2C%20Open%20Sans%2C%20sans-serif%2C%20monospace%3Bfont-size%3A10pt%20%7D%20%5D%5D%3E%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_1543e460b05%22%3E%3Crect%20width%3D%2293%22%20height%3D%22120%22%20fill%3D%22%23FFFFFF%22%2F%3E%3Cg%3E%3Ctext%20x%3D%2235.6171875%22%20y%3D%2257%22%3ENo%3C%2Ftext%3E%3Ctext%20x%3D%2210.8125%22%20y%3D%2272%22%3EThumbnail%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E';
 
   errorHandler(event) {
     event.currentTarget.src = this.defaultImage;

src/styles/themes/_custom_variables.mantis.scss

@@ -1,2 +1,2 @@
 $banner-text-background: rgba(0, 0, 0, 0.35);
-$banner-background-gradient-width: 300px;
+$banner-background-gradient-width: 300px;