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)" (sortDirectionChange)="onSortDirectionChange($event)"
(sortFieldChange)="onSortFieldChange($event)" (sortFieldChange)="onSortFieldChange($event)"
(paginationChange)="onPaginationChange($event)"> (paginationChange)="onPaginationChange($event)">
<div class="card-columns" *ngIf="objects?.hasSucceeded"> <div class="card-columns row" *ngIf="objects?.hasSucceeded">
<div class="card-column" *ngFor="let column of (columns$ | async)" @fadeIn> <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"> <div class="card-element" *ngFor="let object of column">
<ds-wrapper-grid-element [object]="object"></ds-wrapper-grid-element> <ds-wrapper-grid-element [object]="object"></ds-wrapper-grid-element>
</div> </div>

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

@@ -1,43 +1,26 @@
@import '../../../styles/variables'; @import '../../../styles/variables';
@import '../../../styles/mixins'; @import '../../../styles/mixins';
$ds-wrapper-grid-spacing: $spacer/2;
ds-wrapper-grid-element ::ng-deep { ds-wrapper-grid-element ::ng-deep {
div.thumbnail > img { div.thumbnail > img {
height: $card-thumbnail-height; height: $card-thumbnail-height;
width: 100%; width: 100%;
} }
div.card { 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 { .card-columns {
display: flex; margin-left: -$ds-wrapper-grid-spacing;
flex-wrap: wrap; margin-right: -$ds-wrapper-grid-spacing;
margin-left: -$gutter;
margin-top: -$gutter;
.card-column { .card-column {
flex: 1 0 $min-width; padding-left: $ds-wrapper-grid-spacing;
margin-left: $gutter; padding-right: $ds-wrapper-grid-spacing;
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});
}
} }
} }

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

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

4
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"> <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"> <a [routerLink]="['/items/' + dso.id]" class="card-img-top full-width">
<div> <div>
<ds-grid-thumbnail [thumbnail]="dso.getThumbnail()"> <ds-grid-thumbnail [thumbnail]="dso.getThumbnail()">
@@ -30,4 +30,4 @@
</div> </div>
</div> </div>
</div> </div>
</ds-truncatable> </ds-truncatable>