Skip to content

Commit

Permalink
fix(openalex): harmonising styles
Browse files Browse the repository at this point in the history
  • Loading branch information
@jerem1508
jerem1508 committed Jan 20, 2025
1 parent fcb0677 commit 852589a
Show file tree
Hide file tree
Showing 2 changed files with 27 additions and 20 deletions.
37 changes: 22 additions & 15 deletions client/src/pages/openalex-affiliations/search.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -254,7 +254,7 @@ export default function Search() {
}

return (
<>
<div style={{ minHeight: '700px' }}>
<Header />
<Modal isOpen={isOpen} hide={() => setIsOpen(false)} size="xl">
<ModalContent>
Expand All @@ -268,12 +268,14 @@ export default function Search() {
buttonLabel={currentSearchParams.startYear}
label="Start year"
onSelectionChange={(startYear) => setSearchParams({ ...currentSearchParams, startYear })}
selectedKey={currentSearchParams.startYear}
>
{years.map((year) => (
<SelectOption
color="blue-cumulus"
key={year.value}
selected={
year.value === currentSearchParams.startYear
}

This comment has been minimized.

Sign in to view

Copy link
@annelhote

annelhote Jan 20, 2025

Member

Non it does not work !
>
{year.label}
</SelectOption>
Expand All @@ -286,12 +288,14 @@ export default function Search() {
buttonLabel={currentSearchParams.endYear}
label="End year"
onSelectionChange={(endYear) => setSearchParams({ ...currentSearchParams, endYear })}
selectedKey={currentSearchParams.endYear}
>
{years.map((year) => (
<SelectOption
color="blue-cumulus"
key={year.value}
selected={
year.value === currentSearchParams.startYear
}
>
{year.label}
</SelectOption>
Expand Down Expand Up @@ -339,7 +343,7 @@ export default function Search() {
</Container>
</ModalContent>
</Modal>
<Container as="section" className="filters fr-my-5w">
<Container>
<Breadcrumb className="fr-pt-4w fr-mt-0 fr-mb-2w">
<Link href="/">
Home
Expand All @@ -348,8 +352,10 @@ export default function Search() {
Search raw affiliations and ROR in OpenAlex
</Link>
</Breadcrumb>
</Container>
<Container as="section" className="filters fr-my-5w">
<Row className="fr-pt-2w fr-pr-2w fr-pb-0 fr-pl-2w">
<Col className="step-ror-to-add" xs="8">
<Col className="step-ror-to-add" xs="8" style={{ minHeight: '200px' }}>
<TagInput
getRorChildren={currentSearchParams.getRorChildren === '1'}
hint="Press ENTER to search for several terms / expressions. If several, an OR operator is used."
Expand All @@ -369,20 +375,20 @@ export default function Search() {
tags={tags}
/>
</Col>
<Col offsetXs="1" className="text-right fr-pl-3w fr-mt-4w">
<Col offsetXs="1" className="text-right fr-pl-3w fr-mt-4w" style={{ minHeight: '180px' }}>
<Row gutters verticalAlign="bottom">
<Col className="step-year-start">
<Select
aria-label="Select a start year for search"
buttonLabel={currentSearchParams.startYear}
label="Start year"
onSelectionChange={(startYear) => setSearchParams({ ...currentSearchParams, startYear })}
selectedKey={currentSearchParams.startYear}
>
{years.map((year) => (
<SelectOption
color="blue-cumulus"
key={year.value}
selected={year.value === currentSearchParams.startYear}
>
{year.label}
</SelectOption>
Expand All @@ -395,12 +401,12 @@ export default function Search() {
buttonLabel={currentSearchParams.endYear}
label="End year"
onSelectionChange={(endYear) => setSearchParams({ ...currentSearchParams, endYear })}
selectedKey={currentSearchParams.endYear}
>
{years.map((year) => (
<SelectOption
color="blue-cumulus"
key={year.value}
selected={year.value === currentSearchParams.startYear}
>
{year.label}
</SelectOption>
Expand All @@ -410,20 +416,21 @@ export default function Search() {
</Row>
</Col>
</Row>
<Row className="fr-pt-0 fr-pr-2w fr-pb-2w fr-pl-2w">
<Row className="fr-p-2w fr-pt-0" style={{ minHeight: '150px' }}>
<Col className="step-ror-to-exclude" xs="8">
<TextInput
hint="You can focus on recall issues in OpenAlex (missing ROR). This way, only affiliation strings that are NOT matched in OpenAlex to this specific ROR will be retrieved. If several ROR to exclude, separate them by space."
label="ROR to exclude: exclude affiliation strings already mapped to a specific ROR in OpenAlex"
onChange={(e) => {
setExcludedRors(e.target.value);
}}
messageType=""
onChange={(e) => { setExcludedRors(e.target.value); }}
value={excludedRors}
/>
</Col>
<Col offsetXs="1" className="fr-pl-3w fr-mt-7w step-search-works text-right">
</Row>
<Row>
<Col className="fr-pl-3w fr-my-3w step-search-works text-right">
<Button
className="fr-mt-2w"
color="blue-ecume"
disabled={searchParams.getAll('affiliations').length === 0}
icon="search-line"
onClick={checkAndSendQuery}
Expand All @@ -433,6 +440,6 @@ export default function Search() {
</Col>
</Row>
</Container>
</>
</div>
);
}
10 changes: 5 additions & 5 deletions client/src/styles/index.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,8 +43,9 @@ body {

.filters {
background-color: white;
border-bottom: 2px solid #000;
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.3);
border: 1px solid #aaa;
border-left: 8px solid #c7eeea;
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
}

.mentions .actions-menu {
Expand Down Expand Up @@ -105,7 +106,7 @@ body {
.box-info {
background-color: #eee;
border: 1px solid #000;
box-shadow: 5px 5px 15px 0px rgba(50, 50, 50, 0.3);
box-shadow: 5px 5px 15px 0px rgba(50, 50, 50, 0.1);
margin: 10px 0;
padding: 10px;
}
Expand All @@ -122,8 +123,7 @@ body {
background-color: #eee;
padding: 15px;
border: 1px solid #000;
border-radius: 15px;
box-shadow: 5px 5px 15px 0px rgba(50, 50, 50, 0.3);
box-shadow: 5px 5px 15px 0px rgba(50, 50, 50, 0.1);
}

.wm-fit-content {
Expand Down

0 comments on commit 852589a

Please sign in to comment.