Skip to content

Commit 46d91ad

Browse files
christophermcintoshchristophermcintosh
committed
single user fixed up with CSS Changes
1 parent b190a03 commit 46d91ad

File tree

8 files changed

+241
-40
lines changed

8 files changed

+241
-40
lines changed

‎Follow.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -54,8 +54,8 @@ class Follow extends Component {
5454
render() {
5555
const { relationshipExists } = this.state || {};
5656
return relationshipExists
57-
? <button onClick={this.handleUnfollow}>Unfollow</button>
58-
: <button onClick={this.handleFollow}>Follow</button>;
57+
? <button className="follow-button" onClick={this.handleUnfollow}>Unfollow</button>
58+
: <button className="follow-button" onClick={this.handleFollow}>Follow</button>;
5959
}
6060
}
6161

‎GoogleMap.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -177,7 +177,7 @@ class GoogleMap extends Component {
177177
<Button variant="raised" color="primary" className={classes.button} type="text" onClick={this.onCreateClick}>Back</Button>
178178
</div>
179179
}
180-
<div ref="map" className="google-map">
180+
<div ref="map" className="google-map margin-subtract-70">
181181
Loading map...
182182
</div>
183183
</div>

‎NewMap.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -231,7 +231,7 @@ class NewMap extends Component {
231231
}
232232
</form>
233233
</div>
234-
<div ref="newmap" className="google-map">
234+
<div ref="newmap" className="google-map margin-subtract-70">
235235
Loading map...
236236
</div>
237237

‎SingleUser.jsx‎

Lines changed: 57 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -86,48 +86,72 @@ class SingleUser extends Component {
8686
} = this.state;
8787
const signedInUser = this.props.signedInUser;
8888
const userId = this.props.match.params.uid;
89-
89+
9090
return loading ? (
91-
<CircularLoad color={`secondary`} size={100} />
91+
<CircularLoad color={`secondary`} size={100} />
9292
) : (
93-
<div className="text-align-center">
94-
<img src={user.photoURL} className="margin-top-5" />
95-
<h1>{user.displayName}</h1>
96-
{signedInUser.uid === userId ? (
97-
<div />
98-
) : (
99-
<Follow followerId={signedInUser.uid} followingId={userId} />
100-
)}
101-
<Link to={`/followers/${userId}`}>
102-
<h2>
103-
Followers: <Count of={this.followers} />
104-
</h2>
105-
</Link>
106-
<Link to={`/following/${userId}`}>
107-
<h2>
108-
Following: <Count of={this.following} />
109-
</h2>
110-
</Link>
111-
112-
<div className="text-align-center">
113-
<h2>
114-
Maps Created: <Count of={this.mapsCreated} />
115-
</h2>
93+
<div className="single-user-flex">
94+
<div className="map-container">
95+
<div className="map-flex-outer">
11696
{Object.keys(createdMaps).length &&
11797
Object.keys(createdMaps).map(mapId => {
11898
return (
119-
<Link to={`/map/${mapId}`} key={mapId}>
99+
<div className="map-flex">
100+
<div className="map-flex-inner map-flex-color">
101+
<Link to={`/map/${mapId}`} key={mapId}>
102+
<p>
103+
{createdMaps[mapId].title} (<Count
104+
of={db
105+
.collection("favoritedMaps")
106+
.where("mapId", "==", mapId)}
107+
/> Pins)
108+
</p>
109+
</Link>
110+
</div>
111+
</div>
112+
);
113+
})}
114+
</div>
115+
</div>
116+
{signedInUser.uid === userId ? (
117+
<div />
118+
) :
119+
<div className="single-user-info-flex map-container">
120+
<div className="text-align-center">
121+
<img src={user.photoURL} />
122+
<h1>{user.displayName}</h1>
123+
<div className="follow-flex">
124+
<div className="follow-flex-inner">
125+
<Link to={`/followers/${userId}`}>
120126
<p>
121-
{createdMaps[mapId].title} (<Count
122-
of={db
123-
.collection("favoritedMaps")
124-
.where("mapId", "==", mapId)}
125-
/>)
127+
Followers
128+
</p>
129+
<p>
130+
<Count of={this.followers} />
126131
</p>
127132
</Link>
128-
);
129-
})}
133+
</div>
134+
<div className="follow-flex-inner">
135+
<Link to={`/following/${userId}`}>
136+
<p>
137+
Following
138+
</p>
139+
<p>
140+
<Count of={this.following} />
141+
</p>
142+
</Link>
143+
</div>
144+
<div className="follow-flex-inner">
145+
<Link to={`/`}><p>Maps </p>
146+
<p><Count of={this.mapsCreated} /></p>
147+
</Link>
148+
</div>
149+
</div>
150+
<Follow followerId={signedInUser.uid} followingId={userId} />
151+
</div>
152+
130153
</div>
154+
}
131155
</div>
132156
);
133157
}

‎firebase-debug.log‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -59,3 +59,55 @@
5959
at WriteWrap.afterWrite [as oncomplete] (net.js:867:14)
6060
[error]
6161
[error] Error: An unexpected error has occurred.
62+
[debug] [2018-03-26T15:01:40.709Z] ----------------------------------------------------------------------
63+
[debug] [2018-03-26T15:01:40.714Z] Command: /usr/local/Cellar/node/8.9.1/bin/node /Users/ChristopherMcIntosh/Documents/git/projects/1801-Capstone/MapIt/node_modules/.bin/firebase serve --only functions,hosting
64+
[debug] [2018-03-26T15:01:40.714Z] CLI Version: 3.17.6
65+
[debug] [2018-03-26T15:01:40.714Z] Platform: darwin
66+
[debug] [2018-03-26T15:01:40.714Z] Node Version: v8.9.1
67+
[debug] [2018-03-26T15:01:40.715Z] Time: Mon Mar 26 2018 11:01:40 GMT-0400 (EDT)
68+
[debug] [2018-03-26T15:01:40.716Z] ----------------------------------------------------------------------
69+
[debug]
70+
[debug] [2018-03-26T15:01:40.734Z] > command requires scopes: ["email","openid","https://www.googleapis.com/auth/cloudplatformprojects.readonly","https://www.googleapis.com/auth/firebase","https://www.googleapis.com/auth/cloud-platform"]
71+
[debug] [2018-03-26T15:01:40.734Z] > authorizing via signed-in user
72+
[debug] [2018-03-26T15:01:40.738Z] >>> HTTP REQUEST GET https://admin.firebase.com/v1/projects/map-it-fsa
73+
74+
Mon Mar 26 2018 11:01:40 GMT-0400 (EDT)
75+
[debug] [2018-03-26T15:01:41.178Z] <<< HTTP RESPONSE 200
76+
[debug] [2018-03-26T15:01:41.179Z] >>> HTTP REQUEST GET https://admin.firebase.com/v1/database/map-it-fsa/tokens
77+
78+
Mon Mar 26 2018 11:01:41 GMT-0400 (EDT)
79+
[debug] [2018-03-26T15:01:41.637Z] <<< HTTP RESPONSE 200
80+
[debug] [2018-03-26T15:01:41.638Z] >>> HTTP REQUEST GET https://cloudresourcemanager.googleapis.com/v1/projects/map-it-fsa
81+
82+
Mon Mar 26 2018 11:01:41 GMT-0400 (EDT)
83+
[debug] [2018-03-26T15:01:41.899Z] <<< HTTP RESPONSE 200
84+
[info]
85+
[info] === Serving from '/Users/ChristopherMcIntosh/Documents/git/projects/1801-Capstone/MapIt'...
86+
[info]
87+
[info] i functions: Preparing to emulate functions.
88+
[debug] [2018-03-26T15:01:43.608Z] Fetching environment
89+
[debug] [2018-03-26T15:01:43.611Z] >>> HTTP REQUEST GET https://mobilesdk-pa.googleapis.com/v1/projects/770393365469:getServerAppConfig
90+
91+
Mon Mar 26 2018 11:01:43 GMT-0400 (EDT)
92+
[debug] [2018-03-26T15:01:43.612Z] >>> HTTP REQUEST GET https://mobilesdk-pa.googleapis.com/v1/projects/770393365469/clients/_:getWebAppConfig
93+
94+
Mon Mar 26 2018 11:01:43 GMT-0400 (EDT)
95+
[debug] [2018-03-26T15:01:44.042Z] <<< HTTP RESPONSE 200
96+
[debug] [2018-03-26T15:01:44.042Z] Starting @google-cloud/functions-emulator
97+
[debug] [2018-03-26T15:01:44.065Z] <<< HTTP RESPONSE 200
98+
[info] i hosting: Serving hosting files from: public
99+
[info] ✔ hosting: Local server: http://localhost:5000
100+
101+
[debug] [2018-03-26T15:01:47.128Z] Parsing function triggers
102+
[info] ✔ functions: helloWorld: http://localhost:5001/map-it-fsa/us-central1/helloWorld
103+
[info] Shutting down...
104+
[debug] [2018-03-26T21:10:32.499Z] Error: write EPIPE
105+
at _errnoException (util.js:1024:11)
106+
at WriteWrap.afterWrite [as oncomplete] (net.js:867:14)
107+
[error]
108+
[error] Error: An unexpected error has occurred.
109+
[debug] [2018-03-26T21:10:32.502Z] Error: write EPIPE
110+
at _errnoException (util.js:1024:11)
111+
at WriteWrap.afterWrite [as oncomplete] (net.js:867:14)
112+
[error]
113+
[error] Error: An unexpected error has occurred.

‎public/img/world-map.jpg‎

436 KB
Loading

‎public/index.html‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
<!DOCTYPE html>
22
<html>
33
<head>
4-
<link rel="stylesheet" href="/main.css">
4+
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
5+
<link rel="stylesheet" href="/main.css">
56
</head>
67
<body>
78
<div id="main" />

‎public/main.css‎

Lines changed: 126 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
body {
22
/* overflow-x: hidden; */
33
margin: 0;
4-
background-color: #4253af;
4+
background-color: #4253af;
5+
font-family: Roboto;
6+
color: #fff;
57
}
68

79
div {
@@ -46,7 +48,13 @@ a:visited {
4648

4749
.col-2 {
4850
width: 78vw;
49-
background-color: #fefefe;
51+
/* background-color: #fff; */
52+
margin-top: 70px;
53+
/* height: 100vh; */
54+
}
55+
56+
.margin-subtract-70 {
57+
margin-top: -70px;
5058
}
5159

5260
.margin-top-5 {
@@ -197,3 +205,119 @@ a:visited {
197205

198206
/* Single User */
199207

208+
.single-user-flex {
209+
display: flex;
210+
flex-direction: row;
211+
justify-content: space-around;
212+
max-width: 100%;
213+
text-align: center;
214+
}
215+
216+
.maps-container {
217+
max-width: 100%;
218+
width: 60%;
219+
}
220+
221+
.single-user-info-flex h1 {
222+
font-size: 2rem;
223+
}
224+
225+
.single-user-info-flex {
226+
display: flex;
227+
flex-direction: row;
228+
width: 25%;
229+
justify-content: center;
230+
}
231+
232+
.single-user-info-flex img {
233+
width: 16vw;
234+
border: 1px solid #fff;
235+
margin-top: 5px;
236+
}
237+
238+
.follow-flex {
239+
display: flex;
240+
flex-direction: row;
241+
justify-content: space-around;
242+
}
243+
244+
.follow-flex-inner {
245+
display: flex;
246+
flex-direction: row;
247+
}
248+
249+
.follow-flex-inner p {
250+
font-size: 1rem;
251+
color: #fff;
252+
}
253+
254+
.map-container {
255+
/* border-right: 5px solid #4253af; */
256+
}
257+
258+
259+
260+
.map-flex-outer {
261+
display: flex;
262+
flex-direction: column;
263+
flex-wrap: wrap;
264+
justify-content: center;
265+
}
266+
267+
.map-flex {
268+
display: flex;
269+
background-image: url('/img/world-map.jpg');
270+
background-size: 100%;
271+
background-repeat: no-repeat;
272+
/* max-width: 30vw; */
273+
width: 50vw;
274+
height: 25vh;
275+
/* max-height: 19vh; */
276+
align-items: flex-end;
277+
justify-content: center;
278+
margin: 5px;
279+
border: 1px solid #fff;
280+
281+
}
282+
283+
.map-flex-color {
284+
/* max-width: 30vw; */
285+
width: 50vw;
286+
height: 25vh;
287+
/* max-height: 19vh; */
288+
background-color: rgba(66, 83, 175, 0.3);
289+
}
290+
291+
.map-flex-inner {
292+
display: flex;
293+
justify-content: center;
294+
align-items: center;
295+
/* background-color: rgba(66, 83, 175, 0.3); */
296+
/* width: 100%; */
297+
}
298+
299+
.map-flex-inner p {
300+
margin: 0;
301+
padding: 0;
302+
color: #fff;
303+
font-weight: bold;
304+
font-size: 3rem;
305+
text-shadow: 1px 1px 1px #000;
306+
}
307+
308+
.map-flex img {
309+
max-width: 13vw;
310+
}
311+
312+
.follow-button {
313+
background-color: #4CAF50; /* Green */
314+
border: none;
315+
color: white;
316+
padding: 15px 22px;
317+
text-align: center;
318+
text-decoration: none;
319+
display: inline-block;
320+
font-size: 14px;
321+
border-radius: 5px;
322+
margin: 5px 0;
323+
}

0 commit comments

Comments
 (0)