Skip to content

Commit 47aaa9f

Browse files
CompuIvesCompuIves
committed
Remove margin out of the widescreen
1 parent e8c67ad commit 47aaa9f

File tree

9 files changed

+69
-58
lines changed

9 files changed

+69
-58
lines changed

‎packages/app/config/webpack.common.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -346,7 +346,6 @@ module.exports = {
346346
plugins: [
347347
new HappyPack({
348348
loaders: [
349-
'cache-loader',
350349
{
351350
path: 'babel-loader',
352351
query: babelConfig,

‎packages/app/src/app/pages/Search/Results/index.js‎

Lines changed: 18 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { Hits, Pagination } from 'react-instantsearch/dom';
44
import Centered from '@codesandbox/common/lib/components/flex/Centered';
55
import WideSandbox from '@codesandbox/common/lib/components/WideSandbox';
66
import { sandboxUrl } from '@codesandbox/common/lib/utils/url-generator';
7+
import Margin from '@codesandbox/common/lib/components/spacing/Margin';
78

89
import ResultInfo from '../ResultInfo';
910
import { Container } from './elements';
@@ -12,21 +13,23 @@ function Results() {
1213
return (
1314
<Container>
1415
<ResultInfo />
15-
<Hits
16-
hitComponent={({ hit }) => (
17-
<WideSandbox
18-
selectSandbox={() =>
19-
window.open(sandboxUrl({ id: hit.objectID, git: hit.git }))
20-
}
21-
noHeight
22-
sandbox={{
23-
...hit,
24-
title: hit.title || hit.objectID,
25-
id: hit.objectID,
26-
}}
27-
/>
28-
)}
29-
/>
16+
<Margin bottom={2}>
17+
<Hits
18+
hitComponent={({ hit }) => (
19+
<WideSandbox
20+
selectSandbox={() =>
21+
window.open(sandboxUrl({ id: hit.objectID, git: hit.git }))
22+
}
23+
noHeight
24+
sandbox={{
25+
...hit,
26+
title: hit.title || hit.objectID,
27+
id: hit.objectID,
28+
}}
29+
/>
30+
)}
31+
/>
32+
</Margin>
3033
<Centered horizontal>
3134
<Pagination />
3235
</Centered>

‎packages/common/src/components/WideSandbox/elements.ts‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,6 @@ export const Container = styled.div<{ small?: boolean; noMargin?: boolean }>`
2121
2222
margin-right: 0.5rem;
2323
margin-left: 0.5rem;
24-
margin-bottom: 2rem;
2524
2625
background-color: ${BG_COLOR};
2726
box-shadow: 0 0 0 rgba(0, 0, 0, 0.3);
@@ -52,7 +51,7 @@ export const Container = styled.div<{ small?: boolean; noMargin?: boolean }>`
5251

5352
export const SandboxTitle = styled.h2`
5453
color: ${props => props.color};
55-
font-family: 'Poppins', sans-serif;
54+
font-family: 'Poppins', sans-serif;
5655
font-size: 1rem;
5756
font-weight: 600;
5857
margin-bottom: 6px;
@@ -100,9 +99,11 @@ export const SandboxInfo = styled.div<{ noHeight?: boolean }>`
10099
z-index: 1;
101100
height: 130px;
102101
103-
${props => props.noHeight && css`
104-
height: auto;
105-
`}:
102+
${props =>
103+
props.noHeight &&
104+
css`
105+
height: auto;
106+
`}: ;
106107
`;
107108

108109
export const TemplateIcon = styled.div`

‎packages/common/src/components/spacing/Margin.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
import styled from 'styled-components';
22
import getSpacing from './get-spacing';
33

4-
export default styled.div`
4+
export const Margin = styled.div`
55
margin: ${getSpacing};
66
box-sizing: border-box;
77
`;
8+
9+
export default Margin;

‎packages/dynamic-pages/pages/profile/index.js‎

Lines changed: 14 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import React from 'react';
22
import Link from 'next/link';
33
import FeaturedSandbox from '@codesandbox/common/lib/components/FeaturedSandbox';
44
import WideSandbox from '@codesandbox/common/lib/components/WideSandbox';
5+
import Margin from '@codesandbox/common/lib/components/spacing/Margin';
56
import { camelizeKeys } from 'humps';
67

78
import openSandbox from '../../utils/openSandbox';
@@ -50,14 +51,15 @@ const Profile = ({ profile, liked, showcased }) =>
5051
`}
5152
>
5253
{profile.top_sandboxes.map(sandbox => (
53-
<WideSandbox
54-
defaultHeight={170}
55-
noMargin
56-
small
57-
key={sandbox.id}
58-
selectSandbox={({ id }) => openSandbox(id)}
59-
sandbox={sandbox}
60-
/>
54+
<Margin key={sandbox.id} bottom={2}>
55+
<WideSandbox
56+
defaultHeight={170}
57+
noMargin
58+
small
59+
selectSandbox={({ id }) => openSandbox(id)}
60+
sandbox={sandbox}
61+
/>
62+
</Margin>
6163
))}
6264
<More>
6365
<Link
@@ -78,9 +80,8 @@ const Profile = ({ profile, liked, showcased }) =>
7880
margin-bottom: 48px;
7981
`}
8082
>
81-
{liked[1]
82-
.slice(0, 5)
83-
.map(sandbox => (
83+
{liked[1].slice(0, 5).map(sandbox => (
84+
<Margin key={sandbox.id} bottom={2}>
8485
<WideSandbox
8586
noMargin
8687
defaultHeight={170}
@@ -89,7 +90,8 @@ const Profile = ({ profile, liked, showcased }) =>
8990
selectSandbox={({ id }) => openSandbox(id)}
9091
sandbox={sandbox}
9192
/>
92-
))}
93+
</Margin>
94+
))}
9395
{liked[1].length > 5 && (
9496
<More>
9597
<Link

‎packages/dynamic-pages/pages/user-sandboxes/index.js‎

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React, { useState, useEffect } from 'react';
22
import WideSandbox from '@codesandbox/common/lib/components/WideSandbox';
3+
import Margin from '@codesandbox/common/lib/components/spacing/Margin';
34
import VisibilitySensor from 'react-visibility-sensor';
45
import Link from 'next/link';
56
import { Button } from '@codesandbox/common/lib/components/Button';
@@ -102,12 +103,14 @@ const Sandboxes = ({ data, fetchUrl, profile, currentTab }) => {
102103
`}
103104
>
104105
{sandboxes.map(sandbox => (
105-
<WideSandbox
106-
small
107-
key={sandbox.id}
108-
selectSandbox={({ id }) => openSandbox(id)}
109-
sandbox={sandbox}
110-
/>
106+
<Margin bottom={2} key={sandbox.id}>
107+
<WideSandbox
108+
small
109+
key={sandbox.id}
110+
selectSandbox={({ id }) => openSandbox(id)}
111+
sandbox={sandbox}
112+
/>
113+
</Margin>
111114
))}
112115
</SandboxesWrapper>
113116
{more ? (

‎packages/homepage/src/pages/explore.js‎

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import {
88
} from '@codesandbox/common/lib/utils/keycodes';
99
import FeaturedSandbox from '@codesandbox/common/lib/components/FeaturedSandbox';
1010
import WideSandbox from '@codesandbox/common/lib/components/WideSandbox';
11+
import Margin from '@codesandbox/common/lib/components/spacing/Margin';
1112

1213
import TitleAndMetaTags from '../components/TitleAndMetaTags';
1314
import PageContainer from '../components/PageContainer';
@@ -238,17 +239,20 @@ export default class Explore extends React.PureComponent {
238239
<Sandboxes>
239240
{this.state.sandboxes.length !== 0
240241
? this.state.sandboxes.map((sandbox, i) => (
241-
<WideSandbox
242-
// We force i here so we reuse the existing components
243-
// eslint-disable-next-line react/no-array-index-key,no-console
244-
key={i}
245-
selectSandbox={this.selectSandbox}
246-
sandbox={sandbox}
247-
/>
242+
// We force i here so we reuse the existing components
243+
// eslint-disable-next-line react/no-array-index-key,no-console
244+
<Margin key={i} bottom={2}>
245+
<WideSandbox
246+
selectSandbox={this.selectSandbox}
247+
sandbox={sandbox}
248+
/>
249+
</Margin>
248250
))
249251
: new Array(16).fill(undefined).map((_, i) => (
250252
// eslint-disable-next-line react/no-array-index-key,no-console
251-
<WideSandbox key={i} />
253+
<Margin key={i} bottom={2}>
254+
<WideSandbox />
255+
</Margin>
252256
))}
253257
</Sandboxes>
254258

‎packages/homepage/src/pages/react-hooks.js‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React from 'react';
22
import { graphql } from 'gatsby';
33
import WideSandbox from '@codesandbox/common/lib/components/WideSandbox';
4+
import Margin from '@codesandbox/common/lib/components/spacing/Margin';
45

56
import TitleAndMetaTags from '../components/TitleAndMetaTags';
67
import PageContainer from '../components/PageContainer';
@@ -112,11 +113,12 @@ export default class extends React.PureComponent {
112113
<ShuffleWords />
113114
<Sandboxes>
114115
{sandboxes.map(sandbox => (
115-
<WideSandbox
116-
key={sandbox.id}
117-
selectSandbox={this.selectSandbox}
118-
sandbox={sandbox}
119-
/>
116+
<Margin key={sandbox.id} bottom={2}>
117+
<WideSandbox
118+
selectSandbox={this.selectSandbox}
119+
sandbox={sandbox}
120+
/>
121+
</Margin>
120122
))}
121123
</Sandboxes>
122124
</PageContainer>

‎yarn.lock‎

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -24243,11 +24243,6 @@ [email protected]:
2424324243
resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.3.4000.tgz#76b0f89cfdbf97827e1112d64f283f1151d6adf0"
2424424244
integrity sha512-jjOcCZvpkl2+z7JFn0yBOoLQyLoIkNZAs/fYJkUG6VKy6zLPHJGfQJYFHzibB6GJaF/8QrcECtlQ5cpvRHSMEA==
2424524245

24246-
typescript@^3.3.4000:
24247-
version "3.3.4000"
24248-
resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.3.4000.tgz#76b0f89cfdbf97827e1112d64f283f1151d6adf0"
24249-
integrity sha512-jjOcCZvpkl2+z7JFn0yBOoLQyLoIkNZAs/fYJkUG6VKy6zLPHJGfQJYFHzibB6GJaF/8QrcECtlQ5cpvRHSMEA==
24250-
2425124246
typography-breakpoint-constants@^0.15.10:
2425224247
version "0.15.10"
2425324248
resolved "https://registry.yarnpkg.com/typography-breakpoint-constants/-/typography-breakpoint-constants-0.15.10.tgz#bd5308dd57250e7f28a8c6e1c0e668ddf1178c5c"

0 commit comments

Comments
 (0)