From dcda165488f89ebdb7822b5eba05f88da7e4c64a Mon Sep 17 00:00:00 2001
From: danysmall <dany.small.work@gmail.com>
Date: Fri, 14 Oct 2022 15:03:37 +0300
Subject: [PATCH 1/7] Sticly footer to the bottom of the page
---
.../ArticleInteractionButtons.tsx | 36 +++++++++++++------
src/components/ArticleSearchResult.tsx | 2 +-
src/components/BaseLayout.tsx | 5 +--
src/components/fetchAnArticle/AnArticle.tsx | 5 ++-
src/core/helpers.ts | 13 +++++--
src/index.tsx | 7 +++-
src/pages/SearchResultsPage.tsx | 2 +-
7 files changed, 51 insertions(+), 19 deletions(-)
diff --git a/src/components/Article/ArticleParts/InteractionButtons/ArticleInteractionButtons.tsx b/src/components/Article/ArticleParts/InteractionButtons/ArticleInteractionButtons.tsx
index 410d472..6301918 100755
--- a/src/components/Article/ArticleParts/InteractionButtons/ArticleInteractionButtons.tsx
+++ b/src/components/Article/ArticleParts/InteractionButtons/ArticleInteractionButtons.tsx
@@ -12,6 +12,7 @@ import {
} from "components/icons";
import classNames from "classnames";
import { Transition } from "@headlessui/react";
+import Link from "components/typography/Link";
const interactionButtonsStore = [
{
@@ -46,6 +47,7 @@ type ArticleButtonProps = {
children?: React.ReactNode;
className?: string;
emphasis?: "high" | "low";
+ articleID?: string,
} & Omit<React.ComponentPropsWithoutRef<"button">, "">;
export function ArticleInteractionButtons({
@@ -53,6 +55,7 @@ export function ArticleInteractionButtons({
children,
openAbstract = () => { },
className,
+ articleID,
emphasis = "high", //to change displaying of component
...props
}: ArticleButtonProps) {
@@ -70,18 +73,31 @@ export function ArticleInteractionButtons({
</Button.Icon>
</Button>
);
-
const fileInteractionButtons = interactionButtonsStore.map((button) => {
return (
- <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>
+ 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>
);
});
diff --git a/src/components/ArticleSearchResult.tsx b/src/components/ArticleSearchResult.tsx
index bce62e9..c569005 100644
--- a/src/components/ArticleSearchResult.tsx
+++ b/src/components/ArticleSearchResult.tsx
@@ -37,7 +37,7 @@ export const ArticleSearchResult = ({ searchItem }: Props) => {
<Article.SubscriptionsButtons />
</div>
- <Article.Title linkTo={`/article/${searchItem.id}`} className="text-2xl">
+ <Article.Title linkTo={`/article/info/${searchItem.id}`} className="text-2xl">
{searchItem.title}
</Article.Title>
<Article.Authors emphasis="low" className="flex flex-wrap flex-row">
diff --git a/src/components/BaseLayout.tsx b/src/components/BaseLayout.tsx
index 2c143c9..237777d 100755
--- a/src/components/BaseLayout.tsx
+++ b/src/components/BaseLayout.tsx
@@ -1,3 +1,4 @@
+import { joinClassnames } from "core/helpers";
import React from "react";
import { Footer } from "./parts/Footer";
import Header from "./parts/Header";
@@ -10,10 +11,10 @@ type Props = {
function BaseLayout({ header, footer, children, className }: Props) {
return (
- <div className={className}>
+ <div className={joinClassnames(className, 'flex min-h-screen flex-col justify-between')}>
<Header />
- <main>{children}</main>
+ <main className="flex-1">{children}</main>
<Footer />
</div>
diff --git a/src/components/fetchAnArticle/AnArticle.tsx b/src/components/fetchAnArticle/AnArticle.tsx
index 240d53c..11c8d26 100644
--- a/src/components/fetchAnArticle/AnArticle.tsx
+++ b/src/components/fetchAnArticle/AnArticle.tsx
@@ -46,7 +46,10 @@ const AnArticle = () => {
<hr></hr>
</div>
- <ArticlePart.Article.InteractionButtons emphasis="high" />
+ <ArticlePart.Article.InteractionButtons
+ emphasis="high"
+ articleID={article?.id}
+ />
{article?.tags && (
<div className="keywords my-10 flex flex-col gap-2">
<Typography
diff --git a/src/core/helpers.ts b/src/core/helpers.ts
index c655cd5..fe40fa8 100755
--- a/src/core/helpers.ts
+++ b/src/core/helpers.ts
@@ -8,10 +8,17 @@ export const handleScrollTo = (e: React.MouseEvent<HTMLAnchorElement>) => {
}
};
-export function capitalization (str: string) {
- return str.substring(0,1).toUpperCase() + str.substring(1);
+export function capitalization(str: string): string {
+ return str.substring(0, 1).toUpperCase() + str.substring(1);
}
-export function formatNumber(num: number) {
+export function formatNumber(num: number): string {
return num.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1 ');
+}
+
+export function joinClassnames(first?: string, second?: string): string {
+ return [
+ first ?? '',
+ second ?? '',
+ ].join('');
}
\ No newline at end of file
diff --git a/src/index.tsx b/src/index.tsx
index ed9b2e9..7e200b3 100755
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -17,6 +17,8 @@ import { store } from "store/store";
import { Provider } from "react-redux";
import { SearchResultsPage } from "pages/SearchResultsPage";
import AnArticle from "components/fetchAnArticle/AnArticle";
+import NotFound from "components/fetchAnArticle/NotFound";
+import AnArticleBody from "components/fetchAnArticle/AnArticleBody";
const rootElement = document.getElementById("root");
if (!rootElement) throw new Error("Failed to find the root element");
@@ -33,7 +35,10 @@ root.render(
<Route path="/terms-of-use" element={<TermsOfUse />} />
<Route path="/privacy-policy" element={<PrivacyPolicy />} />
<Route path="/cookies-policy" element={<CookiesPolicy />} />
- <Route path="/article/:id" element={<AnArticle />} />
+ <Route path="/article">
+ <Route path="info/:id" element={<AnArticle />} />
+ <Route path="content/:id" element={<AnArticleBody />} />
+ </Route>
<Route path="/account">
<Route path="settings" element={<AccountSettings />} />
</Route>
diff --git a/src/pages/SearchResultsPage.tsx b/src/pages/SearchResultsPage.tsx
index ca4e486..cca667b 100644
--- a/src/pages/SearchResultsPage.tsx
+++ b/src/pages/SearchResultsPage.tsx
@@ -13,7 +13,7 @@ export const SearchResultsPage = () => {
<SearchSection />
<ColumnLayout>
<ColumnLayout.Left>
- <div className="h-98 bg-blue-200 w-[300px]">left bar</div>
+ <div className="h-98 w-[300px]"></div>
</ColumnLayout.Left>
<ColumnLayout.Main>
<SearchResultSection />
From b390ae7a2ec56c30f97f27d8a84fe85bcda8bf27 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9CSalar?= <“salar.sali97@gmail.com”>
Date: Mon, 17 Oct 2022 12:26:23 +0300
Subject: [PATCH 2/7] resolve not found page
---
src/index.tsx | 3 ++-
1 file changed, 2 insertions(+), 1 deletion(-)
diff --git a/src/index.tsx b/src/index.tsx
index 7e200b3..9f61062 100755
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -42,7 +42,8 @@ root.render(
<Route path="/account">
<Route path="settings" element={<AccountSettings />} />
</Route>
- <Route path="/search-results" element={<SearchResultsPage />}></Route>
+ <Route path="/search-results" element={<SearchResultsPage />} />
+ <Route path="/*" element={<NotFound />}></Route>
</Routes>
</BrowserRouter>
</React.StrictMode>
From 9154b1fb96f6a181ec308f42de9da4331647dee0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9CSalar?= <“salar.sali97@gmail.com”>
Date: Mon, 17 Oct 2022 12:41:10 +0300
Subject: [PATCH 3/7] resolve padding of featured authors
---
src/components/MainPage/sections/FeaturedAuthorsCards.tsx | 8 +++++---
1 file changed, 5 insertions(+), 3 deletions(-)
diff --git a/src/components/MainPage/sections/FeaturedAuthorsCards.tsx b/src/components/MainPage/sections/FeaturedAuthorsCards.tsx
index 965a243..87fff9c 100755
--- a/src/components/MainPage/sections/FeaturedAuthorsCards.tsx
+++ b/src/components/MainPage/sections/FeaturedAuthorsCards.tsx
@@ -75,10 +75,12 @@ export default function FeaturedAuthorsCards(): JSX.Element {
return (
<div>
{/* The Title of Featured Authors section */}
- <Heading className="text-center my-8 text-3xl font-semibold">{t("mainPage.featuredAuthors")}</Heading>
+ <Heading className="text-center my-8 text-3xl font-semibold">
+ {t("mainPage.featuredAuthors")}
+ </Heading>
{/* Featured Authors section */}
- <div className="slider-wrapper Authors">
+ <div className="slider-wrapper Authors px-8">
<Swiper
slidesPerView={1.25}
slidesPerGroup={1}
@@ -133,7 +135,7 @@ export default function FeaturedAuthorsCards(): JSX.Element {
<Card.CardAction href={card.Link}>
<Link className="text-blue-500 font-bold" to="*">
- {t('mainPage.more')}
+ {t("mainPage.more")}
</Link>
<SVGCaretRight className="fill-blue-500 w-4 h-4" />
</Card.CardAction>
From 3cac7c7d045bf6749875468f5c66e71c8eb934ce Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9CSalar?= <“salar.sali97@gmail.com”>
Date: Mon, 17 Oct 2022 12:49:21 +0300
Subject: [PATCH 4/7] the padding of featured articles cards has been resolved
---
src/components/MainPage/sections/FeaturedArticlesCards.tsx | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/src/components/MainPage/sections/FeaturedArticlesCards.tsx b/src/components/MainPage/sections/FeaturedArticlesCards.tsx
index bfb2a07..78f10f9 100755
--- a/src/components/MainPage/sections/FeaturedArticlesCards.tsx
+++ b/src/components/MainPage/sections/FeaturedArticlesCards.tsx
@@ -98,10 +98,10 @@ const FeaturedArticlesCards = () => {
const navigationPrevRef = useRef(null);
const navigationNextRef = useRef(null);
const paginationRef = useRef(null);
- const [t, i18next] = useTranslation()
+ const [t, i18next] = useTranslation();
return (
- <div className="slider-wrapper articles">
+ <div className="slider-wrapper articles px-8">
<div className="flex justify-end gap-2 my-2">
<div
className="prev inline-flex justify-center items-center
From 64a6e6ab20e2781f42dedfdcb7c1d2ea4c82a730 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9CSalar?= <“salar.sali97@gmail.com”>
Date: Mon, 17 Oct 2022 13:08:24 +0300
Subject: [PATCH 5/7] resolve the margin of topic in the article info and
article content pages
---
src/components/fetchAnArticle/AnArticle.tsx | 17 +++++------------
src/components/fetchAnArticle/AnArticleBody.tsx | 4 ++--
.../fetchAnArticle/AskeletonArticle.tsx | 2 +-
3 files changed, 8 insertions(+), 15 deletions(-)
diff --git a/src/components/fetchAnArticle/AnArticle.tsx b/src/components/fetchAnArticle/AnArticle.tsx
index 11c8d26..73a8f91 100644
--- a/src/components/fetchAnArticle/AnArticle.tsx
+++ b/src/components/fetchAnArticle/AnArticle.tsx
@@ -33,7 +33,7 @@ const AnArticle = () => {
<AskeletonArticle />
) : (
<>
- <ArticlePart.Article.Breadcumbs>
+ <ArticlePart.Article.Breadcumbs className="py-4">
{article?.topic}
</ArticlePart.Article.Breadcumbs>
<div className="flex flex-col gap-4 pb-4">
@@ -52,25 +52,18 @@ const AnArticle = () => {
/>
{article?.tags && (
<div className="keywords my-10 flex flex-col gap-2">
- <Typography
- className="text-2xl"
- fontWeightVariant="semibold"
- >
- {t('articlePage.keywords')}
+ <Typography className="text-2xl" fontWeightVariant="semibold">
+ {t("articlePage.keywords")}
</Typography>
-
<ArticlePart.Article.Keywords className="transition ease-in-out delay-50">
{article?.tags}
</ArticlePart.Article.Keywords>
</div>
)}
<div className="abstract my-10 flex flex-col gap-2">
- <Typography
- className="text-2xl"
- fontWeightVariant="semibold"
- >
- {t('articlePage.abstract')}
+ <Typography className="text-2xl" fontWeightVariant="semibold">
+ {t("articlePage.abstract")}
</Typography>
<ArticlePart.Article.Description>
{article?.summary !== undefined ? (
diff --git a/src/components/fetchAnArticle/AnArticleBody.tsx b/src/components/fetchAnArticle/AnArticleBody.tsx
index 55d7f95..0329981 100644
--- a/src/components/fetchAnArticle/AnArticleBody.tsx
+++ b/src/components/fetchAnArticle/AnArticleBody.tsx
@@ -27,7 +27,7 @@ const AnArticleBody = () => {
<Container variant="straight">
{shouldShowLoading ? (
<>
- <Skeleton count={1} />
+ <Skeleton count={1} className="my-4" />
<div className="gap-4 py-12 px-20">
<Skeleton
count={1}
@@ -39,7 +39,7 @@ const AnArticleBody = () => {
</>
) : (
<>
- <ArticlePart.Article.Breadcumbs>
+ <ArticlePart.Article.Breadcumbs className="py-4">
{article?.topic}
</ArticlePart.Article.Breadcumbs>
<div className="gap-4 py-12 px-20">
diff --git a/src/components/fetchAnArticle/AskeletonArticle.tsx b/src/components/fetchAnArticle/AskeletonArticle.tsx
index f0b9702..d8bdcfc 100644
--- a/src/components/fetchAnArticle/AskeletonArticle.tsx
+++ b/src/components/fetchAnArticle/AskeletonArticle.tsx
@@ -3,7 +3,7 @@ import "react-loading-skeleton/dist/skeleton.css";
const AskeletonArticle = () => {
return (
<>
- <Skeleton count={1} />
+ <Skeleton count={1} className="my-4" />
<div className="flex flex-col gap-4 pb-4">
<Skeleton count={1} containerClassName="title w-3/4 text-2xl" />
<Skeleton count={1} containerClassName="authors w-1/4" />
From 705ae6471f91463d006dd7a1f777adce2d53b4ec Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9CSalar?= <“salar.sali97@gmail.com”>
Date: Mon, 17 Oct 2022 14:15:13 +0300
Subject: [PATCH 6/7] English localization
---
public/locales/en/translation.json | 103 +++++++++++++++++++++++------
1 file changed, 84 insertions(+), 19 deletions(-)
diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json
index 133ea55..56f2981 100755
--- a/public/locales/en/translation.json
+++ b/public/locales/en/translation.json
@@ -1,7 +1,7 @@
{
"serv": {
- "goHome": "Home",
- "noSuchPath": "We don't have this page"
+ "goHome": "Home page",
+ "noSuchPath": "We don't have such a page"
},
"sidemenu": {
"dashboard": "Dashboard",
@@ -19,45 +19,110 @@
"hellousr": "Hello, {{username}}",
"edit": "Edit",
"language": "Language",
- "selectLanguage": "Select language",
+ "selectLanguage": "Select a language",
"save": "Save",
"cancel": "Cancel",
"account": {
- "info": "Personal information",
+ "info": "Personal Information",
"mail": "Mail",
- "connect": "Add account",
- "connectedAccounts_one": "Connected account",
- "connectedAccounts_other": "Connected accounts",
- "settings": "Account settings"
+ "connect": "Add Account",
+ "connectedAccounts_one": "Linked Account",
+ "connectedAccounts_other": "Linked Accounts",
+ "settings": "Account Settings"
},
"security": {
"password": {
"caption": "Password",
- "twoFactor": "Two factor authentication (2FA)",
- "description": "Keep your account secure by enabling 2FA via SMS or using a temporary one-time passcode (TOTP) from an authenticator app."
+ "twoFactor": "Two-factor authentication (2FA)",
+ "description": "Protect your account by enabling 2FA via SMS or using a temporary one-time password (OTP) from the authentication app."
},
"activity": {
"caption": "Device activity"
}
},
"search": {
- "label": "Search for something.."
+ "label": "We will find something.."
},
"subscriptions": {
- "subscribed": "Service have been connected"
+ "subscribed": "The service is attached to the account"
},
"viewHistory": "View history",
- "logOutEverywhere": "log out from all devices",
+ "logOutEverywhere": "Log out from all devices",
"back": "Back",
- "logOut": "Log out",
+ "logOut": "Exit",
"failures": {
"subscriptions": {
- "failure": "Failed to connect service",
- "exists": "Service have already been connected",
- "confirmation": "Invalid confirmation information provided"
+ "failure": "Failed to attach the service to your account",
+ "exists": "The service was already attached to your account earlier",
+ "confirmation": "Invalid password"
},
"services": {
- "fork": "Failed to authenticate in service"
+ "fork": "Failed to perform authorization in the service"
}
+ },
+ "articlePage": {
+ "abstract": "Abstract",
+ "keywords": "Keywords"
+ },
+ "navbar": {
+ "createNew": "Create an article",
+ "about": {
+ "navTitle": "About the project",
+ "aboutProject": "About Scipaper",
+ "contacts": "Contacts",
+ "help": "Help"
+ },
+ "library": {
+ "navTitle": "My library",
+ "publications": "Publications",
+ "favorites": "Favorites",
+ "collections": "Collections",
+ "recentViewed": "History"
+ },
+ "auth": {
+ "signIn": "Sign In",
+ "signUp": "Sign Up"
+ }
+ },
+ "footer": {
+ "accountSettings": "Account Settings",
+ "about": "About Scipaper",
+ "help": "Help",
+ "contactUs": "Contacts",
+ "allRightsReserved": "All rights reserved",
+ "termsOfUse": "Terms of Use",
+ "privacyPolicy": "Privacy Policy",
+ "coockiesPolicy": "coockies Usage Policy",
+ "supportedBy": "Created"
+ },
+ "mainPage": {
+ "title": "Scientific Library with free access",
+ "search": "Search",
+ "article_one": "Articles",
+ "article_few": "Articles",
+ "article_many": "Articles",
+ "advancedSearch": "Advanced search",
+ "featuredArticles": {
+ "title": "Popular articles",
+ "descriptionPart1": "Choose the one you are interested in",
+ "descriptionPart2": "Scientific category",
+ "categories": {
+ "Medical": "Medical",
+ "TechnicsAndTechlonogies": "Technics and Technology",
+ "Fundamental": "Fundamental",
+ "Humanitarian": "Humanitarian",
+ "Agricultural": "Agricultural",
+ "Social": "Social"
+ }
+ },
+ "featuredAuthors": "Popular authors",
+ "more": "More",
+ "showAll": "Show all"
+ },
+ "searchResults": {
+ "title": "Search results",
+ "totalResults":"Total results",
+ "nothingFound": "Nothing found"
}
-}
\ No newline at end of file
+
+}
From 8a075e926e0729f2c32921d454980d55032bef46 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9CSalar?= <“salar.sali97@gmail.com”>
Date: Mon, 17 Oct 2022 14:47:21 +0300
Subject: [PATCH 7/7] resolve the style of link
---
src/components/typography/Link.tsx | 1 +
1 file changed, 1 insertion(+)
diff --git a/src/components/typography/Link.tsx b/src/components/typography/Link.tsx
index c01bb6b..8b55a57 100755
--- a/src/components/typography/Link.tsx
+++ b/src/components/typography/Link.tsx
@@ -51,6 +51,7 @@ export default function Link({
: style
}
aria-disabled={disabled}
+ className="flex items-center"
{...props}
>
{children}