이세진 / 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
const userContributionsBox = document.querySelector(".user-status__contributions");
const totalContributionIndicator = document.getElementById("jsTotalContributions");
const userContributionsBox = document.querySelector(
".user-status__contributions"
);
const totalContributionIndicator = document.getElementById(
"jsTotalContributions"
);
const userCharacterBox = document.querySelector(".user-status__character");
const userRepoBox = document.querySelector(".user-repo");
const URL = "https://api.github.com/users/lsj8706/repos?sort=updated&per_page=2";
const URL =
"https://api.github.com/users/lsj8706/repos?sort=updated&per_page=2";
const handleImage = () =>{
const handleImage = () => {
const total = totalContributionIndicator.innerText;
const img = new Image();
if (total>=0 && total<200){
img.src ="https://oss-2020105657.s3.amazonaws.com/first.png";
if (total >= 0 && total < 200) {
img.src = "https://oss-2020105657.s3.amazonaws.com/first.png";
img.alt = "1단계";
}else if (total>=200 && total<600){
img.src ="https://oss-2020105657.s3.amazonaws.com/second.png";
} else if (total >= 200 && total < 600) {
img.src = "https://oss-2020105657.s3.amazonaws.com/second.png";
img.alt = "2단계";
}else if (total>=600 && total<1200){
} else if (total >= 600 && total < 1200) {
img.src = "https://oss-2020105657.s3.amazonaws.com/third.png";
img.alt = "3단계";
}else if (total>=1200 && total<2000){
} else if (total >= 1200 && total < 2000) {
img.src = "https://oss-2020105657.s3.amazonaws.com/four.png";
img.alt = "4단계";
}else{
} else {
img.src = "https://oss-2020105657.s3.amazonaws.com/fifth.png";
img.alt = "5단계";
}
userCharacterBox.appendChild(img);
};
const handleRepo = (list) =>{
list.forEach(element => {
const handleRepo = (list) => {
list.forEach((element) => {
const anchor = document.createElement("a");
anchor.href = element.html_url;
anchor.target = "_blank"
anchor.innerHTML = `<div class =number><span class="repoName">${element.name}</span> : <span class="repoUrl">${element.html_url} </span></div>`
anchor.target = "_blank";
anchor.innerHTML = `<div class =number><span class="repoName">${element.name}</span>:<span class="repoUrl">${element.html_url} </span></div>`;
userRepoBox.appendChild(anchor);
});
};
const getGithubRepo = () =>{
const response = fetch(URL).then(function(response){
const getGithubRepo = () => {
const response = fetch(URL)
.then(function (response) {
return response.json();
}).then(function(data){
const trendRepoList = data.slice(0,2);
})
.then(function (data) {
const trendRepoList = data.slice(0, 2);
handleRepo(trendRepoList);
});
};
const init=()=>{
const init = () => {
handleImage();
getGithubRepo();
};
if(userContributionsBox){
if (userContributionsBox) {
init();
};
\ No newline at end of file
}
......
......@@ -5,54 +5,40 @@
align-items: center;
.home-title {
margin: 40px 0px;
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
h2 {
font-size: 20px;
font-size: 25px;
font-family: "Roboto", sans-serif;
font-weight: 400;
font-weight: 700;
text-transform: uppercase;
color: rgb(30, 30, 150);
margin-bottom: 30px;
}
h1 {
span {
font-size: 50px;
font-family: "Roboto", sans-serif;
font-weight: 800;
text-transform: uppercase;
}
}
.home-quote {
width: 100%;
display: flex;
width: 60%;
text-align: center;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 20px;
box-shadow: 0 13px 27px -5px rgba(50, 50, 93, 0.25),
0 8px 16px -8px rgba(0, 0, 0, 0.3), 0 -6px 16px -6px rgba(0, 0, 0, 0.025);
h2 {
font-size: 40px;
font-family: "Vollkorn", serif;
margin: 10px 0px;
}
h3 {
font-size: 25px;
opacity: 0.5;
font-family: "Vollkorn", serif;
text-transform: uppercase;
background-image: linear-gradient(120deg, #acedff 0%, #ffaddd 100%);
background-repeat: no-repeat;
background-size: 100% 0.3em;
background-position: 0 88%;
transition: background-size 200ms ease-in;
&:hover {
background-size: 100% 88%;
}
}
.home-search {
display: flex;
padding: 40px;
justify-content: center;
width: 100%;
}
.home-link {
margin-top: 50px;
margin: 20px;
font-family: "Roboto", sans-serif;
font-size: 30px;
font-weight: 700;
......@@ -62,38 +48,138 @@
justify-items: flex-end;
justify-content: center;
align-items: center;
text-transform: uppercase;
a {
color: $lilac;
&:not(:last-child) {
margin-right: 50px;
}
&:hover {
color: rgb(106, 89, 233);
}
}
}
.home-search {
margin-top: 30px;
margin-bottom: 60px;
display: flex;
justify-content: space-evenly;
align-items: center;
background: #fff;
border-radius: 500px;
padding: 10px 25px 10px 25px;
.home-search__form {
display: flex;
justify-content: space-evenly;
align-items: center;
background: #fff;
border-radius: 500px;
padding: 10px 25px 10px 25px;
border: 1px solid #ccc;
img {
height: 30px;
width: 30px;
}
input {
padding: 5px;
margin-left: 15px;
margin-right: 15px;
width: 300px;
border-radius: 5px;
background: transparent;
border: 1px solid transparent;
outline: none;
font-size: 1.2rem;
overflow-x: scroll;
}
i {
background: transparent;
border: none;
i {
font-size: 1.5rem;
margin: 3px;
}
}
i:hover {
cursor: pointer;
}
}
.home-search__form:hover {
box-shadow: 0px 1px 4px -1px rgba(79, 78, 79, 1);
}
}
.boxShadow {
box-shadow: 0 13px 10px -5px rgba(50, 50, 93, 0.25),
0 8px 10px -8px rgba(0, 0, 0, 0.3), 0 -6px 10px -6px rgba(0, 0, 0, 0.025);
}
.home-quote {
width: 100%;
display: flex;
text-align: center;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: #f8f9ff;
padding: 30px;
@extend .boxShadow;
border-top: 3pt double #7f8bd0;
h2 {
font-size: 40px;
font-family: "Vollkorn", serif;
margin: 10px 0px;
}
h3 {
font-size: 25px;
color: rgb(112, 114, 120);
font-family: "Vollkorn", serif;
font-weight: lighter;
margin-bottom: 10px;
}
}
.gotoTrend {
margin-top: 50px;
display: flex;
width: 120%;
margin-top: 50px;
width: 100%;
padding: 40px;
text-align: center;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 20px;
box-shadow: 0 13px 27px -5px rgba(50, 50, 93, 0.25),
0 8px 16px -8px rgba(0, 0, 0, 0.3), 0 -6px 16px -6px rgba(0, 0, 0, 0.025);
background-color: #fffdf1;
border-top: 3pt double #ffce72;
@extend .boxShadow;
h2 {
color: #fb8500;
font-size: 25px;
font-family: "Raleway", cursive;
font-size: 30px;
font-weight: 700;
margin-bottom: 20px;
margin-bottom: 30px;
text-transform: uppercase;
border-bottom: 3pt double $star;
padding-bottom: 10px;
width: 60%;
i {
color: $star;
}
}
.gotoTrend-repos {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
a {
font-size: 18px;
font-size: 20px;
margin: 10px 0px;
font-family: "Raleway", cursive;
}
.repoName {
font-weight: 600;
......
......@@ -44,7 +44,7 @@
font-size: 25px;
font-weight: bolder;
margin: 5px;
color: $blue;
color: #392f76;
}
.boxEffect {
......@@ -153,39 +153,66 @@
margin: 5px;
}
}
.user-status__character {
margin-top: 50px;
h3 {
@extend .mainText;
}
img {
max-width: 130px;
height: auto;
object-fit: cover;
margin-top: px;
}
}
}
}
.user-repositories {
.user-repositories {
margin-top: 30px;
text-transform: uppercase;
h3 {
margin-top: 15px;
margin-bottom: 10px;
text-transform: uppercase;
@extend .mainText;
}
.user-repo {
a {
h3 {
text-transform: lowercase;
margin-top: 50px;
.repoName {
display: inline-flex;
font-family: "Raleway", sans-serif;
font-size: 15px;
font-weight: bolder;
flex-direction: row;
justify-content: flex-end;
font-family: "Raleway", cursive;
font-size: 18px;
font-weight: bold;
padding: 2px;
text-transform: uppercase;
color: #1e1e1ed9;
margin: 5px;
color: rgb(66, 68, 79);
width: 150px;
}
.repoUrl {
display: inline-flex;
flex-direction: row;
font-family: "Roboto", sans-serif;
font-size: 20px;
font-weight: 400;
color: #6f6f6f;
margin: 10px;
}
.repoUrl:hover {
display: inline-flex;
flex-direction: row;
font-family: "Roboto", sans-serif;
font-size: 20px;
font-weight: 400;
text-decoration: underline;
color: #6868af;
margin: 10px;
}
}
}
.user-status__character {
margin-top: 60px;
margin-left: 10px;
display: flex;
flex-direction: column;
h3 {
@extend .mainText;
}
img {
max-width: 200px;
height: auto;
object-fit: cover;
margin-top: px;
}
}
}
......
......@@ -13,18 +13,17 @@ const getQuote = async (req, res) => {
return { quote, author };
};
export const handleHome = async (req, res) => {
const quote = await getQuote();
res.render("home", {
pageTitle: "Home",
quote: quote.quote,
author: quote.author
author: quote.author,
});
};
export const getUserDetail = async (req, res) => {
try{
try {
const id = req.params.id;
const quote = await getQuote();
const user = await User.findById(id);
......@@ -41,13 +40,12 @@ export const getUserDetail = async (req, res) => {
secondRepoUrl: repo.secondRepoUrl,
totalContributions: totalCon,
});
} catch(error){
} catch (error) {
console.log(error);
res.redirect("/");
}
};
export const getEditProfile = async (req, res) => {
const {
user: { _id: id },
......@@ -156,9 +154,10 @@ export const logout = (req, res) => {
res.redirect("/");
};
const getRepos = async() =>{
const url = "https://api.github.com/users/lsj8706/repos?sort=updated&per_page=2";
const latelyRepos = await axios.get(url).then(function(response){
const getRepos = async () => {
const url =
"https://api.github.com/users/lsj8706/repos?sort=updated&per_page=2";
const latelyRepos = await axios.get(url).then(function (response) {
return response.data;
});
const fitstRepoName = latelyRepos[0].name;
......@@ -174,16 +173,22 @@ const getRepos = async() =>{
};
};
const getContributions = async(username) =>{
const getContributions = async (username) => {
const token = process.env.GH_SECRET_SH;
const headers = {
'Authorization': `bearer ${token}`,
Authorization: `bearer ${token}`,
};
const body = {
"query": `query {user(login: "${username}") {contributionsCollection {contributionCalendar {totalContributions}}}}`
query: `query {user(login: "${username}") {contributionsCollection {contributionCalendar {totalContributions}}}}`,
};
const response = await fetch('https://api.github.com/graphql', { method: "POST", body: JSON.stringify(body), headers: headers });
const response = await fetch("https://api.github.com/graphql", {
method: "POST",
body: JSON.stringify(body),
headers: headers,
});
const totalContributions = await response.json();
const total = totalContributions.data.user.contributionsCollection.contributionCalendar.totalContributions;
const total =
totalContributions.data.user.contributionsCollection.contributionCalendar
.totalContributions;
return total;
};
......
......@@ -4,13 +4,8 @@ block content
.home
.home-title
h2 "Develop your value"
h1 Developer Profile
.home-quote
h2=quote
h3=author
.home-search
form.home-search__form
input(type="text" id="jsInput" placeholder="Google 검색")
span Developer Profile
.home-link
if !loggedUser
a(href="/join") Join
......@@ -18,8 +13,21 @@ block content
else
a(href=`/users/${loggedUser._id}`) My profile
.home-search
form.home-search__form
a(href="https://google.com" target="_blank")
img(src="https://user-images.githubusercontent.com/48612525/86507657-d54fbd80-bd8e-11ea-866b-ac26496481ae.png" alt="google icon")
input(type="text" id="jsInput" placeholder="Google 검색")
i.fa.fa-search(aria-hidden="true")
.home-quote
h2=quote
h3=author
.gotoTrend#jsGotoTrend
h2 Today's Trending Repositories:
h2 Today's Trending Repositories
i.fas.fa-link
.gotoTrend-repos#jsGotoTrendRepos
span#jsIndicator Waiting....
block scripts
......
......@@ -53,19 +53,21 @@ block content
h3 YOU'VE MADE
span#jsTotalContributions=totalContributions
h3 CONTRIBUTIONS!
img(src=`http://ghchart.rshah.org/${user.githubName}` alt="Name Your Github chart")
.user-status__character
h3 YOUR STATUS:
.user-repositories
.user-repo
h3 Your recent updated repositories:
.user-status__character
h3 YOUR STATUS
block scripts
......