Skip to content

Commit

Permalink
Merge pull request #389 from atmire/Theme-for-item-pages
Browse files Browse the repository at this point in the history
Preview release theme, extended for Configurable Entities
  • Loading branch information
tdonohue committed May 14, 2019
2 parents 0affb6f + df83ad9 commit 9c59a9f
Show file tree
Hide file tree
Showing 88 changed files with 1,458 additions and 177 deletions.
1 change: 1 addition & 0 deletions package.json
Expand Up @@ -224,6 +224,7 @@
"webpack-bundle-analyzer": "^2.13.1",
"webpack-dev-middleware": "3.2.0",
"webpack-dev-server": "^3.1.5",
"webpack-import-glob-loader": "^1.6.3",
"webpack-merge": "4.1.4",
"webpack-node-externals": "1.7.2"
}
Expand Down
10 changes: 10 additions & 0 deletions resources/i18n/en.json
Expand Up @@ -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": {
Expand Down
Binary file added resources/images/banner.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
37 changes: 37 additions & 0 deletions resources/images/dspace-logo-monochrome.svg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion src/app/+admin/admin-sidebar/admin-sidebar.component.html
@@ -1,4 +1,4 @@
<nav @slideHorizontal class="navbar navbar-dark bg-dark p-0"
<nav @slideHorizontal class="navbar navbar-dark p-0"
[ngClass]="{'active': sidebarOpen, 'inactive': sidebarClosed}"
[@slideSidebar]="{
value: (!(sidebarExpanded | async) ? 'collapsed' : 'expanded'),
Expand Down
3 changes: 2 additions & 1 deletion src/app/+admin/admin-sidebar/admin-sidebar.component.scss
Expand Up @@ -8,6 +8,7 @@ $icon-z-index: 10;
height: 100vh;
flex: 1 1 auto;
nav {
background-color: $admin-sidebar-bg;
height: 100%;
flex-direction: column;
> div {
Expand Down Expand Up @@ -44,7 +45,7 @@ $icon-z-index: 10;
.sidebar-section {
display: flex;
align-content: stretch;
background-color: $dark;
background-color: $admin-sidebar-bg;
.nav-item {
padding-top: $spacer;
padding-bottom: $spacer;
Expand Down
16 changes: 16 additions & 0 deletions src/app/+home-page/home-news/home-news.component.default.scss
@@ -0,0 +1,16 @@
@import '../../../styles/variables.scss';

:host {
display: block;
margin-top: -$content-spacing;
margin-bottom: -$content-spacing;
}

.display-3 {
word-break: break-word;
}

.dspace-logo {
height: 110px;
width: 110px;
}
18 changes: 2 additions & 16 deletions src/app/+home-page/home-news/home-news.component.scss
@@ -1,16 +1,2 @@
@import '../../../styles/variables.scss';

:host {
display: block;
margin-top: -$content-spacing;
margin-bottom: -$content-spacing;
}

.display-3 {
word-break: break-word;
}

.dspace-logo {
height: 110px;
width: 110px;
}
@import './home-news.component.default';
@import './themes/*.scss';
3 changes: 2 additions & 1 deletion src/app/+home-page/home-news/home-news.component.ts
Expand Up @@ -3,7 +3,8 @@ import { Component } from '@angular/core';
@Component({
selector: 'ds-home-news',
styleUrls: ['./home-news.component.scss'],
templateUrl: './home-news.component.html'
// templateUrl: './home-news.component.html',
templateUrl: './themes/home-news.component.mantis.html'
})

/**
Expand Down
@@ -0,0 +1,21 @@
<div class="jumbotron jumbotron-fluid">
<div class="d-flex flex-wrap">
<div>
<h1 class="display-3">DSpace 7</h1>
<p class="lead">DSpace is the world leading open source repository platform that enables
organisations to:</p>
</div>
</div>
<ul>
<li>easily ingest documents, audio, video, datasets and their corresponding Dublin Core
metadata
</li>
<li>open up this content to local and global audiences, thanks to the OAI-PMH interface and
Google Scholar optimizations
</li>
<li>issue permanent urls and trustworthy identifiers, including optional integrations with
handle.net and DataCite DOI
</li>
</ul>
<p>Join an international community of <A HREF="https://wiki.duraspace.org/display/DSPACE/DSpace+Positioning" TARGET="_NEW">leading institutions using DSpace</A>.</p>
</div>
@@ -0,0 +1,19 @@
@import '../../../../styles/variables.scss';
@import '../../../../styles/mixins.scss';

:host-context(.mantis) {
$home-news-link-color: $green !default;
$home-news-link-color: darken($home-news-link-color, 15%) !default;

.jumbotron {
background-color: transparent;
}

a {
color: $home-news-link-color;

@include hover {
color: $home-news-link-color;
}
}
}
3 changes: 3 additions & 0 deletions src/app/+home-page/home-page.component.default.scss
@@ -0,0 +1,3 @@
:host {
//color: red;
}
3 changes: 2 additions & 1 deletion src/app/+home-page/home-page.component.scss
@@ -1 +1,2 @@
@import '../../styles/variables.scss';
@import './home-page.component.default';
@import './themes/*.scss';
3 changes: 2 additions & 1 deletion src/app/+home-page/home-page.component.ts
Expand Up @@ -3,7 +3,8 @@ import { Component } from '@angular/core';
@Component({
selector: 'ds-home-page',
styleUrls: ['./home-page.component.scss'],
templateUrl: './home-page.component.html'
// templateUrl: './home-page.component.html'
templateUrl: './themes/home-page.component.mantis.html'
})
export class HomePageComponent {
}
10 changes: 10 additions & 0 deletions src/app/+home-page/themes/home-page.component.mantis.html
@@ -0,0 +1,10 @@
<div class="background-image">
<div class="container">
<ds-home-news></ds-home-news>
<ds-search-form class="d-block pb-3" [large]="true" [brandColor]="'success'"></ds-search-form>
</div>
<small class="credits">Photo by <a href="https://www.pexels.com/@inspiredimages">@inspiredimages</a></small>
</div>
<div class="container pt-3">
<ds-top-level-community-list></ds-top-level-community-list>
</div>
52 changes: 52 additions & 0 deletions src/app/+home-page/themes/home-page.component.mantis.scss
@@ -0,0 +1,52 @@
@import '../../../styles/variables.scss';

:host-context(.mantis) {
div.background-image {
color: white;
background-color: $info;
position: relative;
background-position-y: -200px;
background-image: url('/assets/images/banner.jpg');
background-size: cover;
@media screen and (max-width: map-get($grid-breakpoints, lg)) {
background-position-y: 0;
}

.container {
position: relative;
text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6);
&:before, &:after {
content: '';
display: block;
width: $banner-background-gradient-width;
height: 100%;
top: 0;
position: absolute;
}

&:before {
background: linear-gradient(to left, $banner-text-background, transparent);
left: -$banner-background-gradient-width;

}

&:after {
background: linear-gradient(to right, $banner-text-background, transparent);
right: -$banner-background-gradient-width;
}
background-color: $banner-text-background;
}


small.credits {
a {
color: inherit;
}
opacity: 0.3;
position: absolute;
right: $spacer;
bottom: 0;
}

}
}
2 changes: 1 addition & 1 deletion src/app/+item-page/simple/item-page.component.ts
Expand Up @@ -25,7 +25,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]
})
Expand Down
Expand Up @@ -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'],
templateUrl: './journal-issue.component.html'
styleUrls: ['./themes/journal-issue.component.mantis.scss'],
templateUrl: './themes/journal-issue.component.mantis.html'
})
/**
* The component for displaying metadata and relations of an item of the type Journal Issue
Expand Down
@@ -0,0 +1,73 @@
<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">
{{'journalissue.page.titleprefix' | translate}}
<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>
@@ -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;
}
}
}
Expand Up @@ -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'],
templateUrl: './journal-volume.component.html'
styleUrls: ['./themes/journal-volume.component.mantis.scss'],
templateUrl: './themes/journal-volume.component.mantis.html'
})
/**
* The component for displaying metadata and relations of an item of the type Journal Volume
Expand Down

0 comments on commit 9c59a9f

Please sign in to comment.