jrtechs
/
jrtechs-github-graphs
mirror of https://github.com/jrtechs/github-graphs.git
1
0
Fork 0
Code Issues 0 Releases 1 Wiki Activity
Browse Source

Redesign friends graph page

pull/4/head
Sebastian Gutierrez 5 years ago
parent
9fafdb0d46
commit
0472b7eb65
3 changed files with 130 additions and 67 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +41
    -10
      public/FriendsGraph.html
  2. +40
    -57
      public/js/profileGen.js
  3. +49
    -0
      public/style.css

+ 41
- 10
public/FriendsGraph.html View File

@ -13,6 +13,10 @@
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous">
</script>
<script src="js/githubAPI.js"></script>
<script src="js/friendsGraph.js"></script>
<script src="js/profileGen.js"></script>
@ -22,7 +26,7 @@
<link href="js/vis/vis-network.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<body class="friends-graph-page">
<nav class="navbar navbar-dark bg-dark navbar-expand-md">
<a class="navbar-brand" href="/"><img src="img/githubgraph-logo.svg" alt=""></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#main-menu" aria-controls="main-menu" aria-expanded="false" aria-label="Toggle navigation">
@ -42,19 +46,44 @@
</ul>
</div>
</nav>
<div class="main container">
<div class="row">
<div class="col-md-8 col-12">
<h2 id="graphLoading"></h2>
<div id="myGraph" class="w-100"></div>
<pre id="eventSpan"></pre>
</div>
<div class="col-md-4 col-12 w-100">
<div id="profileGen"></div>
<div class="main">
<div class="container-fluid container-xl">
<div class="row pt-5">
<div class="col-lg-3 col-md-4 col-12"></div>
<div class="col-lg-9 col-md-8 col-12">
<div class="d-flex align-items-baseline justify-content-between my-4">
<div class="d-flex align-items-center">
<svg class="mr-3" width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M18 0C8.064 0 0 8.064 0 18C0 27.936 8.064 36 18 36C27.936 36 36 27.936 36 18C36 8.064 27.936 0 18 0ZM18 5.4C20.988 5.4 23.4 7.812 23.4 10.8C23.4 13.788 20.988 16.2 18 16.2C15.012 16.2 12.6 13.788 12.6 10.8C12.6 7.812 15.012 5.4 18 5.4ZM18 30.96C15.8613 30.96 13.7559 30.4308 11.8715 29.4194C9.98707 28.4081 8.3822 26.9462 7.2 25.164C7.254 21.582 14.4 19.62 18 19.62C21.582 19.62 28.746 21.582 28.8 25.164C27.6178 26.9462 26.0129 28.4081 24.1285 29.4194C22.2441 30.4308 20.1387 30.96 18 30.96Z" fill="white"/>
</svg>
<h1 class="text-white font-weight-bold">Interactive friend chart</h1>
</div>
<div>
<a id="TimelineLink" class="text-light" href="#">View repo timeline</a>
</div>
</div>
</div>
</div>
<div class="row pb-4">
<div class="col-lg-3 col-md-4 col-12">
<div id="profileGen"></div>
</div>
<div class="col-lg-9 col-md-8 col-12">
<div class="card shadow text-white bg-dark border-white">
<h2 id="graphLoading"></h2>
<div id="myGraph" class="w-100"></div>
</div>
</div>
</div>
</div>
</div>
</body>
<script>
$(function () {
$('[data-toggle="tooltip"]').tooltip();
});
function createGraphs(username)
{
@ -68,6 +97,8 @@
{
createGraphs(findGetParameter("name"))
}
$('#TimelineLink').attr("href", "TimeLineGraph.html?name=" + findGetParameter("name"));
</script>
</html>

+ 40
- 57
public/js/profileGen.js View File

@ -8,60 +8,43 @@ function profileGen(username, container)
window.location.href = "./GraphGenerator.html";
}
parseOrgs(user.login).then( (orgsReturn) => {
let html =
"<div class=\"card\" style=\"w-100; background-color:rgb(255,255,255);\"> \
<img class=\"card-img-top\" src=\""+user.avatar_url+"\"></img> \
<div class=\"row mx-0\" style=\"background-color:rgb(255,255,255);\"> \
<div class=\"col-7 p-0\"> \
<div class=\"card-body\" style=\"background-color:rgb(255,255,255);\">"+
(user.name != null ? "<h5 class=\"card-title\">"+user.name+"</h5>" : "") +" \
<h6 class=\"card-subtitle\">"+user.login+"</h5> \
</div> \
</div> \
<div class=\"col-2 p-0\"> \
<button type=\"button\" class=\"btn btn-link pt-3\"> \
<a href=\""+graphUrl(user.login)+"\"> \
<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"> \
<path d=\"M5 9.2h3V19H5zM10.6 5h2.8v14h-2.8zm5.6 8H19v6h-2.8z\"/> \
<path fill=\"none\" d=\"M0 0h24v24H0z\"/> \
</svg> \
</a> \
</button> \
</div> \
<div class=\"col-2 p-0\"> \
<button type=\"button\" class=\"btn btn-link pt-3\"> \
<a href=\""+timelineUrl(user.login)+"\"> \
<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"> \
<defs> \
<path id=\"a\" d=\"M0 0h24v24H0z\"/> \
</defs> \
<clipPath> \
<use xlink:href=\"#a\" overflow=\"visible\"/> \
</clipPath> \
<defs> \
<path id=\"b\" d=\"M0 0h24v24H0z\"/></defs><clipPath><use xlink:href=\"#b\" overflow=\"visible\"/> \
</clipPath> \
<path d=\"M23 8c0 1.1-.9 2-2 2-.18 0-.35-.02-.51-.07l-3.56 3.55c.05.16.07.34.07.52 0 1.1-.9 2-2 2s-2-.9-2-2c0-.18.02-.36.07-.52l-2.55-2.55c-.16.05-.34.07-.52.07s-.36-.02-.52-.07l-4.55 4.56c.05.16.07.33.07.51 0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2c.18 0 .35.02.51.07l4.56-4.55C8.02 9.36 8 9.18 8 9c0-1.1.9-2 2-2s2 .9 2 2c0 .18-.02.36-.07.52l2.55 2.55c.16-.05.34-.07.52-.07s.36.02.52.07l3.55-3.56C19.02 8.35 19 8.18 19 8c0-1.1.9-2 2-2s2 .9 2 2z\"/> \
</svg> \
</a> \
</button> \
</div> \
</div> \
<div class=\"card-body py-1\" style=\"background-color:rgb(255,255,255);\"> \
<p class=\"card-text\"><a href=\""+user.html_url+"\" class=\"card-link\">"+user.html_url+"</a></p> \ " +
(user.blog != null ? "<p class=\"card-text \"><a href="+user.blog+" class=\"card-link\">"+user.blog+"</a></p>" : "")+" \
</div> \
<ul class=\"list-group list-group-flush\"> \
<li class=\"list-group-item\">Followers: "+user.followers+"</li> \
<li class=\"list-group-item\">Following: "+user.following+"</li> \
<li class=\"list-group-item\">Repositories: "+user.public_repos+"</li>" +
(user.bio != null ? "<li class=\"list-group-item\">Bio: "+user.bio+"</li>" : "")+
(user.location != null ? "<li class=\"list-group-item\">Location: "+user.location+"</li>" : "")+
(user.email != null ? "<li class=\"list-group-item\">Email: "+user.email+"</li>" : "")+
(user.company != null ? "<li class=\"list-group-item\">Company: "+user.company+"</li>" : "")+
(orgsReturn != [] ? "<li class=\"list-group-item\">"+orgsReturn+"</li>" : "")+ " \
</ul> \
</div>";
let html = `
<div class="card shadow-sm" style="font-size: 16px;">
<div class="card-img-top" style="position: relative;">
<img src="${user.avatar_url}" alt="${user.avatar_url}" class="img-fluid"/>
<div class="actions">
<a href="${graphUrl(user.login)}" class="btns" title="View Friends Graph">
<svg viewBox="0 0 24 24">
<path d="M12,19.2C9.5,19.2 7.29,17.92 6,16C6.03,14 10,12.9 12,12.9C14,12.9 17.97,14 18,16C16.71,17.92 14.5,19.2 12,19.2M12,5A3,3 0 0,1 15,8A3,3 0 0,1 12,11A3,3 0 0,1 9,8A3,3 0 0,1 12,5M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z" />
</svg>
</a>
<a href="${timelineUrl(user.login)}" class="btns" title="View Timeline Graph">
<svg viewBox="0 0 24 24">
<path d="M2,2H4V20H22V22H2V2M7,10H17V13H7V10M11,15H21V18H11V15M6,4H22V8H20V6H8V8H6V4Z" />
</svg>
</a>
</div>
</div>
<div class="card-body">
<h5 class="card-title mb-1">${user.name}</h5>
<a href="${user.html_url}" class="card-subtitle text-muted">${user.login}</a>
${user.bio != null ? `<p class="my-2">${user.bio}</p>` : ""}
<ul class="list-unstyled">
${user.blog != null ? `<a href="${user.blog}"><li>${user.blog}</li></a>` : ""}
${user.email != null ? `<li>Email: ${user.email}</li>` : ""}
${user.location != null ? `<li>Location: ${user.location}</li>` : ""}
${user.company != null ? `<li>Company: ${user.company}</li>` : ""}
</ul>
<hr />
<ul class="list-unstyled">
<li>Followers: ${user.followers}</li>
<li>Following: ${user.following}</li>
<li>Repositories: ${user.public_repos}</li>
</ul>
${orgsReturn != [] ? `<hr /> <p>Organizations</p> ${orgsReturn}` : ""}
</div>
</div>
`;
$("#"+container).html(html);
})
}, () =>
@ -75,7 +58,7 @@ function parseOrgs(name) {
return new Promise( (resolve, reject) => {
let urlpath = `api/users/${name}/orgs`;
let orgs_final = [];
queryUrl(urlpath, (orgs) => {
var prom= [];
@ -83,7 +66,7 @@ function parseOrgs(name) {
prom.push( new Promise( (res, rej) => {
url = orgs[i].url;
queryUrl(url, (orgData) => {
orgs_final.push("<a href=\""+orgData.html_url+"\"><img src=\""+orgData.avatar_url+"\" class=\"img-fluid\" style=\"max-width:49%\"></img></a>");
orgs_final.push("<a href=\""+orgData.html_url+"\"><img src=\""+orgData.avatar_url+"\" class=\"img-fluid\" style=\"max-width:35px\"></img></a>");
res();
}, (error) => {
console.log(error);
@ -108,4 +91,4 @@ function graphUrl(user) {
function timelineUrl(user) {
return "/TimeLineGraph.html?name="+user;
}
}

+ 49
- 0
public/style.css View File

@ -37,6 +37,11 @@ body {
font-weight: 600;
}
.container-xl {
max-width: 1280px;
margin: auto;
}
.main {
background: linear-gradient(180deg, var(--dark-2) 0%, var(--dark-2) 420px, var(--white) 420px);
@ -65,6 +70,50 @@ body {
}
}
@media screen and (min-width: 768px) {
.friends-graph-page #profileGen {
margin-top: -84px
}
}
.card .actions {
position: absolute;
right: 16px;
bottom: 16px;
}
.card .actions .btns {
display: inline-block;
padding: 8px;
margin-left: 8px;
height: 40px;
width: 40px;
border-radius: 50%;
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05), 0px 1px 3px rgba(0, 0, 0, 0.1);
background-color: white;
transition: box-shadow .3s ease-out;
}
.card .actions .btns:hover {
box-shadow: 0px 10px 16px rgba(0, 0, 0, 0.1), 0px 4px 6px rgba(0, 0, 0, 0.06);
}
.card .actions .btns svg {
display: block;
margin-left: auto;
margin-right: auto;
height: 24px;
width: 24px;
fill: var(--dark-2);
opacity: 0.64;
transition: opacity .3s ease-out;
}
.card .actions .btns:hover svg {
fill: var(--primary);
opacity: 1;
}
#error-code {
font-family: Comfortaa;
font-size: 200px;

Write Preview
Loading…
Cancel
Save