crowetic/protocol
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[WIP] Fixed reusable zIndex values. Added overlay for search in docs.

Browse Source
This commit is contained in:
Piotr Janosz
2019-07-21 18:00:31 +02:00
committed by fabioberger
parent d100897b20
commit 79279e5614
9 changed files with 79 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
packages/website/ts/components/annoucement_banner.tsx
View File

@@ -1,7 +1,8 @@
import * as React from 'react';
import React from 'react';
import styled from 'styled-components';
import { colors } from 'ts/style/colors';
import { zIndex } from 'ts/style/z_index';
import { Button } from 'ts/components/button';
import { ThemeInterface } from 'ts/components/siteWrap';
@@ -128,7 +129,7 @@ const CustomSection = styled(Section)<CustomSectionProps>`
top: 0;
left: 0;
right: 0;
z-index: 1201;
z-index: ${zIndex.announcementBanner};
padding: 0 1px;
margin: 0;
max-width: 100%;

4
packages/website/ts/components/docs/header.tsx
View File

@@ -14,6 +14,8 @@ import { FlexWrap } from 'ts/components/newLayout';
import { ThemeValuesInterface } from 'ts/components/siteWrap';
import { colors } from 'ts/style/colors';
import { zIndex } from 'ts/style/z_index';
import { WebsitePaths } from 'ts/types';
interface IHeaderProps {
@@ -120,7 +122,7 @@ const DocsLogoWrap = styled.div`
font-size: var(--defaultHeading);
color: rgba(0, 0, 0, 0.5);
margin-left: 0.875rem;
z-index: 25;
z-index: ${zIndex.header};
`;
const DocsLogoLink = styled(Link)`

4
packages/website/ts/components/docs/mobileNav.tsx
View File

@@ -8,6 +8,8 @@ import { Button } from 'ts/components/button';
import { SearchInput } from 'ts/components/docs/search_input';
import { colors } from 'ts/style/colors';
import { zIndex } from 'ts/style/z_index';
import { WebsitePaths } from 'ts/types';
interface IMobileNavProps {
@@ -73,7 +75,7 @@ const Wrap = styled.nav<{ isToggled: boolean }>`
display: flex;
flex-direction: column;
justify-content: flex-end;
z-index: 20;
z-index: ${zIndex.mobileNav};
top: 0;
left: 0;
font-size: 20px;

94
packages/website/ts/components/docs/search/autocomplete.tsx
View File

@@ -25,7 +25,7 @@ interface HitProps {
export const CustomAutoComplete: React.FC<AutoCompleteProps> = ({
isHome = false,
hits = [],
currentRefinement = '',
currentRefinement,
refine,
}) => {
const [value, setValue] = useState<string>('');
@@ -77,21 +77,24 @@ export const CustomAutoComplete: React.FC<AutoCompleteProps> = ({
};
return (
<Wrapper isHome={isHome}>
<Autosuggest
suggestions={hits}
multiSection={true}
onSuggestionSelected={onSuggestionSelected}
onSuggestionsFetchRequested={onSuggestionsFetchRequested}
onSuggestionHighlighted={onSuggestionHighlighted}
onSuggestionsClearRequested={onSuggestionsClearRequested}
getSuggestionValue={getSuggestionValue}
renderSuggestion={renderSuggestion}
inputProps={inputProps}
renderSectionTitle={renderSectionTitle}
getSectionSuggestions={getSectionSuggestions}
/>
</Wrapper>
<>
<Wrapper isHome={isHome}>
<Autosuggest
suggestions={hits}
multiSection={true}
onSuggestionSelected={onSuggestionSelected}
onSuggestionsFetchRequested={onSuggestionsFetchRequested}
onSuggestionHighlighted={onSuggestionHighlighted}
onSuggestionsClearRequested={onSuggestionsClearRequested}
getSuggestionValue={getSuggestionValue}
renderSuggestion={renderSuggestion}
inputProps={inputProps}
renderSectionTitle={renderSectionTitle}
getSectionSuggestions={getSectionSuggestions}
/>
</Wrapper>
{currentRefinement && <Overlay onClick={onSuggestionsClearRequested} />}
</>
);
};
@@ -102,15 +105,19 @@ const Overlay = styled.div`
left: 0;
right: 0;
background: #000;
opacity: 0.5;
z-index: 30;
pointer-events: none;
width: 100vw;
height: 100vh;
background: rgba(243, 246, 244, 0.5);
cursor: pointer;
`;
const Wrapper = styled.div<Props>`
position: relative;
min-width: 240px;
z-index: 500;
${({ isHome }) =>
isHome &&
@@ -120,6 +127,29 @@ const Wrapper = styled.div<Props>`
margin: 0 auto;
`};
.react-autosuggest__container {
&--open,
&--focused {
background-color: ${colors.white};
}
${({ isHome }) =>
isHome &&
`
border: 1px solid transparent;
padding: 13px 30px;
&--focused,
&--open {
border: 1px solid #dbdfdd;
}
@media (max-width: 900px) {
padding: 13px 18px;
}
`};
}
.react-autosuggest__input {
background: url("data:image/svg+xml,%3Csvg width='24' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23fff' fill-opacity='.01' d='M0 0h24v24H0z'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5 10.5a5.5 5.5 0 1 1 11 0 5.5 5.5 0 0 1-11 0zM10.5 3a7.5 7.5 0 1 0 4.55 13.463l4.743 4.744 1.414-1.414-4.744-4.744A7.5 7.5 0 0 0 10.5 3z' fill='%235C5C5C'/%3E%3C/svg%3E")
transparent left center no-repeat;
@@ -135,6 +165,7 @@ const Wrapper = styled.div<Props>`
`
border-bottom-color: #b4bebd;
&--focused,
&--open {
border-bottom-color: ${colors.brandLight};
@@ -182,27 +213,6 @@ const Wrapper = styled.div<Props>`
}
}
.react-autosuggest__container {
&--open {
background-color: ${colors.white};
}
${({ isHome }) =>
isHome &&
`
border: 1px solid transparent;
padding: 13px 30px;
&--open {
border: 1px solid #dbdfdd;
}
@media (max-width: 900px) {
padding: 13px 18px;
}
`};
}
.react-autosuggest__section-container {
display: flex;
@@ -246,10 +256,9 @@ const Wrapper = styled.div<Props>`
position: absolute;
background-color: ${colors.white};
z-index: 10;
flex-grow: 1;
&--focused,
&--open {
border: 1px solid #dbdfdd;
border-top: none;
@@ -260,6 +269,7 @@ const Wrapper = styled.div<Props>`
`
right: 0;
left: 0;
top: 94px;
`};
${({ isHome }) =>

4
packages/website/ts/components/hamburger.tsx
View File

@@ -1,6 +1,8 @@
import React from 'react';
import styled from 'styled-components';
import { zIndex } from 'ts/style/z_index';
interface Props {
isOpen: boolean;
onClick?: () => void;
@@ -22,7 +24,7 @@ const StyledHamburger = styled.button<Props>`
width: 22px;
height: 16px;
position: relative;
z-index: 25;
z-index: ${zIndex.header};
padding: 0;
outline: none;
user-select: none;

5
packages/website/ts/components/header.tsx
View File

@@ -15,6 +15,9 @@ import { Logo } from 'ts/components/logo';
import { MobileNav } from 'ts/components/mobileNav';
import { FlexWrap } from 'ts/components/newLayout';
import { ThemeValuesInterface } from 'ts/components/siteWrap';
import { zIndex } from 'ts/style/z_index';
import { WebsitePaths } from 'ts/types';
interface HeaderProps {
@@ -214,7 +217,7 @@ const DropdownWrap = styled.div<DropdownWrapInterface>`
opacity: 0;
transform: translate3d(0, -10px, 0);
transition: opacity 0.35s, transform 0.35s, visibility 0s 0.35s;
z-index: 20;
z-index: ${zIndex.header};
&:after,
&:before {

4
packages/website/ts/components/logo.tsx
View File

@@ -4,6 +4,8 @@ import styled from 'styled-components';
import { ThemeInterface } from 'ts/components/siteWrap';
import LogoIcon from 'ts/icons/logo-with-type.svg';
import { zIndex } from 'ts/style/z_index';
interface LogoInterface {
theme?: ThemeInterface;
}
@@ -14,7 +16,7 @@ interface LogoInterface {
const StyledLogo = styled.div`
text-align: left;
position: relative;
z-index: 25;
z-index: ${zIndex.header};
@media (max-width: 800px) {
svg {

7
packages/website/ts/components/mobileNav.tsx
View File

@@ -5,10 +5,13 @@ import styled from 'styled-components';
import { Link } from '@0x/react-shared';
import { WrapGrid, WrapProps } from 'ts/components/newLayout';
import { WebsitePaths } from 'ts/types';
import { zIndex } from 'ts/style/z_index';
import { constants } from 'ts/utils/constants';
import { WebsitePaths } from 'ts/types';
interface IMobileNavProps {
isToggled: boolean;
toggleMobileNav: () => void;
@@ -69,7 +72,7 @@ const Wrap = styled.nav<{ isToggled: boolean }>`
display: flex;
flex-direction: column;
justify-content: flex-end;
z-index: 20;
z-index: ${zIndex.mobileNav};
top: 0;
left: 0;
font-size: 20px;

3
packages/website/ts/style/z_index.ts
View File

@@ -1,6 +1,9 @@
export const zIndex = {
header: 25,
mobileNav: 20,
topBar: 1100,
aboveTopBar: 1101,
overlay: 1105,
aboveOverlay: 1106,
announcementBanner: 1201,
};