Browse Source

Merge branch 'master' of github.com:jrtechs/github-graphs

pull/11/head
Bryce Murphy 5 years ago
parent
commit
4a5d628778
3 changed files with 57 additions and 15 deletions
  1. +40
    -7
      public/index.html
  2. +3
    -3
      public/js/profileGen.js
  3. +14
    -5
      public/style.css

+ 40
- 7
public/index.html View File

@ -7,6 +7,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" />
<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>
<div id="header-bar" class="d-flex flex-column flex-md-row shadow-sm align-items-center">
@ -37,23 +45,48 @@
</ul>
</div>
</div>
<div class="main container-fluid">
<div id="mainCarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="text-center">
<img src="./img/DolphinCroissant.png" />
</div>
</div>
<div class="carousel-item">
<div class="text-center">
<img src="./img/DolphinCroissant.png" />
</div>
</div>
<div class="carousel-item">
<div class="text-center">
<img src="./img/DolphinCroissant.png" />
</div>
</div>
</div>
<a class="carousel-control-prev" href="#mainCarousel" role="button" data-slide="prev" m="1">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#mainCarousel" role="button" data-slide="next" m="1">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<div class="main container-fluid" style="top: -100px;">
<div class="home-content row align-items-center">
<div class="side-txt col">
<div class="text-title text-center" style="padding: 10px;">
<h1 class="m-title" style="padding-top: 5px;">How to get started:</h1>
<h1 class="m-title" style="padding-top: 5px;">What can I do here?</h1>
</div>
<div class="text-content">
<p style="position: relative; padding: 10px;">
Head over to the 'Generate graphs' page and enter
the username of a GitHub user. The space on that
page will then populate with the requested GitHub
user and all the related user, visualizing the
connections between them.
the username of a GitHub user. You can then select
what kind of graph to generate based on that user.
</p>
<p style="position: relative; padding: 10px;">
If you'd like to see how everything works, follow
the link to GitHub, where you can view all the work
the link to GitHub, where you can view everything
that went into making this functional.
</p>
<p style="position: relative; padding: 10px;">

+ 3
- 3
public/js/profileGen.js View File

@ -11,14 +11,14 @@ function profileGen(username, container)
let html =
"<div class=\"card\" style=\"w-100\"> \
<img class=\"card-img-top\" src=\""+user.avatar_url+"\"></img> \
<div class=\"row mx-0\"> \
<div class=\"col-9\"> \
<div class=\"row\"> \
<div class=\"col-8\"> \
<div class=\"card-body\"> \
<h5 class=\"card-title\">"+user.name+"</h1> \
<h6 class=\"card-subtitle\">"+user.login+"</h2> \
</div> \
</div> \
<div class=\"col-sm\"> \
<div class=\"col-4\"> \
<button type=\"button\" class=\"btn btn-link pt-3\"> \
<a href=\""+makeUrl(user.login)+"\"> \
<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"> \

+ 14
- 5
public/style.css View File

@ -45,6 +45,15 @@
width: 300px;
}
#mainCarousel {
height: 500px;
background-color: black;
}
.carousel-item {
height: 500px;
}
.error {
color: rgb(208, 208, 208);
}
@ -102,8 +111,8 @@
position: relative;
width: 50%;
height: 100%;
max-height: 500px;
max-width: 500px;
max-height: 400px;
max-width: 400px;
}
.side-txt {
@ -128,11 +137,11 @@
}
.card {
background-color: rgb(255, 255, 255);
background-color: rgb(208, 208, 208);
}
.card-body {
background-color: rgb(255, 255, 255);
background-color: rgb(242, 242, 242);
}
.rounder {
@ -141,7 +150,7 @@
.main {
position: relative;
top: 20px;
top: 10px;
}
body {

Loading…
Cancel
Save