diff --git a/ui/src/components/shared/JsonPreview.tsx b/ui/src/components/shared/JsonPreview.tsx new file mode 100644 index 000000000..54cf39d11 --- /dev/null +++ b/ui/src/components/shared/JsonPreview.tsx @@ -0,0 +1,28 @@ +import React from "react"; +import { Collapse } from "antd"; + +import { Result } from "@/types"; + +interface JsonPreviewProps { + article: Result; +} + +export const JsonPreview = ({ article }: JsonPreviewProps) => { + return ( + <Collapse + items={[ + { + key: "1", + label: "Metadata preview. Preview of JSON metadata for this article.", + children: ( + <p className="p-8 json-preview-content"> + <pre className="whitespace-pre-wrap font-mono text-sm leading-relaxed"> + {JSON.stringify(article, undefined, 2)} + </pre> + </p> + ), + }, + ]} + /> + ); +}; diff --git a/ui/src/pages/records/[recordId].tsx b/ui/src/pages/records/[recordId].tsx index 107a21611..1c4a718fb 100644 --- a/ui/src/pages/records/[recordId].tsx +++ b/ui/src/pages/records/[recordId].tsx @@ -6,6 +6,7 @@ import { Result } from "@/types"; import Authors from "@/components/shared/Authors"; import DetailPageInfo from "@/components/detail/DetailPageInfo"; import { authToken, getApiUrl } from "@/utils/utils"; +import { JsonPreview } from "@/components/shared/JsonPreview"; interface RecordPageProps { article: Result; @@ -13,26 +14,31 @@ interface RecordPageProps { const RecordPage: React.FC<RecordPageProps> = ({ article }) => { return ( - <div className="container"> - <div className="container-inner detail-page lg:flex"> - <div className="detail-page-main"> - <h2 className="font-normal mb-3"> - {ReactHtmlParser(article?.title)} - </h2> - <Authors - authors={article?.authors} - page="detail" - affiliations - className="mb-3" - /> - <p className="text-justify leading-relaxed"> - {ReactHtmlParser(article?.abstract)} - </p> + <div className="container grid grid-cols-4 gap-8"> + <div id="abstract_and_preview" className="col-span-3"> + <div id="abstract"> + <div className="detail-page-main"> + <h2 className="font-normal mb-3"> + {ReactHtmlParser(article?.title)} + </h2> + <Authors + authors={article?.authors} + page="detail" + affiliations + className="mb-3" + /> + <p className="text-justify leading-relaxed"> + {ReactHtmlParser(article?.abstract)} + </p> + </div> </div> - <div className="detail-page-right"> - <DetailPageInfo article={article} /> + <div id="preview"> + <JsonPreview article={article} /> </div> </div> + <div id="abstract_and_preview" className="col-span-1 detail-page-right"> + <DetailPageInfo article={article} /> + </div> </div> ); }; diff --git a/ui/src/styles/globals.css b/ui/src/styles/globals.css index 3d67c5e16..8b5c35be3 100644 --- a/ui/src/styles/globals.css +++ b/ui/src/styles/globals.css @@ -94,7 +94,6 @@ a { display: flex; align-items: center; cursor: pointer; - color: } .ant-menu-item a { @@ -111,7 +110,7 @@ a { .banner { width: 100%; - height: auto + height: auto; } @media (max-width: 830px) { @@ -161,8 +160,10 @@ a { .ant-input-wrapper:focus-within { border-radius: 4px; border-color: #66afe9; - -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6); - box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6) + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), + 0 0 8px rgba(102, 175, 233, 0.6); + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), + 0 0 8px rgba(102, 175, 233, 0.6); } .ant-input-wrapper:focus input, @@ -183,7 +184,7 @@ a { inset-inline-start: 0 !important; } -.ant-input-group-addon .ant-btn > div { +.ant-input-group-addon .ant-btn > div { display: none; } @@ -233,7 +234,7 @@ a { border-bottom: none !important; } -.ant-tabs-top >.ant-tabs-nav::before { +.ant-tabs-top > .ant-tabs-nav::before { border-bottom: 1px solid #d9d9d9 !important; } @@ -388,12 +389,6 @@ a { /* DETAIL */ .detail-page-main { - width: 75%; - padding: 0 15px; -} - -.detail-page-right { - width: 25%; padding: 0 15px; } @@ -455,3 +450,11 @@ a { margin-top: 20px; } } + +.json-preview-content { + background: rgba(0, 0, 0, 0.02); +} + +#json-preview-card .ant-card-body { + padding: 0; +} diff --git a/ui/yarn.lock b/ui/yarn.lock index 5687fe353..0b3ca361e 100644 --- a/ui/yarn.lock +++ b/ui/yarn.lock @@ -783,7 +783,7 @@ classnames@2.x, classnames@^2.2.1, classnames@^2.2.3, classnames@^2.2.5, classna resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.2.tgz#351d813bf0137fcc6a76a16b88208d2560a0d924" integrity sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw== -client-only@0.0.1: +client-only@0.0.1, client-only@^0.0.1: version "0.0.1" resolved "https://registry.yarnpkg.com/client-only/-/client-only-0.0.1.tgz#38bba5d403c41ab150bff64a95c85013cf73bca1" integrity sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA== @@ -3211,6 +3211,14 @@ supports-preserve-symlinks-flag@^1.0.0: resolved "https://registry.yarnpkg.com/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz#6eda4bd344a3c94aea376d4cc31bc77311039e09" integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w== +swr@^2.2.4: + version "2.2.4" + resolved "https://registry.yarnpkg.com/swr/-/swr-2.2.4.tgz#03ec4c56019902fbdc904d78544bd7a9a6fa3f07" + integrity sha512-njiZ/4RiIhoOlAaLYDqwz5qH/KZXVilRLvomrx83HjzCWTfa+InyfAjv05PSFxnmLzZkNO9ZfvgoqzAaEI4sGQ== + dependencies: + client-only "^0.0.1" + use-sync-external-store "^1.2.0" + tailwindcss@^3: version "3.3.5" resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.3.5.tgz#22a59e2fbe0ecb6660809d9cc5f3976b077be3b8" @@ -3391,6 +3399,11 @@ uri-js@^4.2.2: dependencies: punycode "^2.1.0" +use-sync-external-store@^1.2.0: + version "1.2.0" + resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz#7dbefd6ef3fe4e767a0cf5d7287aacfb5846928a" + integrity sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA== + util-deprecate@^1.0.1, util-deprecate@^1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"