-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #56 from DANS-KNAW/development
Development
- Loading branch information
Showing
12 changed files
with
290 additions
and
207 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,53 +1,3 @@ | ||
| .wrapper { | ||
| margin: auto; | ||
| max-width: 1400px; | ||
| padding-top: 4rem; | ||
| padding-top: 2rem; | ||
| } | ||
|
|
||
| .result { | ||
| background: white; | ||
| box-shadow: 0 0px 20px #DDD; | ||
| margin: 0 0 2rem 0; | ||
| padding: 1rem; | ||
| } | ||
|
|
||
| .result em { | ||
| background: yellow; | ||
| } | ||
|
|
||
| .header { | ||
| display: grid; | ||
| grid-template-columns: 1fr fit-content(0); | ||
| grid-gap: 1rem; | ||
| } | ||
|
|
||
| .header h3 { | ||
| margin-top: 0; | ||
| } | ||
|
|
||
| .header div { | ||
| color: gray; | ||
| white-space: nowrap; | ||
| } | ||
|
|
||
| .description { | ||
| margin-bottom: 1rem; | ||
| } | ||
|
|
||
| .showjson pre { | ||
| background: rgba(0, 0, 255, .05); | ||
| border: 1px solid darkblue; | ||
| border-radius: .25rem; | ||
| overflow: hidden; | ||
| padding: 1rem; | ||
| } | ||
|
|
||
| .showjson button, | ||
| .description button { | ||
| background: none; | ||
| border: none; | ||
| color: #007bff; | ||
| cursor: pointer; | ||
| font-size: 0.8rem; | ||
| padding: 0; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,67 +1,67 @@ | ||
| import type { ResultBodyProps } from "@dans-framework/rdt-search-ui"; | ||
|
|
||
| import React from "react"; | ||
|
|
||
| import styles from "./index.module.css"; | ||
| import { useState } from "react"; | ||
| import { MetadataList } from "../record"; | ||
| import parse from "html-react-parser"; | ||
| import Typography from "@mui/material/Typography"; | ||
| import Button from "@mui/material/Button"; | ||
| import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown"; | ||
| import KeyboardArrowUpIcon from "@mui/icons-material/KeyboardArrowUp"; | ||
|
|
||
| export function Rda2Result(props: ResultBodyProps) { | ||
| const { result: item } = props; | ||
|
|
||
| const title = item.highlight?.title?.[0] || item.title || "<i>empty</i>"; | ||
|
|
||
| return ( | ||
| <div className={styles.result}> | ||
| <header className={styles.header}> | ||
| <h3 dangerouslySetInnerHTML={{ __html: title }} /> | ||
| {item.dc_date && <div>{new Date(item.dc_date).toDateString()}</div>} | ||
| </header> | ||
| {/* <div className="descriptions" dangerouslySetInnerHTML={{ __html: description }} /> */} | ||
| <> | ||
| <Typography variant="h5">{parse(title)}</Typography> | ||
| {item.dc_date && ( | ||
| <Typography variant="body2" gutterBottom> | ||
| {new Date(item.dc_date).toDateString()} | ||
| </Typography> | ||
| )} | ||
| <ReadMore item={item} /> | ||
| <MetadataList record={item} /> | ||
| </div> | ||
| </> | ||
| ); | ||
| } | ||
|
|
||
| function ReadMore({ item }: { item: ResultBodyProps["result"] }) { | ||
| const [active, setActive] = React.useState(false); | ||
|
|
||
| const hasHighlight = item.highlight?.dc_description?.[0] != null; | ||
| const [active, setActive] = useState(false); | ||
|
|
||
| // No description, return nothing | ||
| if (item.dc_description == null) return null; | ||
|
|
||
| // Highlighted description, return it | ||
| if (hasHighlight) { | ||
| return ( | ||
| <div | ||
| className={styles.description} | ||
| dangerouslySetInnerHTML={{ | ||
| __html: item.highlight?.dc_description?.[0] as string, | ||
| }} | ||
| /> | ||
| ); | ||
| } | ||
| if (item.dc_description === null) return null; | ||
|
|
||
| const [visibleText, hiddenText] = item.dc_description.split(/\. (.*)/); | ||
| const [visibleText, hiddenText] = [ | ||
| item.dc_description.substring(0, 180), | ||
| item.dc_description.substring(180), | ||
| ]; | ||
|
|
||
| // There is only one sentence, return it | ||
| if (hiddenText == null || hiddenText.trim().length === 0) { | ||
| return <div className={styles.description}>{visibleText}</div>; | ||
| return <Typography variant="body1">{visibleText}</Typography>; | ||
| } | ||
|
|
||
| return ( | ||
| <div className={styles.description}> | ||
| {visibleText}.{active && ` ${hiddenText}`} | ||
| | ||
| <button | ||
| onClick={(ev) => { | ||
| ev.stopPropagation(); | ||
| setActive(!active); | ||
| }} | ||
| > | ||
| {active ? "Read less" : "Read more"} | ||
| </button> | ||
| </div> | ||
| <> | ||
| <Typography mb={2}> | ||
| {`${visibleText}${ | ||
| visibleText.length < item.dc_description.length && !active | ||
| ? "..." | ||
| : hiddenText | ||
| }`} | ||
| <Button | ||
| size="small" | ||
| onClick={(ev) => { | ||
| ev.stopPropagation(); | ||
| setActive(!active); | ||
| }} | ||
| sx={{ fontSize: 10, pt: 0.1, pb: 0.1 }} | ||
| endIcon={active ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />} | ||
| > | ||
| {active ? "Read less" : "Read more"} | ||
| </Button> | ||
| </Typography> | ||
| </> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Submodule rdt-search-ui
updated
37 files
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.