From 43d5bf372b9c13874b8cfba6afdc69b7eeae5efe Mon Sep 17 00:00:00 2001 From: lotte Date: Wed, 19 Apr 2023 15:50:00 +0200 Subject: [PATCH] 101198: in place links replaced with buttons --- .../community-list.component.html | 4 +- .../community-list.component.spec.ts | 11 +- .../file-section/file-section.component.html | 4 +- ...etadata-representation-list.component.html | 8 +- .../related-items.component.html | 8 +- .../search-navbar.component.html | 4 +- .../search-navbar.component.scss | 2 +- src/styles/_global-styles.scss | 240 ++++++++++-------- 8 files changed, 152 insertions(+), 129 deletions(-) diff --git a/src/app/community-list-page/community-list/community-list.component.html b/src/app/community-list-page/community-list/community-list.component.html index 821cb58473..896c11b291 100644 --- a/src/app/community-list-page/community-list/community-list.component.html +++ b/src/app/community-list-page/community-list/community-list.component.html @@ -8,10 +8,10 @@
- {{ 'communityList.showMore' | translate }} - +
diff --git a/src/app/community-list-page/community-list/community-list.component.spec.ts b/src/app/community-list-page/community-list/community-list.component.spec.ts index 575edf14e8..2120df62fa 100644 --- a/src/app/community-list-page/community-list/community-list.component.spec.ts +++ b/src/app/community-list-page/community-list/community-list.component.spec.ts @@ -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')); diff --git a/src/app/item-page/simple/field-components/file-section/file-section.component.html b/src/app/item-page/simple/field-components/file-section/file-section.component.html index 9d61b0a0e0..27cebd9338 100644 --- a/src/app/item-page/simple/field-components/file-section/file-section.component.html +++ b/src/app/item-page/simple/field-components/file-section/file-section.component.html @@ -8,10 +8,10 @@
- {{'item.page.bitstreams.view-more' | translate}} +
- {{'item.page.bitstreams.collapse' | translate}} +
diff --git a/src/app/item-page/simple/metadata-representation-list/metadata-representation-list.component.html b/src/app/item-page/simple/metadata-representation-list/metadata-representation-list.component.html index 65660eaa34..efbe9206d1 100644 --- a/src/app/item-page/simple/metadata-representation-list/metadata-representation-list.component.html +++ b/src/app/item-page/simple/metadata-representation-list/metadata-representation-list.component.html @@ -7,12 +7,12 @@
- {{'item.page.related-items.view-more' | - translate:{ amount: (total - (objects.length * incrementBy) < incrementBy) ? total - (objects.length * incrementBy) : incrementBy } }} +
- {{'item.page.related-items.view-less' | - translate:{ amount: representations?.length } }} +
diff --git a/src/app/item-page/simple/related-items/related-items.component.html b/src/app/item-page/simple/related-items/related-items.component.html index 0d1e14941d..bee1f345fd 100644 --- a/src/app/item-page/simple/related-items/related-items.component.html +++ b/src/app/item-page/simple/related-items/related-items.component.html @@ -7,12 +7,12 @@
- {{'item.page.related-items.view-more' | - translate:{ amount: (itemsRD?.payload?.totalElements - (incrementBy * objects.length) < incrementBy) ? itemsRD?.payload?.totalElements - (incrementBy * objects.length) : incrementBy } }} +
- {{'item.page.related-items.view-less' | - translate:{ amount: itemsRD?.payload?.page?.length } }} +
diff --git a/src/app/search-navbar/search-navbar.component.html b/src/app/search-navbar/search-navbar.component.html index e1de59ce51..d11364d62f 100644 --- a/src/app/search-navbar/search-navbar.component.html +++ b/src/app/search-navbar/search-navbar.component.html @@ -4,9 +4,9 @@ - + diff --git a/src/app/search-navbar/search-navbar.component.scss b/src/app/search-navbar/search-navbar.component.scss index c1ccd289b2..d5bef9bc47 100644 --- a/src/app/search-navbar/search-navbar.component.scss +++ b/src/app/search-navbar/search-navbar.component.scss @@ -10,7 +10,7 @@ input[type="text"] { } } -a.submit-icon { +.submit-icon { cursor: pointer; position: sticky; top: 0; diff --git a/src/styles/_global-styles.scss b/src/styles/_global-styles.scss index 930384cf64..b030928815 100644 --- a/src/styles/_global-styles.scss +++ b/src/styles/_global-styles.scss @@ -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; + } + } + +}