Download as
Browse Code »

Commit 6a28d3fc6a15ac485078616fb776cf11575fc615

Authored by Zambom
1 parent de483748
Exists in master and in 2 other branches amadeus_univasf, refactoring

Adjusting bulletin responsivity

Showing 2 changed files with 116 additions and 135 deletions   Show diff stats
amadeus/static/css/base/amadeus_responsive.css
  Diff comments   View file @6a28d3f
... ... @@ -107,6 +107,10 @@
107 107 }
108 108 /* End Buttons */
109 109  
  110 + .goals_details_table > thead > tr > th, .goals_details_table > tbody > tr > td {
  111 + font-size: 9px;
  112 + }
  113 +
110 114 .subject-period {
111 115 font-size: 12px;
112 116 }
... ...
bulletin/templates/bulletin/view.html
  Diff comments   View file @6a28d3f
... ... @@ -69,94 +69,78 @@
69 69 {% endif %}
70 70  
71 71 {% autoescape off %}
72   - {{ bulletin.content }}
  72 + {{ bulletin.content }}
73 73 {% endautoescape %}
74 74  
75 75 <div style="padding-left: 0px;padding-right: 0px;">
76 76 <div align="left" style="font-size:22px; color: #878787; padding-top: 0px;">Confira as suas metas</div>
77 77 <hr style="height:2px; background-color:#878787; margin-top: 5px;">
  78 +
78 79 <div class="row">
79   - <div class="col-md-4">
80   - <div align="center" style="font-size:16px; color: #000; padding-botom: 10px;"><b>Metas Atingidas</b></div>
81   - <div id="donut_chart" align="center"></div>
82   - </div>
  80 + <div class="col-md-4">
  81 + <div align="center" style="font-size:16px; color: #000; padding-botom: 10px;"><b>Metas Atingidas</b></div>
  82 + <div id="donut_chart" align="center"></div>
  83 + </div>
83 84  
84   - <div class="col-md-8">
85   - <div style="font-size:16px; text-align:left; color: #000; padding-left: 10px; "><b>Detalhamento das metas</b></div>
86   - <hr style="height:2px; background-color:#878787;margin-top: 5px;margin-bottom: 5px;">
87   - <table class="table table-hover">
88   - <thead>
89   - <tr>
90   - <th style="text-align:center">Descrição</th>
91   - <th style="width:150px; text-align:center">Recomendação </br> do(a) professor(a)</th>
92   - <th style="text-align:center">Média da turma</th>
93   - <th style="text-align:center">Sua meta</th>
94   - <th style="text-align:center">Seu resultado</th>
95   - </tr>
96   - </thead>
97   - <tbody>
98   - {% for meta in metas%}
  85 + <div class="col-md-8">
  86 + <div style="font-size:16px; text-align:left; color: #000; padding-left: 10px; "><b>Detalhamento das metas</b></div>
  87 + <hr style="height:2px; background-color:#878787;margin-top: 5px;margin-bottom: 5px;">
  88 +
  89 + <table class="table table-hover goals_details_table">
  90 + <thead>
  91 + <tr>
  92 + <th style="text-align:center">Descrição</th>
  93 + <th style="width:150px; text-align:center">Recomendação </br> do(a) professor(a)</th>
  94 + <th style="text-align:center">Média da turma</th>
  95 + <th style="text-align:center">Sua meta</th>
  96 + <th style="text-align:center">Seu resultado</th>
  97 + </tr>
  98 + </thead>
  99 + <tbody>
  100 + {% for meta in metas%}
99 101 <tr>
100   - <th style="font-weight: normal;">{{ meta.description }}</th>
101   - <th style="text-align:center;font-weight: normal;">{{ meta.desejada }} %</th>
  102 + <td style="font-weight: normal;">{{ meta.description }}</td>
  103 + <td style="text-align:center;font-weight: normal;">{{ meta.desejada }} %</td>
102 104 <td style="text-align:center;font-weight: normal;">{{ meta.media }}%</td>
103   - <th style="text-align:center; font-weight: normal;">{{ meta.estabelecida }}%</th>
  105 + <td style="text-align:center; font-weight: normal;">{{ meta.estabelecida }}%</td>
104 106  
105 107  
106 108 <!-- Cor amarela -->
107 109 {% if meta.alcancada < meta.desejada and meta.alcancada > meta.estabelecida or meta.alcancada < meta.desejada and meta.alcancada == meta.estabelecida %}
108   - <th style="text-align:center;background-color:#f8b800 ; text-shadow: 1px 1px 2px #000; color:#fff; font-weight: normal;"
  110 + <td style="text-align:center;background-color:#f8b800 ; text-shadow: 1px 1px 2px #000; color:#fff; font-weight: normal;"
109 111 data-toggle="tooltip" data-html="true" data-placement="bottom"
110 112 title="<b>Meta atingida!</b><br><br>Atenção! O seu resultado foi inferior ao recomendado pelo professor." class="grey-tooltip">
111   - {{ meta.alcancada }}%</th>
112   - {% endif %}
113   -
114   - {% if meta.alcancada > meta.desejada and meta.alcancada < meta.estabelecida or meta.alcancada == meta.desejada and meta.alcancada < meta.estabelecida %}
115   - <th style="text-align:center;background-color:#f8b800 ; text-shadow: 1px 1px 2px #000; color:#fff; font-weight: normal;"
  113 + {{ meta.alcancada }}%</td>
  114 + {% elif meta.alcancada > meta.desejada and meta.alcancada < meta.estabelecida or meta.alcancada == meta.desejada and meta.alcancada < meta.estabelecida %}
  115 + <td style="text-align:center;background-color:#f8b800 ; text-shadow: 1px 1px 2px #000; color:#fff; font-weight: normal;"
116 116 data-toggle="tooltip" data-html="true" data-placement="bottom"
117 117 title="<b>Meta atingida!</b><br><br>Atenção! O seu resultado foi inferior a sua meta inicial." class="grey-tooltip">
118   - {{ meta.alcancada }}%</th>
119   - {% endif %}
120   -
121   - <!-- Cor amarela -->
122   -
123   - <!-- Cor verde -->
124   - {% if meta.alcancada > meta.desejada and meta.alcancada > meta.estabelecida or meta.alcancada == meta.desejada and meta.alcancada > meta.estabelecida or meta.alcancada > meta.desejada and meta.alcancada == meta.estabelecida or meta.alcancada == 100 or meta.alcancada == meta.desejada and meta.alcancada == meta.estabelecida %}
125   - <th style="text-align:center;background-color:#00d337; text-shadow: 1px 1px 2px #000; color:#fff; font-weight: normal;"
  118 + {{ meta.alcancada }}%</td>
  119 + {% elif meta.alcancada > meta.desejada and meta.alcancada > meta.estabelecida or meta.alcancada == meta.desejada and meta.alcancada > meta.estabelecida or meta.alcancada > meta.desejada and meta.alcancada == meta.estabelecida or meta.alcancada == 100 or meta.alcancada == meta.desejada and meta.alcancada == meta.estabelecida %}
  120 + <td style="text-align:center;background-color:#00d337; text-shadow: 1px 1px 2px #000; color:#fff; font-weight: normal;"
126 121 data-toggle="tooltip" data-html="true" data-placement="bottom"
127 122 title="<b>Meta atingida!</b>" class="grey-tooltip">
128   - {{ meta.alcancada }}%</th>
129   - {% endif %}
130   -
131   - <!-- Cor verde -->
132   -
133   - <!-- Cor vermelha -->
134   - {% if meta.alcancada < meta.desejada and meta.alcancada < meta.estabelecida %}
135   - <th style="text-align:center;background-color:#ff0000; text-shadow: 1px 1px 2px #000; color:#fff; font-weight: normal;"
  123 + {{ meta.alcancada }}%</td>
  124 + {% elif meta.alcancada < meta.desejada and meta.alcancada < meta.estabelecida %}
  125 + <td style="text-align:center;background-color:#ff0000; text-shadow: 1px 1px 2px #000; color:#fff; font-weight: normal;"
136 126 data-toggle="tooltip" data-html="true" data-placement="bottom"
137 127 title="<b>Meta não atingida!</b><br><br>Resultado inferior </br>a sua meta e ao recomendado pelo professor." class="grey-tooltip">
138   - {{ meta.alcancada }}%</th>
139   -
  128 + {{ meta.alcancada }}%</td>
140 129 {% endif %}
141   - <!-- Cor vermelha -->
142   -
143   -
144 130 </tr>
145   - {% endfor %}
146   -
147   -
148   - </tbody>
149   - </table>
150   - <hr style="height:1px; background-color:#878787;margin-top: -20px;">
151   - </div>
  131 + {% endfor %}
  132 + </tbody>
  133 + </table>
  134 + <hr style="height:1px; background-color:#878787;margin-top: -20px;" />
  135 + </div>
152 136 </div>
153 137 </div>
154 138 <div style="padding-left: 0px;padding-right: 0px;">
155 139 <div align="left" style="font-size:22px; color: #878787; padding-top: 25px; ">Indicadores relevantes para o seu desempenho</div>
156 140 <hr style="height:2px; background-color:#878787; margin-top: 5px;">
157   - <div class="row" style="padding-left: 15px;" >
158   - <table >
159   - <tr >
  141 + <div class="row" style="padding-left: 15px;">
  142 + <table>
  143 + <tr>
160 144 <td style="background-color:#002F4B; width: 20px;"></td>
161 145 <td style="padding-left: 5px;">Seu resultado</td>
162 146 <td style="width: 20px"></td>
... ... @@ -171,93 +155,80 @@
171 155 </div>
172 156  
173 157 <div class="row" style="padding-left: 10px;">
174   - <div class="col-md-2" >
175   - <div class="row">
176   - <div id="bullet_chart1" > </div>
177   - </div>
178   - </div>
179   - <div class="col-md-2">
180   - <div class="row">
181   - <div id="bullet_chart2"> </div>
182   - </div>
183   - </div>
184   - <div class="col-md-3">
185   - <div class="row">
186   - <div id="bullet_chart3"> </div>
187   - </div>
  158 + <div class="graph-area col-md-2 col-xs-12">
  159 + <div id="bullet_chart1"></div>
  160 + </div>
  161 + <div class="graph-area col-md-2 col-xs-12">
  162 + <div id="bullet_chart2"> </div>
  163 + </div>
  164 + <div class="graph-area col-md-3 col-xs-12">
  165 + <div id="bullet_chart3"> </div>
  166 + </div>
  167 + <div class="col-md-5 col-xs-12">
  168 + <div style="font-size:16px; text-align:left; color: #000; padding-left: 20px;padding-top: 30px; ">
  169 + <b>Descrição dos indicadores</b>
188 170 </div>
189   - <div class="col-md-5">
190   -
191   - <div style="font-size:16px; text-align:left; color: #000; padding-left: 20px;padding-top: 30px; ">
192   - <b>Descrição dos indicadores</b>
193   - </div>
194   -
195   - <hr style="height:2px; background-color:#878787;margin-top: 5px;margin-bottom: -1px;">
196   -
197   - <table class="table table-hover">
198   - <tbody>
199   - {% for titulo in titulos %}
200   - <tr>
201   - <th style="width:110px;">
202   - Indicador 0{{forloop.counter }}:
203   - </th>
204   - <th style="text-align:left; font-weight: normal; padding-left:0px;">
205   - {{titulo}}
206   - </th>
207   - </tr>
208   - {% endfor %}
209   -
210   - </tbody>
211   - </table>
212   - <hr style="height:1px; background-color:#878787;margin-top: -20px;">
213   - </div>
  171 + <hr style="height:2px; background-color:#878787;margin-top: 5px;margin-bottom: -1px;">
  172 + <table class="table table-hover">
  173 + <tbody>
  174 + {% for titulo in titulos %}
  175 + <tr>
  176 + <td style="width:110px;">
  177 + Indicador 0{{forloop.counter }}:
  178 + </td>
  179 + <td style="text-align:left; font-weight: normal; padding-left:0px;">
  180 + {{titulo}}
  181 + </td>
  182 + </tr>
  183 + {% endfor %}
  184 + </tbody>
  185 + </table>
  186 + <hr style="height:1px; background-color:#878787;margin-top: -20px;">
  187 + </div>
214 188 </div>
215 189 </div>
216 190  
217 191 {% if not has_subject_permissions %}
218   - <div class="form-group" style="background-color:#fff; box-shadow: 1px 1px 25px #c0beaf; margin-top: 15px;">
  192 + <div class="form-group" style="background-color:#fff; box-shadow: 1px 1px 25px #c0beaf; margin-top: 15px;">
219 193 <div class="row">
220   - <div class="col-md-1" align="left" style="padding-left: 25px; padding-top: 10px;">
221   - <img src="{% static 'img/warning.png' %}" height="80" width="95"/>
222   - </div>
223   - <div class="col-md-11">
224   - <div class="row">
  194 + <div class="col-md-1" align="left" style="padding-left: 25px; padding-top: 10px;">
  195 + <img src="{% static 'img/warning.png' %}" height="80" width="95"/>
  196 + </div>
  197 + <div class="col-md-11">
  198 + <div class="row">
225 199 <div align="left" style="padding-left: 25px; font-size:22px; color: #878787; padding-top: 15px;padding-bottom: 20px;">{% trans 'There are obstructions to your activities?' %}</div>
226   - <div align="left" style="padding-left: 25px; padding-right:35px; font-size:16px;"><p><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></div>
  200 + <div align="left" style="padding-left: 25px; padding-right:35px; font-size:16px;">
  201 + <p><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>
  202 + </div>
  203 + </div>
227 204 </div>
228 205 </div>
229 206 </div>
230   - </div>
231   - </br>
232   - <div class="modal fade" tabindex="-1" role="dialog" id="bulletin-difficulties-modal">
233   - <div class="modal-dialog" role="document">
234   - <div class="modal-content">
  207 + </br>
  208 + <div class="modal fade" tabindex="-1" role="dialog" id="bulletin-difficulties-modal">
  209 + <div class="modal-dialog" role="document">
  210 + <div class="modal-content">
235 211 <div class="modal-header">
236   - <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  212 + <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
237 213 </div>
238 214 <div class="modal-body">
239   - <form id="bulletin-difficulties" action="" method="POST" enctype="multipart/form-data">
240   - {% csrf_token %}
241   - <textarea class="form-control" id="dificulties" name="difficulties" placeholder="{% trans 'Type here the dificulties that may harm your performance' %}"></textarea>
242   - </form>
  215 + <form id="bulletin-difficulties" action="" method="POST" enctype="multipart/form-data">
  216 + {% csrf_token %}
  217 + <textarea class="form-control" id="dificulties" name="difficulties" placeholder="{% trans 'Type here the dificulties that may harm your performance' %}"></textarea>
  218 + </form>
243 219 </div>
244 220 <div class="modal-footer">
245   - <button type="button" class="btn btn-default btn-raised" data-dismiss="modal">{% trans "Close" %}</button>
246   - <button type="submit" class="btn btn-success btn-raised erase-button" form="bulletin-difficulties">{% trans "Send" %}</button>
  221 + <button type="button" class="btn btn-default btn-raised" data-dismiss="modal">{% trans "Close" %}</button>
  222 + <button type="submit" class="btn btn-success btn-raised erase-button" form="bulletin-difficulties">{% trans "Send" %}</button>
247 223 </div>
  224 + </div>
248 225 </div>
249   - </div>
  226 + </div>
  227 + {% endif %}
  228 + </div>
250 229 </div>
251   - {% endif %}
252   -
253   - {% block addtional_scripts %}
254   - <script type="text/javascript">
255   - sessionSecurity.confirmFormDiscard = undefined;
256   - </script>
257   - {% endblock %}
258 230  
259   -
260   - <script type="text/javascript">
  231 + <script type="text/javascript">
261 232 $('#bulletin-difficulties-modal').on('shown.bs.modal', function (e) {
262 233 $.ajax({
263 234 url: "{% url 'bulletin:difficulties_log' bulletin.slug %}",
... ... @@ -405,9 +376,9 @@
405 376 };
406 377 setTimeout(animate,0);
407 378  
408   - </script>
  379 + </script>
409 380  
410   - <script type="text/javascript">
  381 + <script type="text/javascript">
411 382 // Script para a geração do gráfico de indicadores relevantes
412 383 var mediana1 = parseFloat("{{medianas.0}}".replace(",","."))
413 384 var mediana2 = parseFloat("{{medianas.1}}".replace(",","."))
... ... @@ -502,9 +473,9 @@
502 473  
503 474  
504 475 // Definindo o objeto SVG
505   - var svg = d3.select("#bullet_chart1").append("svg").attr("id", "bullet_chart").attr("width", 6*w).attr("height", h);
506   - var svg2 = d3.select("#bullet_chart2").append("svg").attr("id", "bullet_chart").attr("width", 6*w).attr("height", h);
507   - var svg3 = d3.select("#bullet_chart3").append("svg").attr("id", "bullet_chart").attr("width", 6*w).attr("height", h);
  476 + var svg = d3.select("#bullet_chart1").append("svg").attr("id", "bullet_chart").attr("width", $('.graph-area').width()).attr("height", h);
  477 + var svg2 = d3.select("#bullet_chart2").append("svg").attr("id", "bullet_chart").attr("width", $('.graph-area').width()).attr("height", h);
  478 + var svg3 = d3.select("#bullet_chart3").append("svg").attr("id", "bullet_chart").attr("width", $('.graph-area').width()).attr("height", h);
508 479  
509 480 // Definindo um objeto SVG agrupado
510 481 var bullet_chart = svg.append("g").classed("display", true).attr("transform", "translate(" + margin.left + "," + margin.top + ")");
... ... @@ -1217,6 +1188,7 @@
1217 1188 gridlines: yGridlines});
1218 1189  
1219 1190 plot3.call(bullet_chart3, {
  1191 +
1220 1192 data: ind03,
1221 1193 axis:{x: xAxis3,y: yAxis3},
1222 1194 gridlines: yGridlines});
... ... @@ -1236,6 +1208,11 @@
1236 1208 axis:{x: xAxis6,y: yAxis6},
1237 1209 gridlines: yGridlines});
1238 1210  
1239   - </script>
1240   - </div>
  1211 + </script>
1241 1212 {% endblock %}
  1213 +
  1214 +{% block addtional_scripts %}
  1215 + <script type="text/javascript">
  1216 + sessionSecurity.confirmFormDiscard = undefined;
  1217 + </script>
  1218 +{% endblock %}
1242 1219 \ No newline at end of file
... ...