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

replaced css with bootstrap classes

Browse Source
This commit is contained in:
Art Lowel
2018-04-26 13:27:15 +02:00
parent cb4c062ad9
commit 5e2dc51828
4 changed files with 15 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -10,8 +10,8 @@
(sortDirectionChange)="onSortDirectionChange($event)"
(sortFieldChange)="onSortFieldChange($event)"
(paginationChange)="onPaginationChange($event)">
<div class="card-columns" *ngIf="objects?.hasSucceeded">
<div class="card-column" *ngFor="let column of (columns$ | async)" @fadeIn>
<div class="card-columns row" *ngIf="objects?.hasSucceeded">
<div class="card-column col col-sm-6 col-lg-4" *ngFor="let column of (columns$ | async)" @fadeIn>
<div class="card-element" *ngFor="let object of column">
<ds-wrapper-grid-element [object]="object"></ds-wrapper-grid-element>
</div>

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

@@ -1,43 +1,26 @@
@import '../../../styles/variables';
@import '../../../styles/mixins';
$ds-wrapper-grid-spacing: $spacer/2;
ds-wrapper-grid-element ::ng-deep {
div.thumbnail > img {
height: $card-thumbnail-height;
width: 100%;
}
div.card {
margin-bottom: $spacer;
margin-top: $ds-wrapper-grid-spacing;
margin-bottom: $ds-wrapper-grid-spacing;
}
}
$gutter: ($grid-gutter-width / 2);
$min-width: 300px;
$max-cols: 3;
.card-columns {
display: flex;
flex-wrap: wrap;
margin-left: -$gutter;
margin-top: -$gutter;
margin-left: -$ds-wrapper-grid-spacing;
margin-right: -$ds-wrapper-grid-spacing;
.card-column {
flex: 1 0 $min-width;
margin-left: $gutter;
margin-top: $gutter;
@for $i from 2 through $max-cols {
$screen-width: ($min-width*$i)+($gutter*$i);
$column-width: (100%/$i);
@media (min-width: $screen-width) {
max-width: calc(#{$column-width} - #{$gutter});
}
}
$column-width: (100%/$max-cols);
@media (min-width: $min-width*$max-cols) {
min-width: calc(#{$column-width} - #{$gutter});
}
padding-left: $ds-wrapper-grid-spacing;
padding-right: $ds-wrapper-grid-spacing;
}
}

5
src/app/shared/object-grid/object-grid.component.ts
View File

@@ -8,7 +8,7 @@ import {
} from '@angular/core';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import { Observable } from 'rxjs/Observable';
import { map } from 'rxjs/operators';
import { distinctUntilChanged, map } from 'rxjs/operators';
import { SortDirection, SortOptions } from '../../core/cache/models/sort-options.model';
import { PaginatedList } from '../../core/data/paginated-list';
@@ -104,7 +104,8 @@ export class ObjectGridComponent implements OnInit {
return 1;
}
}
})
}),
distinctUntilChanged()
).startWith(3);
this.columns$ = Observable.combineLatest(

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

@@ -1,5 +1,5 @@
<ds-truncatable [id]="dso.id">
<div class="card mt-1" [@focusShadow]="(isCollapsed() | async)?'blur':'focus'">
<div class="card" [@focusShadow]="(isCollapsed() | async)?'blur':'focus'">
<a [routerLink]="['/items/' + dso.id]" class="card-img-top full-width">
<div>
<ds-grid-thumbnail [thumbnail]="dso.getThumbnail()">