Commit 43aeeef64013d473511dba7a06cdc0eb2b3a9ecc
1 parent
f14c61f3
Exists in
master
and in
2 other branches
Adding tooltip in bulletin table
Showing
3 changed files
with
66 additions
and
25 deletions
Show diff stats
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 | ... | ... |