Commit 609a9ae2 authored by Porter Libby's avatar Porter Libby
Browse files

Merge branch 'porter' into developer

parents 01d1cb6b 213216dc
# EPIC Journey Display
This is the repo for developing the EPIC Journey display project.
# Contributors
## Structure
For each item rendered to the screen, there is a data key attached to it in the `index.html`. Each time details for a catagory are viewed, that object uses its key to fetch data from the dictionary, and render it in a details popup.
## Data Dictionary
In the file `/data/data.js`, the dictionary itself can be found. It follows the form:
```
var dictionary = {
<KEY>: <DESCRIPTION>, // this form attaches a description to a key.
<KEY>: [ // this form attaches a set of options to a key.
<OPTION>,
<OPTION>,
<OPTION>,
...
],
...
}
```
## Contributors
- Craig Earley
- Porter Libby
......
html{
position: absolute;
}
body{
width: 100%;
height: 100%;
position: fixed;
text-align: center;
}
#flow-chart-container{
width: 150vh;
height: 100%;
margin: 0 auto;
display: inline-block;
text-align: left;
}
.flow-chart-column{
height: 100%;
width: 16%;
padding-left: 10px;
padding-right: 10px;
display: inline-block;
vertical-align: bottom;
overflow: hidden;
}
.flow-chart-block{
width: 100%;
height: 24%;
margin-top: -10px;
-webkit-box-shadow: 10px 10px 5px -6px rgba(0,0,0,0.42);
-moz-box-shadow: 10px 10px 5px -6px rgba(0,0,0,0.42);
box-shadow: 10px 10px 5px -6px rgba(0,0,0,0.42);
}
.flow-chart-circle-1{
background-color: #db584f;
border-radius: 300px;
}
.flow-chart-circle-2{
background-color: #7bbad1;
border-radius: 300px;
}
.flow-chart-square-1{
background-color: #7bbad1;
}
.flow-chart-square-2{
background-color: #fccc6d;
}
.flow-chart-square-3{
background-color: #c22f51;
}
.flow-chart-square-4{
background-color: #d9614e;
}
.flow-chart-square-5{
background-color: lightgray;
}
.flow-chart-line-down{
height: 5%;
width: 100%;
padding-top: 5px;
margin-bottom: -10px;
}
p {
color: white;
text-align: center;
position: relative;
top: 50%;
-ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
@media only screen and (max-width: 800px) {
.flow-chart-column{
display: inline;
padding-bottom: 50%;
}
#flow-chart-container{
width: 60%;
padding: 20%;
height: 100%;
overflow: auto;
margin-top: -15%;
}
.flow-chart-block{
width: 60vw;
height: 60vw;
}
}
/* STUFF FOR CAREERS (PORTER) */
input{
width: 75%;
align-self: bottom;
}
#career-search-container{
width: 100%;
height: 100%;
padding-top: 50%;
text-align: center;
}
#career-search-container span{
font-size: 12px;
}
.autocomplete-items div {
padding: 10px;
cursor: pointer;
background-color: #fff;
border-bottom: 1px solid #d4d4d4;
}
.autocomplete-items div:hover {
background-color: #e9e9e9;
}
.autocomplete-active {
background-color: DodgerBlue !important;
color: #ffffff;
}
/* STUFF FOR MAJOR SELECTION (DIPESH) */
#major-search-container{
width: 100%;
height: 100%;
padding-top: 50%;
text-align: center;
}
#major-search-container span{
font-size: 12px;
}
This diff is collapsed.
......@@ -5,19 +5,129 @@
<title>EPIC JOURNEY</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="public/css/main.css">
<script src="data/careers-data.js"></script>
<script src="data/data.js"></script>
<script src="public/js/searchbar.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"> </script>
</head>
<body>
<div id='flow-chart-container'>
<div id='container'>
<div id='slide-button'>
Next
</div>
<div class="parent p0" id='p0' style='position: absolute; z-index: 0;'>
<div class="circle div2" onclick='openDetails("first_year_advising",this)'>
<span class='box-header'>First Year Advising</span></br>
<span class='box-prompt'></span>
</div>
<div class="circle div5" onclick='openDetails("career_exploration", this)'>
<span class='box-header'>Career Exploration</span></br>
<span class='box-prompt'></span>
</div>
<div class="circle div8" onclick='openDetails("career_community", this)'>
<span class='box-header'>Career Community</span></br>
<span class='box-prompt'></span>
</div>
</div>
<div class="parent p1" id='p1' style='position: absolute; z-index: 0;'>
<div class="box color-2 div1" onclick='openDetails("campus_life",this)'>
<span class='box-header'>Campus Life</span></br>
<span class='box-prompt'></span>
</div>
<div class="box color-2 div2" onclick='openDetails("community_engagement", this)'>
<span class='box-header'>Community Engagement</span></br>
<span class='box-prompt'></span>
</div>
<div class="box color-3 div3" onclick='openDetails("major_selection", this)'>
<span class='box-header'>Major Selection</span></br>
<span class='box-prompt'></span>
</div>
<div class="box color-3 div4" onclick='openDetails("research", this)'>
<span class='box-header'>Research</span></br>
<span class='box-prompt'></span>
</div>
<div class="box color-3 div5" onclick='openDetails("internship", this)'>
<span class='box-header'>Internship</span></br>
<span class='box-prompt'></span>
</div>
<div class="box color-4 div6" onclick='openDetails("off_campus_study", this)'>
<span class='box-header'>Off-Campus Study</span></br>
<span class='box-prompt'></span>
</div>
<div class="box color-4 div7" onclick='openDetails("career", this)'>
<span class='box-header'>Career</span></br>
<span class='box-prompt'></span>
</div>
</div>
<div id='details-container' style='z-index: 4;'>
<div onclick='closeDetails()' style='width: 100%; height: 100%;'></div>
</div>
</div>
<!-- LOCAL FILES -->
<script src="public/js/main.js"></script>
<script src="data/careers-data.js"></script>
<script src="data/career_community-data.js"></script>
<script src="public/js/careers.js"></script>
<script src="public/js/career_community.js"></script>
<script src="data/major-data.js"></script>
<script src="public/js/major.js"></script>
<script>
function openDetails(key, target){
console.log(target);
var newDiv = document.createElement("div");
newDiv.className = 'details';
var title = document.createElement("span");
title.className = 'details-title';
title.textContent += key;
newDiv.append(title);
var returnButton = document.createElement('input');
returnButton.className = 'return';
returnButton.setAttribute("type", "button");
returnButton.onclick = function() { closeDetails(); };
newDiv.append(returnButton);
var container = document.getElementById('details-container');
container.style.zIndex = 4;
container.append(newDiv);
if (key == "first_year_advising" || key == "career_exploration" || key == "career_community"){
var text = dictionary[key];
newDiv.innerHTML += '</br><span>' + text + '</span>';
}
else if ((key == 'campus_life') ||
(key == 'community_engagement') ||
(key == 'major_selection') ||
(key == 'research') ||
(key == 'internship') ||
(key == 'off_campus_study') ||
(key == 'career')) {
createSearchBar(newDiv, key);
}
}
function closeDetails() {
console.log('test');
var container = document.getElementById('details-container');
container.innerHTML = "<div onclick='closeDetails()' style='width: 100%; height: 100%;'></div>";
container.style.zIndex = -1;
}
</script>
<script type="text/javascript">
var state = 0;
$( "#slide-button" ).click(function() {
console.log('switch')
if (state == 0){
console.log('0')
state = 1; // swtich to second screen
document.getElementById('p0').style.display = 'none';
document.getElementById('p1').style.display = 'grid';
document.getElementById('slide-button').innerHTML = 'Previous';
}
else if (state == 1){
console.log('1')
state = 0; // swtich back to first screen
document.getElementById('p1').style.display = 'none';
document.getElementById('p0').style.display = 'grid';
document.getElementById('slide-button').innerHTML = 'Next';
}
});
closeDetails()
</script>
</body>
</html>
</html>
\ No newline at end of file
// Test data for now
// Mimic form of JSON input for future development
var items = [{
'name': "First Year Advising",
'items': [],
'type': "circle-1",
'column': 0
},
{
'name': "Career Exploration",
'items': [],
'type': "circle-2",
'column': 0
},
{
'name': "Campus Life",
'items': [],
'type': "square-2",
'column': 1
},
{
'name': "Community Engagement",
'items': [],
'type': "square-5",
'column': 1
},
{
'name': "Career Exploration",
'items': [],
'type': "circle-1",
'column': 1
},
{
'name': "Major Selection",
'items': [],
'type': "square-3",
'column': 2
},
{
'name': "Research",
'items': [],
'type': "square-4",
'column': 2
},
{
'name': "Internship",
'items': [],
'type': "square-5",
'column': 2
},
{
'name': "Off-Campus Study",
'items': [],
'type': "square-1",
'column': 3
},
{
'name': "Career",
'items': [],
'type': "square-2",
'column': 3
}];
var container = document.getElementById("flow-chart-container");
var columns = items[items.length - 1].column;
// main render
function main(){
// loop over the colums in in the chart
console.table(items);
console.log(columns);
for (j = 0; j < columns + 1; j++){
var column = document.createElement('div');
column.className = 'flow-chart-column';
// loop over the items in each column
for (i = 0; i < items.length; i++){
if (items[i].column == j) {
var line = document.createElement('div');
line.className = 'flow-chart-line-down';
line.innerHTML = "<svg height='40px' width='100%'><line x1='50%' y1='0' x2='50%' y2='40' stroke-dasharray='4' style='stroke:rgb(0,0,0);stroke-width:2' /></svg>"
// create div of specific shape
var elem = document.createElement("div");
elem.className = "flow-chart-block flow-chart-" + items[i].type;
// create text to go in div
var text = document.createElement("p");
text.innerText = items[i].name;
// append elements together
elem.append(text);
column.append(line);
column.append(elem);
}
}
var endline = document.createElement('div');
endline.className = 'flow-chart-line-down';
endline.innerHTML = "<svg height='40px' width='100%'><line x1='50%' y1='0' x2='50%' y2='40' stroke-dasharray='4' style='stroke:rgb(0,0,0);stroke-width:2' /></svg>"
if (j != columns){
column.append(endline);
}
container.append(column);
}
}
main();
:root{
--block-color-1: coral;
--block-color-2: lightblue;
--block-color-3: orange;
--block-color-4: maroon;
--circle-color-1: coral;
--detail-color-1: lightgray;
--text-color-1: black;
--text-color-light: #ddd;
--text-color-2: #333;
--button-color: lightgray;
}
html{
width: 100%;
height: 100%;
position: fixed;
}
body {
width: 100%;
height: 100%;
position: absolute;
}
.details-container{
position: absolute;
z-index: 3;
}
.details{
height: 85vh;
width: 90vw;
margin: 5vh 5vw;
position: absolute;
z-index: 3;
top: 0px;
background-color: var(--detail-color-1);
border-radius: 8px;
border: 1px solid black;
text-align: center;
overflow: hidden;
padding-top: 5vh;
}
.details-title{
font-size: 3vmin;
}
.details #searchbar{
margin-top: 100px;
}
.return{
position: absolute;
right: 10px;
top: 10px;
}
#details-container{
position: absolute;
width: 100%;
height: 100%;
top: 0px;
z-index: -1;
}
.parent {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
grid-column-gap: 50px;
grid-row-gap: 50px;
height: 90vh;
width: 90vw;
padding: 5vh 5vw;
}
.p0{
display:grid
}
.p1{
display: none;
}
.box{
width: 100%;
height: 100%;
text-align: center;
cursor: pointer;
border-radius: 8px;
}
.color-1{
background-color: var(--block-color-1);
color: var(--text-color-1);
}
.color-2{
background-color: var(--block-color-2);
color: var(--text-color-1);
}
.color-3{
background-color: var(--block-color-3);
color: var(--text-color-1);
}
.color-4{
background-color: var(--block-color-4);
color: var(--text-color-light);
}
.box:hover{
font-weight: bold;
}
.circle{
margin-top:-20%;
width: 50vmin;
height: 50vmin;
text-align: center;
cursor: pointer;
border-radius: 1000px;
background-color: var(--circle-color-1);
}
.circle:hover{
font-weight: bold;
}
.circle .box-header{
margin-top:20%;
}
.box-header {
display: inline-block;
vertical-align: middle;
font-size: 3vmin;
}
.box-prompt{
font-size: 2vmin;
font-weight: normal;
}
.box-prompt::before{
content: "Click for more details";
}
.div1 { grid-area: 1 / 1 / 2 / 2; }
.div2 { grid-area: 2 / 1 / 3 / 2;}
.div3 { grid-area: 3 / 1 / 4 / 2;}
.div4 { grid-area: 1 / 2 / 2 / 3;}
.div5 { grid-area: 2 / 2 / 3 / 3;}
.div6 { grid-area: 3 / 2 / 4 / 3;}
.div7 { grid-area: 1 / 3 / 2 / 4;}
.div8 { grid-area: 2 / 3 / 3 / 4;}
.div9 { grid-area: 3 / 3 / 4 / 4;}
#slide-button{
position: absolute;
margin-left: 45%;
bottom: 20px;
width: 10%;
height: 35px;
padding-top: 15px;
background-color: var(--button-color);
z-index: 2;
text-align: center;
cursor: pointer;
}
#slide-button:hover{
font-weight: bold;
}
\ No newline at end of file
// Render search bar
// Porter Libby 2019
function createSearchBar(container, key){
//create search obj
var search_container = document.createElement("div");
search_container.id = key + '-search-container';
var search = document.createElement("INPUT");
search.id = 'searchbar'
search.setAttribute("type", "text");
search.setAttribute("value", "");
prompt = document.createElement('span');
prompt.innerHTML = 'Search for ' + key + ':';
search_container.appendChild(prompt);
search_container.appendChild(search);
container.appendChild(search_container);
names_for_search = [];
for(x=0;x<dictionary[key].length;x++){
names_for_search.push(dictionary[key][x]);
}
autocomplete(document.getElementById("searchbar"), names_for_search);
}
function autocomplete(inp, arr) {
var currentFocus;
inp.addEventListener("input", function(e) {
var a, b, i, val = this.value;
closeAllLists();
if (!val) { return false;}
currentFocus = -1;
a = document.createElement("DIV");
a.setAttribute("id", this.id + "autocomplete-list");
a.setAttribute("class", "autocomplete-items");
this.parentNode.appendChild(a);
for (i = 0; i < arr.length; i++) {
if (arr[i].substr(0, val.length).toUpperCase() == val.toUpperCase()) {
b = document.createElement("DIV");
b.innerHTML = "<strong>" + arr[i].substr(0, val.length) + "</strong>";
b.innerHTML += arr[i].substr(val.length);