Fixes/august (#12)

* fix button dimensions * fix footer hover color * breakout in trace component * fix padding on button on small screens * fix title with content on small screens * sizing adjustment in intro component * intro component adjustments * container size adjustments * meta og images * fixed gutter size * trace component fix + breakout fix * show copy button if touch device * responsive hero animation
2018-10-29 08:15:20 +00:00
parent 3d4041ecd3
commit 0e3cd82348
18 changed files with 119 additions and 58 deletions
--- a/packages/dev-tools-pages/assets/images/og-compiler.png
+++ b/packages/dev-tools-pages/assets/images/og-compiler.png
--- a/packages/dev-tools-pages/assets/images/og-cov.png
+++ b/packages/dev-tools-pages/assets/images/og-cov.png
--- a/packages/dev-tools-pages/assets/images/og-profiler.png
+++ b/packages/dev-tools-pages/assets/images/og-profiler.png
--- a/packages/dev-tools-pages/assets/images/og-trace.png
+++ b/packages/dev-tools-pages/assets/images/og-trace.png
--- a/packages/dev-tools-pages/pages.js
+++ b/packages/dev-tools-pages/pages.js
@@ -11,9 +11,9 @@ const pages = [
            'og-title': { property: 'og:title', content: 'sol-compiler' },
            'og-description': { property: 'og:description', content: 'Solidity compilation that just works' },
            'og-type': { property: 'og:type', content: 'website' },
-            'og-image': { property: 'og:image', content: '' },
+            'og-image': { property: 'og:image', content: '/images/og-compiler' },
            'twitter:site': '@0xproject',
-            'twitter:image': '',
+            'twitter:image': '/images/og-compiler',
        },
    },
    {
@@ -28,9 +28,9 @@ const pages = [
            'og-title': { property: 'og:title', content: 'sol-cov' },
            'og-description': { property: 'og:description', content: 'Solidity code coverage' },
            'og-type': { property: 'og:type', content: 'website' },
-            'og-image': { property: 'og:image', content: '' },
+            'og-image': { property: 'og:image', content: '/images/og-cov' },
            'twitter:site': '@0xproject',
-            'twitter:image': '',
+            'twitter:image': '/images/og-cov',
        },
    },
    {
@@ -45,9 +45,9 @@ const pages = [
            'og-title': { property: 'og:title', content: 'sol-profiler' },
            'og-description': { property: 'og:description', content: 'Gas profiling for Solidity' },
            'og-type': { property: 'og:type', content: 'website' },
-            'og-image': { property: 'og:image', content: '' },
+            'og-image': { property: 'og:image', content: '/images/og-profiler' },
            'twitter:site': '@0xproject',
-            'twitter:image': '',
+            'twitter:image': '/images/og-profiler',
        },
    },
    {
@@ -62,9 +62,9 @@ const pages = [
            'og-title': { property: 'og:title', content: 'sol-trace' },
            'og-description': { property: 'og:description', content: 'Human-readable stack traces' },
            'og-type': { property: 'og:type', content: 'website' },
-            'og-image': { property: 'og:image', content: '' },
+            'og-image': { property: 'og:image', content: '/images/og-trace' },
            'twitter:site': '@0xproject',
-            'twitter:image': '',
+            'twitter:image': '/images/og-trace',
        },
    },
 ];
--- a/packages/dev-tools-pages/ts/components/Breakout.tsx
+++ b/packages/dev-tools-pages/ts/components/Breakout.tsx
@@ -4,8 +4,8 @@ import { media } from 'ts/variables';

 const Breakout = styled.div`
    ${media.small`
-        margin-left: -30px;
-        width: calc(100% + 60px);
+        margin-left: -2.5rem;
+        width: calc(100% + 5rem);
  `};
 `;

--- a/packages/dev-tools-pages/ts/components/Button.tsx
+++ b/packages/dev-tools-pages/ts/components/Button.tsx
@@ -13,7 +13,8 @@ const Button =
    ButtonProps >
    `
  font-family: inherit;
-  font-size: ${props => (props.large ? '1.125rem' : '.875rem')};
+  font-size: ${props => (props.large ? '1rem' : '.875rem')};
+  line-height: 1;
  font-weight: 500;
  white-space: nowrap;
  vertical-align: middle;
@@ -21,16 +22,20 @@ const Button =
  color: ${colors.black};
  border: 0;
  border-radius: 5rem;
-  padding: ${props => (props.large ? '1.125rem 2.375rem' : '.5625rem 1.25rem')};
-  display: inline-block;
+  height: ${props => (props.large ? '3.25rem' : '2rem')};
+  padding: ${props => (props.large ? '0 2.375rem' : '0 1.25rem')};
+  display: inline-flex;
+  justify-content: space-between;
+  align-items: center;
  :hover, :focus {
    background-color: ${props => props.colors.secondary_alt};
  } 
  ${props =>
      props.large &&
      media.small`
-    font-size: 1rem;
-    padding: .875rem 1.5rem;
+    font-size: .875rem;
+    height: 2rem;
+    padding: 0 1.25rem;
  `}
 `;

--- a/packages/dev-tools-pages/ts/components/Code.tsx
+++ b/packages/dev-tools-pages/ts/components/Code.tsx
@@ -1,9 +1,15 @@
 import * as React from 'react';
 import styled from 'styled-components';

-import { colors } from 'ts/variables';
+import { colors, media } from 'ts/variables';
 import BaseButton from './Button';

+const touch = Boolean(
+    'ontouchstart' in window ||
+        (window as any).navigator.maxTouchPoints > 0 ||
+        (window as any).navigator.msMaxTouchPoints > 0,
+);
+
 interface CodeProps {
    children: React.ReactNode;
    language?: string;
@@ -19,7 +25,7 @@ interface CodeState {
 }

 const Button = styled(BaseButton)`
-    opacity: 0;
+    opacity: ${touch ? '1' : '0'};
    position: absolute;
    top: 1rem;
    right: 1rem;
@@ -80,9 +86,10 @@ const StyledCodeDiff = styled(({ gutterLength, children, ...props }: any) => <co
        position: relative;
        padding-right: 1.5rem;
        padding-left: calc(2.25rem + ${props => props.gutterLength}ch);
+
        ::before {
            content: attr(data-test);
-            font-size: 0.875rem;
+
            width: ${props => props.gutterLength};
            padding-left: 0.375rem;
            padding-right: 0.375rem;
--- a/packages/dev-tools-pages/ts/components/Container.tsx
+++ b/packages/dev-tools-pages/ts/components/Container.tsx
@@ -1,5 +1,7 @@
 import styled from 'styled-components';

+import { media } from 'ts/variables';
+
 interface ContainerProps {
    wide?: boolean;
 }
@@ -10,7 +12,7 @@ const Container =
    `
    max-width: 77.5rem;
    margin: 0 auto;
-    width: ${props => (props.wide ? '100%' : 'calc(100% - 3.75rem)')};
+    width: ${props => (props.wide ? '100%' : 'calc(100% - 5rem)')};
 `;

 export default Container;
--- a/packages/dev-tools-pages/ts/components/ContentBlock.tsx
+++ b/packages/dev-tools-pages/ts/components/ContentBlock.tsx
@@ -45,6 +45,11 @@ const Item = styled.div`

 const StyledTitle = styled(Alpha)`
    color: ${props => props.color};
+    ${media.small`
+        & + div {
+            margin-top: 1.5rem;
+        }
+    `};
 `;

 interface ContentBlockProps extends Props {
--- a/packages/dev-tools-pages/ts/components/Hero.tsx
+++ b/packages/dev-tools-pages/ts/components/Hero.tsx
@@ -6,40 +6,46 @@ import { withContext, Props } from './withContext';
 import Button from './Button';
 import { Beta } from './Typography';

-const IMAGE_WIDTH = 2560;
-const IMAGE_HEIGHT = 800;
-
 function Hero(props: Props) {
    const { subtitle, tagline, title } = props;

    return (
        <React.Fragment>
            <StyledHero>
-                <Subtitle>{subtitle}</Subtitle>
-                <Tagline as="p">{tagline}</Tagline>
-                <Button as="a" href="#" large>
-                    Read the Docs
-                </Button>
-            </StyledHero>
+                <HeroContainer>
+                    <Subtitle>{subtitle}</Subtitle>
+                    <Tagline as="p">{tagline}</Tagline>
+                    <Button as="a" href="#" large>
+                        Read the Docs
+                    </Button>
+                </HeroContainer>

-            <ImageContainer>
-                <Image src={`/images/${title}@1x.gif`} srcSet={`/images/${title}@1x.gif, /images/${title}@2x.gif 2x`} />
-            </ImageContainer>
+                <ImageContainer>
+                    <Image
+                        src={`/images/${title}@1x.gif`}
+                        srcSet={`/images/${title}@1x.gif, /images/${title}@2x.gif 2x`}
+                    />
+                </ImageContainer>
+            </StyledHero>
        </React.Fragment>
    );
 }

 const StyledHero = styled.section`
    text-align: center;
-    margin: 0 auto;
    padding-top: 9.375rem;
    padding-bottom: 2rem;
    padding-left: 2.5rem;
    padding-right: 2.5rem;
-    max-width: 590px;
    min-height: min-content;
    max-height: 37.5rem;
    height: 80vh;
+    position: relative;
+`;
+
+const HeroContainer = styled.div`
+    margin: 0 auto;
+    max-width: 590px;
 `;

 const Subtitle = styled.h2`
@@ -63,20 +69,37 @@ const Tagline = styled(Beta)`

 const ImageContainer = styled.div`
    width: 100%;
-    height: ${IMAGE_HEIGHT}px;
+    height: 800px;
    position: absolute;
-    top: 6.875rem;
+    top: 100%;
    left: 0;
    overflow: hidden;
+    transform: translateY(-50%);
    z-index: -1;
+    ${media.xlarge`
+        height: 533.333333334px;
+        transform: translateY(-60%);
+    `};
+    ${media.small`
+        height: 400px;
+        transform: translateY(-70%);
+    `};
 `;

 const Image = styled.img`
-    width: ${IMAGE_WIDTH}px;
+    width: min-content;
+    height: 100%;
    position: absolute;
    top: 0;
    left: 50%;
-    transform: translate(-50%);
+    transform: translateX(-50%);
+    object-fit: contain;
+    ${media.small`
+        height: 100%;
+        width: auto;
+        left: 0;
+        transform: translateX(-15%);
+    `};
 `;

 export default withContext(Hero);
--- a/packages/dev-tools-pages/ts/components/Intro.tsx
+++ b/packages/dev-tools-pages/ts/components/Intro.tsx
@@ -12,8 +12,10 @@ const Main = styled.div`
    display: flex;
    justify-content: space-between;

-    ${media.medium`
+    ${media.large`
        padding: 2.5rem 1.875rem
+    `};
+    ${media.medium`
        display: block;     
    `};
 `;
@@ -21,17 +23,24 @@ const Main = styled.div`
 const Title = styled(Alpha)`
    margin-bottom: 2.5rem;

-    ${media.small`margin-bottom: 2.25rem;`};
+    ${media.medium`margin-bottom: 2.25rem;`};
 `;

 const StyledIntroLead = styled(Lead)`
    max-width: 25.9375rem;
-    ${media.small`margin-bottom: 1.5625rem;`};
+    margin-right: 2rem;
+    ${media.medium`
+        max-width: 100%;
+        margin-bottom: 1.5625rem;
+    `};
 `;

 const StyledIntroAside = styled.div`
    max-width: 32.5rem;
    position: relative;
+    ${media.medium`
+        max-width: 100%;
+    `};
 `;

 interface IntroProps {
--- a/packages/dev-tools-pages/ts/components/Trace.tsx
+++ b/packages/dev-tools-pages/ts/components/Trace.tsx
@@ -6,6 +6,7 @@ import { withContext, Props } from './withContext';
 import { Alpha, Lead, Gamma } from './Typography';
 import Container from './Container';
 import Code from './Code';
+import Breakout from './Breakout';

 import ExactLocation from 'ts/icons/exact-location.svg';
 import NoLocation from 'ts/icons/no-location.svg';
@@ -28,7 +29,9 @@ function Trace(props: Props) {
                        Every time an Ethereum transaction fails, it's extremely hard to trace down the troublemaking
                        line of code. The only hint you'll get is a generic error.
                    </MainCopy>
-                    <Code light>Error: VM Exception while processing transaction: revert</Code>
+                    <Breakout>
+                        <Code light>Error: VM Exception while processing transaction: rever</Code>
+                    </Breakout>

                    <List>
                        <Item>
@@ -61,7 +64,8 @@ function Trace(props: Props) {
                        Sol-trace will give you full stack traces, including contract names, line numbers and code
                        snippets, every time you encounter an error.
                    </MainCopy>
-                    <Code light language="javascript">
+                    <Breakout>
+                        <Code light language="javascript">
                        {`contracts/src/2.0.0/protocol/Exchange/MixinSignatureValidator.sol:51:8
    require(
        isValidSignature(
@@ -71,7 +75,8 @@ function Trace(props: Props) {
        ),
        "INVALID_SIGNATURE"
    )`}
-                    </Code>
+                        </Code>
+                    </Breakout>

                    <List>
                        <Item>
@@ -110,7 +115,7 @@ const StyledSection =
    margin: 0 auto;
    background: linear-gradient(to right, ${colors.black} 50%, ${props => props.background} 50%);
    
-    ${media.small`
+    ${media.large`
        background: none
        padding-top: 0;
        padding-bottom: 0;
@@ -126,7 +131,7 @@ const Wrapper = styled(Container)`
        ${media.small`padding-bottom: 1.875rem;`};
    }

-    ${media.small`
+    ${media.large`
        display: block;
        width: 100%;
    `};
@@ -149,19 +154,22 @@ const Block =
        padding-left: 6.25rem;
    }

-    ${media.small`
-        width: 100%;
-        padding-top: 2.5rem;
-        padding-bottom: 3.4375rem;
-
+    ${media.xlarge`
        :first-of-type {
-            padding-left: 1.875rem;
-            padding-right: 1.875rem;
+            padding-right: 2.5rem;
        }
        :last-of-type {
-            padding-left: 1.875rem;
-            padding-right: 1.875rem;
+            padding-left: 2.5rem;
        }
+    `}
+    ${media.large`
+        width: 100%;
+        padding: 2.5rem;
+    `}
+
+    ${media.small`
+        padding-left: 1.875rem;
+        padding-right: 1.875rem;
    `};
 `;

--- a/packages/dev-tools-pages/ts/context/compiler.tsx
+++ b/packages/dev-tools-pages/ts/context/compiler.tsx
@@ -12,6 +12,6 @@ export default {
        secondary_alt: '#C4F2FC',
        type: '#30C3E3',
        type_alt: '#16A9C9',
-        dark: '#00404E',
+        dark: '#4B818D',
    },
 };
--- a/packages/dev-tools-pages/ts/context/cov.tsx
+++ b/packages/dev-tools-pages/ts/context/cov.tsx
@@ -12,6 +12,6 @@ export default {
        secondary_alt: '#F1D882',
        type: '#D7AE1B',
        type_alt: '#BD9406',
-        dark: '#423300',
+        dark: '#817033',
    },
 };
--- a/packages/dev-tools-pages/ts/context/profiler.tsx
+++ b/packages/dev-tools-pages/ts/context/profiler.tsx
@@ -12,6 +12,6 @@ export default {
        secondary_alt: '#FECEBE',
        type: '#EB8666',
        type_alt: '#D16745',
-        dark: '#5F1700',
+        dark: '#985C49',
    },
 };
--- a/packages/dev-tools-pages/ts/context/trace.tsx
+++ b/packages/dev-tools-pages/ts/context/trace.tsx
@@ -12,6 +12,6 @@ export default {
        secondary_alt: '#BFCDFF',
        type: '#7090FF',
        type_alt: '#355CE5',
-        dark: '#0127AB',
+        dark: '#2A4ABC',
    },
 };
--- a/packages/dev-tools-pages/ts/variables.tsx
+++ b/packages/dev-tools-pages/ts/variables.tsx
@@ -15,6 +15,8 @@ interface SizesInterface {
 }

 const sizes: SizesInterface = {
+    xlarge: 1420,
+    large: 1000,
    medium: 900,
    small: 650,
 };