Commit e4e9945b authored by Porter Libby's avatar Porter Libby
Browse files

new version

parent 873465f8
html{
position: absolute;
:root{
--block-color-1: coral;
--detail-color-1: lightgreen;
--text-color-1: black;
--text-color-2: #333;
}
body{
html{
width: 100%;
height: 100%;
position: fixed;
text-align: center;
}
#flow-chart-container{
width: 150vh;
body {
width: 100%;
height: 100%;
margin: 0 auto;
display: inline-block;
text-align: left;
position: absolute;
}
.details{
height: 90vh;
width: 90vw;
margin: 5vh 5vw;
position: absolute;
top: 0px;
background-color: var(--detail-color-1);
border-radius: 8px;
border: 1px solid black;
}
.flow-chart-column{
height: 100%;
width: 16%;
padding-left: 10px;
padding-right: 10px;
display: inline-block;
vertical-align: bottom;
overflow: hidden;
#details-container{
position: absolute;
width: 100%;
height: 100%;
top: 0px;
z-index: -1;
}
.flow-chart-block{
.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;
}
.box{
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);
height: 100%;
text-align: center;
cursor: pointer;
border-radius: 8px;
}
.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;
.box:hover{
font-weight: bold;
}
.flow-chart-square-4{
background-color: #d9614e;
}
.flow-chart-square-5{
background-color: lightgray;
.box-header {
padding-top: 10px;
display: inline-block;
vertical-align: middle;
font-size: 20px;
color: var(--text-color-1);
}
.flow-chart-line-down{
height: 5%;
width: 100%;
padding-top: 5px;
margin-bottom: -10px;
.box-prompt{
color: var(--text-color-2);
font-size: 15px;
font-weight: normal;
}
p {
color: white;
text-align: center;
position: relative;
top: 50%;
-ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
.box-prompt::before{
content: "Click for more details";
}
@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;
}
}
\ No newline at end of file
.div1 { grid-area: 1 / 1 / 2 / 2;
background-color: var(--block-color-1);}
.div2 { grid-area: 2 / 1 / 3 / 2;
background-color: var(--block-color-1);}
.div3 { grid-area: 3 / 1 / 4 / 2;
background-color: var(--block-color-1);}
.div4 { grid-area: 1 / 2 / 2 / 3;
background-color: var(--block-color-1);}
.div5 { grid-area: 2 / 2 / 3 / 3;
background-color: var(--block-color-1);}
.div6 { grid-area: 3 / 2 / 4 / 3;
background-color: var(--block-color-1);}
.div7 { grid-area: 1 / 3 / 2 / 4;
background-color: var(--block-color-1);}
.div8 { grid-area: 2 / 3 / 3 / 4;
background-color: var(--block-color-1);}
.div9 { grid-area: 3 / 3 / 4 / 4;
background-color: var(--block-color-1);}
\ No newline at end of file
var first_year_advising = [
"Fake Seminar 1",
"Fake Seminar 2",
"Fake Seminar 3",
"Fake Seminar 4"
]
\ No newline at end of file
......@@ -8,8 +8,47 @@
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div id='flow-chart-container'>
</div>
<script src="main.js"></script>
<div class="parent" style='position: absolute; z-index: 0;'>
<div class="box div1" onclick='openDetails(this)'>
<span class='box-header'>Campus Life</span></br>
<span class='box-prompt'></span>
</div>
<div class="box div2" onclick='openDetails(this)'>
<span class='box-header'>Community Engagement</span></br>
<span class='box-prompt'></span>
</div>
<div class="box div3" onclick='openDetails(this)'>
<span class='box-header'>Major Selection</span></br>
<span class='box-prompt'></span>
</div>
<div class="box div4" onclick='openDetails(this)'>
<span class='box-header'>Research</span></br>
<span class='box-prompt'></span>
</div>
<div class="box div5" onclick='openDetails(this)'>
<span class='box-header'>Internship</span></br>
<span class='box-prompt'></span>
</div>
<div class="box div6" onclick='openDetails(this)'>
<span class='box-header'>Off-Campus Study</span></br>
<span class='box-prompt'></span>
</div>
<div class="box div7" onclick='openDetails(this)'>
<span class='box-header'>Career</span></br>
<span class='box-prompt'></span>
</div>
</div>
<div id='details-container'></div>
<script>
function openDetails(target){
console.log(target);
var newDiv = document.createElement("div");
newDiv.className = 'details'
var container = document.getElementById('details-container');
container.style.zIndex = 1;
container.append(newDiv);
}
</script>
</body>
</html>
\ No newline at end of file
console.log(first_year_advising); // show json structure from 'data/careers-data.js'
var container_name = 'First Year Advising';
var container = document.getElementById(container_name);
\ No newline at end of file
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment