Commit 43aeeef64013d473511dba7a06cdc0eb2b3a9ecc

Authored by Zambom
1 parent f14c61f3

Adding tooltip in bulletin table

bulletin/static/css/estilo.css
... ... @@ -2,7 +2,7 @@ body,html{
2 2 margin: 0;
3 3 padding: 0;
4 4 font-family: "Roboto", sans-serif;
5   - font-size: 0.95em;
  5 + /*font-size: 0.95em;*/
6 6 }
7 7  
8 8 .axis path,
... ... @@ -25,11 +25,24 @@ body,html{
25 25 display: none;
26 26 min-width: 20px;
27 27 height: 105px;
28   - background: none repeat scroll 0 0 #000;
29   - border: 2px solid #ccc;
30   - border-radius:10px;
  28 + background: none repeat scroll 0 0 #525252;
  29 + border: 2px solid #f5f5f5;
  30 + border-radius:5px;
31 31 padding: 10px;
32 32 text-align: center;
33 33 color: #fff;
34   - opacity: 0.8;
  34 + opacity: 0.95;
  35 + font-size: 14px;
  36 +}
  37 +
  38 +.grey-tooltip + .tooltip > .tooltip-inner {
  39 + background-color: #666666;
  40 + border: 2px solid #f5f5f5;
  41 + border-radius:5px;
  42 + opacity: 0.95;
  43 + color:#f9f9f9;
  44 + padding: 10px;
  45 + font-size: 14px;
  46 + margin-top: -9px;
  47 + min-width: 190px;
35 48 }
... ...
bulletin/templates/bulletin/view.html
... ... @@ -9,7 +9,7 @@
9 9 {% endblock%}
10 10  
11 11 {% block style %}
12   -<link rel="stylesheet" href="{% static 'css/estilo.css' %}">
  12 + <link rel="stylesheet" href="{% static 'css/estilo.css' %}">
13 13 {% endblock %}
14 14  
15 15 {% block breadcrumbs %}
... ... @@ -105,24 +105,36 @@
105 105  
106 106 <!-- Cor amarela -->
107 107 {% if meta.alcancada < meta.desejada and meta.alcancada > meta.estabelecida %}
108   - <th style="text-align:center;background-color:#f8b800 ; text-shadow: 1px 1px 10px #000; color:#fff; font-weight: normal;">{{ meta.alcancada }}%</th>
  108 + <th style="text-align:center;background-color:#f8b800 ; text-shadow: 1px 1px 2px #000; color:#fff; font-weight: normal;"
  109 + data-toggle="tooltip" data-html="true" data-placement="bottom"
  110 + 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>
109 112 {% endif %}
110 113  
111 114 {% if meta.alcancada > meta.desejada and meta.alcancada < meta.estabelecida %}
112   - <th style="text-align:center;background-color:#f8b800 ; text-shadow: 1px 1px 10px #000; color:#fff; font-weight: normal;">{{ meta.alcancada }}%</th>
  115 + <th style="text-align:center;background-color:#f8b800 ; text-shadow: 1px 1px 2px #000; color:#fff; font-weight: normal;"
  116 + data-toggle="tooltip" data-html="true" data-placement="bottom"
  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>
113 119  
114 120 {% endif %}
115 121 <!-- Cor amarela -->
116 122  
117 123 <!-- Cor verde -->
118 124 {% if meta.alcancada > meta.desejada and meta.alcancada > meta.estabelecida or meta.alcancada == 100 %}
119   - <th style="text-align:center;background-color:#00d337; text-shadow: 1px 1px 10px #000; color:#fff; font-weight: normal;">{{ meta.alcancada }}%</th>
  125 + <th style="text-align:center;background-color:#00d337; text-shadow: 1px 1px 2px #000; color:#fff; font-weight: normal;"
  126 + data-toggle="tooltip" data-html="true" data-placement="bottom"
  127 + title="<b>Meta atingida!</b>" class="grey-tooltip">
  128 + {{ meta.alcancada }}%</th>
120 129 {% endif %}
121 130 <!-- Cor verde -->
122 131  
123 132 <!-- Cor vermelha -->
124 133 {% if meta.alcancada < meta.desejada and meta.alcancada < meta.estabelecida %}
125   - <th style="text-align:center;background-color:#ff0000; text-shadow: 1px 1px 10px #000; color:#fff; font-weight: normal;">{{ meta.alcancada }}%</th>
  134 + <th style="text-align:center;background-color:#ff0000; text-shadow: 1px 1px 2px #000; color:#fff; font-weight: normal;"
  135 + data-toggle="tooltip" data-html="true" data-placement="bottom"
  136 + title="<b>Meta não atingida!</b><br><br>Resultado inferior </br>a sua meta e ao recomendado pelo professor." class="grey-tooltip">
  137 + {{ meta.alcancada }}%</th>
126 138  
127 139 {% endif %}
128 140 <!-- Cor vermelha -->
... ...
bulletin/templates/bulletin/window_view.html
... ... @@ -47,7 +47,7 @@
47 47 <script type="text/javascript" src="{% static 'js/jscookie.js' %}"></script>
48 48 <script type="text/javascript" src="{% static 'js/jPages.js' %}"></script>
49 49 <script type="text/javascript" src="{% static 'js/d3.v3.min.js' %}"></script>
50   - <script type="text/javascript" src="{% static 'subjects/js/modal_subject.js' %}"></script>
  50 + <script type="text/javascript" src="{% static 'subjects/js/modal_subject.js' %}"></script>
51 51  
52 52 <!-- Font awesome -->
53 53 <link rel="stylesheet" type="text/css" href="{% static 'font-awesome-4.6.3/css/font-awesome.min.css' %}">
... ... @@ -55,13 +55,14 @@
55 55 <!-- Custom styles -->
56 56 <link rel="stylesheet" type="text/css" href="{% static 'css/base/amadeus_responsive.css' %}">
57 57 <link rel="stylesheet" type="text/css" href="{% static 'css/base/amadeus.css' %}">
  58 + <link rel="stylesheet" href="{% static 'css/estilo.css' %}">
58 59  
59 60 {% with 'css/themes/'|add:theme.css_style|add:'.css' as theme_selected %}
60 61 <link rel="stylesheet" type="text/css" href="{% static theme_selected %}">
61 62 {% endwith %}
62 63  
63 64  
64   - <link rel="stylesheet" href="{% static 'css/estilo.css' %}">
  65 +
65 66 </head>
66 67 <body style="background: #FFF">
67 68  
... ... @@ -115,28 +116,40 @@
115 116  
116 117  
117 118 <!-- Cor amarela -->
118   - {% if meta.alcancada < meta.desejada and meta.alcancada > meta.estabelecida %}
119   - <th style="text-align:center;background-color:#f8b800 ; text-shadow: 1px 1px 10px #000; color:#fff; font-weight: normal;">{{ meta.alcancada }}%</th>
120   - {% endif %}
  119 + {% if meta.alcancada < meta.desejada and meta.alcancada > meta.estabelecida %}
  120 + <th style="text-align:center;background-color:#f8b800 ; text-shadow: 1px 1px 2px #000; color:#fff; font-weight: normal;"
  121 + data-toggle="tooltip" data-html="true" data-placement="bottom"
  122 + title="<b>Meta atingida!</b><br><br>Atenção! O seu resultado foi inferior ao recomendado pelo professor." class="grey-tooltip">
  123 + {{ meta.alcancada }}%</th>
  124 + {% endif %}
121 125  
122   - {% if meta.alcancada > meta.desejada and meta.alcancada < meta.estabelecida %}
123   - <th style="text-align:center;background-color:#f8b800 ; text-shadow: 1px 1px 10px #000; color:#fff; font-weight: normal;">{{ meta.alcancada }}%</th>
  126 + {% if meta.alcancada > meta.desejada and meta.alcancada < meta.estabelecida %}
  127 + <th style="text-align:center;background-color:#f8b800 ; text-shadow: 1px 1px 2px #000; color:#fff; font-weight: normal;"
  128 + data-toggle="tooltip" data-html="true" data-placement="bottom"
  129 + title="<b>Meta atingida!</b><br><br>Atenção! O seu resultado foi inferior a sua meta inicial." class="grey-tooltip">
  130 + {{ meta.alcancada }}%</th>
124 131  
125   - {% endif %}
126   - <!-- Cor amarela -->
  132 + {% endif %}
  133 + <!-- Cor amarela -->
127 134  
128 135 <!-- Cor verde -->
129 136 {% if meta.alcancada > meta.desejada and meta.alcancada > meta.estabelecida or meta.alcancada == 100 %}
130   - <th style="text-align:center;background-color:#00d337; text-shadow: 1px 1px 10px #000; color:#fff; font-weight: normal;">{{ meta.alcancada }}%</th>
  137 + <th style="text-align:center;background-color:#00d337; text-shadow: 1px 1px 2px #000; color:#fff; font-weight: normal;"
  138 + data-toggle="tooltip" data-html="true" data-placement="bottom"
  139 + title="<b>Meta atingida!</b>" class="grey-tooltip">
  140 + {{ meta.alcancada }}%</th>
131 141 {% endif %}
132 142 <!-- Cor verde -->
133 143  
134   - <!-- Cor vermelha -->
135   - {% if meta.alcancada < meta.desejada and meta.alcancada < meta.estabelecida %}
136   - <th style="text-align:center;background-color:#ff0000; text-shadow: 1px 1px 10px #000; color:#fff; font-weight: normal;">{{ meta.alcancada }}%</th>
  144 + <!-- Cor vermelha -->
  145 + {% if meta.alcancada < meta.desejada and meta.alcancada < meta.estabelecida %}
  146 + <th style="text-align:center;background-color:#ff0000; text-shadow: 1px 1px 2px #000; color:#fff; font-weight: normal;"
  147 + data-toggle="tooltip" data-html="true" data-placement="bottom"
  148 + title="<b>Meta não atingida!</b><br><br>Resultado inferior </br>a sua meta e ao recomendado pelo professor." class="grey-tooltip">
  149 + {{ meta.alcancada }}%</th>
137 150  
138   - {% endif %}
139   - <!-- Cor vermelha -->
  151 + {% endif %}
  152 + <!-- Cor vermelha -->
140 153  
141 154  
142 155 </tr>
... ... @@ -245,6 +258,9 @@
245 258 </script>
246 259  
247 260 <script type="text/javascript">
  261 + $('[data-toggle="tooltip"]').tooltip({
  262 + trigger: 'hover'
  263 + });
248 264 // Variável obtidas a partir do número de metas atendidas
249 265 var percent = "{{ percent }}";
250 266  
... ...