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

Creation of a single page for branching to the other graph pages, still needs visual work and functionality flushed out.

pull/11/head
CetaceanNation 5 years ago
parent
14109a1e3e
commit
dd209706bd
7 changed files with 200 additions and 16 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +2
    -0
      .gitignore
  2. +84
    -0
      public/GraphGenerator.html
  3. +8
    -13
      public/about.css
  4. +1
    -1
      public/about.html
  5. +2
    -2
      public/index.html
  6. +46
    -0
      public/search.css
  7. +57
    -0
      public/style.css

+ 2
- 0
.gitignore View File

@ -3,3 +3,5 @@
################################################################################ ################################################################################
/.vs /.vs
/node_modules/.bin
/node_modules

+ 84
- 0
public/GraphGenerator.html View File

@ -0,0 +1,84 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="icon" href="./favicon.ico" type="image/x-icon" />
<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" />
</head>
<body>
<div id="header-bar" class="d-flex flex-column flex-md-row shadow-sm align-items-center">
<div id="header-title">
<a href="./index.html">
<img id="logo" src="./logo.svg" />
</a>
</div>
<div id="navigation">
<ul class="nav">
<li class="nav-item">
<a href="./graphgenerator.html">
Generate graphs
</a>
</li>
<div class="nav-sep"></div>
<li class="nav-item">
<a href="https://github.com/jrtechs/github-graphs">
View on GitHub
</a>
</li>
<div class="nav-sep"></div>
<li class="nav-item">
<a href="./about.html">
About
</a>
</li>
</ul>
</div>
</div>
<div class="main container">
<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>
</div>
<div class="card-deck text-center">
<div class="card rounder">
<div class="card-header">
<h1 class="m-title">Interactive Friends Chart</h1>
</div>
<div class="card-body">
<p>
Creates a web chart of the selected user and
both their followers and anyone they are following
themselves.
</p>
<button class="btn btn-outline-success rounder my-2 my-sm-0" onclick='fetchUserInput()' type='button'>Generate</button>
</div>
</div>
<div class="card rounder">
<div class="card-header">
<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 my-2 my-sm-0" onclick='fetchUserInput()' type='button'>Generate</button>
</div>
</div>
</div>
</div>
</body>
</html>

+ 8
- 13
public/about.css View File

@ -4,6 +4,7 @@
left: 50%; left: 50%;
transform: translate(-50%, 0%); transform: translate(-50%, 0%);
} }
#content-title { #content-title {
position: relative; position: relative;
top: 20%; top: 20%;
@ -11,42 +12,36 @@
background-color: rgb(208, 208, 208); background-color: rgb(208, 208, 208);
border-radius: 20px 20px 0px 0px border-radius: 20px 20px 0px 0px
} }
#content-body { #content-body {
position: relative; position: relative;
background-color: rgb(242, 242, 242); background-color: rgb(242, 242, 242);
border-radius: 0px 0px 20px 20px; border-radius: 0px 0px 20px 20px;
} }
.card-deck {
position: relative;
padding-top: 20px;
}
.card {
background-color: rgb(208, 208, 208);
}
.card-body {
background-color: rgb(242, 242, 242);
}
.rounder {
border-radius: 20px !important;
}
.avatar { .avatar {
border-radius: 10px 10px 10px 10px !important; border-radius: 10px 10px 10px 10px !important;
top: 10px; top: 10px;
position: relative; position: relative;
width: 70%; width: 70%;
} }
.links { .links {
padding: 10px; padding: 10px;
} }
.links a { .links a {
text-decoration: none; text-decoration: none;
} }
.link-ico { .link-ico {
width: 40px; width: 40px;
} }
.plink { .plink {
color: rgb(250, 152, 33); color: rgb(250, 152, 33);
} }
@media (max-width: 767px) { @media (max-width: 767px) {
#content-title { #content-title {
height: 40px; height: 40px;

+ 1
- 1
public/about.html View File

@ -20,7 +20,7 @@
<div id="navigation"> <div id="navigation">
<ul class="nav"> <ul class="nav">
<li class="nav-item"> <li class="nav-item">
<a href="./FriendsGraph.html">
<a href="./graphgenerator.html">
Generate graphs Generate graphs
</a> </a>
</li> </li>

+ 2
- 2
public/index.html View File

@ -18,7 +18,7 @@
<div id="navigation"> <div id="navigation">
<ul class="nav"> <ul class="nav">
<li class="nav-item"> <li class="nav-item">
<a href="./FriendsGraph.html">
<a href="./graphgenerator.html">
Generate graphs Generate graphs
</a> </a>
</li> </li>
@ -41,7 +41,7 @@
<div class="home-content row align-items-center"> <div class="home-content row align-items-center">
<div class="side-txt col"> <div class="side-txt col">
<div class="text-title text-center" style="padding: 10px;"> <div class="text-title text-center" style="padding: 10px;">
<h1 class="m-title">How to get started:</h1>
<h1 class="m-title" style="padding-top: 5px;">How to get started:</h1>
</div> </div>
<div class="text-content"> <div class="text-content">
<p style="position: relative; padding: 10px;"> <p style="position: relative; padding: 10px;">

+ 46
- 0
public/search.css View File

@ -0,0 +1,46 @@
#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%;
}
}

+ 57
- 0
public/style.css View File

@ -3,52 +3,70 @@
src: url(./fonts/Comfortaa-Regular.ttf); src: url(./fonts/Comfortaa-Regular.ttf);
font-weight: normal; font-weight: normal;
} }
@font-face { @font-face {
font-family: Comfortaa; font-family: Comfortaa;
src: url(./fonts/Comfortaa-Light.ttf); src: url(./fonts/Comfortaa-Light.ttf);
font-weight: lighter; font-weight: lighter;
} }
@font-face { @font-face {
font-family: Comfortaa; font-family: Comfortaa;
src: url(./fonts/Comfortaa-Bold.ttf); src: url(./fonts/Comfortaa-Bold.ttf);
font-weight: bold; font-weight: bold;
} }
#header-bar { #header-bar {
height: 10%; height: 10%;
width: 100%; width: 100%;
background-color: rgb(208, 208, 208); background-color: rgb(208, 208, 208);
} }
#header-title { #header-title {
font-size: 25px; font-size: 25px;
} }
#logo { #logo {
height: 60px; height: 60px;
} }
#error-code { #error-code {
font-family: Comfortaa; font-family: Comfortaa;
font-size: 200px; font-size: 200px;
color: rgb(208, 208, 208); color: rgb(208, 208, 208);
} }
#navigation { #navigation {
position: absolute; position: absolute;
right: 20px; right: 20px;
} }
#dcimg { #dcimg {
width: 300px; width: 300px;
} }
.error { .error {
color: rgb(208, 208, 208); color: rgb(208, 208, 208);
} }
.big-title { .big-title {
font-family: Comfortaa; font-family: Comfortaa;
font-weight: bold; font-weight: bold;
font-size: 60px; font-size: 60px;
} }
.l-title {
font-family: Comfortaa;
font-weight: normal;
font-size: 40px;
}
.m-title { .m-title {
font-family: Comfortaa; font-family: Comfortaa;
font-weight: normal; font-weight: normal;
font-size: 150%; font-size: 150%;
} }
.nav-sep { .nav-sep {
position: relative; position: relative;
left: 10px; left: 10px;
@ -57,23 +75,28 @@
border-left: 2px solid #232323; border-left: 2px solid #232323;
height: 30px; height: 30px;
} }
.nav-item { .nav-item {
padding: 5px; padding: 5px;
font-size: 20px; font-size: 20px;
} }
.nav-item a { .nav-item a {
color: #232323; color: #232323;
text-decoration: none; text-decoration: none;
} }
.nav-item a:hover { .nav-item a:hover {
color: rgb(250, 152, 33); color: rgb(250, 152, 33);
text-decoration: none; text-decoration: none;
} }
.home-content { .home-content {
padding: 20px; padding: 20px;
width: 100%; width: 100%;
max-height: 40px; max-height: 40px;
} }
.side-img { .side-img {
display: block; display: block;
position: relative; position: relative;
@ -82,23 +105,45 @@
max-height: 500px; max-height: 500px;
max-width: 500px; max-width: 500px;
} }
.side-txt { .side-txt {
display: block; display: block;
position: relative; position: relative;
width: 50%; width: 50%;
} }
.text-title { .text-title {
background-color: rgb(208, 208, 208); background-color: rgb(208, 208, 208);
border-radius: 20px 20px 0px 0px; border-radius: 20px 20px 0px 0px;
} }
.text-content { .text-content {
background-color: rgb(242, 242, 242); background-color: rgb(242, 242, 242);
border-radius: 0px 0px 20px 20px; border-radius: 0px 0px 20px 20px;
} }
.card-deck {
position: relative;
padding-top: 20px;
}
.card {
background-color: rgb(208, 208, 208);
}
.card-body {
background-color: rgb(242, 242, 242);
}
.rounder {
border-radius: 20px !important;
}
.main { .main {
position: relative; position: relative;
top: 20px; top: 20px;
} }
body { body {
background-color: #232323; background-color: #232323;
} }
@ -106,9 +151,11 @@ body {
.big-title { .big-title {
font-size: 30px; font-size: 30px;
} }
.side-img { .side-img {
display: none; display: none;
} }
.side-txt { .side-txt {
position: absolute; position: absolute;
top: 10px; top: 10px;
@ -116,6 +163,7 @@ body {
transform: translate(-50%, 0%); transform: translate(-50%, 0%);
width: 100%; width: 100%;
} }
#navigation { #navigation {
position: absolute; position: absolute;
top: 50px; top: 50px;
@ -123,20 +171,29 @@ body {
transform: translate(-50%, 0%); transform: translate(-50%, 0%);
width: 400px width: 400px
} }
.nav-item { .nav-item {
font-size: 19px; font-size: 19px;
} }
#header-bar { #header-bar {
height: 100px; height: 100px;
} }
#header-title { #header-title {
left: 0px; left: 0px;
width: 20%; width: 20%;
} }
#logo { #logo {
position: absolute; position: absolute;
left: 50%; left: 50%;
transform: translate(-50%, 0%); transform: translate(-50%, 0%);
height: 60px; height: 60px;
} }
.card {
align-self: center;
width: 80%;
}
} }

Write Preview
Loading…
Cancel
Save