From 468555a58f5808dbd8b6657ae0360fb7d0d4ab75 Mon Sep 17 00:00:00 2001 From: "konstantina.galouni" Date: Sat, 16 Apr 2022 10:47:30 +0300 Subject: [PATCH] [Library & common-assets | new-theme]: Updates for redesign. 1. availableOn.component.ts: Updated class of title to "uk-text-light-grey" and added custom-external icon to links and updated accessright icons. 2. citation.class.ts: Added fileFormatOptions: Option[] to use it in input options. 3. citeThis.component.ts: Updated select inputs using "input" from InputComponent | Updated copy to clipboard button to link. 4. citeThis.module.ts: Import InputModule. 5. fos.component.ts: Updated class of title to "uk-text-light-grey". 6. fundedBy.component.ts: Updated class of title to "uk-text-light-grey" and updated links with uk-text-emphasis class. 7. landing-header.component.ts: Increase authorsLimit to 7 | Changed class of "under curation" to uk-text-primary (used to be custom class). 8. metrics.component.ts: Updated in clickOutside event. parsingFunctions.class.ts: Updated open, closed and unknown with icon names instead of paths to svgs (download accessright icons). 9. relatedTo.component.ts: Updated class of title to "uk-text-light-grey" and added custom-external for links. 10. resultLandingUtils.module.ts: Inport AlertModalModule (to open modal). 11. sdg.component.ts: Updated class of titlte to "uk-text-light-grey". 12. showIdentifiers.component.ts: Added view more functionality. 13. showPublisher.component.ts: Updated custon-external class. 14. resultLanding.module.ts: registerIcon link. 15. resultLanding.component.html: Updated css for result landing and commented annotations (b2note). 16. orcid-work.component.ts: Updated orcid action button for landing page. 17. orcid.module.ts: registerIcons orcid_add and orcid_bin. 18. customOptions.class.ts: [Bug fix] [By Kostis] registryOptions() was not returning properly httpHeaders. 19. showAuthors.component.ts: Updated css 20. icons.ts: Export svgs orcid_add, orcid_bin, link. 21. alert.ts: Removed margin from title. 22. result-preview.component.html: Title of results set to

and uk-h6 and when links to uk-link-heading | accessRightIcon for hostedBy_collectedFrom. 23. result-preview.module.ts: Imported IconsModule. 24. landing-utils.css: Updates in landing css & css of landing-action-button & added backdrop filter missing rules. 25. utils.css: Updated class orcid-clipboard-wrapper and renamed to clipboad-wrapper | Update class .custom-external to set in content with code instead of name and updated not to underline it on hover 26. library.css: Added class .default-dropdown with max-width: 500px; --- library-css/landing-utils.css | 51 +++++++++++++++++++---------------- library-css/utils.css | 19 ++++++++----- library.css | 7 +++-- 3 files changed, 43 insertions(+), 34 deletions(-) diff --git a/library-css/landing-utils.css b/library-css/landing-utils.css index 043499a..27ab648 100644 --- a/library-css/landing-utils.css +++ b/library-css/landing-utils.css @@ -308,6 +308,7 @@ --landing-default-color-rgb: var(--default-color-rgb); --landing-light-color: var(--light-color); --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); @@ -325,10 +326,29 @@ background-color: var(--landing-default-color); } +.landing-background-grey-color { + background-color: var(--landing-table-color); +} + .landing-left-column-border { border-right: 1px solid var(--landing-muted-color); } +.landing-action-button.landing-action-button-portal { + background-color: var(--landing-text-primary-color); + color: var(--landing-light-color); + border-color: var(--landing-text-primary-color); +} + +.landing-action-button.landing-action-button-portal:hover { + color: var(--landing-text-primary-color); +} + +.landing-action-button.landing-action-button-orcid:not(.uk-text-muted) { + border-color: var(--orcid-color); + color: var(--orcid-color); +} + .landing-action-button { background-color: var(--landing-light-color); border: 1px solid; @@ -342,22 +362,7 @@ border: none; } -.landing-action-button.landing-action-button-portal { - color: var(--landing-text-primary-color); - border-color: var(--landing-text-primary-color); -} - -.landing-action-button.landing-action-button-primary { - color: var(--landing-primary-color); - border-color: var(--landing-primary-color); -} - -.landing-action-button.landing-action-button-orcid { - border-color: var(--orcid-color); -} - .landing-action-tooltip { - background-color: transparent; color: inherit; } @@ -378,6 +383,8 @@ #main-tabs-div.active { transition: background-color 0.3s ease-out 0s, top 0.5s ease-out 0s; + -webkit-backdrop-filter: saturate(180%) blur(20px); + backdrop-filter: saturate(180%) blur(20px); } @@ -386,6 +393,8 @@ top: 0; position: relative; transition: background-color 0.3s ease-out 0s, top 0.2s ease-out 0s; + -webkit-backdrop-filter: saturate(180%) blur(20px); + backdrop-filter: saturate(180%) blur(20px); } @supports ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) { @@ -403,21 +412,17 @@ } #landing-sections .landing-section:not(:last-child){ - border-bottom: solid 5px var(--landing-section-separator-color); + border-bottom: solid 3px var(--landing-section-separator-color); } .landing-modal-header { background-color: var(--landing-modal-header-color); - padding: 20px 40px; + padding: 25px 40px; } -.download-from { +.download-from > * { background: var(--landing-default-color); border: 1px solid var(--landing-muted-color); - border-radius: 4px 4px 0 0; -} - -.download-from > *:not(:last-child) { - border-bottom: 1px solid var(--landing-muted-color); + border-radius: 6px; } diff --git a/library-css/utils.css b/library-css/utils.css index 3280450..e9ff097 100644 --- a/library-css/utils.css +++ b/library-css/utils.css @@ -32,7 +32,13 @@ font-weight: 300; font-size: 70%; font-family: "Material Icons"; - content: "launch"; + content: "\e895"; /* launch */ + margin-left: 1px; + display: inline-block; +} + +.custom-external:hover::after, .custom-external::after:hover{ + text-decoration: none !important; } /*.custom-icon-button {*/ @@ -93,17 +99,16 @@ /* border: 0;*/ /*}*/ -.orcid-clipboard-wrapper { +.clipboard-wrapper { background: var(--light-color); - box-shadow: 0px -1px 3px #00000026; border: 0.5px solid var(--muted-color); border-radius: 4px; } -.orcid-clipboard-wrapper > input[name="code"] { - font-size: inherit; - border: none; -} +/*.orcid-clipboard-wrapper > input[name="code"] {*/ +/* font-size: inherit;*/ +/* border: none;*/ +/*}*/ /*.uk-link-text a:hover, .uk-link-toggle:focus .uk-link-text, .uk-link-toggle:hover .uk-link-text, a.uk-link-text:hover{*/ /* color:var(--portal-main-color) !important;*/ diff --git a/library.css b/library.css index 1b64ed6..35ac014 100644 --- a/library.css +++ b/library.css @@ -904,10 +904,9 @@ body { /* resize: none;*/ /*}*/ -/*.default-dropdown {*/ -/* background: white;*/ -/* max-width: 500px;*/ -/*}*/ +.default-dropdown { + max-width: 500px; +} /*[class*="uk-animation-"] {*/ /* animation-fill-mode: none !important;*/