Scipaper/Frontend
5
0
Fork 0
Code Issues 15 Pull Requests Packages Projects Releases Wiki Activity

finished styling, added filters to main page

Browse Source
This commit is contained in:
maximus 2022-10-18 12:06:21 +03:00
parent b5443aa033
commit c63c19e1c7
4 changed files with 21 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
src/components/Article/ArticleParts/InteractionButtons/ArticleInteractionButtons.tsx
View File

@ -89,68 +89,43 @@ export function ArticleInteractionButtons({
hover:bg-blue-500
active:bg-blue-700
focus:shadow-lg shadow-blue-500
p-2 rounded"
p-2 rounded
flex flex-row space-x-2
"
>
<SVGFiletext className="w-6 fill-white stroke-white" />
{emphasis === "high" && <Typography>{t("readFile")}</Typography>}
{emphasis === "high" && <Typography fontWeightVariant="semibold" className="text-white">{t("readFile")}</Typography>}
</div>
</Link>
);
/* ----------------------------- Download button ---------------------------- */
const downLoadButton = (
<Button emphasis={emphasis}>
<Button emphasis="low" className="px-2 space-x-2">
<Button.Icon>
<SVGDownload className="w-6 fill-white stroke-white" />
<SVGDownload className="w-6 fill-gray-900 stroke-gray-900" />
</Button.Icon>
{emphasis === "high" && <Typography>{t("download")}</Typography>}
{emphasis === "high" && <Typography fontWeightVariant="semibold" className="text-gray-900">{t("download")}</Typography>}
</Button>
);
/* ------------------------------ Share button ------------------------------ */
/* ------------------------------- Cite button ------------------------------ */
const shareButton = (
<Button emphasis={emphasis}>
const citeButton = (
<Button emphasis="low" className="px-2 space-x-2">
<Button.Icon>
<SVGShare className="w-6 fill-white stroke-white" />
<SVGCite className="w-6 fill-gray-900 stroke-gray-900" />
</Button.Icon>
{emphasis === "high" && <Typography>{t("share")}</Typography>}
{emphasis === "high" && <Typography fontWeightVariant="semibold" className="text-gray-900">{t("cite")}</Typography>}
</Button>
);
const fileInteractionButtons = interactionButtonsStore.map((button) => {
return button.title === "Read file" ? (
<Link to={`/article/content/${articleID}`}>
<Button
emphasis={button.buttonEmphasis === "high" ? "high" : "low"}
className="h-max px-2 mr-2"
>
<Button.Icon>
{React.cloneElement(button.icon, {
className: button.iconClassName,
})}
</Button.Icon>
{emphasis === "high" ? <Typography>{button.title}</Typography> : null}
</Button>
</Link>
) : (
<Button
emphasis={button.buttonEmphasis === "high" ? "high" : "low"}
className="h-max px-2 mr-2"
>
<Button.Icon>
{React.cloneElement(button.icon, { className: button.iconClassName })}
</Button.Icon>
{emphasis === "high" ? <Typography>{button.title}</Typography> : null}
</Button>
);
});
return (
<div className="flex flex-row">
{emphasis === "low" && !children ? abstractButton : null}
<div className="flex flex-row space-x-2">
{emphasis != "high" && abstractButton}
{readFileButton}
{children ? children : fileInteractionButtons}
<ShareButton linktoCopy={`/article/content/${articleID}`}></ShareButton>
{downLoadButton}
{citeButton}
<ShareButton emphasis={emphasis} linktoCopy={`/article/content/${articleID}`} />
</div>
);
}

4
src/components/Article/ArticleParts/InteractionButtons/ArticleShareButton.tsx
View File

@ -35,11 +35,11 @@ export function ShareButton({ emphasis, linktoCopy }: Props) {
return (
<Popover className="relative">
<Popover.Button>
<Button emphasis="low" className="px-2">
<Button emphasis="low" className="px-2 space-x-2">
<Button.Icon>
<SVGShare className="w-6 fill-gray-900 stroke-gray-900" />
</Button.Icon>
{emphasis === "high" && <Typography>{t("share")}</Typography>}
{emphasis === "high" && <Typography fontWeightVariant="semibold" className="text-gray-900">{t("share")}</Typography>}
</Button>
</Popover.Button>

5
src/pages/SearchResultsPage.tsx
View File

@ -3,9 +3,6 @@ import BaseLayout from "components/BaseLayout";
import { SearchSection } from "components/SearchSection";
import { ColumnLayout } from "components/layouts/ThreeColumn/ColumnLayout";
import { SearchResultSection } from "components/SearchResultsSection";
import { useSearchStoreImplementation } from "searchResults/data/searchStoreImplementation";
import { useSearchViewModel } from "searchResults/controller/searchResultsViewModel";
import { Loader } from "components/Loader/Loader";
import Fiter from "components/Filters/Filter";
export const SearchResultsPage = () => {
@ -14,7 +11,7 @@ export const SearchResultsPage = () => {
<SearchSection />
<ColumnLayout>
<ColumnLayout.Left>
<div className="h-98 w-[300px]"></div>
<div className="h-98 w-[300px] border rounded my-5"><Fiter /></div>
</ColumnLayout.Left>
<ColumnLayout.Main>
<SearchResultSection />

2
src/searchResults/data/searchService.ts
View File

@ -10,7 +10,7 @@ const searchEndpoint = "/papers/search";
async function search(request: string): Promise<SearchResults> {
try {
const response = await integratorApiClient.get<SearchResultsDTO>(
// searchEndpoint + `?query=` + request + `&limit=10&offset=0`
// searchEndpoint + `?query=` + request
"https://run.mocky.io/v3/ea705665-2479-4039-8b81-412e011fc145"
);
const dto = response.data;