mirror of
https://github.com/DSpace/dspace-angular.git
synced 2025-10-07 10:04:11 +00:00
101198: in place links replaced with buttons
This commit is contained in:
lotte
@@ -8,10 +8,10 @@
|
||||
<span class="fa fa-chevron-right invisible" aria-hidden="true"></span>
|
||||
</button>
|
||||
<div class="align-middle pt-2">
|
||||
<a *ngIf="node!==loadingNode" [routerLink]="[]" (click)="getNextPage(node)"
|
||||
<button *ngIf="node!==loadingNode" (click)="getNextPage(node)"
|
||||
class="btn btn-outline-primary btn-sm" role="button">
|
||||
<i class="fas fa-angle-down"></i> {{ 'communityList.showMore' | translate }}
|
||||
</a>
|
||||
</button>
|
||||
<ds-themed-loading *ngIf="node===loadingNode && dataSource.loading$ | async" class="ds-themed-loading"></ds-themed-loading>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -16,6 +16,7 @@ import { of as observableOf } from 'rxjs';
|
||||
import { By } from '@angular/platform-browser';
|
||||
import { isEmpty, isNotEmpty } from '../../shared/empty.util';
|
||||
import { FlatNode } from '../flat-node.model';
|
||||
import { RouterLinkWithHref } from '@angular/router';
|
||||
|
||||
describe('CommunityListComponent', () => {
|
||||
let component: CommunityListComponent;
|
||||
@@ -194,7 +195,7 @@ describe('CommunityListComponent', () => {
|
||||
}),
|
||||
CdkTreeModule,
|
||||
RouterTestingModule],
|
||||
declarations: [CommunityListComponent],
|
||||
declarations: [CommunityListComponent, RouterLinkWithHref],
|
||||
providers: [CommunityListComponent,
|
||||
{ provide: CommunityListService, useValue: communityListServiceStub },],
|
||||
schemas: [CUSTOM_ELEMENTS_SCHEMA],
|
||||
@@ -230,9 +231,14 @@ describe('CommunityListComponent', () => {
|
||||
expect(showMoreEl).toBeTruthy();
|
||||
});
|
||||
|
||||
it('should not render the show more button as an empty link', () => {
|
||||
const debugElements = fixture.debugElement.queryAll(By.directive(RouterLinkWithHref));
|
||||
expect(debugElements).toBeTruthy();
|
||||
});
|
||||
|
||||
describe('when show more of top communities is clicked', () => {
|
||||
beforeEach(fakeAsync(() => {
|
||||
const showMoreLink = fixture.debugElement.query(By.css('.show-more-node a'));
|
||||
const showMoreLink = fixture.debugElement.query(By.css('.show-more-node .btn-outline-primary'));
|
||||
showMoreLink.triggerEventHandler('click', {
|
||||
preventDefault: () => {/**/
|
||||
}
|
||||
@@ -240,6 +246,7 @@ describe('CommunityListComponent', () => {
|
||||
tick();
|
||||
fixture.detectChanges();
|
||||
}));
|
||||
|
||||
it('tree contains maximum of currentPage (2) * (2) elementsPerPage of first top communities, or less if there are less communities (3)', () => {
|
||||
const expandableNodesFound = fixture.debugElement.queryAll(By.css('.expandable-node a'));
|
||||
const childlessNodesFound = fixture.debugElement.queryAll(By.css('.childless-node a'));
|
||||
|
||||
@@ -8,10 +8,10 @@
|
||||
</ds-file-download-link>
|
||||
<ds-themed-loading *ngIf="isLoading" message="{{'loading.default' | translate}}" [showMessage]="false"></ds-themed-loading>
|
||||
<div *ngIf="!isLastPage" class="mt-1" id="view-more">
|
||||
<a class="bitstream-view-more btn btn-outline-secondary btn-sm" [routerLink]="[]" (click)="getNextPage()">{{'item.page.bitstreams.view-more' | translate}}</a>
|
||||
<button class="bitstream-view-more btn btn-outline-secondary btn-sm" (click)="getNextPage()">{{'item.page.bitstreams.view-more' | translate}}</button>
|
||||
</div>
|
||||
<div *ngIf="isLastPage && currentPage != 1" class="mt-1" id="collapse">
|
||||
<a class="bitstream-collapse btn btn-outline-secondary btn-sm" [routerLink]="[]" (click)="currentPage = undefined; getNextPage();">{{'item.page.bitstreams.collapse' | translate}}</a>
|
||||
<button class="bitstream-collapse btn btn-outline-secondary btn-sm" (click)="currentPage = undefined; getNextPage();">{{'item.page.bitstreams.collapse' | translate}}</button>
|
||||
</div>
|
||||
</div>
|
||||
</ds-metadata-field-wrapper>
|
||||
|
||||
@@ -7,12 +7,12 @@
|
||||
<ds-themed-loading *ngIf="(i + 1) === objects.length && (i > 0) && (!representations || representations?.length === 0)" message="{{'loading.default' | translate}}"></ds-themed-loading>
|
||||
<div class="d-inline-block w-100 mt-2" *ngIf="(i + 1) === objects.length && representations?.length > 0">
|
||||
<div *ngIf="(objects.length * incrementBy) < total" class="float-left">
|
||||
<a [routerLink]="[]" (click)="increase()">{{'item.page.related-items.view-more' |
|
||||
translate:{ amount: (total - (objects.length * incrementBy) < incrementBy) ? total - (objects.length * incrementBy) : incrementBy } }}</a>
|
||||
<button class="btn btn-link btn-link-inline" (click)="increase()">{{'item.page.related-items.view-more' |
|
||||
translate:{ amount: (total - (objects.length * incrementBy) < incrementBy) ? total - (objects.length * incrementBy) : incrementBy } }}</button>
|
||||
</div>
|
||||
<div *ngIf="objects.length > 1" class="float-right">
|
||||
<a [routerLink]="[]" (click)="decrease()">{{'item.page.related-items.view-less' |
|
||||
translate:{ amount: representations?.length } }}</a>
|
||||
<button class="btn btn-link btn-link-inline" (click)="decrease()">{{'item.page.related-items.view-less' |
|
||||
translate:{ amount: representations?.length } }}</button>
|
||||
</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
|
||||
@@ -7,12 +7,12 @@
|
||||
<ds-themed-loading *ngIf="(i + 1) === objects.length && (itemsRD || i > 0) && !(itemsRD?.hasSucceeded && itemsRD?.payload && itemsRD?.payload?.page?.length > 0)" message="{{'loading.default' | translate}}"></ds-themed-loading>
|
||||
<div class="d-inline-block w-100 mt-2" *ngIf="(i + 1) === objects.length && itemsRD?.payload?.page?.length > 0">
|
||||
<div *ngIf="itemsRD?.payload?.totalPages > objects.length" class="float-left" id="view-more">
|
||||
<a [routerLink]="[]" (click)="increase()">{{'item.page.related-items.view-more' |
|
||||
translate:{ amount: (itemsRD?.payload?.totalElements - (incrementBy * objects.length) < incrementBy) ? itemsRD?.payload?.totalElements - (incrementBy * objects.length) : incrementBy } }}</a>
|
||||
<button class="btn btn-link btn-link-inline" (click)="increase()">{{'item.page.related-items.view-more' |
|
||||
translate:{ amount: (itemsRD?.payload?.totalElements - (incrementBy * objects.length) < incrementBy) ? itemsRD?.payload?.totalElements - (incrementBy * objects.length) : incrementBy } }}</button>
|
||||
</div>
|
||||
<div *ngIf="objects.length > 1" class="float-right" id="view-less">
|
||||
<a [routerLink]="[]" (click)="decrease()">{{'item.page.related-items.view-less' |
|
||||
translate:{ amount: itemsRD?.payload?.page?.length } }}</a>
|
||||
<button class="btn btn-link btn-link-inline" (click)="decrease()">{{'item.page.related-items.view-less' |
|
||||
translate:{ amount: itemsRD?.payload?.page?.length } }}</button>
|
||||
</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
|
||||
@@ -4,9 +4,9 @@
|
||||
<input #searchInput [@toggleAnimation]="isExpanded" [attr.aria-label]="('nav.search' | translate)" name="query"
|
||||
formControlName="query" type="text" placeholder="{{searchExpanded ? ('nav.search' | translate) : ''}}"
|
||||
class="d-inline-block bg-transparent position-absolute form-control dropdown-menu-right p-1" [attr.data-test]="'header-search-box' | dsBrowserOnly">
|
||||
<a class="submit-icon" [routerLink]="" (click)="searchExpanded ? onSubmit(searchForm.value) : expand()" [attr.data-test]="'header-search-icon' | dsBrowserOnly">
|
||||
<button class="submit-icon btn btn-link ds-btn-link" type="button" (click)="searchExpanded ? onSubmit(searchForm.value) : expand()" [attr.data-test]="'header-search-icon' | dsBrowserOnly">
|
||||
<em class="fas fa-search fa-lg fa-fw"></em>
|
||||
</a>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -10,7 +10,7 @@ input[type="text"] {
|
||||
}
|
||||
}
|
||||
|
||||
a.submit-icon {
|
||||
.submit-icon {
|
||||
cursor: pointer;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
|
||||
@@ -1,206 +1,222 @@
|
||||
html {
|
||||
position: relative;
|
||||
min-height: 100%;
|
||||
position: relative;
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
overflow-x: hidden;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
// Sticky Footer
|
||||
.outer-wrapper {
|
||||
display: flex;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.inner-wrapper {
|
||||
flex: 1 1 auto;
|
||||
flex-flow: column nowrap;
|
||||
display: flex;
|
||||
min-height: 100vh;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
flex: 1 1 auto;
|
||||
flex-flow: column nowrap;
|
||||
display: flex;
|
||||
min-height: 100vh;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.main-content {
|
||||
z-index: var(--ds-main-z-index);
|
||||
flex: 1 1 100%;
|
||||
margin-top: var(--ds-content-spacing);
|
||||
margin-bottom: var(--ds-content-spacing);
|
||||
z-index: var(--ds-main-z-index);
|
||||
flex: 1 1 100%;
|
||||
margin-top: var(--ds-content-spacing);
|
||||
margin-bottom: var(--ds-content-spacing);
|
||||
}
|
||||
|
||||
.alert.hide {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
ds-admin-sidebar {
|
||||
position: fixed;
|
||||
z-index: var(--ds-sidebar-z-index);
|
||||
position: fixed;
|
||||
z-index: var(--ds-sidebar-z-index);
|
||||
}
|
||||
|
||||
.sticky-top {
|
||||
z-index: 0;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.media-viewer
|
||||
.change-gallery
|
||||
.ngx-gallery
|
||||
ngx-gallery-preview.ngx-gallery-active {
|
||||
right: 0;
|
||||
left: auto;
|
||||
width: calc(100% - 53px);
|
||||
.change-gallery
|
||||
.ngx-gallery
|
||||
ngx-gallery-preview.ngx-gallery-active {
|
||||
right: 0;
|
||||
left: auto;
|
||||
width: calc(100% - 53px);
|
||||
}
|
||||
|
||||
.ds-submission-reorder-dragging {
|
||||
.ds-hint,
|
||||
button {
|
||||
display: none;
|
||||
}
|
||||
.ds-hint,
|
||||
button {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
ngb-modal-backdrop {
|
||||
// ng-bootsrap animates opacity, causing the fully opaque background to flash briefly before the transition starts
|
||||
// animating background-color between transparent & a RGBA color instead looks smoother
|
||||
&.fade {
|
||||
opacity: 1 !important;
|
||||
background-color: transparent;
|
||||
transition: background-color 0.15s linear;
|
||||
// ng-bootsrap animates opacity, causing the fully opaque background to flash briefly before the transition starts
|
||||
// animating background-color between transparent & a RGBA color instead looks smoother
|
||||
&.fade {
|
||||
opacity: 1 !important;
|
||||
background-color: transparent;
|
||||
transition: background-color 0.15s linear;
|
||||
|
||||
&.show {
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
&.show {
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dont-break-out {
|
||||
/* These are technically the same, but use both */
|
||||
overflow-wrap: break-word;
|
||||
word-wrap: break-word;
|
||||
/* These are technically the same, but use both */
|
||||
overflow-wrap: break-word;
|
||||
word-wrap: break-word;
|
||||
|
||||
-ms-word-break: break-all;
|
||||
/* This is the dangerous one in WebKit, as it breaks things wherever */
|
||||
word-break: break-all;
|
||||
/* Instead use this non-standard one: */
|
||||
word-break: break-word;
|
||||
-ms-word-break: break-all;
|
||||
/* This is the dangerous one in WebKit, as it breaks things wherever */
|
||||
word-break: break-all;
|
||||
/* Instead use this non-standard one: */
|
||||
word-break: break-word;
|
||||
|
||||
/* Adds a hyphen where the word breaks, if supported (No Blink) */
|
||||
-ms-hyphens: auto;
|
||||
-moz-hyphens: auto;
|
||||
-webkit-hyphens: auto;
|
||||
hyphens: auto;
|
||||
/* Adds a hyphen where the word breaks, if supported (No Blink) */
|
||||
-ms-hyphens: auto;
|
||||
-moz-hyphens: auto;
|
||||
-webkit-hyphens: auto;
|
||||
hyphens: auto;
|
||||
|
||||
}
|
||||
|
||||
.researcher-profile-switch button:focus{
|
||||
outline: none !important;
|
||||
.researcher-profile-switch button:focus {
|
||||
outline: none !important;
|
||||
}
|
||||
.researcher-profile-switch .switch.checked{
|
||||
color: #fff;
|
||||
|
||||
.researcher-profile-switch .switch.checked {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* Replicate default spacing look ~ preserveWhitespace=true
|
||||
To be used e.g. on a div containing buttons that should have a bit of spacing in between
|
||||
*/
|
||||
.space-children-mr > :not(:last-child) {
|
||||
margin-right: var(--ds-gap);
|
||||
margin-right: var(--ds-gap);
|
||||
}
|
||||
|
||||
/* Complement .space-children-mr when spaced elements are not on the same level */
|
||||
.mr-gap {
|
||||
margin-right: var(--ds-gap);
|
||||
margin-right: var(--ds-gap);
|
||||
}
|
||||
|
||||
.ml-gap {
|
||||
margin-left: var(--ds-gap);
|
||||
margin-left: var(--ds-gap);
|
||||
}
|
||||
|
||||
.custom-accordion .card-header button {
|
||||
-webkit-box-shadow: none!important;
|
||||
box-shadow: none!important;
|
||||
width: 100%;
|
||||
-webkit-box-shadow: none !important;
|
||||
box-shadow: none !important;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.custom-accordion .card:first-of-type {
|
||||
border-bottom: var(--bs-card-border-width) solid var(--bs-card-border-color) !important;
|
||||
border-bottom-left-radius: var(--bs-card-border-radius) !important;
|
||||
border-bottom-right-radius: var(--bs-card-border-radius) !important;
|
||||
border-bottom: var(--bs-card-border-width) solid var(--bs-card-border-color) !important;
|
||||
border-bottom-left-radius: var(--bs-card-border-radius) !important;
|
||||
border-bottom-right-radius: var(--bs-card-border-radius) !important;
|
||||
}
|
||||
|
||||
ds-dynamic-form-control-container.d-none {
|
||||
/* Ensures that form-control containers hidden and disabled by type binding collapse and let other fields in
|
||||
the same row expand accordingly
|
||||
*/
|
||||
visibility: collapse;
|
||||
/* Ensures that form-control containers hidden and disabled by type binding collapse and let other fields in
|
||||
the same row expand accordingly
|
||||
*/
|
||||
visibility: collapse;
|
||||
}
|
||||
|
||||
/* Used for dso administrative functionality */
|
||||
.btn-dark {
|
||||
background-color: var(--ds-admin-sidebar-bg);
|
||||
background-color: var(--ds-admin-sidebar-bg);
|
||||
}
|
||||
|
||||
.preserve-line-breaks {
|
||||
white-space: pre-line;
|
||||
white-space: pre-line;
|
||||
}
|
||||
|
||||
/* Thumbnail styles */
|
||||
.hide-placeholder-text {
|
||||
.thumbnail-placeholder {
|
||||
color: transparent !important;
|
||||
}
|
||||
.thumbnail-placeholder {
|
||||
color: transparent !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Used to hide the thumbnail column in modals. */
|
||||
.hide-modal-thumbnail-column {
|
||||
.modal-body ds-listable-object-component-loader div.row > div:first-child {
|
||||
display: none;
|
||||
}
|
||||
.modal-body ds-listable-object-component-loader div.row > div:nth-child(2) {
|
||||
flex: 0 0 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
.modal-body ds-listable-object-component-loader div.row > div:first-child {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.modal-body ds-listable-object-component-loader div.row > div:nth-child(2) {
|
||||
flex: 0 0 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/* The font sizes used in "no thumbnail" placeholder */
|
||||
.thumb-font-0 {
|
||||
.thumbnail-placeholder {
|
||||
@media screen and (max-width: map-get($grid-breakpoints, lg)) {
|
||||
font-size: 0.7rem;
|
||||
padding: 0.2rem;
|
||||
.thumbnail-placeholder {
|
||||
@media screen and (max-width: map-get($grid-breakpoints, lg)) {
|
||||
font-size: 0.7rem;
|
||||
padding: 0.2rem;
|
||||
}
|
||||
@media screen and (max-width: map-get($grid-breakpoints, sm)) {
|
||||
font-size: 0.6rem;
|
||||
padding: 0.1rem;
|
||||
}
|
||||
font-size: 0.4rem;
|
||||
padding: 0.1rem;
|
||||
}
|
||||
@media screen and (max-width: map-get($grid-breakpoints, sm)) {
|
||||
font-size: 0.6rem;
|
||||
padding: 0.1rem;
|
||||
}
|
||||
font-size: 0.4rem;
|
||||
padding: 0.1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.thumb-font-1 {
|
||||
.thumbnail-placeholder {
|
||||
@media screen and (max-width: map-get($grid-breakpoints, sm)) {
|
||||
font-size: 0.9rem;
|
||||
padding: 0.1rem;
|
||||
.thumbnail-placeholder {
|
||||
@media screen and (max-width: map-get($grid-breakpoints, sm)) {
|
||||
font-size: 0.9rem;
|
||||
padding: 0.1rem;
|
||||
}
|
||||
@media screen and (max-width: 950px) {
|
||||
font-size: 0.4rem;
|
||||
padding: 0.1rem;
|
||||
}
|
||||
font-size: 0.5rem;
|
||||
padding: 0.125rem;
|
||||
}
|
||||
@media screen and (max-width: 950px) {
|
||||
font-size: 0.4rem;
|
||||
padding: 0.1rem;
|
||||
}
|
||||
font-size: 0.5rem;
|
||||
padding: 0.125rem;
|
||||
}
|
||||
}
|
||||
|
||||
.thumb-font-2 {
|
||||
.thumbnail-placeholder {
|
||||
font-size: 0.9rem;
|
||||
padding: 0.125rem;
|
||||
}
|
||||
.thumbnail-placeholder {
|
||||
font-size: 0.9rem;
|
||||
padding: 0.125rem;
|
||||
}
|
||||
}
|
||||
|
||||
.thumb-font-3 {
|
||||
.thumbnail-placeholder {
|
||||
font-size: 1.25rem;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
.thumbnail-placeholder {
|
||||
font-size: 1.25rem;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.btn.btn-link.btn-link-inline {
|
||||
display: inline;
|
||||
padding: 0;
|
||||
|
||||
&:not(:disabled){
|
||||
&:hover, &:focus {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user