2021_dev-profile / 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 245 additions and 112 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 = () =>{
9 const total = totalContributionIndicator.innerText; 13 const total = totalContributionIndicator.innerText;
10 const img = new Image(); 14 const img = new Image();
11 - if (total>=0 && total<200){ 15 + if (total >= 0 && total < 200) {
12 - img.src ="https://oss-2020105657.s3.amazonaws.com/first.png"; 16 + img.src = "https://oss-2020105657.s3.amazonaws.com/first.png";
13 img.alt = "1단계"; 17 img.alt = "1단계";
14 - }else if (total>=200 && total<600){ 18 + } else if (total >= 200 && total < 600) {
15 - img.src ="https://oss-2020105657.s3.amazonaws.com/second.png"; 19 + img.src = "https://oss-2020105657.s3.amazonaws.com/second.png";
16 img.alt = "2단계"; 20 img.alt = "2단계";
17 - }else if (total>=600 && total<1200){ 21 + } else if (total >= 600 && total < 1200) {
18 img.src = "https://oss-2020105657.s3.amazonaws.com/third.png"; 22 img.src = "https://oss-2020105657.s3.amazonaws.com/third.png";
19 img.alt = "3단계"; 23 img.alt = "3단계";
20 - }else if (total>=1200 && total<2000){ 24 + } else if (total >= 1200 && total < 2000) {
21 img.src = "https://oss-2020105657.s3.amazonaws.com/four.png"; 25 img.src = "https://oss-2020105657.s3.amazonaws.com/four.png";
22 img.alt = "4단계"; 26 img.alt = "4단계";
23 - }else{ 27 + } else {
24 img.src = "https://oss-2020105657.s3.amazonaws.com/fifth.png"; 28 img.src = "https://oss-2020105657.s3.amazonaws.com/fifth.png";
25 img.alt = "5단계"; 29 img.alt = "5단계";
26 } 30 }
27 userCharacterBox.appendChild(img); 31 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)
46 + .then(function (response) {
43 return response.json(); 47 return response.json();
44 - }).then(function(data){ 48 + })
45 - const trendRepoList = data.slice(0,2); 49 + .then(function (data) {
50 + const trendRepoList = data.slice(0, 2);
46 handleRepo(trendRepoList); 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){ 60 +if (userContributionsBox) {
56 init(); 61 init();
57 -};
...\ No newline at end of file ...\ No newline at end of file
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;
23 - text-transform: uppercase; 26 + width: 60%;
24 - }
25 - }
26 - .home-quote {
27 - width: 100%;
28 - display: flex;
29 text-align: center; 27 text-align: center;
30 - flex-direction: column; 28 + text-transform: uppercase;
31 - justify-content: center; 29 + background-image: linear-gradient(120deg, #acedff 0%, #ffaddd 100%);
32 - align-items: center; 30 + background-repeat: no-repeat;
33 - padding: 20px; 31 + background-size: 100% 0.3em;
34 - box-shadow: 0 13px 27px -5px rgba(50, 50, 93, 0.25), 32 + background-position: 0 88%;
35 - 0 8px 16px -8px rgba(0, 0, 0, 0.3), 0 -6px 16px -6px rgba(0, 0, 0, 0.025); 33 + transition: background-size 200ms ease-in;
36 - h2 { 34 + &:hover {
37 - font-size: 40px; 35 + background-size: 100% 88%;
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 } 36 }
46 } 37 }
47 - .home-search {
48 - display: flex;
49 - padding: 40px;
50 - justify-content: center;
51 - width: 100%;
52 } 38 }
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,39 +153,66 @@ ...@@ -153,39 +153,66 @@
153 margin: 5px; 153 margin: 5px;
154 } 154 }
155 } 155 }
156 - .user-status__character {
157 - margin-top: 50px;
158 - h3 {
159 - @extend .mainText;
160 - }
161 - img {
162 - max-width: 130px;
163 - height: auto;
164 - object-fit: cover;
165 - margin-top: px;
166 - }
167 - }
168 - }
169 -}
170 156
171 -.user-repositories { 157 + .user-repositories {
172 margin-top: 30px; 158 margin-top: 30px;
173 - text-transform: uppercase; 159 +
174 h3 { 160 h3 {
175 margin-top: 15px; 161 margin-top: 15px;
176 margin-bottom: 10px; 162 margin-bottom: 10px;
163 + text-transform: uppercase;
177 @extend .mainText; 164 @extend .mainText;
178 } 165 }
179 .user-repo { 166 .user-repo {
180 - a { 167 + margin-top: 50px;
181 - h3 { 168 + .repoName {
182 - text-transform: lowercase;
183 display: inline-flex; 169 display: inline-flex;
184 - font-family: "Raleway", sans-serif; 170 + flex-direction: row;
185 - font-size: 15px; 171 + justify-content: flex-end;
186 - font-weight: bolder; 172 + font-family: "Raleway", cursive;
173 + font-size: 18px;
174 + font-weight: bold;
175 + padding: 2px;
176 + text-transform: uppercase;
177 + color: #1e1e1ed9;
187 margin: 5px; 178 margin: 5px;
188 - color: rgb(66, 68, 79); 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 +
203 + .user-status__character {
204 + margin-top: 60px;
205 + margin-left: 10px;
206 + display: flex;
207 + flex-direction: column;
208 + h3 {
209 + @extend .mainText;
210 + }
211 + img {
212 + max-width: 200px;
213 + height: auto;
214 + object-fit: cover;
215 + margin-top: px;
189 } 216 }
190 } 217 }
191 } 218 }
......
...@@ -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,9 +154,10 @@ export const logout = (req, res) => { ...@@ -156,9 +154,10 @@ 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";
160 + const latelyRepos = await axios.get(url).then(function (response) {
162 return response.data; 161 return response.data;
163 }); 162 });
164 const fitstRepoName = latelyRepos[0].name; 163 const fitstRepoName = latelyRepos[0].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 }; 194 };
......
...@@ -4,13 +4,8 @@ block content ...@@ -4,13 +4,8 @@ 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
...@@ -18,8 +13,21 @@ block content ...@@ -18,8 +13,21 @@ block content
18 else 13 else
19 a(href=`/users/${loggedUser._id}`) My profile 14 a(href=`/users/${loggedUser._id}`) My profile
20 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 +
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,19 +53,21 @@ block content ...@@ -53,19 +53,21 @@ 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
60 - .user-status__character
61 - h3 YOUR STATUS:
62 -
63 -
64 .user-repositories 59 .user-repositories
65 .user-repo 60 .user-repo
66 h3 Your recent updated repositories: 61 h3 Your recent updated repositories:
67 62
68 63
64 + .user-status__character
65 + h3 YOUR STATUS
66 +
67 +
68 +
69 +
70 +
69 71
70 72
71 block scripts 73 block scripts
......