hazza/dspace-angular
1
0
Fork 1
mirror of https://github.com/DSpace/dspace-angular.git synced 2025-10-07 10:04:11 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
lotte
2019-04-24 16:45:52 +02:00
parent 55b61931cb
commit e9ff808496
9 changed files with 92 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/+item-page/simple/item-page.component.ts
View File

@@ -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]
})

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

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

62
src/app/+item-page/simple/item-types/journal/themes/journal.component.mantis.html Normal file
View File

@@ -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>

11
src/app/+item-page/simple/item-types/journal/themes/journal.component.mantis.scss Normal file
View File

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

9
src/app/+item-page/simple/themes/item-page.component.mantis.html Normal file
View File

@@ -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>

2
src/app/app.component.scss
View File

@@ -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 {

4
src/app/thumbnail/themes/thumbnail.component.mantis.scss Normal file
View File

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

4
src/app/thumbnail/thumbnail.component.ts
View File

@@ -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;

2
src/styles/themes/_custom_variables.mantis.scss
View File

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