Download as
Browse Code »

Commit c0c5e5834c8962e288e7254820cdd40344cd5918

Authored by Gustavo
1 parent 8afe6376
Exists in master and in 2 other branches amadeus_univasf, refactoring

Adjusts in the graphics color

Showing 1 changed file with 53 additions and 130 deletions   Show diff stats
bulletin/templates/bulletin/window_view.html
  Diff comments   View file @c0c5e58
... ... @@ -64,13 +64,11 @@
64 64 <link rel="stylesheet" href="{% static 'css/estilo.css' %}">
65 65 </head>
66 66 <body style="background: #FFF">
67   - <div class="container-fluid" style="padding-top: 20px">
  67 + <div class="container-fluid" style="padding-top: 20px;">
68 68 {% autoescape off %}
69 69 {{ bulletin.content }}
70 70 {% endautoescape %}
71 71  
72   -
73   -
74 72 <div style="padding-left: 80px;padding-right: 80px;">
75 73 <div align="left" style="font-size:22px; color: #878787; padding-top: 30px;">Confira as suas metas</div>
76 74 <hr style="height:2px; background-color:#878787; margin-top: 5px;">
... ... @@ -104,11 +102,11 @@
104 102  
105 103 <!-- Cor amarela -->
106 104 {% if meta.alcancada < meta.desejada and meta.alcancada > meta.estabelecida %}
107   - <th style="text-align:center;background-color:#f3ff00 ; font-weight: normal;">{{ meta.alcancada }}%</th>
  105 + <th style="text-align:center;background-color:#f8b800 ; text-shadow: 1px 1px 10px #000; color:#fff; font-weight: normal;">{{ meta.alcancada }}%</th>
108 106 {% endif %}
109 107  
110 108 {% if meta.alcancada > meta.desejada and meta.alcancada < meta.estabelecida %}
111   - <th style="text-align:center;background-color:#f3ff00 ; font-weight: normal;">{{ meta.alcancada }}%</th>
  109 + <th style="text-align:center;background-color:#f8b800 ; text-shadow: 1px 1px 10px #000; color:#fff; font-weight: normal;">{{ meta.alcancada }}%</th>
112 110  
113 111 {% endif %}
114 112 <!-- Cor amarela -->
... ... @@ -116,13 +114,13 @@
116 114  
117 115 <!-- Cor verde -->
118 116 {% if meta.alcancada > meta.desejada and meta.alcancada > meta.estabelecida %}
119   - <th style="text-align:center;background-color:#7bdc42 ; font-weight: normal;">{{ meta.alcancada }}%</th>
  117 + <th style="text-align:center;background-color:#00d337; text-shadow: 1px 1px 10px #000; color:#fff; font-weight: normal;">{{ meta.alcancada }}%</th>
120 118 {% endif %}
121 119 <!-- Cor verde -->
122 120  
123 121 <!-- Cor vermelha -->
124 122 {% if meta.alcancada < meta.desejada and meta.alcancada < meta.estabelecida %}
125   - <th style="text-align:center;background-color:#ff0000; font-weight: normal;">{{ meta.alcancada }}%</th>
  123 + <th style="text-align:center;background-color:#ff0000; text-shadow: 1px 1px 10px #000; color:#fff; font-weight: normal;">{{ meta.alcancada }}%</th>
126 124  
127 125 {% endif %}
128 126 <!-- Cor vermelha -->
... ... @@ -140,7 +138,7 @@
140 138 </div>
141 139 </div>
142 140 <div style="padding-left: 80px;padding-right: 80px;">
143   - <div align="left" style="font-size:22px; color: #878787; padding-top: 30px; ">Indicadores relevantes para o seu desempenho</div>
  141 + <div align="left" style="font-size:22px; color: #878787; padding-top: 25px; ">Indicadores relevantes para o seu desempenho</div>
144 142 <hr style="height:2px; background-color:#878787; margin-top: 5px;">
145 143 <div class="row" style="padding-left: 15px;" >
146 144 <table >
... ... @@ -148,10 +146,10 @@
148 146 <td style="background-color:#002F4B; width: 20px;"></td>
149 147 <td style="padding-left: 5px;">Seu ressultado</td>
150 148 <td style="width: 20px"></td>
151   - <td style="background-color:#35ae5d; width: 20px;"></td>
  149 + <td style="background-color:#009688; width: 20px;"></td>
152 150 <td style="padding-left: 5px;">Nível acima da mediana dos aprovados</td>
153 151 <td style="width: 20px"></td>
154   - <td style="background-color:#ffd75d; width: 20px;"></td>
  152 + <td style="background-color:#d0cebb; width: 20px;"></td>
155 153 <td style="padding-left: 5px;">Nível abaixo da mediana dos aprovados</td>
156 154 <td style="width: 30px"></td>
157 155 </tr>
... ... @@ -187,33 +185,27 @@
187 185  
188 186 </tbody>
189 187 </table>
  188 + <hr style="height:1px; background-color:#878787;margin-top: -20px;">
190 189 </div>
191 190 </div>
192 191 </div>
193   -
194   - <div class="row">
195   - <div class="col-md-8 col-md-offset-2 col-sm-8 col-sm-offset-2 alert-warning bulletin-warning">
196   - <div class="col-md-2 col-sm-2">
197   - <img src="{% static 'img/warning.png' %}" class="img-responsive" />
198   - </div>
199   - <div class="col-md-10 col-sm-10">
200   - <h4>{% trans 'There are obstructions to your activities?' %}</h4>
201   - <p><a data-toggle="modal" data-target="#bulletin-difficulties-modal" href="">{% trans 'Click here' %}</a> {% trans 'to communicate the difficulties that may decrease your performance.' %}</p>
202   - </div>
  192 + <div style=" padding-left: 80px;padding-right: 80px;">
  193 + <div align="left" style="font-size:22px; color: #878787; padding-top: 15px;"><img src="{% static 'img/warning.png' %}" height="40" width="50" align= "bottom"/>{% trans 'There are obstructions to your activities?' %}</div>
  194 + <hr style="height:2px; background-color:#878787; margin-top: 5px;"><br>
  195 + <div style="background-color:#fff; box-shadow: 1px 1px 10px #c0beaf; margin-top: -20px;">
  196 + <p align="left" style="font-size:16px; padding-left: 15px; padding-top: 20px; padding-bottom: 20px; "><a data-toggle="modal" data-target="#bulletin-difficulties-modal" href=""><b>{% trans 'Click here' %}</b></a> {% trans 'to communicate the difficulties that may decrease your performance.' %}</p>
203 197 </div>
204   - </div>
  198 + <br>
205 199 </div>
206 200 <div class="modal fade" tabindex="-1" role="dialog" id="bulletin-difficulties-modal">
207 201 <div class="modal-dialog" role="document">
208 202 <div class="modal-content">
209 203 <div class="modal-header">
210 204 <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
211   - <h4 class="modal-title">{% trans 'Inform difficulties' %}</h4>
212 205 </div>
213 206 <div class="modal-body">
214 207 <form id="bulletin-difficulties" action="" method="POST" enctype="multipart/form-data">
215 208 {% csrf_token %}
216   -
217 209 <textarea class="form-control" id="dificulties" name="difficulties" placeholder="{% trans 'Type here the dificulties that may harm your performance' %}"></textarea>
218 210 </form>
219 211 </div>
... ... @@ -240,7 +232,7 @@
240 232 var w=200,h=200;
241 233 var outerRadius=(w/2)-10;
242 234 var innerRadius=70;
243   - var color = ['#ececec','#002F4B'];
  235 + var color = ['#d0cebb','#002F4B'];
244 236 var arc=d3.svg.arc()
245 237 .innerRadius(innerRadius)
246 238 .outerRadius(outerRadius)
... ... @@ -284,7 +276,7 @@
284 276 inset_shadow.append("svg:feFlood")
285 277 .attr({
286 278 'flood-color':'black',
287   - 'flood-opacity':.7,
  279 + 'flood-opacity':.6,
288 280 result:'color'
289 281 });
290 282 inset_shadow.append("svg:feComposite")
... ... @@ -374,39 +366,39 @@
374 366 var mediana5 = parseFloat("{{medianas.4}}".replace(",","."))
375 367 var mediana6 = parseFloat("{{medianas.5}}".replace(",","."))
376 368  
377   - var maximo1 = {{maximos.0}}
378   - var maximo2 = {{maximos.1}}
379   - var maximo3 = {{maximos.2}}
380   - var maximo4 = {{maximos.3}}
381   - var maximo5 = {{maximos.4}}
382   - var maximo6 = {{maximos.5}}
  369 + var maximo1 = parseFloat("{{maximos.0}}".replace(",","."))
  370 + var maximo2 = parseFloat("{{maximos.1}}".replace(",","."))
  371 + var maximo3 = parseFloat("{{maximos.2}}".replace(",","."))
  372 + var maximo4 = parseFloat("{{maximos.3}}".replace(",","."))
  373 + var maximo5 = parseFloat("{{maximos.4}}".replace(",","."))
  374 + var maximo6 = parseFloat("{{maximos.5}}".replace(",","."))
383 375  
384   - var resultado1 = {{resultados.0}}
385   - var resultado2 = {{resultados.1}}
386   - var resultado3 = {{resultados.2}}
387   - var resultado4 = {{resultados.3}}
388   - var resultado5 = {{resultados.4}}
389   - var resultado6 = {{resultados.5}}
  376 + var resultado1 = parseFloat("{{resultados.0}}".replace(",","."))
  377 + var resultado2 = parseFloat("{{resultados.1}}".replace(",","."))
  378 + var resultado3 = parseFloat("{{resultados.2}}".replace(",","."))
  379 + var resultado4 = parseFloat("{{resultados.3}}".replace(",","."))
  380 + var resultado5 = parseFloat("{{resultados.4}}".replace(",","."))
  381 + var resultado6 = parseFloat("{{resultados.5}}".replace(",","."))
390 382  
391 383  
392 384 // Variável com os dados obtidos da planilha carregada com os dados dos indicadores
393 385 var dataset = [
394   - {indicador: "Frequência", valor: resultado1, mediana: mediana1, maximo: maximo1},
395   - {indicador: "Nota no Simulado 01", valor: resultado2, mediana: mediana2, maximo: maximo2},
396   - {indicador: "Nota no simulado 02", valor: resultado3, mediana: mediana3, maximo: maximo3},
397   - {indicador: "Atividades on-line", valor: resultado4, mediana: mediana4, maximo: maximo4},
398   - {indicador: "Número de dias que viu o simulado", valor: resultado5, mediana: mediana5, maximo: maximo5},
399   - {indicador: "Número de acesso ao anbiente virtual", valor: resultado6, mediana: mediana6, maximo: maximo6}
  386 + {valor: resultado1, mediana: mediana1, maximo: maximo1},
  387 + {valor: resultado2, mediana: mediana2, maximo: maximo2},
  388 + {valor: resultado3, mediana: mediana3, maximo: maximo3},
  389 + {valor: resultado4, mediana: mediana4, maximo: maximo4},
  390 + {valor: resultado5, mediana: mediana5, maximo: maximo5},
  391 + {valor: resultado6, mediana: mediana6, maximo: maximo6}
400 392 ];
401 393  
402 394 // Script para a geração do gráfico de indicadores relevantes
403 395  
404   - var ind01 = [{indicador: dataset[0].indicador , valor: dataset[0].valor, mediana: dataset[0].mediana, maximo: dataset[0].maximo}];
405   - var ind02 = [{indicador: dataset[1].indicador , valor: dataset[1].valor, mediana: dataset[1].mediana, maximo: dataset[1].maximo}];
406   - var ind03 = [{indicador: dataset[2].indicador , valor: dataset[2].valor, mediana: dataset[2].mediana, maximo: dataset[2].maximo}];
407   - var ind04 = [{indicador: dataset[3].indicador , valor: dataset[3].valor, mediana: dataset[3].mediana, maximo: dataset[3].maximo}];
408   - var ind05 = [{indicador: dataset[4].indicador , valor: dataset[4].valor, mediana: dataset[4].mediana, maximo: dataset[4].maximo}];
409   - var ind06 = [{indicador: dataset[5].indicador , valor: dataset[5].valor, mediana: dataset[5].mediana, maximo: dataset[5].maximo}];
  396 + var ind01 = [{valor: dataset[0].valor, mediana: dataset[0].mediana, maximo: dataset[0].maximo}];
  397 + var ind02 = [{valor: dataset[1].valor, mediana: dataset[1].mediana, maximo: dataset[1].maximo}];
  398 + var ind03 = [{valor: dataset[2].valor, mediana: dataset[2].mediana, maximo: dataset[2].maximo}];
  399 + var ind04 = [{valor: dataset[3].valor, mediana: dataset[3].mediana, maximo: dataset[3].maximo}];
  400 + var ind05 = [{valor: dataset[4].valor, mediana: dataset[4].mediana, maximo: dataset[4].maximo}];
  401 + var ind06 = [{valor: dataset[5].valor, mediana: dataset[5].mediana, maximo: dataset[5].maximo}];
410 402  
411 403 // Variáveis de largura e altura da área de desenho do SVG
412 404 var w = 110;
... ... @@ -473,75 +465,6 @@
473 465 // Definindo o objeto tooltip
474 466 var tooltip = d3.select("body").append("div").attr("class", "toolTip");
475 467  
476   - // Definindo o gradiente verde
477   - var gradient_green = svg.append('svg:defs')
478   - .append('svg:linearGradient')
479   - .attr('id', 'gradient_green')
480   - .attr('x1', '0%')
481   - .attr('y1', '0%')
482   - .attr('x2', '100%')
483   - .attr('y2', '0%');
484   -
485   - gradient_green.append('svg:stop')
486   - .attr('offset', '5%')
487   - .attr('stop-color', '#008c2f')
488   - .attr('stop-opacity', 0.8);
489   -
490   - gradient_green.append('svg:stop')
491   - .attr('offset', '10%')
492   - .attr('stop-color', '#d4eedc')
493   - .attr('stop-opacity', 0.8);
494   -
495   - gradient_green.append('svg:stop')
496   - .attr('offset', '20%')
497   - .attr('stop-color', '#009933')
498   - .attr('stop-opacity', 0.8);
499   -
500   - gradient_green.append('svg:stop')
501   - .attr('offset', '85%')
502   - .attr('stop-color', '#35ae5d')
503   - .attr('stop-opacity', 0.8);
504   -
505   - gradient_green.append('svg:stop')
506   - .attr('offset', '95%')
507   - .attr('stop-color', '#007c29')
508   - .attr('stop-opacity', 0.8);
509   -
510   -
511   - // Definindo o gradiente amarelo
512   - var gradient_yellow = svg.append('svg:defs')
513   - .append('svg:linearGradient')
514   - .attr('id', 'gradient_yellow')
515   - .attr('x1', '0%')
516   - .attr('y1', '0%')
517   - .attr('x2', '100%')
518   - .attr('y2', '0%');
519   -
520   - gradient_yellow.append('svg:stop')
521   - .attr('offset', '5%')
522   - .attr('stop-color', '#bc9626')
523   - .attr('stop-opacity', 0.8);
524   -
525   - gradient_yellow.append('svg:stop')
526   - .attr('offset', '10%')
527   - .attr('stop-color', '#fff6dc')
528   - .attr('stop-opacity', 0.8);
529   -
530   - gradient_yellow.append('svg:stop')
531   - .attr('offset', '20%')
532   - .attr('stop-color', '#ffcc33')
533   - .attr('stop-opacity', 0.8);
534   -
535   - gradient_yellow.append('svg:stop')
536   - .attr('offset', '85%')
537   - .attr('stop-color', '#ffd75d')
538   - .attr('stop-opacity', 0.8);
539   -
540   - gradient_yellow.append('svg:stop')
541   - .attr('offset', '95%')
542   - .attr('stop-color', '#b28e24')
543   - .attr('stop-opacity', 0.8);
544   -
545 468  
546 469 // Função que desenha o gráfico 1
547 470 function plot1(params){
... ... @@ -555,7 +478,7 @@
555 478 .data(params.data)
556 479 .enter()
557 480 .append("rect")
558   - .attr('fill', 'url(#gradient_green)')
  481 + .attr('fill', '#009688')
559 482 .on("mouseout", function(d,i){
560 483 tooltip.style("display", "none");
561 484 })
... ... @@ -583,7 +506,7 @@
583 506 .data(params.data)
584 507 .enter()
585 508 .append("rect")
586   - .attr('fill', 'url(#gradient_yellow)')
  509 + .attr('fill', '#d0cebb')
587 510 .on("mouseout", function(d,i){
588 511 tooltip.style("display", "none");
589 512 })
... ... @@ -670,7 +593,7 @@
670 593 .data(params.data)
671 594 .enter()
672 595 .append("rect")
673   - .attr('fill', 'url(#gradient_green)')
  596 + .attr('fill', '#009688')
674 597 .on("mouseout", function(d,i){
675 598 tooltip.style("display", "none");
676 599 })
... ... @@ -699,7 +622,7 @@
699 622 .data(params.data)
700 623 .enter()
701 624 .append("rect")
702   - .attr('fill', 'url(#gradient_yellow)')
  625 + .attr('fill', '#d0cebb')
703 626 .on("mouseout", function(d,i){
704 627 tooltip.style("display", "none");
705 628 })
... ... @@ -784,7 +707,7 @@
784 707 .data(params.data)
785 708 .enter()
786 709 .append("rect")
787   - .attr('fill', 'url(#gradient_green)')
  710 + .attr('fill', '#009688')
788 711 .on("mouseout", function(d,i){
789 712 tooltip.style("display", "none");
790 713 })
... ... @@ -811,7 +734,7 @@
811 734 .data(params.data)
812 735 .enter()
813 736 .append("rect")
814   - .attr('fill', 'url(#gradient_yellow)')
  737 + .attr('fill', '#d0cebb')
815 738 .on("mouseout", function(d,i){
816 739 tooltip.style("display", "none");
817 740 })
... ... @@ -897,7 +820,7 @@
897 820 .data(params.data)
898 821 .enter()
899 822 .append("rect")
900   - .attr('fill', 'url(#gradient_green)')
  823 + .attr('fill', '#009688')
901 824 .on("mouseout", function(d,i){
902 825 tooltip.style("display", "none");
903 826 })
... ... @@ -924,7 +847,7 @@
924 847 .data(params.data)
925 848 .enter()
926 849 .append("rect")
927   - .attr('fill', 'url(#gradient_yellow)')
  850 + .attr('fill', '#d0cebb')
928 851 .on("mouseout", function(d,i){
929 852 tooltip.style("display", "none");
930 853 })
... ... @@ -1012,7 +935,7 @@
1012 935 .data(params.data)
1013 936 .enter()
1014 937 .append("rect")
1015   - .attr('fill', 'url(#gradient_green)')
  938 + .attr('fill', '#009688')
1016 939 .on("mouseout", function(d,i){
1017 940 tooltip.style("display", "none");
1018 941 })
... ... @@ -1040,7 +963,7 @@
1040 963 .data(params.data)
1041 964 .enter()
1042 965 .append("rect")
1043   - .attr('fill', 'url(#gradient_yellow)')
  966 + .attr('fill', '#d0cebb')
1044 967 .on("mouseout", function(d,i){
1045 968 tooltip.style("display", "none");
1046 969 })
... ... @@ -1128,7 +1051,7 @@
1128 1051 .data(params.data)
1129 1052 .enter()
1130 1053 .append("rect")
1131   - .attr('fill', 'url(#gradient_green)')
  1054 + .attr('fill', '#009688')
1132 1055 .on("mouseout", function(d,i){
1133 1056 tooltip.style("display", "none");
1134 1057 })
... ... @@ -1155,7 +1078,7 @@
1155 1078 .data(params.data)
1156 1079 .enter()
1157 1080 .append("rect")
1158   - .attr('fill', 'url(#gradient_yellow)')
  1081 + .attr('fill', '#d0cebb')
1159 1082 .on("mouseout", function(d,i){
1160 1083 tooltip.style("display", "none");
1161 1084 })
... ...