이세진 / dev-profile

Go to a project
Toggle navigation Toggle navigation pinning
김채리
8aeb0c1b 1 parent f688d2d0

CSS update for 'home' and 'userDetail'

Inline Side-by-side
Showing 6 changed files with 272 additions and 139 deletions
1 -const userContributionsBox = document.querySelector(".user-status__contributions"); 1 +const userContributionsBox = document.querySelector(
2 -const totalContributionIndicator = document.getElementById("jsTotalContributions"); 2 + ".user-status__contributions"
3 +);
4 +const totalContributionIndicator = document.getElementById(
5 + "jsTotalContributions"
6 +);
3 const userCharacterBox = document.querySelector(".user-status__character"); 7 const userCharacterBox = document.querySelector(".user-status__character");
4 const userRepoBox = document.querySelector(".user-repo"); 8 const userRepoBox = document.querySelector(".user-repo");
5 -const URL = "https://api.github.com/users/lsj8706/repos?sort=updated&per_page=2"; 9 +const URL =
10 + "https://api.github.com/users/lsj8706/repos?sort=updated&per_page=2";
6 11
7 - 12 +const handleImage = () => {
8 -const handleImage = () =>{ 13 + const total = totalContributionIndicator.innerText;
9 - const total = totalContributionIndicator.innerText; 14 + const img = new Image();
10 - const img = new Image(); 15 + if (total >= 0 && total < 200) {
11 - if (total>=0 && total<200){ 16 + img.src = "https://oss-2020105657.s3.amazonaws.com/first.png";
12 - img.src ="https://oss-2020105657.s3.amazonaws.com/first.png"; 17 + img.alt = "1단계";
13 - img.alt = "1단계"; 18 + } else if (total >= 200 && total < 600) {
14 - }else if (total>=200 && total<600){ 19 + img.src = "https://oss-2020105657.s3.amazonaws.com/second.png";
15 - img.src ="https://oss-2020105657.s3.amazonaws.com/second.png"; 20 + img.alt = "2단계";
16 - img.alt = "2단계"; 21 + } else if (total >= 600 && total < 1200) {
17 - }else if (total>=600 && total<1200){ 22 + img.src = "https://oss-2020105657.s3.amazonaws.com/third.png";
18 - img.src = "https://oss-2020105657.s3.amazonaws.com/third.png"; 23 + img.alt = "3단계";
19 - img.alt = "3단계"; 24 + } else if (total >= 1200 && total < 2000) {
20 - }else if (total>=1200 && total<2000){ 25 + img.src = "https://oss-2020105657.s3.amazonaws.com/four.png";
21 - img.src = "https://oss-2020105657.s3.amazonaws.com/four.png"; 26 + img.alt = "4단계";
22 - img.alt = "4단계"; 27 + } else {
23 - }else{ 28 + img.src = "https://oss-2020105657.s3.amazonaws.com/fifth.png";
24 - img.src = "https://oss-2020105657.s3.amazonaws.com/fifth.png"; 29 + img.alt = "5단계";
25 - img.alt = "5단계"; 30 + }
26 - } 31 + userCharacterBox.appendChild(img);
27 - userCharacterBox.appendChild(img);
28 }; 32 };
29 33
30 -const handleRepo = (list) =>{ 34 +const handleRepo = (list) => {
31 - list.forEach(element => { 35 + list.forEach((element) => {
32 - const anchor = document.createElement("a"); 36 + const anchor = document.createElement("a");
33 - anchor.href = element.html_url; 37 + anchor.href = element.html_url;
34 - anchor.target = "_blank" 38 + anchor.target = "_blank";
35 - anchor.innerHTML = `<div class =number><span class="repoName">${element.name}</span> : <span class="repoUrl">${element.html_url} </span></div>` 39 + anchor.innerHTML = `<div class =number><span class="repoName">${element.name}</span>:<span class="repoUrl">${element.html_url} </span></div>`;
36 - userRepoBox.appendChild(anchor); 40 + userRepoBox.appendChild(anchor);
37 - }); 41 + });
38 -
39 }; 42 };
40 43
41 -const getGithubRepo = () =>{ 44 +const getGithubRepo = () => {
42 - const response = fetch(URL).then(function(response){ 45 + const response = fetch(URL)
43 - return response.json(); 46 + .then(function (response) {
44 - }).then(function(data){ 47 + return response.json();
45 - const trendRepoList = data.slice(0,2); 48 + })
46 - handleRepo(trendRepoList); 49 + .then(function (data) {
50 + const trendRepoList = data.slice(0, 2);
51 + handleRepo(trendRepoList);
47 }); 52 });
48 }; 53 };
49 54
50 -const init=()=>{ 55 +const init = () => {
51 - handleImage(); 56 + handleImage();
52 - getGithubRepo(); 57 + getGithubRepo();
53 }; 58 };
54 59
55 -if(userContributionsBox){
56 - init();
57 -};
...\ No newline at end of file ...\ No newline at end of file
60 +if (userContributionsBox) {
61 + init();
62 +}
......
...@@ -5,54 +5,40 @@ ...@@ -5,54 +5,40 @@
5 align-items: center; 5 align-items: center;
6 .home-title { 6 .home-title {
7 margin: 40px 0px; 7 margin: 40px 0px;
8 + width: 100%;
8 display: flex; 9 display: flex;
9 flex-direction: column; 10 flex-direction: column;
10 justify-content: center; 11 justify-content: center;
11 align-items: center; 12 align-items: center;
13 +
12 h2 { 14 h2 {
13 - font-size: 20px; 15 + font-size: 25px;
14 font-family: "Roboto", sans-serif; 16 font-family: "Roboto", sans-serif;
15 - font-weight: 400; 17 + font-weight: 700;
16 text-transform: uppercase; 18 text-transform: uppercase;
19 + color: rgb(30, 30, 150);
17 margin-bottom: 30px; 20 margin-bottom: 30px;
18 } 21 }
19 - h1 { 22 + span {
20 font-size: 50px; 23 font-size: 50px;
21 font-family: "Roboto", sans-serif; 24 font-family: "Roboto", sans-serif;
22 font-weight: 800; 25 font-weight: 800;
26 + width: 60%;
27 + text-align: center;
23 text-transform: uppercase; 28 text-transform: uppercase;
29 + background-image: linear-gradient(120deg, #acedff 0%, #ffaddd 100%);
30 + background-repeat: no-repeat;
31 + background-size: 100% 0.3em;
32 + background-position: 0 88%;
33 + transition: background-size 200ms ease-in;
34 + &:hover {
35 + background-size: 100% 88%;
36 + }
24 } 37 }
25 } 38 }
26 - .home-quote {
27 - width: 100%;
28 - display: flex;
29 - text-align: center;
30 - flex-direction: column;
31 - justify-content: center;
32 - align-items: center;
33 - padding: 20px;
34 - box-shadow: 0 13px 27px -5px rgba(50, 50, 93, 0.25),
35 - 0 8px 16px -8px rgba(0, 0, 0, 0.3), 0 -6px 16px -6px rgba(0, 0, 0, 0.025);
36 - h2 {
37 - font-size: 40px;
38 - font-family: "Vollkorn", serif;
39 - margin: 10px 0px;
40 - }
41 - h3 {
42 - font-size: 25px;
43 - opacity: 0.5;
44 - font-family: "Vollkorn", serif;
45 - }
46 - }
47 - .home-search {
48 - display: flex;
49 - padding: 40px;
50 - justify-content: center;
51 - width: 100%;
52 - }
53 39
54 .home-link { 40 .home-link {
55 - margin-top: 50px; 41 + margin: 20px;
56 font-family: "Roboto", sans-serif; 42 font-family: "Roboto", sans-serif;
57 font-size: 30px; 43 font-size: 30px;
58 font-weight: 700; 44 font-weight: 700;
...@@ -62,38 +48,138 @@ ...@@ -62,38 +48,138 @@
62 justify-items: flex-end; 48 justify-items: flex-end;
63 justify-content: center; 49 justify-content: center;
64 align-items: center; 50 align-items: center;
51 + text-transform: uppercase;
65 a { 52 a {
66 color: $lilac; 53 color: $lilac;
67 &:not(:last-child) { 54 &:not(:last-child) {
68 margin-right: 50px; 55 margin-right: 50px;
69 } 56 }
57 + &:hover {
58 + color: rgb(106, 89, 233);
59 + }
60 + }
61 + }
62 +
63 + .home-search {
64 + margin-top: 30px;
65 + margin-bottom: 60px;
66 + display: flex;
67 + justify-content: space-evenly;
68 + align-items: center;
69 + background: #fff;
70 + border-radius: 500px;
71 + padding: 10px 25px 10px 25px;
72 +
73 + .home-search__form {
74 + display: flex;
75 + justify-content: space-evenly;
76 + align-items: center;
77 + background: #fff;
78 + border-radius: 500px;
79 + padding: 10px 25px 10px 25px;
80 + border: 1px solid #ccc;
81 +
82 + img {
83 + height: 30px;
84 + width: 30px;
85 + }
86 +
87 + input {
88 + padding: 5px;
89 + margin-left: 15px;
90 + margin-right: 15px;
91 + width: 300px;
92 + border-radius: 5px;
93 + background: transparent;
94 + border: 1px solid transparent;
95 + outline: none;
96 + font-size: 1.2rem;
97 + overflow-x: scroll;
98 + }
99 + i {
100 + background: transparent;
101 + border: none;
102 + i {
103 + font-size: 1.5rem;
104 + margin: 3px;
105 + }
106 + }
107 + i:hover {
108 + cursor: pointer;
109 + }
110 + }
111 + .home-search__form:hover {
112 + box-shadow: 0px 1px 4px -1px rgba(79, 78, 79, 1);
113 + }
114 + }
115 +
116 + .boxShadow {
117 + box-shadow: 0 13px 10px -5px rgba(50, 50, 93, 0.25),
118 + 0 8px 10px -8px rgba(0, 0, 0, 0.3), 0 -6px 10px -6px rgba(0, 0, 0, 0.025);
119 + }
120 +
121 + .home-quote {
122 + width: 100%;
123 + display: flex;
124 + text-align: center;
125 + flex-direction: column;
126 + justify-content: center;
127 + align-items: center;
128 + background-color: #f8f9ff;
129 + padding: 30px;
130 + @extend .boxShadow;
131 +
132 + border-top: 3pt double #7f8bd0;
133 + h2 {
134 + font-size: 40px;
135 + font-family: "Vollkorn", serif;
136 + margin: 10px 0px;
137 + }
138 + h3 {
139 + font-size: 25px;
140 + color: rgb(112, 114, 120);
141 + font-family: "Vollkorn", serif;
142 + font-weight: lighter;
143 + margin-bottom: 10px;
70 } 144 }
71 } 145 }
72 .gotoTrend { 146 .gotoTrend {
73 - margin-top: 50px;
74 display: flex; 147 display: flex;
75 - width: 120%; 148 + margin-top: 50px;
149 + width: 100%;
150 + padding: 40px;
76 text-align: center; 151 text-align: center;
77 flex-direction: column; 152 flex-direction: column;
78 justify-content: center; 153 justify-content: center;
79 align-items: center; 154 align-items: center;
80 - padding: 20px; 155 + background-color: #fffdf1;
81 - box-shadow: 0 13px 27px -5px rgba(50, 50, 93, 0.25), 156 + border-top: 3pt double #ffce72;
82 - 0 8px 16px -8px rgba(0, 0, 0, 0.3), 0 -6px 16px -6px rgba(0, 0, 0, 0.025); 157 +
158 + @extend .boxShadow;
83 h2 { 159 h2 {
84 color: #fb8500; 160 color: #fb8500;
85 - font-size: 25px; 161 + font-family: "Raleway", cursive;
162 + font-size: 30px;
86 font-weight: 700; 163 font-weight: 700;
87 - margin-bottom: 20px; 164 + margin-bottom: 30px;
165 + text-transform: uppercase;
166 + border-bottom: 3pt double $star;
167 + padding-bottom: 10px;
168 + width: 60%;
169 + i {
170 + color: $star;
171 + }
88 } 172 }
89 .gotoTrend-repos { 173 .gotoTrend-repos {
90 display: flex; 174 display: flex;
91 flex-direction: column; 175 flex-direction: column;
92 justify-content: center; 176 justify-content: center;
93 align-items: center; 177 align-items: center;
178 +
94 a { 179 a {
95 - font-size: 18px; 180 + font-size: 20px;
96 margin: 10px 0px; 181 margin: 10px 0px;
182 + font-family: "Raleway", cursive;
97 } 183 }
98 .repoName { 184 .repoName {
99 font-weight: 600; 185 font-weight: 600;
......
...@@ -44,7 +44,7 @@ ...@@ -44,7 +44,7 @@
44 font-size: 25px; 44 font-size: 25px;
45 font-weight: bolder; 45 font-weight: bolder;
46 margin: 5px; 46 margin: 5px;
47 - color: $blue; 47 + color: #392f76;
48 } 48 }
49 49
50 .boxEffect { 50 .boxEffect {
...@@ -153,13 +153,63 @@ ...@@ -153,13 +153,63 @@
153 margin: 5px; 153 margin: 5px;
154 } 154 }
155 } 155 }
156 +
157 + .user-repositories {
158 + margin-top: 30px;
159 +
160 + h3 {
161 + margin-top: 15px;
162 + margin-bottom: 10px;
163 + text-transform: uppercase;
164 + @extend .mainText;
165 + }
166 + .user-repo {
167 + margin-top: 50px;
168 + .repoName {
169 + display: inline-flex;
170 + flex-direction: row;
171 + justify-content: flex-end;
172 + font-family: "Raleway", cursive;
173 + font-size: 18px;
174 + font-weight: bold;
175 + padding: 2px;
176 + text-transform: uppercase;
177 + color: #1e1e1ed9;
178 + margin: 5px;
179 + width: 150px;
180 + }
181 + .repoUrl {
182 + display: inline-flex;
183 + flex-direction: row;
184 + font-family: "Roboto", sans-serif;
185 + font-size: 20px;
186 + font-weight: 400;
187 + color: #6f6f6f;
188 + margin: 10px;
189 + }
190 + .repoUrl:hover {
191 + display: inline-flex;
192 + flex-direction: row;
193 + font-family: "Roboto", sans-serif;
194 + font-size: 20px;
195 + font-weight: 400;
196 + text-decoration: underline;
197 + color: #6868af;
198 + margin: 10px;
199 + }
200 + }
201 + }
202 +
156 .user-status__character { 203 .user-status__character {
157 - margin-top: 50px; 204 + margin-top: 60px;
205 + margin-left: 10px;
206 + display: flex;
207 + flex-direction: column;
158 h3 { 208 h3 {
159 @extend .mainText; 209 @extend .mainText;
160 } 210 }
161 img { 211 img {
162 - max-width: 130px; 212 + max-width: 200px;
163 height: auto; 213 height: auto;
164 object-fit: cover; 214 object-fit: cover;
165 margin-top: px; 215 margin-top: px;
...@@ -168,29 +218,6 @@ ...@@ -168,29 +218,6 @@
168 } 218 }
169 } 219 }
170 220
171 -.user-repositories {
172 - margin-top: 30px;
173 - text-transform: uppercase;
174 - h3 {
175 - margin-top: 15px;
176 - margin-bottom: 10px;
177 - @extend .mainText;
178 - }
179 - .user-repo {
180 - a {
181 - h3 {
182 - text-transform: lowercase;
183 - display: inline-flex;
184 - font-family: "Raleway", sans-serif;
185 - font-size: 15px;
186 - font-weight: bolder;
187 - margin: 5px;
188 - color: rgb(66, 68, 79);
189 - }
190 - }
191 - }
192 -}
193 -
194 .pageLayout { 221 .pageLayout {
195 display: flex; 222 display: flex;
196 flex-direction: row; 223 flex-direction: row;
......
...@@ -13,18 +13,17 @@ const getQuote = async (req, res) => { ...@@ -13,18 +13,17 @@ const getQuote = async (req, res) => {
13 return { quote, author }; 13 return { quote, author };
14 }; 14 };
15 15
16 -
17 export const handleHome = async (req, res) => { 16 export const handleHome = async (req, res) => {
18 const quote = await getQuote(); 17 const quote = await getQuote();
19 res.render("home", { 18 res.render("home", {
20 pageTitle: "Home", 19 pageTitle: "Home",
21 quote: quote.quote, 20 quote: quote.quote,
22 - author: quote.author 21 + author: quote.author,
23 }); 22 });
24 }; 23 };
25 24
26 export const getUserDetail = async (req, res) => { 25 export const getUserDetail = async (req, res) => {
27 - try{ 26 + try {
28 const id = req.params.id; 27 const id = req.params.id;
29 const quote = await getQuote(); 28 const quote = await getQuote();
30 const user = await User.findById(id); 29 const user = await User.findById(id);
...@@ -41,13 +40,12 @@ export const getUserDetail = async (req, res) => { ...@@ -41,13 +40,12 @@ export const getUserDetail = async (req, res) => {
41 secondRepoUrl: repo.secondRepoUrl, 40 secondRepoUrl: repo.secondRepoUrl,
42 totalContributions: totalCon, 41 totalContributions: totalCon,
43 }); 42 });
44 - } catch(error){ 43 + } catch (error) {
45 console.log(error); 44 console.log(error);
46 res.redirect("/"); 45 res.redirect("/");
47 } 46 }
48 }; 47 };
49 48
50 -
51 export const getEditProfile = async (req, res) => { 49 export const getEditProfile = async (req, res) => {
52 const { 50 const {
53 user: { _id: id }, 51 user: { _id: id },
...@@ -156,10 +154,11 @@ export const logout = (req, res) => { ...@@ -156,10 +154,11 @@ export const logout = (req, res) => {
156 res.redirect("/"); 154 res.redirect("/");
157 }; 155 };
158 156
159 -const getRepos = async() =>{ 157 +const getRepos = async () => {
160 - const url = "https://api.github.com/users/lsj8706/repos?sort=updated&per_page=2"; 158 + const url =
161 - const latelyRepos = await axios.get(url).then(function(response){ 159 + "https://api.github.com/users/lsj8706/repos?sort=updated&per_page=2";
162 - return response.data; 160 + const latelyRepos = await axios.get(url).then(function (response) {
161 + return response.data;
163 }); 162 });
164 const fitstRepoName = latelyRepos[0].name; 163 const fitstRepoName = latelyRepos[0].name;
165 const secondRepoName = latelyRepos[1].name; 164 const secondRepoName = latelyRepos[1].name;
...@@ -174,16 +173,22 @@ const getRepos = async() =>{ ...@@ -174,16 +173,22 @@ const getRepos = async() =>{
174 }; 173 };
175 }; 174 };
176 175
177 -const getContributions = async(username) =>{ 176 +const getContributions = async (username) => {
178 const token = process.env.GH_SECRET_SH; 177 const token = process.env.GH_SECRET_SH;
179 const headers = { 178 const headers = {
180 - 'Authorization': `bearer ${token}`, 179 + Authorization: `bearer ${token}`,
181 }; 180 };
182 const body = { 181 const body = {
183 - "query": `query {user(login: "${username}") {contributionsCollection {contributionCalendar {totalContributions}}}}` 182 + query: `query {user(login: "${username}") {contributionsCollection {contributionCalendar {totalContributions}}}}`,
184 }; 183 };
185 - const response = await fetch('https://api.github.com/graphql', { method: "POST", body: JSON.stringify(body), headers: headers }); 184 + const response = await fetch("https://api.github.com/graphql", {
185 + method: "POST",
186 + body: JSON.stringify(body),
187 + headers: headers,
188 + });
186 const totalContributions = await response.json(); 189 const totalContributions = await response.json();
187 - const total = totalContributions.data.user.contributionsCollection.contributionCalendar.totalContributions; 190 + const total =
191 + totalContributions.data.user.contributionsCollection.contributionCalendar
192 + .totalContributions;
188 return total; 193 return total;
189 -};
...\ No newline at end of file ...\ No newline at end of file
194 +};
......
...@@ -4,22 +4,30 @@ block content ...@@ -4,22 +4,30 @@ block content
4 .home 4 .home
5 .home-title 5 .home-title
6 h2 "Develop your value" 6 h2 "Develop your value"
7 - h1 Developer Profile 7 + span Developer Profile
8 - .home-quote 8 +
9 - h2=quote
10 - h3=author
11 - .home-search
12 - form.home-search__form
13 - input(type="text" id="jsInput" placeholder="Google 검색")
14 .home-link 9 .home-link
15 if !loggedUser 10 if !loggedUser
16 a(href="/join") Join 11 a(href="/join") Join
17 a(href="/login") Login 12 a(href="/login") Login
18 else 13 else
19 a(href=`/users/${loggedUser._id}`) My profile 14 a(href=`/users/${loggedUser._id}`) My profile
15 +
16 + .home-search
17 + form.home-search__form
18 + a(href="https://google.com" target="_blank")
19 + img(src="https://user-images.githubusercontent.com/48612525/86507657-d54fbd80-bd8e-11ea-866b-ac26496481ae.png" alt="google icon")
20 + input(type="text" id="jsInput" placeholder="Google 검색")
21 + i.fa.fa-search(aria-hidden="true")
22 +
23 + .home-quote
24 + h2=quote
25 + h3=author
26 +
20 27
21 .gotoTrend#jsGotoTrend 28 .gotoTrend#jsGotoTrend
22 - h2 Today's Trending Repositories: 29 + h2 Today's Trending Repositories
30 + i.fas.fa-link
23 .gotoTrend-repos#jsGotoTrendRepos 31 .gotoTrend-repos#jsGotoTrendRepos
24 span#jsIndicator Waiting.... 32 span#jsIndicator Waiting....
25 block scripts 33 block scripts
......
...@@ -53,17 +53,19 @@ block content ...@@ -53,17 +53,19 @@ block content
53 h3 YOU'VE MADE 53 h3 YOU'VE MADE
54 span#jsTotalContributions=totalContributions 54 span#jsTotalContributions=totalContributions
55 h3 CONTRIBUTIONS! 55 h3 CONTRIBUTIONS!
56 -
57 img(src=`http://ghchart.rshah.org/${user.githubName}` alt="Name Your Github chart") 56 img(src=`http://ghchart.rshah.org/${user.githubName}` alt="Name Your Github chart")
58 57
59 - 58 +
59 + .user-repositories
60 + .user-repo
61 + h3 Your recent updated repositories:
62 +
63 +
60 .user-status__character 64 .user-status__character
61 - h3 YOUR STATUS: 65 + h3 YOUR STATUS
62 66
63 67
64 - .user-repositories 68 +
65 - .user-repo
66 - h3 Your recent updated repositories:
67 69
68 70
69 71
......