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 { .left-bar {
grid-area: lb; grid-area: lb;
max-width: 300px;
} }
.main-bar { .main-bar {
@ -8,6 +9,7 @@
.right-bar { .right-bar {
grid-area: rb; grid-area: rb;
max-width: 300px;
} }
.column-layout-grid { .column-layout-grid {
@ -17,6 +19,9 @@
} }
@media (min-width: 768px) { @media (min-width: 768px) {
.right-bar {
max-width: 100%;
}
.column-layout-grid { .column-layout-grid {
display: grid; display: grid;
grid-template-columns: minmax(300px, 1fr); grid-template-columns: minmax(300px, 1fr);
@ -29,7 +34,7 @@
@media (min-width: 1280px) { @media (min-width: 1280px) {
.column-layout-grid { .column-layout-grid {
display: grid; display: grid;
grid-template-columns: 300px 1fr 300px; grid-template-columns: auto 1fr auto;
grid-template-areas: "lb main rb"; 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) => { const columns = React.Children.map(children, (child) => {
if ( if (
@ -108,7 +112,7 @@ export const ColumnLayout: React.FC<ColumnLayoutProps> & ColumnExtentions = ({
return ( return (
<div ref={ref} className="flex"> <div ref={ref} className="flex">
<div className="w-full px-2 xl:px-12 column-layout-grid"> <div className="w-full px-2 xl:px-12 column-layout-grid">
{countChildren <= 3 ? columns : undefined} {amountChildren <= 3 ? columns : undefined}
</div> </div>
</div> </div>
); );