fix styling after merge 2
This commit is contained in:
parent
fbefa552dd
commit
8a43c9859f
@ -4,7 +4,7 @@ import CategoryFilter from "./CategoryFilter";
|
||||
import LanguageFilter from "./LanguageFilter";
|
||||
import SearchFilter from "./SearchFilter";
|
||||
import SortFilter from "./SortFilter";
|
||||
import { mobile, tablet } from "@docspace/components/utils/device";
|
||||
import { hugeDesktop, mobile, tablet } from "@docspace/components/utils/device";
|
||||
import { Base } from "@docspace/components/themes";
|
||||
|
||||
export const StyledFilter = styled.div`
|
||||
@ -32,6 +32,14 @@ export const StyledFilter = styled.div`
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
@media ${hugeDesktop} {
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
@media ${tablet} {
|
||||
padding-bottom: 16px;
|
||||
}
|
||||
|
||||
@media ${mobile} {
|
||||
height: 72px;
|
||||
|
||||
|
@ -1,6 +1,11 @@
|
||||
import styled, { css } from "styled-components";
|
||||
|
||||
import { tablet, mobile } from "@docspace/components/utils/device";
|
||||
import {
|
||||
tablet,
|
||||
mobile,
|
||||
hugeDesktop,
|
||||
desktop,
|
||||
} from "@docspace/components/utils/device";
|
||||
import Headline from "@docspace/common/components/Headline";
|
||||
import ComboBox from "@docspace/components/combobox";
|
||||
import { Base } from "@docspace/components/themes";
|
||||
@ -13,21 +18,6 @@ const calculateContainerGridColumns = (isRootFolder, isInfoPanelVisible) => {
|
||||
return result;
|
||||
};
|
||||
|
||||
const StyledHeadline = styled(Headline)`
|
||||
width: 100%;
|
||||
font-weight: 700;
|
||||
font-size: 18px;
|
||||
line-height: 24px;
|
||||
@media ${tablet} {
|
||||
font-size: 21px;
|
||||
line-height: 28px;
|
||||
}
|
||||
@media ${mobile} {
|
||||
font-size: 18px;
|
||||
line-height: 24px;
|
||||
}
|
||||
`;
|
||||
|
||||
const StyledContainer = styled.div`
|
||||
width: 100%;
|
||||
height: 32px;
|
||||
@ -51,14 +41,34 @@ const StyledContainer = styled.div`
|
||||
theme.interfaceDirection === "rtl" && "transform: scaleX(-1);"}
|
||||
}
|
||||
|
||||
height: 69px;
|
||||
box-sizing: border-box;
|
||||
|
||||
@media ${tablet} {
|
||||
width: 100%;
|
||||
padding: 16px 0 16px;
|
||||
height: 69px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
@media ${mobile} {
|
||||
height: 53px;
|
||||
padding: 0;
|
||||
}
|
||||
`;
|
||||
|
||||
const StyledHeadline = styled(Headline)`
|
||||
width: 100%;
|
||||
padding: 12px 0 12px;
|
||||
font-weight: 700;
|
||||
font-size: 18px;
|
||||
line-height: 24px;
|
||||
box-sizing: border-box;
|
||||
|
||||
@media ${tablet} {
|
||||
font-size: 21px;
|
||||
line-height: 28px;
|
||||
}
|
||||
@media ${mobile} {
|
||||
font-size: 18px;
|
||||
line-height: 24px;
|
||||
}
|
||||
`;
|
||||
|
||||
|
@ -65,8 +65,9 @@ const FormGallery = ({
|
||||
// withBodyScroll
|
||||
// withBodyAutoFocus={!isMobile}
|
||||
withPaging={false}
|
||||
isFormGallery
|
||||
>
|
||||
<Section.SectionHeader>
|
||||
<Section.SectionHeader isFormGallery>
|
||||
<SectionHeaderContent />
|
||||
</Section.SectionHeader>
|
||||
|
||||
|
@ -47,6 +47,7 @@ const Section = (props) => {
|
||||
isInfoPanelScrollLocked,
|
||||
isEmptyPage,
|
||||
isTrashFolder,
|
||||
isFormGallery,
|
||||
currentDeviceType,
|
||||
} = props;
|
||||
|
||||
@ -173,6 +174,7 @@ const Section = (props) => {
|
||||
showText={showText}
|
||||
isEmptyPage={isEmptyPage}
|
||||
isTrashFolder={isTrashFolder}
|
||||
isFormGallery={isFormGallery}
|
||||
>
|
||||
{sectionHeaderContent
|
||||
? sectionHeaderContent.props.children
|
||||
@ -215,6 +217,7 @@ const Section = (props) => {
|
||||
settingsStudio={settingsStudio}
|
||||
isEmptyPage={isEmptyPage}
|
||||
isTrashFolder={isTrashFolder}
|
||||
isFormGallery={isFormGallery}
|
||||
>
|
||||
{sectionHeaderContent
|
||||
? sectionHeaderContent.props.children
|
||||
|
@ -17,6 +17,13 @@ const StyledSectionHeader = styled.div`
|
||||
height: 61px;
|
||||
min-height: 61px;
|
||||
|
||||
${({ isFormGallery }) =>
|
||||
isFormGallery &&
|
||||
css`
|
||||
height: 69px;
|
||||
min-height: 69px;
|
||||
`}
|
||||
|
||||
.header-container {
|
||||
margin-bottom: 1px;
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
@ -85,6 +92,7 @@ const SectionHeader = (props) => {
|
||||
className,
|
||||
isEmptyPage,
|
||||
isTrashFolder,
|
||||
isFormGallery,
|
||||
...rest
|
||||
} = props;
|
||||
|
||||
@ -95,6 +103,7 @@ const SectionHeader = (props) => {
|
||||
viewAs={viewAs}
|
||||
settingsStudio={settingsStudio}
|
||||
isTrashFolder={isTrashFolder}
|
||||
isFormGallery={isFormGallery}
|
||||
{...rest}
|
||||
/>
|
||||
);
|
||||
|
Loading…
Reference in New Issue
Block a user