Nemcio/SCM-Manager
1
0
Fork 0
mirror of https://github.com/scm-manager/scm-manager.git synced 2025-11-08 06:25:45 +01:00
Code Issues Packages Projects Releases Activity

fix responsiveness for section

Browse Source
This commit is contained in:
Eduard Heimbuch
2020-02-27 10:00:29 +01:00
parent f8720087a1
commit f9b680f548
1 changed files with 16 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
scm-ui/ui-components/src/navigation/Section.tsx
View File

@@ -1,33 +1,33 @@
import React, {FC, ReactChild, useEffect, useState} from "react"; import React, { FC, ReactElement, useEffect, useState } from "react";
import { Button } from "../buttons"; import { Button } from "../buttons";
import styled from "styled-components"; import styled from "styled-components";
type Props = { type Props = {
label: string; label: string;
children?: ReactChild; children: ReactElement[];
collapsed?: boolean; collapsed?: boolean;
onCollapse?: (newStatus: boolean) => void; onCollapse?: (newStatus: boolean) => void;
}; };
type StylingProps = {
scrollPositionY: number;
collapsed: boolean;
};
const SectionContainer = styled.div` const SectionContainer = styled.div`
// @ts-ignore position: ${(props: StylingProps) => (props.scrollPositionY > 210 && window.innerWidth > 770 ? "fixed" : "inherit")};
position: ${props => (props.scrollPositionY > 210 ? "fixed" : "absolute")}; top: ${(props: StylingProps) => props.scrollPositionY > 210 && window.innerWidth > 770 && "4.5rem"};
// @ts-ignore width: ${(props: StylingProps) => (props.collapsed ? "5.5rem" : "20.5rem")};
top: ${props => props.scrollPositionY > 210 && "4.5rem"};
// @ts-ignore
width: ${props => (props.collapsed ? "5.5rem" : "20.5rem")};
`; `;
const SmallButton = styled(Button)` const SmallButton = styled(Button)`
height: 1.5rem; height: 1.5rem;
width: 1rem;
position: absolute;
right: 1.5rem;
`; `;
const MenuLabel = styled.p` const MenuLabel = styled.p`
min-height: 2.5rem; min-height: 2.5rem;
display: flex;
justify-content: ${(props: StylingProps) => (props.collapsed ? "center" : "space-between")};
`; `;
const Section: FC<Props> = ({ label, children, collapsed, onCollapse }) => { const Section: FC<Props> = ({ label, children, collapsed, onCollapse }) => {
@@ -41,14 +41,14 @@ const Section: FC<Props> = ({ label, children, collapsed, onCollapse }) => {
}; };
}, []); }, []);
// @ts-ignore const childrenWithProps = React.Children.map(children, (child: ReactElement) =>
const childrenWithProps = React.Children.map(children, (child: ReactChild) => React.cloneElement(child, { collapsed: collapsed })); React.cloneElement(child, { collapsed: collapsed })
);
const arrowIcon = collapsed ? <i className="fas fa-caret-down" /> : <i className="fas fa-caret-right" />; const arrowIcon = collapsed ? <i className="fas fa-caret-down" /> : <i className="fas fa-caret-right" />;
return ( return (
// @ts-ignore <SectionContainer collapsed={collapsed ? collapsed : false} scrollPositionY={onCollapse ? scrollPositionY : 0}>
<SectionContainer collapsed={onCollapse && collapsed} scrollPositionY={onCollapse && scrollPositionY}> <MenuLabel className="menu-label" collapsed={collapsed}>
<MenuLabel className="menu-label">
{collapsed ? "" : label} {collapsed ? "" : label}
{onCollapse && ( {onCollapse && (
<SmallButton color="info" className="is-small" action={() => onCollapse(!collapsed)}> <SmallButton color="info" className="is-small" action={() => onCollapse(!collapsed)}>