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

#150 Removal of inherited css + restyling using bootstrap classes

Browse Source
This commit is contained in:
Jonas Van Goolen
2017-11-13 13:37:02 +01:00
parent 68dd411ae7
commit 7ae8950be5
21 changed files with 58 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@@ -103,7 +103,6 @@
"methods": "1.1.2",
"morgan": "1.9.0",
"ngx-pagination": "3.0.1",
"object-fit-images": "^3.2.3",
"pem": "1.12.3",
"reflect-metadata": "0.1.10",
"rxjs": "5.4.3",

4
src/app/shared/object-grid/collection-grid-element/collection-grid-element.component.html
View File

@@ -3,10 +3,12 @@
<ds-comcol-page-logo [logo]="object.logo">
</ds-comcol-page-logo>
</a>
<div class="card-block">
<div class="card-body">
<h4 class="card-title">{{object.name}}</h4>
<p *ngIf="object.shortDescription" class="card-text">{{object.shortDescription}}</p>
<div class="text-center">
<a [routerLink]="['/collections/' + object.id]" class="lead btn btn-primary viewButton">View</a>
</div>
</div>
</div>

2
src/app/shared/object-grid/collection-grid-element/collection-grid-element.component.scss
View File

@@ -1,2 +1,2 @@
@import '../../../../styles/variables';
@import '../grid-card-styling';

4
src/app/shared/object-grid/community-grid-element/community-grid-element.component.html
View File

@@ -4,9 +4,11 @@
<ds-comcol-page-logo [logo]="object.logo">
</ds-comcol-page-logo>
</a>
<div class="card-block">
<div class="card-body">
<h4 class="card-title">{{object.name}}</h4>
<p *ngIf="object.shortDescription" class="card-text">{{object.shortDescription}}</p>
<div class="text-center">
<a [routerLink]="['/communities/' + object.id]" class="lead btn btn-primary viewButton">View</a>
</div>
</div>
</div>

2
src/app/shared/object-grid/community-grid-element/community-grid-element.component.scss
View File

@@ -1,2 +1,2 @@
@import '../../../../styles/variables';
@import '../grid-card-styling';

45
src/app/shared/object-grid/grid-card-styling.scss
View File

@@ -1,45 +0,0 @@
@import '../../../styles/custom_variables';
.card-title{
line-height: $line-height-base;
height:$headings-line-height;
font-size:$headings-font-size;
overflow: hidden;
text-overflow: ellipsis;
}
.card-text {
overflow: hidden;
text-overflow: ellipsis;
line-height: $line-height-base;
margin-bottom:$card-block-margin-base*2;
}
.card-text.item-authors {
height: $line-height-base;
}
.card-text.item-abstract {
height: $content-line-height;
}
.viewButton{
display:table;
margin:auto;
width: $card-button-width;
}
.card{
margin-bottom: $card-block-margin-base *3;
height: $card-height-percentage;
}
.card-img-top ::ng-deep img
{
height: $card-thumbnail-height;
width: 100%;
object-fit: cover;
}
.card-block{
margin: $card-block-margin-base;
}

4
src/app/shared/object-grid/item-grid-element/item-grid-element.component.html
View File

@@ -4,7 +4,7 @@
<ds-grid-thumbnail [thumbnail]="object.getThumbnail()">
</ds-grid-thumbnail>
</a>
<div class="card-block">
<div class="card-body">
<h4 class="card-title">{{object.findMetadata('dc.title')}}</h4>
<p *ngIf="object.filterMetadata(['dc.contributor.author', 'dc.creator', 'dc.contributor.*']);" class="item-authors card-text text-muted">
@@ -16,6 +16,8 @@
<p *ngIf="object.findMetadata('dc.description.abstract')" class="item-abstract card-text">{{object.findMetadata("dc.description.abstract") | dsTruncate:[200] }}</p>
<div class="text-center">
<a [routerLink]="['/items/' + object.id]" class="lead btn btn-primary viewButton">View</a>
</div>
</div>
</div>

2
src/app/shared/object-grid/item-grid-element/item-grid-element.component.scss
View File

@@ -1,2 +1,2 @@
@import '../../../../styles/variables';
@import '../grid-card-styling';

1
src/app/shared/object-grid/object-grid-element/object-grid-element.component.scss
View File

@@ -1,5 +1,4 @@
@import '../../../../styles/variables';
@import '../grid-card-styling';
:host {
display: block;
margin-bottom: $spacer;

2
src/app/shared/object-grid/object-grid.component.html
View File

@@ -11,7 +11,7 @@
(sortFieldChange)="onSortDirectionChange($event)"
(paginationChange)="onPaginationChange($event)">
<div class="row " *ngIf="objects.hasSucceeded | async" @fadeIn>
<div class="col-lg-4 col-sm-4 col-xs-12 "
<div class="col-lg-4 col-sm-6 col-xs-12 "
*ngFor="let object of (objects.payload | async) | paginate: { itemsPerPage: (pageInfo | async)?.elementsPerPage, currentPage: (pageInfo | async)?.currentPage, totalItems: (pageInfo | async)?.totalElements }">
<ds-wrapper-grid-element [object]="object"></ds-wrapper-grid-element>
</div>

22
src/app/shared/object-grid/object-grid.component.scss
View File

@@ -1 +1,23 @@
@import '../../../styles/variables';
ds-wrapper-grid-element ::ng-deep {
div.thumbnail > img {
height: $card-thumbnail-height;
width: 100%;
}
.card-title {
line-height: $headings-line-height;
height: ($headings-line-height*3) +em;
overflow: hidden;
text-overflow: ellipsis;
}
.item-abstract {
line-height: $line-height-base;
height: ($line-height-base*5)+em;
overflow: hidden;
text-overflow: ellipsis;
}
div.card {
margin-bottom: 20px;
}
}

5
src/app/shared/object-grid/search-result-grid-element/collection-search-result/collection-search-result-grid-element.component.html
View File

@@ -3,10 +3,11 @@
<ds-comcol-page-logo [logo]="dso.logo">
</ds-comcol-page-logo>
</a>
<div class="card-block">
<div class="card-body">
<h4 class="card-title">{{dso.name}}</h4>
<p *ngIf="dso.shortDescription" class="card-text">{{dso.shortDescription}}</p>
<div class="text-center">
<a [routerLink]="['/collections/' + dso.id]" class="lead btn btn-primary viewButton">View</a>
</div>
</div>
</div>

1
src/app/shared/object-grid/search-result-grid-element/collection-search-result/collection-search-result-grid-element.component.scss
View File

@@ -1,2 +1 @@
@import '../../../../../styles/variables';
@import '../../grid-card-styling';

4
src/app/shared/object-grid/search-result-grid-element/community-search-result/community-search-result-grid-element.component.html
View File

@@ -4,9 +4,11 @@
<ds-comcol-page-logo [logo]="dso.logo">
</ds-comcol-page-logo>
</a>
<div class="card-block">
<div class="card-body">
<h4 class="card-title">{{dso.name}}</h4>
<p *ngIf="dso.shortDescription" class="card-text">{{dso.shortDescription}}</p>
<div class="text-center">
<a [routerLink]="['/communities/' + dso.id]" class="lead btn btn-primary viewButton">View</a>
</div>
</div>
</div>

2
src/app/shared/object-grid/search-result-grid-element/community-search-result/community-search-result-grid-element.component.scss
View File

@@ -1,2 +1,2 @@
@import '../../../../../styles/variables';
@import '../../grid-card-styling';

8
src/app/shared/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.html
View File

@@ -1,10 +1,10 @@
<div class="card">
<a [routerLink]="['/items/' + dso.id]" class="card-img-top">
<a [routerLink]="['/items/' + dso.id]" class="card-img-top full-width">
<ds-grid-thumbnail [thumbnail]="dso.getThumbnail()">
</ds-grid-thumbnail>
</a>
<div class="card-block">
<p class="card-title" [innerHTML]="dso.findMetadata('dc.title')"></p>
<div class="card-body">
<h4 class="card-title" [innerHTML]="dso.findMetadata('dc.title')"></h4>
<p *ngIf="dso.filterMetadata(['dc.contributor.author', 'dc.creator', 'dc.contributor.*'])"
class="item-authors card-text text-muted">
@@ -25,8 +25,10 @@
<p class="item-abstract card-text" [innerHTML]="getFirstValue('dc.description.abstract') | dsTruncate:[200]">
</p>
<div class="text-center">
<a [routerLink]="['/items/' + dso.id]" class="lead btn btn-primary viewButton">View</a>
</div>
</div>
</div>

2
src/app/shared/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.scss
View File

@@ -1,2 +1,2 @@
@import '../../../../../styles/variables';
@import '../../grid-card-styling';

1
src/app/shared/object-grid/search-result-grid-element/search-result-grid-element.component.scss
View File

@@ -1,5 +1,4 @@
@import '../../../../styles/variables';
@import '../grid-card-styling';
:host {
/deep/ em {
font-weight: bold;

2
src/app/shared/object-grid/wrapper-grid-element/wrapper-grid-element.component.scss
View File

@@ -1,2 +1,2 @@
@import '../../../../styles/variables';
@import '../grid-card-styling';

2
src/styles/_custom_variables.scss
View File

@@ -2,3 +2,5 @@ $content-spacing: $spacer * 1.5;
$button-height: $input-btn-padding-y * 2 + $input-btn-line-height + calculateRem($input-btn-border-width*2);
$card-height-percentage:98%;
$card-thumbnail-height:240px;

4
yarn.lock
View File

@@ -4804,10 +4804,6 @@ object-copy@^0.1.0:
define-property "^0.2.5"
kind-of "^3.0.3"
object-fit-images@^3.2.3:
version "3.2.3"
resolved "https://registry.yarnpkg.com/object-fit-images/-/object-fit-images-3.2.3.tgz#4089f6d0070a3b5563d3c1ab6f1b28d61331f0ac"
object-keys@^1.0.8:
version "1.0.11"
resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.0.11.tgz#c54601778ad560f1142ce0e01bcca8b56d13426d"