From 542a34e6077d1e7835500a81669b29e9b465ebb5 Mon Sep 17 00:00:00 2001 From: "konstantina.galouni" Date: Wed, 20 Apr 2022 17:40:18 +0300 Subject: [PATCH] [Explore & Library & Common Assets | new-theme]: Updates related to result landing redesign. 1. fos.component.css: Removed rule "mark.highlighted" and ".custom-bottom-border" updated with variables. 2. feedback.component.html: Updated width of email input for small screens. 3. parsingFunctions.class.ts: In "parseAllSubjects()" method, comment otherSubjects and push them in subjects. 4. showIdentifiers.component.ts: Updated classes in . 5. showSubjects.component.ts: "Subjects by Vocabulary" and "Subjects" separated & view more functionality added in "Subjects". 6. resultLanding.component: a. Added button and modal for (share in social media). b. View more functionality for related organizations. c. Graph and feedback section sticky. d. Added checks for summary tab and right sidebar. e. In small screens made right sidebar offcanvas. 7. resultLanding.module.ts: Updated iconsService.registerIcons to register link, graph, quotes. 8. orcid-work.component.ts: Added visually-hidden in icon buttons for landing | Updated classes in and use buttons of alert instead of custom. 9. no-load-paging.component.ts: Use new component for results and pages number and set uk-flex-right in (default is center). 10. cookie-law.css: In ".cookie-law-wrapper" increased z-index from 100 to 1000. 11. showAuthors.component.ts: Removed shadow from search button | Updated classes in . 12. icons.ts: Added "quotes" svg. 13. alert.ts: Updated modal to have header - body - footer (theme was updated too) | classTitle input set default to "uk-background-primary-opacity" | @Input() overflowBody: boolean = true; added to add overflow in body. 14. paging.module.ts: Added ResultsAndPagesNumComponent in declarations and exports. 15. pagingFormatter.component.ts: Add "uk-invisible" to previous and next buttons instead of hiding them. 16. pagingFormatterNoLoad.component.ts: Add "uk-invisible" to previous and next buttons instead of hiding them | Set customClasses default to "uk-flex-center". 17. tabs.component.ts: Updated margins/ paddings | Added @Input() offsetForSticky:number=0; to compare with the top distance for isSticky. 18. resultsAndPagesNum.component.ts: [NEW] Component to show number of results, number of pages and current page (used in paging). 19. landing-utils.css: a. Moved variables in .landing instead of :root. b. Added variable --landing-light-color-rgb: var(--light-color-rgb); c. Added glass filter in #graph_and_feedback. d. Set z-index of #main-tabs-div and #graph_and_feedback to 979 (default 980 caused problems with metrics box). e. Added padding-bottom: 80px and margin-top: 80px in .landing-sections. f. Added top rule for #right-sidebar-switcher. g. Added custom width rules for .landing-left-sidebar-width. 20. css-rules.txt: Added cookie-law-wrapper: 1000 info for z-index 21. explore-custom.css: Added variable --background-primary-rgb: var(--explore-color-rgb); --- css-rules.txt | 1 + library-css/landing-utils.css | 47 +++++++++++++++++++++++++++-------- 2 files changed, 37 insertions(+), 11 deletions(-) diff --git a/css-rules.txt b/css-rules.txt index 4fda199..ace29eb 100644 --- a/css-rules.txt +++ b/css-rules.txt @@ -4,6 +4,7 @@ Tab-Headers: 2 Metrics: 3 B2Note: 5 Nav-bar: 980 +cookie-law-wrapper: 1000 fs-modal: 1029 Tooltip: 1030 notification: 1040 diff --git a/library-css/landing-utils.css b/library-css/landing-utils.css index 27ab648..4ca3f7f 100644 --- a/library-css/landing-utils.css +++ b/library-css/landing-utils.css @@ -301,20 +301,20 @@ /* border-radius: 4px;*/ /*}*/ -:root { +.landing { --landing-header-height: var(--navbar-height); --landing-primary-color: var(--primary-color); --landing-default-color: var(--default-color); --landing-default-color-rgb: var(--default-color-rgb); --landing-light-color: var(--light-color); + --landing-light-color-rgb: var(--light-color-rgb); --landing-muted-color: var(--muted-color); --landing-table-color: var(--table-color); --landing-text-primary-color: var(--text-primary-color); - --landing-modal-header-color: rgba(var(--explore-color-rgb), 0.3); - --landing-section-separator-color: rgba(var(--explore-color-rgb), 0.3); + --landing-section-separator-color: rgba(var(--explore-color-rgb), var(--opacity)); } -.landing-column-height { +.landing-sidebar-height { height: calc(100vh - var(--landing-header-height)); } @@ -330,7 +330,7 @@ background-color: var(--landing-table-color); } -.landing-left-column-border { +.landing-left-sidebar-border { border-right: 1px solid var(--landing-muted-color); } @@ -387,20 +387,32 @@ backdrop-filter: saturate(180%) blur(20px); } - #main-tabs-div { background: rgba(var(--landing-default-color-rgb), 0.95); top: 0; position: relative; transition: background-color 0.3s ease-out 0s, top 0.2s ease-out 0s; +} + +#graph_and_feedback { + /*background: rgba(var(--landing-light-color-rgb), 0.95);*/ + background: rgba(var(--landing-default-color-rgb), 0.95); +} + +#main-tabs-div, #graph_and_feedback { -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); + z-index: 979; } @supports ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) { #main-tabs-div { background: rgba(var(--landing-default-color-rgb), 0.80); } + #graph_and_feedback { + /*background: rgba(var(--landing-light-color-rgb), 0.80);*/ + background: rgba(var(--landing-default-color-rgb), 0.80); + } } .landing-section{ min-height: 70vh; @@ -408,17 +420,16 @@ #landing-sections .landing-section:not(:last-child):before{ background-color: var(--landing-section-separator-color); - opacity: 0.3; + opacity: var(--opacity); } #landing-sections .landing-section:not(:last-child){ border-bottom: solid 3px var(--landing-section-separator-color); - + padding-bottom: 80px; } -.landing-modal-header { - background-color: var(--landing-modal-header-color); - padding: 25px 40px; +#landing-sections .landing-section:not(:first-child) { + margin-top: 80px; } .download-from > * { @@ -426,3 +437,17 @@ border: 1px solid var(--landing-muted-color); border-radius: 6px; } + +#right-sidebar-switcher { + top: 50vh !important; +} + +.landing-left-sidebar-width { + width: 100px; +} + +@media only screen and (min-width: 960px) { + .landing-left-sidebar-width { + width: 150px; + } +} \ No newline at end of file