Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Data Dashboard - Lidia y Yosseline #68

Open
wants to merge 29 commits into
base: master
Choose a base branch
from
Open
Changes from 1 commit
Commits
Show all changes
29 commits
Select commit Hold shift + click to select a range
f40e868
Modificación del menú desplegable
YosseLine Nov 28, 2017
63e27ce
Modificando estructura html y añadiendo article principal
YosseLine Nov 29, 2017
f1e2bdb
Agregando graficos
lidiaramirezn Nov 29, 2017
ac140f1
Agregando grafico
lidiaramirezn Nov 29, 2017
3f063fc
Corrigiendo error
lidiaramirezn Nov 29, 2017
57e6a14
Modificando estructura html, css y js
YosseLine Nov 29, 2017
0168b51
Agregando primer grafico a dos sedes de Lima
lidiaramirezn Nov 29, 2017
01f7ea5
Modificando css
YosseLine Nov 29, 2017
944dceb
Mejorando cuadros de graficos
lidiaramirezn Nov 30, 2017
403eece
Mejorando cuadros de graficos
lidiaramirezn Nov 30, 2017
0441848
Mejorando css
YosseLine Nov 30, 2017
a79f782
Modifcando estilos con css y resolviendo conflictos
YosseLine Nov 30, 2017
920493d
Areglando diseño
lidiaramirezn Nov 30, 2017
763573f
Modificando estilos con css y resolviendo conflictos
YosseLine Nov 30, 2017
4f3edb0
Modificando css y resolviendo conflictos
YosseLine Nov 30, 2017
a2fec97
Añadiendo interaccón con js a div students enrolled
YosseLine Nov 30, 2017
d4379b2
Añadiendo interaccón con js a div students enrolled
YosseLine Nov 30, 2017
16348ff
Añadiendo % dropout
YosseLine Nov 30, 2017
9c090f0
Ultimas modificaciones
lidiaramirezn Nov 30, 2017
957a72b
Agrengando NPS según sede
YosseLine Nov 30, 2017
c96bd21
Agrengando NPS según sede
YosseLine Nov 30, 2017
af09239
Agregando funcionalidad en box students satisfation
YosseLine Nov 30, 2017
d3f28c7
Agregando funcionalidad en box jedi master rating
YosseLine Nov 30, 2017
e397f54
Probando gráficos
YosseLine Nov 30, 2017
107e761
Probando opciones
lidiaramirezn Nov 30, 2017
59269df
Añadiendo interacción con js
YosseLine Nov 30, 2017
1f1f5d1
Agregando cambios
lidiaramirezn Nov 30, 2017
5867995
Subiendo ultimos cambios
YosseLine Nov 30, 2017
3f4bf36
resolviendo conflictos
YosseLine Nov 30, 2017
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Modificando estructura html y añadiendo article principal
YosseLine committed Nov 29, 2017
commit 63e27ce950d3d21013be2d2b9592e0c07465e496
84 changes: 70 additions & 14 deletions css/main.css
Original file line number Diff line number Diff line change
@@ -1,7 +1,4 @@
/*
* Estilos de tu proyecto
*/
/*Resetando*/
/*Resetando*/
*{
margin: 0;
padding: 0;
@@ -12,6 +9,9 @@
.inline-block{
display: inline-block;
}
.block{
display: block;
}
.list-style{
list-style: none;
}
@@ -25,30 +25,55 @@
header{
margin-top: 0;
width: 100%;
height: 61.48px;
height: 9.2%;
position: fixed;
z-index: 1000;
background-color: rgba(255,193,7,0.5);
box-shadow: 0 0 3px #000;
top: 0;
}
.nav-header{
width: 81%;
height: 61.48px;
vertical-align: top;
outline: 1px solid blue;
width: 81.2%;
height: 100%;
position: fixed;
}

img{
width: 150px;
margin: 2px 50px;
margin: 2px 51px;
}
figure{
background-color: #fff;
}

/*Modificando tabs*/
.tab{
color: #000;
background-color: rgba(236,235,235,0.8);
border-top-left-radius: 15px;
border-top-right-radius: 15px;
padding: 10px;
width: 220px;
text-align: center;
cursor: pointer;
outline: none;
border: none;
box-shadow: 0 0 9px #999;
transform: translateY(69%);
margin-left: 25px;
}
.tab:hover{
background-color: rgb(236,235,235);
}
.tab:active {
background-color: rgb(255,193,7);
box-shadow: 0 0 9px #666;
transform: translateY(63%);
}
/*Modificando nav*/
nav{
padding-top: 61.48px;
width: 250px;
width: 252px;
position: fixed;
box-shadow: 0 0 3px #000;
}
.info-user{
width: 100%;
@@ -89,6 +114,7 @@ a{
text-decoration: none;
color: #000;
width: 100%;
height: 100%;
}
.flags{
width: 30px;
@@ -110,5 +136,35 @@ a{
font-size: 15px;
padding: 7px 0;
padding-left: 50px;

}
/*Modificando Main*/
.margin{
margin-top: 60.89px;
margin-left: 252px;
}
.container-sprints{
width: 100%;
border-bottom: 2px solid rgb(255,193,7);
position: fixed;
background-color: #FFF;
}
.sprints{
text-align: center;
padding: 5px 10px;
width: 220px;
height: 50px;
cursor: pointer;
}
.sprints:hover{
outline-color: #grey;
}
.sprints:active{
background-color: rgb(236,235,235);
}
/*Modificando aticle Overview*/
.background-color-article{
background-color: rgb(247,247,247);
}
.padding-article{
padding-top: 50px;
}
114 changes: 103 additions & 11 deletions index.html
Original file line number Diff line number Diff line change
@@ -13,6 +13,10 @@
<img src="assets/images/laboratoria-logo.jpg" alt="Logo laboratoria">
</figure>
<div id="nav-header" class="inline-block nav-header">
<ul id="container-tabs">
<li id="oerview" class="list-style inline-block"><button type="button" name="button" data-tab-select='taboverview' class="tab">Overview</button></li>
<li id="students" class="list-style inline-block"><button type="button" name="button" data-tab-select='tabstudents' class="tab">Students</button></li>
</ul>
</div>
</header>
<nav>
@@ -30,30 +34,118 @@
<ul id="list-region" class="hidden">
<li id="lim" class="list-style margin-list list-region"><a href="#"><img src="assets/images/peru.png" alt="Bandera Perú" class="flags">Lima<span><i class="fa fa-sort-desc fa-2x"></i></span></a></li>
<ul>
<li id="lim172" class="list-style margin-list list-lim"><a href="#">2017-II</a></li>
<li id="lim171" class="list-style margin-list list-lim"><a href="#">2017-I</a></li>
<li id="lim162" class="list-style margin-lis list-lim"><a href="#">2016-II</a></li>
<li class="list-style margin-list list-lim"><a href="#">2017-II</a></li>
<li class="list-style margin-list list-lim"><a href="#">2017-I</a></li>
<li class="list-style margin-lis list-lim"><a href="#">2016-II</a></li>
</ul>
<li id="aqp" class="list-style margin-list list-region"><a href="#"><img src="assets/images/peru.png" alt="Bandera Perú" class="flags">Arequipa<span><i class="fa fa-sort-desc fa-2x"></i></span></a></li>
<ul>
<li id="aqp171" class="list-style margin-list list-aqp"><a href="#">2017-I</a></li>
<li id="aqp162" class="list-style margin-list list-aqp"><a href="#">2016-II</a></li>
<li class="list-style margin-list list-aqp"><a href="#">2017-I</a></li>
<li class="list-style margin-list list-aqp"><a href="#">2016-II</a></li>
</ul>
<li id="scl" class="list-style margin-list list-region"><a href="#"><img src="assets/images/chile.png" alt="Bandera Chile" class="flags">Santiago de Chile<span><i class="fa fa-sort-desc fa-2x"></i></span></a></li>
<ul>
<li id="scl172" class="list-style margin-list list-scl"><a href="#">2017-II</a></li>
<li id="scl171" class="list-style margin-list list-scl"><a href="#">2017-I</a></li>
<li id="scl162" class="list-style margin-list list-scl"><a href="#">2016-II</a></li>
<li class="list-style margin-list list-scl"><a href="#">2017-II</a></li>
<li class="list-style margin-list list-scl"><a href="#">2017-I</a></li>
<li class="list-style margin-list list-scl"><a href="#">2016-II</a></li>
</ul>
<li id="cdmx" class="list-style margin-list list-region"><a href="#"><img src="assets/images/mexico.png" alt="Bandera México" class="flags">Ciudad de México<span><i class="fa fa-sort-desc fa-2x"></i></span></a></li>
<ul>
<li id="cdmx172" class="list-style margin-list list-cdmx"><a href="#">2017-II</a></li>
<li id="cdmx171" class="list-style margin-list list-cdmx"><a href="#">2017-I</a></li>
<li class="list-style margin-list list-cdmx"><a href="#">2017-II</a></li>
<li class="list-style margin-list list-cdmx"><a href="#">2017-I</a></li>
</ul>
</ul>
</div>
</nav>
<main id="">
<main id="" class="margin">
<div id="sprints-container" class="container-sprints">
<ul class="inline-block">
<li class="sprints list-style"><a href="#">Sprints<span><i class="fa fa-sort-desc fa-2x"></i></span></a></li>
</ul>
</div>
<article id="overview-article" class="background-color-article padding-article">
<div id="">
<div id="" class="inline-block">
<h3>ENROLLMENT</h3>
<div><span>120</span><p class="inline-block">#STUDENTS CURRENTLY ENROLLED</p></div>
<div><span>20%</span><p class="inline-block">% DROPOUT</p></div>
<figure>
<img src="assets/images/bar-graph.png" alt="">
</figure>
</div>
<div id="" class="inline-block">
<h3>ACHIEVEMENT</h3>
<div><span>105</span><p class="inline-block">#STUDENTS THAT MEET THE TARGET</p></div>
<div><span>78%</span><p class="inline-block">% OF TOTAL (135)</p></div>
<figure>
<img src="assets/images/graph.png" alt="">
</figure>
</div>
<div id="" class="inline-block">
<h3>NET PROMOTER SCORE</h3>
<div><span>78%</span><p class="inline-block">% CUMULATIVE NPS</p></div>
<div>
<span>60%</span><p class="inline-block">Promoters</p>
<span>30%</span><p class="inline-block">Passive</p>
<span>10%</span><p class="inline-block">Detractors</p>
</div>
<figure>
<img src="assets/images/graph.png" alt="">
</figure>
</div>
</div>

<div id="">
<div id="">
<h3>TECH SKILLS</h3>
<div><span>90</span><p class="inline-block">#STUDENTS THAT MEET THE TARGET</p></div>
<div><span>62%</span><p class="inline-block">% OF TOTAL (135)</p></div>
<figure>
<img src="assets/images/circle-graphic.png" alt="">
</figure>
<div id="">
<span></span><p>#STUDENTS THAT MEET THE TARGET</p>
<span></span><p>#STUDENTS THAT DON'T MEET THE TARGET</p>
</div>
</div>

<div id="">
<h3>LIFE SKILLS</h3>
<div><span>80</span><p class="inline-block">#OVERALL CLASS AVERAGE</p></div>
<div><span>62</span><p class="inline-block">#STUDENTS THAT MEET THE TARGET</p></div>
<figure>
<img src="assets/images/circle-graphic.png" alt="">
</figure>
<div id="">
<span></span><p>#STUDENTS THAT MEET THE TARGET</p>
<span></span><p>#STUDENTS THAT DON'T MEET THE TARGET</p>
</div>
</div>
</div>
<div id="">
<div id="" class="inline-block">
<h3>STUDENT SATISFATION</h3>
<div><span>140</span><p class="inline-block">% MEETING OR EXCEEDING EXPECTATIONS (CUMULATIVE)</p></div>
<figure>
<img src="assets/images/graph.png" alt="">
</figure>
</div>
<div id="" class="inline-block">
<h3>TEACHER RATING</h3>
<div><span>4.2</span><p class="inline-block">OVERALL TEACHER RATING (CUMULATIVE)</p></div>
<figure>
<img src="assets/images/graph.png" alt="">
</figure>
</div>
<div id="" class="inline-block">
<h3>JEDI MASTER RATING</h3>
<div><span>50</span><p class="inline-block">OVERALL JEDI RATING (CUMULATIVE)</p></div>
<figure>
<img src="assets/images/graph.png" alt="">
</figure>
</div>
</div>
</article>
</main>
<script type="text/javascript" src="js/data.js"></script>
<script type="text/javascript" src="js/app.js"></script>
2 changes: 1 addition & 1 deletion js/app.js
Original file line number Diff line number Diff line change
@@ -32,7 +32,7 @@ function optionsMexico() {
paintOptions(mexico, previous);
previous = mexico;
}
function paintOptions(option,previous) {
function paintOptions(option, previous) {
option.classList.add('yellow');
previous.classList.remove('yellow');
}