[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 <modal-alert>.
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 <addThis> (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 <modal-alert> and use buttons of alert instead of custom.
9. no-load-paging.component.ts: Use new component <results-and-pages> for results and pages number and set uk-flex-right in <paging-no-load> (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 <modal-alert>.
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);
pull/1/head
Konstantina Galouni 2 years ago
parent 468555a58f
commit 542a34e607

@ -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

@ -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;
}
}
Loading…
Cancel
Save