Skip to content

Commit da06ec1

Browse files
AllicolyerAllicolyer
authored
Merge pull request #34 from howtographql/community-page-styling
Community page styling
2 parents c65ce81 + 43f2f8b commit da06ec1

File tree

7 files changed

+215
-28
lines changed

7 files changed

+215
-28
lines changed

‎oss

Submodule oss updated from a977db4 to c572499

‎packages/gatsby-theme/src/components/community/TutorialListing.tsx

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,14 @@ const TutorialListing: React.FunctionComponent<TutorialListingProps> = ({
3333
<Query query={getTutorialbyGatsbyID} variables={{ gatsbyID: gatsbyID }}>
3434
{({ data }) => {
3535
return (
36-
<Card width={[1]} p={4} my={4} borderRadius={8} boxShadow="small">
36+
<Card
37+
width={[1]}
38+
p={4}
39+
my={4}
40+
borderRadius={8}
41+
boxShadow="small"
42+
backgroundColor="white"
43+
>
3744
<Flex alignItems="center" justifyContent="center">
3845
<Box width={1 / 12}>
3946
{data.getTutorialbyGatsbyID && (

‎packages/gatsby-theme/src/components/shared/Logo.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ export default ({ maxHeight }: LogoProps) => {
2222
src={require('../../assets/icons/howtographql.svg')}
2323
alt=""
2424
height={maxHeight}
25-
style={{ marginBottom: 0, marginRight: 5 }}
25+
style={{ marginBottom: 0, marginRight: 5, marginLeft: 10 }}
2626
/>
2727
<span>How to GraphQL</span>
2828
</LogoWrapper>

‎packages/gatsby-theme/src/components/shared/buttons.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -99,8 +99,8 @@ const customButtonTypes: CustomButtonType = {
9999
bg: 'white',
100100
},
101101
voteActive: {
102-
icon: 'https://i.ibb.co/b3FGXbD/Vote.png',
103-
bg: 'blue',
102+
icon: 'https://i.ibb.co/m41h9fC/Vote-filled.png',
103+
bg: 'white',
104104
},
105105
bookmark: {
106106
icon:

‎packages/gatsby-theme/src/components/templates/TutorialOverview.tsx

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,11 @@ import AuthorList from '../tutorial/AuthorList';
66
import TutorialHeader from '../tutorial/TutorialHeader';
77
import { Heading, Flex, Box } from '../shared/base';
88
import ProgressBar from '../shared/ProgressBar';
9-
import { GithubButton, SpectrumButton, TutorialButton } from '../shared/buttons';
9+
import {
10+
GithubButton,
11+
SpectrumButton,
12+
TutorialButton,
13+
} from '../shared/buttons';
1014
import { Content } from '../shared/styledHelpers';
1115
import { authors } from '../../utils/sampleData';
1216
import { graphql } from 'gatsby';

‎packages/gatsby-theme/src/pages/community.tsx

Lines changed: 154 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,127 @@
11
import * as React from 'react';
22
import Layout from '../components/shared/layout';
33
import { Content } from '../components/shared/styledHelpers';
4+
import {
5+
Heading,
6+
Box,
7+
Flex,
8+
Text,
9+
Button,
10+
Image,
11+
} from '../components/shared/base';
12+
import { styled } from '../styles';
13+
import WithCurrentUser from '../utils/auth/WithCurrentUser';
414
import TutorialListing from '../components/community/TutorialListing';
5-
import { Heading } from '../components/shared/base';
615
import { graphql } from 'gatsby';
716

817
const community = ({ data }) => {
918
const tutorials = data.tutorials.edges;
1019
return (
1120
<Layout>
12-
<Content>
13-
<Heading> Community Tutorials </Heading>
14-
{tutorials.map(tutorial => {
15-
return (
16-
<div key={tutorial.node.id}>
17-
<TutorialListing tutorial={tutorial.node} />
18-
</div>
19-
);
20-
})}
21-
</Content>
21+
<Flex flexDirection="column" alignItems="center" p={4}>
22+
<Box
23+
style={{
24+
backgroundImage: `url(${'https://i.ibb.co/S736mwr/Bg.png'})`,
25+
backgroundPosition: 'center',
26+
backgroundSize: 'cover',
27+
}}
28+
>
29+
<Flex
30+
flexDirection="row"
31+
alignItems="center"
32+
justifyContent="center"
33+
flexWrap="wrap"
34+
>
35+
<HeaderText width={1 / 4}>
36+
<Heading p={3} fontSize={5} color="#515273">
37+
Community Tutorials
38+
</Heading>
39+
<Text p={3} color="#515273">
40+
Learn from a wide range of topics. Client or server, beginner or
41+
advanced, theoretical or code-along – discover the tutorials
42+
contributed by the GraphQL community!
43+
</Text>
44+
</HeaderText>
45+
46+
<HeaderText>
47+
<img src="https://i.ibb.co/pKM9XgL/Illustration.png" />
48+
</HeaderText>
49+
50+
<FilterBox marginTop={25}>
51+
<Text p={3}>FOR FILTER BOX </Text>
52+
</FilterBox>
53+
</Flex>
54+
</Box>
55+
</Flex>
56+
57+
<TutorialContent>
58+
<TutorialNumber m={3} width={5 / 5}>
59+
<p>
60+
<span>{tutorials.length} TUTORIALS </span>
61+
</p>
62+
</TutorialNumber>
63+
<Content>
64+
{tutorials.map(tutorial => {
65+
return (
66+
<div key={tutorial.node.id}>
67+
<TutorialListing tutorial={tutorial.node} />
68+
</div>
69+
);
70+
})}
71+
</Content>
72+
</TutorialContent>
73+
<Footer height={5 / 5} p={5} paddingRight={100} paddingLeft={100}>
74+
<Heading>Contributors</Heading>
75+
<div>
76+
l ac, feugiat convallis magna. Nam dignissim semper mauris, pharetra
77+
mollis neque viverra ac. Duis semper, odio quis tincidunt convallis,
78+
libero mi tristique ipsum.l ac, feugiat convallis magna. Nam dignissim
79+
semper mauris, pharetra mollis neque viverra ac. Duis semper, odio
80+
quis tincidunt convallis, libero mi tristique ipsum.
81+
</div>
82+
<Flex flexDirection="row" backgroundColor="orange" marginTop={5}>
83+
<Box
84+
backgroundColor="#F6F6F8"
85+
p={4}
86+
width={2 / 4}
87+
alignContent="flex-start"
88+
>
89+
<Heading color="#515273" textAlign="left">
90+
Nullam ultrices massa
91+
</Heading>
92+
<Text color="#515273" textAlign="left">
93+
l ac, feugiat convallis magna. Nam dignissim semper mauris,
94+
pharetra mollis neque viverra ac. Duis semper, odio quis tincidunt
95+
convallis, libero mi tristique ipsum.
96+
</Text>
97+
<Button m={3}>Write a Tutorial</Button>
98+
</Box>
99+
<Box p={2}>
100+
<Text fontSize={[1]} textAlign="left">
101+
CORE CONTRIBUTORS
102+
</Text>
103+
<Image
104+
width={[20, 30, 40]}
105+
src="https://i.ibb.co/h1hf2Ss/Avatar.png"
106+
borderRadius={100}
107+
/>
108+
<Text fontSize={[1]} textAlign="left">
109+
COURSE CONTRIBUTORS
110+
</Text>
111+
<Image
112+
width={[20, 30, 40]}
113+
src="https://i.ibb.co/h1hf2Ss/Avatar.png"
114+
/>
115+
<Text fontSize={[1]} textAlign="left">
116+
TUTORIAL CONTRIBUTORS
117+
</Text>
118+
<Image
119+
width={[20, 30, 40]}
120+
src="https://i.ibb.co/h1hf2Ss/Avatar.png"
121+
/>
122+
</Box>
123+
</Flex>
124+
</Footer>
22125
</Layout>
23126
);
24127
};
@@ -46,4 +149,44 @@ export const query = graphql`
46149
}
47150
`;
48151

152+
const HeaderText = styled(Box)`
153+
padding: 0.5rem;
154+
margin-bottom: 1rem;
155+
max-width: ${p => p.theme.middleContainerWidth}px;
156+
`;
157+
158+
const FilterBox = styled(Box)`
159+
width: 90vh;
160+
height: 144px;
161+
background-color: #0e0f3b;
162+
color: white;
163+
`;
164+
165+
const TutorialNumber = styled(Box)`
166+
p {
167+
width: 100%;
168+
text-align: center;
169+
border-bottom: 1px solid #000;
170+
line-height: 0.1em;
171+
margin: 10px 0 20px;
172+
}
173+
,
174+
p span {
175+
background: #e5e5e5;
176+
padding: 0 10px;
177+
}
178+
`;
179+
180+
const Footer = styled(Box)`
181+
background-color: white;
182+
text-align: center;
183+
`;
184+
185+
const TutorialContent = styled(Box)`
186+
background-color: #e5e5e5;
187+
display: flex;
188+
flex-direction: column;
189+
align-items: center;
190+
`;
191+
49192
export default community;

‎packages/server/src/schema.graphql

Lines changed: 44 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
### This file was autogenerated by Nexus 0.11.6
22
### Do not make changes to this file directly
33

4-
54
type AuthenticateUserPayload implements PayloadInterface {
65
code: String
76
message: String
@@ -14,24 +13,40 @@ scalar DateTime
1413

1514
type Mutation {
1615
authenticate(
17-
"""GitHub OAuth Token from the client."""
16+
"""
17+
GitHub OAuth Token from the client.
18+
"""
1819
githubCode: String!
1920
): AuthenticateUserPayload
2021

21-
"""An authenticated user can bookmark a tutorial."""
22+
"""
23+
An authenticated user can bookmark a tutorial.
24+
"""
2225
bookmarkTutorial(tutorialId: ID!): UserTutorialPayload!
2326

24-
"""An authenticated user can update their current chapter in a tutorial."""
27+
"""
28+
An authenticated user can update their current chapter in a tutorial.
29+
"""
2530
upsertCurrentChapter(chapter: Int!, gatsbyID: String!): UserTutorialPayload!
2631

27-
"""Create tutorials from the MDX files"""
28-
upsertTutorial(gatsbyID: String!, name: String!, numberofChapters: Int!): Tutorial!
32+
"""
33+
Create tutorials from the MDX files
34+
"""
35+
upsertTutorial(
36+
gatsbyID: String!
37+
name: String!
38+
numberofChapters: Int!
39+
): Tutorial!
2940

30-
"""An authenticated user can upvote a tutorial."""
41+
"""
42+
An authenticated user can upvote a tutorial.
43+
"""
3144
upvoteTutorial(tutorialId: ID!): UserTutorialPayload!
3245
}
3346

34-
"""The standard interface for all mutation responses"""
47+
"""
48+
The standard interface for all mutation responses
49+
"""
3550
interface PayloadInterface {
3651
code: String
3752
message: String
@@ -55,9 +70,19 @@ type Tutorial {
5570
numberOfStudents: Int!
5671
updatedAt: DateTime!
5772
upvotes: Int!
58-
userTutorials(after: String, before: String, first: Int, last: Int, orderBy: UserTutorialOrderByInput, skip: Int, where: UserTutorialWhereInput): [UserTutorial!]
73+
userTutorials(
74+
after: String
75+
before: String
76+
first: Int
77+
last: Int
78+
orderBy: UserTutorialOrderByInput
79+
skip: Int
80+
where: UserTutorialWhereInput
81+
): [UserTutorial!]
5982

60-
"""The UserTutorial for the current user associated with this Tutorial."""
83+
"""
84+
The UserTutorial for the current user associated with this Tutorial.
85+
"""
6186
viewerUserTutorial: UserTutorial
6287
}
6388

@@ -164,7 +189,15 @@ type User {
164189
id: ID!
165190
name: String!
166191
updatedAt: DateTime!
167-
userTutorials(after: String, before: String, first: Int, last: Int, orderBy: UserTutorialOrderByInput, skip: Int, where: UserTutorialWhereInput): [UserTutorial!]
192+
userTutorials(
193+
after: String
194+
before: String
195+
first: Int
196+
last: Int
197+
orderBy: UserTutorialOrderByInput
198+
skip: Int
199+
where: UserTutorialWhereInput
200+
): [UserTutorial!]
168201
}
169202

170203
type UserTutorial {

0 commit comments

Comments
 (0)