Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix stretched components height #149

Merged
merged 3 commits into from
Oct 11, 2023
Merged

fix stretched components height #149

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
40c7c00
Merge pull request #3 from DeXter-on-Radix/main
abdulhaseeb13mar Oct 9, 2023
4e6bd9a
fix: grid rows issue on big screens
abdulhaseeb13mar Oct 9, 2023
288c82f
update: grid layout css conditions for home & rest
abdulhaseeb13mar Oct 10, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 7 additions & 1 deletion src/app/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,12 +7,15 @@ import { Footer } from "./components/Footer";
import { Navbar } from "./components/NavBar";
import { store } from "./redux/store";
import { Provider } from "react-redux";
import { usePathname } from "next/navigation";

export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
const path = usePathname();

useEffect(() => {
initializeSubscriptions(store);
return () => {
Expand All @@ -31,7 +34,10 @@ export default function RootLayout({
</head>
<Provider store={store}>
<body>
<div className="grid grid-cols-12 h-screen grid-rows-auto-1fr prose md:prose-lg lg:prose-xl max-w-none divide-y-4 divide-base-300">
<div
data-path={path}
className="grid grid-cols-12 custom-auto-row-grid h-screen prose md:prose-lg lg:prose-xl max-w-none divide-y-4 divide-base-300"
>
<Navbar />
{children}
<Footer />
Expand Down
9 changes: 9 additions & 0 deletions src/app/styles/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,3 +85,12 @@ input[type="number"]::-ms-clear {
[data-theme] {
background-color: hsl(var(--b2) / var(--tw-bg-opacity, 1));
}

/* Grid layout for home page */
.custom-auto-row-grid[data-path="/"] {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

the path for this page will later change to /trade (and the landing page / will have different content, if the custom class names are unavoidable, please add another name and use it for the trading layout somewhere. you can add a div to wrap the trade page content if it doesn't exist yet

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

it's alright, when it will be moved to the trade page, we just need to change this :

.custom-auto-row-grid[data-path="/"]

to this:

.custom-auto-row-grid[data-path="/trade"]

and the layout will work fine.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ok

grid-auto-rows: 0fr auto auto 1fr 1fr;
}
/* Grid layout for rest of the pages */
.custom-auto-row-grid {
grid-auto-rows: 0fr auto 0fr;
}