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 graph generator page

pull/4/head
Sebastian Gutierrez 4 years ago
parent
3e12dfe6bf
commit
fb6ec2bf51
3 changed files with 107 additions and 316 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +106
    -110
      public/GraphGenerator.html
  2. +0
    -46
      public/search.css
  3. +1
    -160
      public/style.css

+ 106
- 110
public/GraphGenerator.html View File

@ -8,11 +8,14 @@
<link rel="shortcut icon" href="./favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="./style.css" />
<link rel="stylesheet" href="./search.css" />
<script src="https://code.jquery.com/jquery-3.3.1.min.js"
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>
</head>
<body>
<nav class="navbar navbar-dark bg-dark navbar-expand-md">
@ -35,77 +38,81 @@
</div>
</nav>
<div class="main container">
<div id="user-graphs">
<div id="search-bar">
<div class="row align-items-center text-center">
<div class="search-title">
<h1 id="search" class="m-title">Search GitHub:</h1>
</div>
<div class="col search-col">
<form class="search-form">
<input class="rounder form-control mr-sm-1" id='txtUsername' type="search" placeholder="GitHub Username" aria-label="Search">
</form>
</div>
<div class="main">
<div class="container">
<div class="row ">
<div class="col">
<h1 class="text-center text-white font-weight-bold my-4 py-5">
Generate a graph
</h1>
</div>
</div>
<div class="card-deck text-center">
<div class="card rounder">
<div class="card-header rounder">
<h1 class="m-title">Interactive Friends Chart</h1>
</div>
<div class="card-body">
<p>
Creates an web chart of the selected user and
both their followers and anyone they are following
themselves.
</p>
<button class="btn btn-outline-success rounder" onclick='toFriends()' type='button'>Generate</button>
</div>
<p></p>
</div>
<div class="card rounder">
<div class="card-header rounder">
<h1 class="m-title">Repo Timeline</h1>
</div>
<div class="card-body">
<p>
Displays a timeline of every repo belonging
to the selected user in chronological order,
along with information pertaining to each repo.
</p>
<button class="btn btn-outline-success rounder" onclick='toTimeline()' type='button'>Generate</button>
<div class="row align-items-stretch">
<div class="col-lg-4 mb-4">
<div class="card h-100 shadow py-3">
<div class="card-body">
<svg class="my-3" width="37" height="38" viewBox="0 0 37 38" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M18.172 0.946228C8.14108 0.946228 0 9.0873 0 19.1183C0 29.1492 8.14108 37.2903 18.172 37.2903C28.203 37.2903 36.3441 29.1492 36.3441 19.1183C36.3441 9.0873 28.203 0.946228 18.172 0.946228ZM18.172 6.39784C21.1886 6.39784 23.6237 8.83289 23.6237 11.8495C23.6237 14.866 21.1886 17.3011 18.172 17.3011C15.1555 17.3011 12.7204 14.866 12.7204 11.8495C12.7204 8.83289 15.1555 6.39784 18.172 6.39784ZM18.172 32.2021C16.0129 32.2022 13.8874 31.6678 11.985 30.6469C10.0825 29.6259 8.46232 28.15 7.26882 26.3507C7.32333 22.7345 14.5376 20.7538 18.172 20.7538C21.7883 20.7538 29.0208 22.7345 29.0753 26.3507C27.8818 28.15 26.2616 29.6259 24.3591 30.6469C22.4567 31.6678 20.3311 32.2022 18.172 32.2021Z" fill="#1074E7"/>
</svg>
<h2 class="h4 my-4 font-weight-bold">Interactive Friends Chart</h2>
<p class="card-text">Creates a web chart of the selected user and both their followers and anyone they are following themselves.</p>
</div>
<div class="card-footer bg-transparent border-top-0">
<div class="input-group input-group-lg">
<input id="input-friends-graph" type="text" class="form-control" placeholder="Username">
<div class="input-group-append">
<button class="btn btn-primary" type="button" onclick="toFriends()">
Generate
</button>
</div>
</div>
</div>
</div>
<p></p>
</div>
</div>
</div>
<div id="org-graph" class="mt-3">
<div id="search-bar">
<div class="row align-items-center text-center">
<div class="search-title">
<h1 id="search" class="m-title">Search GitHub:</h1>
</div>
<div class="col search-col">
<form class="search-form">
<input class="rounder form-control mr-sm-1" id='txtOrgname' type="search" placeholder="Organization Name" aria-label="Search">
</form>
<div class="col-lg-4 mb-4">
<div class="card h-100 shadow py-3">
<div class="card-body">
<svg class="my-3" width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 0H3.6V32.4H36V36H0V0ZM9 14.4H27V19.8H9V14.4ZM16.2 23.4H34.2V28.8H16.2V23.4ZM7.2 3.6H36V10.8H32.4V7.2H10.8V10.8H7.2V3.6Z" fill="#1074E7"/>
</svg>
<h2 class="h4 my-4 font-weight-bold">Repo Timeline</h2>
<p class="card-text">Displays a timeline of every repo belonging to the selected user in chronological order, along with information pertaining to each repo.</p>
</div>
<div class="card-footer bg-transparent border-top-0">
<div class="input-group input-group-lg">
<input id="input-timeline-graph" type="text" class="form-control" placeholder="Username">
<div class="input-group-append">
<button class="btn btn-primary" type="button" onclick="toTimeline()">
Generate
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card-deck text-center">
<div class="card rounder">
<div class="card-header rounder">
<h1 class="m-title">Interactive Organization Chart</h1>
</div>
<div class="card-body">
<p>
Creates a web chart of the specified organization
and all associated repos.
</p>
<button class="btn btn-outline-success rounder" onclick='toOrgRepos()' type='button'>Generate</button>
<div class="col-lg-4 mb-4">
<div class="card h-100 shadow py-3">
<div class="card-body">
<svg class="my-3" width="37" height="31" viewBox="0 0 37 31" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 31V11C0 10.5093 0.19491 10.0388 0.541852 9.69185C0.888795 9.34491 1.35935 9.15 1.85 9.15H9.25V2C9.25 0.895432 10.1454 0 11.25 0H25.75C26.8546 0 27.75 0.89543 27.75 2V9.15H35.15C35.6407 9.15 36.1112 9.34491 36.4581 9.69185C36.8051 10.0388 37 10.5093 37 11V31H22.2V21.75H14.8V31H0ZM14.8 3.5V8.8H22.2V3.5H14.8ZM3.7 27.3H11.1V21.75H3.7V27.3ZM3.7 18.05H11.1V12.5H3.7V18.05ZM25.9 27.3H33.3V21.75H25.9V27.3ZM25.9 18.05H33.3V12.5H25.9V18.05ZM14.8 18.05H22.2V12.5H14.8V18.05Z" fill="#1074E7"/>
</svg>
<h2 class="h4 my-4 font-weight-bold">Interactive Organization Chart</h2>
<p class="card-text">Creates a web chart of the specified organization and all associated repos.</p>
</div>
<div class="card-footer bg-transparent border-top-0">
<div class="input-group input-group-lg">
<input id="input-organization-graph" type="text" class="form-control" placeholder="Organization">
<div class="input-group-append">
<button class="btn btn-primary" type="button" onclick="toOrgRepos()">
Generate
</button>
</div>
</div>
</div>
</div>
<p></p>
</div>
</div>
</div>
@ -113,64 +120,53 @@
</body>
</html>
<script>
$('#txtOrgname').keydown(function(event)
{
if(event.keyCode == 13)
{
event.preventDefault();
toOrgRepos();
}
});
var inputFriends = $('#input-friends-graph');
var inputTimeLine = $('#input-timeline-graph');
var inputOrgRepos = $('#input-organization-graph');
$('#txtUsername').keydown(function(event)
{
if(event.keyCode == 13)
{
event.preventDefault();
inputFriends.keydown(function(event) {
redirectToPage(event, function() {
toFriends();
}
});
});
function fetchUserInput()
{
const inputedName = $("#txtUsername").val();
if(inputedName === "")
{
alert("Please enter a Github name in the text field.")
}
inputTimeLine.keydown(function(event) {
redirectToPage(event, function() {
toTimeline();
});
});
return inputedName;
}
inputOrgRepos.keydown(function(event) {
redirectToPage(event, function() {
toOrgRepos();
});
});
function fetchOrgInput()
{
const inputedOrg = $("#txtOrgname").val();
if(inputedOrg === "")
{
alert("Please enter a Github organization name in the text field.")
function redirectToPage(e, pageFunction) {
if (e.keyCode === 13) {
event.preventDefault();
pageFunction();
}
return inputedOrg;
}
function toFriends()
{
var uname = fetchUserInput();
if(uname !== "")
window.location.href = "./FriendsGraph.html?name=" + uname;
function toFriends() {
userName = inputFriends.val();
userName
? window.location.href = "./FriendsGraph.html?name=" + userName
: alert("Please enter a Github name in the text field.")
}
function toTimeline()
{
var uname = fetchUserInput();
if(uname !== "")
window.location.href = "./TimeLineGraph.html?name=" + uname;
function toTimeline() {
userName = inputTimeLine.val();
userName
? window.location.href = "./TimeLineGraph.html?name=" + userName
: alert("Please enter a Github name in the text field.");
}
function toOrgRepos() {
var uname = fetchOrgInput();
if(uname !== "")
window.location.href = "./OrgRepoGraph.html?name=" + uname;
organizationName = inputOrgRepos.val();
organizationName
? window.location.href = "./OrgRepoGraph.html?name=" + organizationName
: alert("Please enter a Github organization name in the text field.");
}
</script>

+ 0
- 46
public/search.css View File

@ -1,46 +0,0 @@
#search-bar {
position: relative;
left: 50%;
transform: translate(-50%, 0%);
padding: 10px;
height: 60px;
width: 100%;
background-color: rgb(208, 208, 208);
border-radius: 20px;
}
#search {
padding-left: 20px;
}
.search-title {
position: relative;
padding-top: 5px;
width: 30%;
}
.search-col {
position: relative;
display: block;
}
.search-form {
position: relative;
left: 0px;
width: 100%;
}
@media (max-width: 767px) {
#search-bar {
height: 75px;
width: 70%;
}
.search-title {
width: 25%;
}
.m-title {
font-size: 100%;
}
}

+ 1
- 160
public/style.css View File

@ -8,6 +8,7 @@
body {
font-size: 18px;
color: var(--dark-2);
}
@ -64,184 +65,24 @@ body {
}
}
#header-bar {
height: 10%;
width: 100%;
background-color: rgb(208, 208, 208);
}
#header-title {
font-size: 25px;
}
#logo {
height: 60px;
}
#error-code {
font-family: Comfortaa;
font-size: 200px;
color: rgb(208, 208, 208);
}
#navigation {
position: absolute;
right: 20px;
}
#dcimg {
width: 300px;
}
.img-vert {
display: inline-block;
height: 100%;
}
.error {
color: rgb(208, 208, 208);
}
.big-title {
font-family: Comfortaa;
font-weight: bold;
font-size: 60px;
}
.l-title {
font-family: Comfortaa;
font-weight: normal;
font-size: 40px;
}
.m-title {
font-family: Comfortaa;
font-weight: normal;
font-size: 150%;
}
.home-content {
padding: 20px;
width: 100%;
max-height: 40px;
}
.side-img {
display: block;
position: relative;
width: 50%;
height: 100%;
max-height: 400px;
max-width: 400px;
}
.side-txt {
display: block;
position: relative;
width: 50%;
}
.text-title {
background-color: rgb(208, 208, 208);
border-radius: 20px 20px 0px 0px;
}
.text-content {
background-color: rgb(242, 242, 242);
border-radius: 0px 0px 20px 20px;
}
.card-deck {
position: relative;
padding-top: 20px;
}
.card {
background-color: rgb(208, 208, 208);
}
.card-header {
background-color: rgb(208, 208, 208);
}
.card-body {
background-color: rgb(242, 242, 242);
}
.rounder {
border-radius: 20px !important;
}
.footer {
background-color: rgb(208, 208, 208);
position: absolute;
height: 70px;
width: 100%;
bottom: 0px;
}
.footer-text {
position: relative;
top: 15px;
left: 70px;
}
.plink {
color: rgb(250, 152, 33);
}
@media (max-width: 767px) {
.big-title {
font-size: 30px;
}
.side-img {
display: none;
}
.side-txt {
position: absolute;
top: 10px;
left: 50%;
transform: translate(-50%, 0%);
width: 100%;
}
#navigation {
position: absolute;
top: 50px;
left: 50%;
transform: translate(-50%, 0%);
width: 400px
}
.nav-item {
font-size: 19px;
}
#header-bar {
height: 100px;
}
#header-title {
left: 0px;
width: 20%;
}
#logo {
position: absolute;
left: 50%;
transform: translate(-50%, 0%);
height: 60px;
}
.card {
align-self: center;
width: 80%;
}
}
.containerCustom {
width: 100%;
padding-right: 0px;

Write Preview
Loading…
Cancel
Save