Skip to content

Commit 2750063

Browse files
leebyronleebyron
authored
Add a users page. (graphql#89)
Logos, gotta catch em all!
1 parent cb2d7cb commit 2750063

12 files changed

+145
-7
lines changed

‎site/_css/index.less

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -749,6 +749,11 @@ body.index {
749749
}
750750

751751
.logos {
752+
align-items: center;
753+
display: flex;
754+
flex-flow: row wrap;
755+
justify-content: center;
756+
752757
img {
753758
height: 100px;
754759
padding: 14px;
@@ -767,5 +772,25 @@ body.index {
767772
}
768773
}
769774
}
775+
776+
.button {
777+
display: inline-block;
778+
.headline-font(@size: 17px, @color: @text-color);
779+
border: solid 1px fadeout(black, 60%);
780+
border-radius: 6px;
781+
line-height: 1.0;
782+
transition: border 0.1s ease-out, background 0.1s ease-out, color 0.1s ease-out;
783+
padding: 0.65em 1.6em 0.6em;
784+
margin: 2em;
785+
display: inline-block;
786+
text-decoration: none;
787+
788+
&:hover, &:focus, &:active {
789+
color: white;
790+
background: @rhodamine-color;
791+
border-color: @rhodamine-color;
792+
text-decoration: none;
793+
}
794+
}
770795
}
771796
}

‎site/_css/users.less

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
section.whos-using-page {
2+
padding-bottom: 6em;
3+
text-align: center;
4+
max-width: 800px;
5+
6+
.prose {
7+
max-width: 560px;
8+
text-align: center;
9+
margin: 0 auto;
10+
}
11+
12+
.logos {
13+
align-items: center;
14+
display: flex;
15+
flex-flow: row wrap;
16+
justify-content: center;
17+
18+
img {
19+
max-height: 100px;
20+
max-width: 180px;
21+
padding: 14px;
22+
@media screen and (min-width: 1020px) {
23+
max-height: 150px;
24+
max-width: 270px;
25+
padding: 20px;
26+
}
27+
28+
&.round {
29+
max-height: 106px;
30+
max-width: 140px;
31+
padding: 11px;
32+
@media screen and (min-width: 1020px) {
33+
max-height: 158px;
34+
max-width: 210px;
35+
padding: 16px;
36+
}
37+
}
38+
}
39+
}
40+
}

‎site/index.html.js

Lines changed: 12 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -536,31 +536,36 @@ public class Character {
536536
<div className="logos">
537537
{/* Waiting for permission from some of the below */}
538538
<a href="https://www.facebook.com/" target="_blank">
539-
<img src="/img/logos/facebook.png" title="Facebook" />
539+
<img src="/users/logos/facebook.png" title="Facebook" />
540540
</a>
541541
{/** /}
542542
<a href="https://twitter.com/" target="_blank">
543-
<img src="http://github.com/%3Cspan%20class="x x-first x-last">img/logos/twitter.png" title="Twitter" className="round" />
543+
<img src="http://github.com/%3Cspan%20class="x x-first x-last">users/logos/twitter.png" title="Twitter" className="round" />
544544
</a>
545545
{/**/}
546546
<a href="https://developer.github.com/early-access/graphql" target="_blank">
547-
<img src="/img/logos/github.png" title="GitHub" className="round" />
547+
<img src="/users/logos/github.png" title="GitHub" className="round" />
548548
</a>
549549
{/** /}
550550
<a href="https://www.pinterest.com/" target="_blank">
551-
<img src="http://github.com/%3Cspan%20class="x x-first x-last">img/logos/pinterest.png" title="Pinterest" className="round" />
551+
<img src="http://github.com/%3Cspan%20class="x x-first x-last">users/logos/pinterest.png" title="Pinterest" className="round" />
552552
</a>
553553
<a href="https://www.airbnb.com/" target="_blank">
554-
<img src="http://github.com/%3Cspan%20class="x x-first x-last">img/logos/airbnb.png" title="Airbnb" className="round" />
554+
<img src="http://github.com/%3Cspan%20class="x x-first x-last">users/logos/airbnb.png" title="Airbnb" className="round" />
555555
</a>
556556
{/**/}
557557
<a href="https://www.intuit.com/" target="_blank">
558-
<img src="/img/logos/intuit.png" title="Intuit" />
558+
<img src="/users/logos/intuit.png" title="Intuit" />
559559
</a>
560560
<a href="https://www.coursera.org/" target="_blank">
561-
<img src="/img/logos/coursera.png" title="Coursera" />
561+
<img src="/users/logos/coursera.png" title="Coursera" />
562562
</a>
563563
</div>
564+
565+
<a className="button" href="/users/">
566+
More GraphQL Users
567+
</a>
568+
564569
</section>
565570

566571
</Site>

‎site/style.less

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
@import "_css/graphql.less";
22
@import "_css/index.less";
33
@import "_css/docs.less";
4+
@import "_css/users.less";
45
@import "_css/prism.less";
56
@import "_css/codemirror.less";
67
@import "_css/algolia.less";

‎site/users/index.html.js

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
/**
2+
* Copyright (c) 2015, Facebook, Inc.
3+
* All rights reserved.
4+
*
5+
* This source code is licensed under the license found in the
6+
* LICENSE file in the root directory of this source tree.
7+
*/
8+
9+
var React = require('react');
10+
var Site = require('../_core/Site');
11+
12+
/**
13+
* Adding your logo? Add it to the /whos-using/logos/ directory and then append
14+
* an entry to this list.
15+
*
16+
* Please include logos with transparent backgrounds with no margins. If your
17+
* logo is round, include `isRound: true` in your entry.
18+
*/
19+
var logos = [
20+
{
21+
name: 'Facebook',
22+
img: 'facebook.png',
23+
link: 'https://www.facebook.com/'
24+
},
25+
{
26+
name: 'GitHub',
27+
img: 'github.png',
28+
isRound: true,
29+
link: 'https://developer.github.com/early-access/graphql'
30+
},
31+
{
32+
name: 'Intuit',
33+
img: 'intuit.png',
34+
link: 'https://www.intuit.com/'
35+
},
36+
{
37+
name: 'Coursea',
38+
img: 'coursera.png',
39+
link: 'https://www.coursera.org/'
40+
},
41+
];
42+
43+
module.exports = ({ page }) =>
44+
<Site title="Who's Using" page={page}>
45+
<section className="whos-using-page">
46+
47+
<div className="prose">
48+
<h1>Who&rsquo;s using GraphQL?</h1>
49+
<p>
50+
GraphQL is used by teams of all sizes in many different environments and languages to power mobile apps, websites, and APIs.
51+
</p>
52+
<p>
53+
Is your company using GraphQL?<br />
54+
Edit this page with a <a target="_blank" href={'https://github.com/graphql/graphql.github.io/edit/source/site/' + page.relPath}>Pull Request</a> to add your logo.
55+
</p>
56+
</div>
57+
58+
<div className="logos">
59+
{logos.map(logo =>
60+
<a href={logo.link} target="_blank">
61+
<img src={'/users/logos/' + logo.img} title={logo.name} className={logo.isRound ? 'round' : null} />
62+
</a>
63+
)}
64+
</div>
65+
66+
</section>
67+
</Site>

‎site/img/logos/airbnb.png renamed to ‎site/users/logos/airbnb.png

File renamed without changes.

‎site/img/logos/coursera.png renamed to ‎site/users/logos/coursera.png

File renamed without changes.

‎site/img/logos/facebook.png renamed to ‎site/users/logos/facebook.png

File renamed without changes.

‎site/img/logos/github.png renamed to ‎site/users/logos/github.png

File renamed without changes.

‎site/img/logos/intuit.png renamed to ‎site/users/logos/intuit.png

File renamed without changes.

‎site/img/logos/pinterest.png renamed to ‎site/users/logos/pinterest.png

File renamed without changes.

‎site/img/logos/twitter.png renamed to ‎site/users/logos/twitter.png

File renamed without changes.

0 commit comments

Comments
 (0)