Mirroring/my-links
1
0
Fork 0
mirror of https://github.com/Sonny93/my-links.git synced 2025-12-10 15:35:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: index page responsive

Browse Source
This commit is contained in:
Sonny
2023-11-26 01:14:26 +01:00
parent 20a0f86118
commit e0a2398e78
2 changed files with 25 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
src/pages/index.tsx
View File

@@ -1,6 +1,5 @@
import BlockWrapper from "components/BlockWrapper/BlockWrapper";
import ButtonLink from "components/ButtonLink";
import LangSelector from "components/LangSelector";
import Links from "components/Links/Links";
import Modal from "components/Modal/Modal";
import PageTransition from "components/PageTransition";
@@ -21,6 +20,7 @@ import { useCallback, useMemo, useState } from "react";
import { useHotkeys } from "react-hotkeys-hook";
import { Category, Link, SearchItem } from "types";
import { withAuthentication } from "utils/session";
import clsx from "clsx";
interface HomePageProps {
categories: Category[];
@@ -139,39 +139,12 @@ export default function HomePage(props: HomePageProps) {
return (
<PageTransition
className="App"
className={clsx("App", "flex-row")}
style={{ flexDirection: "row" }}
hideLangageSelector
>
{isMobile ? (
<>
<span
style={{
display: "flex",
alignItems: "center",
justifyContent: "center",
}}
>
<UserCard />
<LangSelector />
</span>
<AnimatePresence>
{mobileModal.isShowing && (
<Modal close={mobileModal.close}>
<BlockWrapper style={{ minHeight: "0", flex: "1" }}>
<ButtonLink href={PATHS.CATEGORY.CREATE}>
{t("common:category.create")}
</ButtonLink>
<Categories
categories={categories}
categoryActive={categoryActive}
handleSelectCategory={handleSelectCategory}
/>
</BlockWrapper>
</Modal>
)}
</AnimatePresence>
</>
) : (
<SideMenu
categories={categories}
@@ -199,6 +172,20 @@ export default function HomePage(props: HomePageProps) {
noHeader={!isMobile}
/>
)}
{mobileModal.isShowing && (
<Modal close={mobileModal.close}>
<BlockWrapper style={{ minHeight: "0", flex: "1" }}>
<ButtonLink href={PATHS.CATEGORY.CREATE}>
{t("common:category.create")}
</ButtonLink>
<Categories
categories={categories}
categoryActive={categoryActive}
handleSelectCategory={handleSelectCategory}
/>
</BlockWrapper>
</Modal>
)}
</AnimatePresence>
</PageTransition>
);

8
src/styles/globals.scss
View File

@@ -199,6 +199,10 @@ kbd {
right: 2em;
}
.flex-row {
flex-direction: row !important;
}
@media (max-width: 1280px) {
.App {
width: 100%;
@@ -209,4 +213,8 @@ kbd {
.App {
flex-direction: column;
}
.flex-row {
flex-direction: column !important;
}
}