Scipaper/front-end
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

added styles for adaptive

Browse Source
This commit is contained in:
Maximus 2022-08-24 23:37:08 +03:00
parent c319c8298b
commit 0c34803cfb
2 changed files with 12 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/layouts/ThreeColumn/ColumnLayout.css
View File

@ -1,5 +1,6 @@
.left-bar {
grid-area: lb;
max-width: 300px;
}
.main-bar {
@ -8,6 +9,7 @@
.right-bar {
grid-area: rb;
max-width: 300px;
}
.column-layout-grid {
@ -17,6 +19,9 @@
}
@media (min-width: 768px) {
.right-bar {
max-width: 100%;
}
.column-layout-grid {
display: grid;
grid-template-columns: minmax(300px, 1fr);
@ -29,7 +34,7 @@
@media (min-width: 1280px) {
.column-layout-grid {
display: grid;
grid-template-columns: 300px 1fr 300px;
grid-template-columns: auto 1fr auto;
grid-template-areas: "lb main rb";
}
}

8
src/components/layouts/ThreeColumn/ColumnLayout.tsx
View File

@ -88,7 +88,11 @@ export const ColumnLayout: React.FC<ColumnLayoutProps> & ColumnExtentions = ({
}
});
const countChildren = React.Children.count(children);
// TODO
const amountChildren = React.Children.count(children);
if (amountChildren > 3) {
alert("Layout gets only 3 or lesser children");
}
const columns = React.Children.map(children, (child) => {
if (
@ -108,7 +112,7 @@ export const ColumnLayout: React.FC<ColumnLayoutProps> & ColumnExtentions = ({
return (
<div ref={ref} className="flex">
<div className="w-full px-2 xl:px-12 column-layout-grid">
{countChildren <= 3 ? columns : undefined}
{amountChildren <= 3 ? columns : undefined}
</div>
</div>
);