Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 2bc2534

Browse files
brentvatnebrentvatne
committed
[Showcase] Add a few more apps, improve styling
1 parent bbf7a8f commit 2bc2534

File tree

2 files changed

+103
-57
lines changed

2 files changed

+103
-57
lines changed

‎website/src/react-native/css/react-native.css

Lines changed: 32 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -992,10 +992,40 @@ div[data-twttr-id] iframe {
992992
display: none;
993993
}
994994

995+
.showcaseHeader {
996+
text-align: center;
997+
padding-bottom: 15px;
998+
padding-top: 15px;
999+
}
1000+
9951001
.showcase {
996-
margin: 40px auto;
997-
width: 30%;
1002+
margin: 30px auto;
1003+
width: 25%;
9981004
display: inline-block;
1005+
text-align: center;
1006+
vertical-align: top;
1007+
transition: 0.2s opacity ease-in;
1008+
}
1009+
1010+
.showcase:hover {
1011+
text-decoration: none;
1012+
opacity: 0.8;
1013+
}
1014+
1015+
.showcase h3 {
1016+
margin-bottom: 0px;
1017+
line-height: 20px;
1018+
padding-left: 5px;
1019+
padding-right: 5px;
1020+
font-size: 16px;
1021+
}
1022+
1023+
.showcase p {
1024+
margin-top: 5px;
1025+
}
1026+
1027+
.showcase h3, .showcase p {
1028+
color: rgb(72, 72, 72);
9991029
}
10001030

10011031
.showcase img {

‎website/src/react-native/showcase.js

Lines changed: 71 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -13,10 +13,22 @@ var center = require('center');
1313

1414
var apps = [
1515
{
16-
name: 'Lrn',
17-
icon: 'http://is4.mzstatic.com/image/pf/us/r30/Purple1/v4/41/a9/e9/41a9e9b6-7801-aef7-2400-2eca14923321/mzl.adyswxad.png',
18-
link: 'https://itunes.apple.com/us/app/lrn-learn-to-code-at-your/id1019622677',
19-
author: 'Lrn Labs, Inc',
16+
name: 'Beetroot',
17+
icon: 'http://is1.mzstatic.com/image/pf/us/r30/Purple5/v4/66/fd/dd/66fddd70-f848-4fc5-43ee-4d52197ccab8/pr_source.png',
18+
link: 'https://itunes.apple.com/us/app/beetroot/id1016159001?ls=1&mt=8',
19+
author: 'Alex Duckmanton',
20+
},
21+
{
22+
name: 'Discovery VR',
23+
icon: 'http://a2.mzstatic.com/us/r30/Purple6/v4/d1/d5/f4/d1d5f437-9f6b-b5aa-5fe7-47bd19f934bf/icon175x175.png',
24+
link: 'https://itunes.apple.com/us/app/discovery-vr/id1030815031?mt=8',
25+
author: 'Discovery Communications',
26+
},
27+
{
28+
name: 'DropBot',
29+
icon: 'http://a2.mzstatic.com/us/r30/Purple69/v4/fb/df/73/fbdf73e0-22d2-c936-3115-1defa195acba/icon175x175.png',
30+
link: 'https://itunes.apple.com/us/app/dropbot-phone-replacement/id1000855694?mt=8',
31+
author: 'Peach Labs',
2032
},
2133
{
2234
name: 'F8',
@@ -25,52 +37,22 @@ var apps = [
2537
author: 'Facebook',
2638
},
2739
{
28-
name: 'FB groups',
40+
name: 'Facebook Groups',
2941
icon: 'http://is4.mzstatic.com/image/pf/us/r30/Purple69/v4/57/f8/4c/57f84c0c-793d-5f9a-95ee-c212d0369e37/mzl.ugjwfhzx.png',
3042
link: 'https://itunes.apple.com/us/app/facebook-groups/id931735837?mt=8',
3143
author: 'Facebook',
3244
},
33-
{
34-
name: 'FB Ads Manager - ios',
35-
icon: 'http://is5.mzstatic.com/image/pf/us/r30/Purple5/v4/9e/16/86/9e1686ef-cc55-805a-c977-538ddb5e6832/mzl.gqbhwitj.png',
36-
link: 'https://itunes.apple.com/us/app/facebook-ads-manager/id964397083?mt=8',
37-
author: 'Facebook',
38-
},
39-
{
40-
name: 'RN Playground',
41-
icon: 'http://is5.mzstatic.com/image/pf/us/r30/Purple1/v4/20/ec/8e/20ec8eb8-9e12-6686-cd16-7ac9e3ef1d52/mzl.ngvuoybx.png',
42-
link: 'https://itunes.apple.com/us/app/react-native-playground/id1002032944?mt=8',
43-
author: 'Joshua Sierles',
44-
},
45-
{
46-
name: 'Beetroot',
47-
icon: 'http://is1.mzstatic.com/image/pf/us/r30/Purple5/v4/66/fd/dd/66fddd70-f848-4fc5-43ee-4d52197ccab8/pr_source.png',
48-
link: 'https://itunes.apple.com/us/app/beetroot/id1016159001?ls=1&mt=8',
49-
author: 'Alex Duckmanton',
50-
},
5145
{
5246
name: 'FB Ads Manager - Android',
5347
icon: 'https://lh3.googleusercontent.com/ODKlFYm7BaNiLMEEDO2b4DOCU-hmS1-Fg3_x_lLUaJZ0ssFsxciSoX1dYERaWDJuEs8=w300-rw',
5448
link: 'https://play.google.com/store/apps/details?id=com.facebook.adsmanager',
5549
author: 'Facebook',
5650
},
5751
{
58-
name: 'Night Light',
59-
icon: 'http://is3.mzstatic.com/image/pf/us/r30/Purple7/v4/5f/50/5f/5f505fe5-0a30-6bbf-6ed9-81ef09351aba/mzl.lkeqxyeo.png',
60-
link: 'https://itunes.apple.com/gb/app/night-light-feeding-light/id1016843582?mt=8',
61-
author: 'Tian Yuan',
62-
},
63-
{
64-
name: 'Lumpen Radio',
65-
icon: 'http://is5.mzstatic.com/image/pf/us/r30/Purple1/v4/46/43/00/464300b1-fae3-9640-d4a2-0eb050ea3ff2/mzl.xjjawige.png',
66-
link: 'https://itunes.apple.com/us/app/lumpen-radio/id1002193127?mt=8',
67-
author: 'Joshua Habdas',
68-
},
69-
{
70-
name: 'Mr. Dapper',
71-
icon: 'http://is5.mzstatic.com/image/pf/us/r30/Purple4/v4/e8/3f/7c/e83f7cb3-2602-f8e8-de9a-ce0a775a4a14/mzl.hmdjhfai.png',
72-
link: 'https://itunes.apple.com/us/app/mr.-dapper-men-fashion-app/id989735184?ls=1&mt=8',
73-
author: 'wei ping woon',
52+
name: 'Facebook Ads Manager - iOS',
53+
icon: 'http://is5.mzstatic.com/image/pf/us/r30/Purple5/v4/9e/16/86/9e1686ef-cc55-805a-c977-538ddb5e6832/mzl.gqbhwitj.png',
54+
link: 'https://itunes.apple.com/us/app/facebook-ads-manager/id964397083?mt=8',
55+
author: 'Facebook',
7456
},
7557
{
7658
name: 'HSK Level 1 Chinese Flashcards',
@@ -79,34 +61,70 @@ var apps = [
7961
author: 'HS Schaaf',
8062
},
8163
{
82-
name: 'youmeyou',
83-
icon: 'http://is1.mzstatic.com/image/pf/us/r30/Purple7/v4/7c/42/30/7c423042-8945-7733-8af3-1523468706a8/mzl.qlecxphf.png',
84-
link: 'https://itunes.apple.com/us/app/youmeyou/id949540333?mt=8',
85-
author: 'youmeyou, LLC',
64+
name: 'Lrn',
65+
icon: 'http://is4.mzstatic.com/image/pf/us/r30/Purple1/v4/41/a9/e9/41a9e9b6-7801-aef7-2400-2eca14923321/mzl.adyswxad.png',
66+
link: 'https://itunes.apple.com/us/app/lrn-learn-to-code-at-your/id1019622677',
67+
author: 'Lrn Labs, Inc',
68+
},
69+
{
70+
name: 'Lumpen Radio',
71+
icon: 'http://is5.mzstatic.com/image/pf/us/r30/Purple1/v4/46/43/00/464300b1-fae3-9640-d4a2-0eb050ea3ff2/mzl.xjjawige.png',
72+
link: 'https://itunes.apple.com/us/app/lumpen-radio/id1002193127?mt=8',
73+
author: 'Joshua Habdas',
8674
},
8775
{
8876
name: 'MinTrain',
8977
icon: 'http://is5.mzstatic.com/image/pf/us/r30/Purple5/v4/51/51/68/51516875-1323-3100-31a8-cd1853d9a2c0/mzl.gozwmstp.png',
9078
link: 'https://itunes.apple.com/us/app/mintrain/id1015739031?mt=8',
9179
author: 'Peter Cottle',
9280
},
81+
{
82+
name: 'Mr. Dapper',
83+
icon: 'http://is5.mzstatic.com/image/pf/us/r30/Purple4/v4/e8/3f/7c/e83f7cb3-2602-f8e8-de9a-ce0a775a4a14/mzl.hmdjhfai.png',
84+
link: 'https://itunes.apple.com/us/app/mr.-dapper-men-fashion-app/id989735184?ls=1&mt=8',
85+
author: 'wei ping woon',
86+
},
9387
{
9488
name: 'Ncredible',
9589
icon: 'http://a3.mzstatic.com/us/r30/Purple2/v4/a9/00/74/a9007400-7ccf-df10-553b-3b6cb67f3f5f/icon350x350.png',
9690
link: 'https://itunes.apple.com/ca/app/ncredible/id1019662810?mt=8',
9791
author: 'NBC News Digital, LLC',
9892
},
93+
{
94+
name: 'Night Light',
95+
icon: 'http://is3.mzstatic.com/image/pf/us/r30/Purple7/v4/5f/50/5f/5f505fe5-0a30-6bbf-6ed9-81ef09351aba/mzl.lkeqxyeo.png',
96+
link: 'https://itunes.apple.com/gb/app/night-light-feeding-light/id1016843582?mt=8',
97+
author: 'Tian Yuan',
98+
},
9999
{
100100
name: 'ReactTo36',
101101
icon: 'http://is2.mzstatic.com/image/pf/us/r30/Purple5/v4/e3/c8/79/e3c87934-70c6-4974-f20d-4adcfc68d71d/mzl.wevtbbkq.png',
102102
link: 'https://itunes.apple.com/us/app/reactto36/id989009293?mt=8',
103103
author: 'Jonathan Solichin',
104104
},
105105
{
106-
name: 'DropBot',
107-
icon: 'http://a2.mzstatic.com/us/r30/Purple69/v4/fb/df/73/fbdf73e0-22d2-c936-3115-1defa195acba/icon175x175.png',
108-
link: 'https://itunes.apple.com/us/app/dropbot-phone-replacement/id1000855694?mt=8',
109-
author: 'Peach Labs',
106+
name: 'RN Playground',
107+
icon: 'http://is5.mzstatic.com/image/pf/us/r30/Purple1/v4/20/ec/8e/20ec8eb8-9e12-6686-cd16-7ac9e3ef1d52/mzl.ngvuoybx.png',
108+
link: 'https://itunes.apple.com/us/app/react-native-playground/id1002032944?mt=8',
109+
author: 'Joshua Sierles',
110+
},
111+
{
112+
name: 'Start - medication manager for depression',
113+
icon: 'http://a1.mzstatic.com/us/r30/Purple49/v4/de/9b/6f/de9b6fe8-84ea-7a12-ba2c-0a6d6c7b10b0/icon175x175.png',
114+
link: 'https://itunes.apple.com/us/app/start-medication-manager-for/id1012099928?mt=8',
115+
author: 'Iodine Inc.',
116+
},
117+
{
118+
name: 'Tong Xing Wang',
119+
icon: 'http://a3.mzstatic.com/us/r30/Purple1/v4/7d/52/a7/7d52a71f-9532-82a5-b92f-87076624fdb2/icon175x175.jpeg',
120+
link: 'https://itunes.apple.com/cn/app/tong-xing-wang/id914254459?mt=8',
121+
author: 'Ho Yin Tsun Eugene',
122+
},
123+
{
124+
name: 'youmeyou',
125+
icon: 'http://is1.mzstatic.com/image/pf/us/r30/Purple7/v4/7c/42/30/7c423042-8945-7733-8af3-1523468706a8/mzl.qlecxphf.png',
126+
link: 'https://itunes.apple.com/us/app/youmeyou/id949540333?mt=8',
127+
author: 'youmeyou, LLC',
110128
},
111129
];
112130

@@ -115,7 +133,7 @@ var showcase = React.createClass({
115133
return (
116134
<Site section="showcase" title="Showcase">
117135
<section className="content wrap documentationContent nosidebar">
118-
<div className="inner-content">
136+
<div className="inner-content showcaseHeader">
119137
<h1>Apps using React Native</h1>
120138
<div className="subHeader"></div>
121139
<p>
@@ -125,13 +143,11 @@ var showcase = React.createClass({
125143
{
126144
apps.map((app, i) => {
127145
return (
128-
<div className="showcase" key={i}>
129-
<center>
130-
<img src={app.icon} alt={app.name} />
131-
<h3>{app.name}</h3>
132-
<p>By <a href={app.link}>{app.author}</a></p>
133-
</center>
134-
</div>
146+
<a href={app.link} className="showcase" key={i} target="blank">
147+
<img src={app.icon} alt={app.name} />
148+
<h3>{app.name}</h3>
149+
<p>By {app.author}</p>
150+
</a>
135151
);
136152
})
137153
}

0 commit comments

Comments
 (0)