Download as
Browse Code »

Commit 26ff2effbf282d7646eb8c3d0e075587f3800e2d

Authored by Adabriand Furtado
1 parent 0a18797a
Exists in master

Accessibility changes - tab navigation and alt text for images

Showing 5 changed files with 125 additions and 89 deletions   Show diff stats
assets/css/base.css
  Diff comments   View file @26ff2ef
... ... @@ -82,9 +82,10 @@ img {
82 82 bottom: 0;
83 83 }
84 84  
85   -.wl-scroll-links span {
  85 +.wl-scroll-links a {
86 86 padding-right: 22px;
87 87 cursor: pointer;
  88 + color: #2d2d2d;
88 89 }
89 90  
90 91 .wl-login-btn-wrapper {
... ... @@ -94,14 +95,14 @@ img {
94 95 }
95 96  
96 97 .wl-login-link {
97   - float: right;
  98 + float: left;
98 99 font-weight: bold;
99 100 color: #33a0d1;
100 101 padding: 10px 35px 0 0;
101 102 }
102 103  
103 104 .wl-participate-btn {
104   - float: right;
  105 + float: left;
105 106 padding: 9px 12px;
106 107 }
107 108  
... ... @@ -131,8 +132,14 @@ img {
131 132 }
132 133  
133 134 .wl-sections-link-wrapper .section-link {
134   - padding-left: 20px;
  135 + padding: 0 20px 0 0;
135 136 cursor: pointer;
  137 + color: white;
  138 +}
  139 +
  140 +.wl-sections-link-wrapper .section-link:hover,
  141 + .wl-sections-link-wrapper .section-link:focus {
  142 + background-color: transparent;
136 143 }
137 144  
138 145 /* Sections */
... ... @@ -151,6 +158,7 @@ img {
151 158 }
152 159  
153 160 .wl-section-title .title {
  161 + color: white;
154 162 padding: 5px 0;
155 163 background-color: #0f78a7;
156 164 -webkit-border-radius: 6px;
... ... @@ -158,6 +166,10 @@ img {
158 166 border-radius: 6px;
159 167 }
160 168  
  169 +.wl-section-title a {
  170 + text-decoration: none;
  171 +}
  172 +
161 173 .wl-section-description {
162 174 margin-top: 90px;
163 175 font-size: 14px;
... ... @@ -390,10 +402,7 @@ img {
390 402  
391 403 /* Signs and Ranking Section */
392 404 #wl-signs-and-ranking {
393   - position: relative;
394   - z-index: 1;
395 405 background: #ffffff;
396   - height: 100vh;
397 406 }
398 407  
399 408 .wl-signs-and-ranking-container {
... ... @@ -401,6 +410,7 @@ img {
401 410 flex-direction: row;
402 411 flex-wrap: wrap;
403 412 background: white;
  413 + height: 100vh;
404 414 }
405 415  
406 416 .wl-signs-and-ranking-wrapper {
... ...
assets/js/main.controller.js
  Diff comments   View file @26ff2ef
1 1 (function () {
2 2 'use strict';
3 3  
4   - angular.module('wikilibras').controller('wikilibrasCtrl', ['$scope', '$window', '$document', function ($scope, $window) {
5   - $scope.openUrl = function(url) {
6   - $window.open(url, "_self");
7   - };
8   - }]);
  4 + angular.module('wikilibras').controller('wikilibrasCtrl', ['$scope', function ($scope) {}]);
9 5 }());
10 6 \ No newline at end of file
... ...
assets/js/ranking/ranking.service.js
  Diff comments   View file @26ff2ef
... ... @@ -4,13 +4,29 @@
4 4 angular.module('wikilibras.ranking').service("rankingService", ['$http', '$q', function ($http, $q) {
5 5 var PROJECT_CONF_URL = 'conf/app-conf.json';
6 6 var RANKING_ENDPOINT = '/api/leaderboard?limit=20';
  7 + var NUMBER_OF_COLUMNS = 2;
  8 +
  9 + function splitToChunks(array, chunk) {
  10 + if (array && array.length < 1 || chunk === 0) return array;
  11 +
  12 + var result = [];
  13 + for (var i = 0; i < array.length; i += chunk) {
  14 + result.push(array.slice(i, i+chunk));
  15 + }
  16 + return result;
  17 + }
7 18  
8 19 return {
9 20 getRankingData: function() {
10 21 return $http.get(PROJECT_CONF_URL).then(function(response) {
11 22 var baseApiUrl = response.data.pybossa_url;
12 23 return $http.get(baseApiUrl + RANKING_ENDPOINT).then(function(response) {
13   - console.log(response);
  24 +
  25 + angular.forEach(response.data, function(obj, key) {
  26 + response.data[key] = splitToChunks(obj, NUMBER_OF_COLUMNS);
  27 + console.log(response.data[key]);
  28 + });
  29 + console.log(response.data);
14 30 return response.data;
15 31 });
16 32 });
... ...
assets/templates/header.html
  Diff comments   View file @26ff2ef
... ... @@ -27,21 +27,23 @@
27 27 <div id="main-menu" class="container-fluid container wl-nav-bar-container">
28 28 <div class="row wl-nav-bar-wrapper">
29 29 <div class="col-xs-4 wl-logo-wrapper">
30   - <div class="wl-logo-wrapper-img">
31   - <img src="assets/img/wl-logo.png">
32   - </div>
33   - <img class="hidden-xs wl-title" src="assets/img/wl-title.png">
  30 + <a href="#wl-presentation-video" du-smooth-scroll offset="42">
  31 + <div class="wl-logo-wrapper-img">
  32 + <img src="assets/img/wl-logo.png" alt="Logomarca do WikiLibras">
  33 + </div>
  34 + <img class="hidden-xs wl-title" src="assets/img/wl-title.png" alt="Logomarca do WikiLibras">
  35 + </a>
34 36 </div>
35 37 <div class="col-xs-8 wl-scroll-links-wrapper">
36 38 <div class="hidden-xs wl-scroll-links pull-left">
37   - <span du-smooth-scroll="wl-overview" accesskey="1">Ir para o conteúdo (alt+1)</span>
38   - <span du-smooth-scroll="wl-presentation-video" offset="42" accesskey="2">Ir para o menu (alt+2)</span>
  39 + <a href="#wl-overview" du-smooth-scroll accesskey="c">Ir para o conteúdo (alt+c)</a></span>
  40 + <a href="#wl-presentation-video" du-smooth-scroll offset="42" accesskey="m">Ir para o menu (alt+m)</a>
39 41 </div>
40 42 <div class="wl-login-btn-wrapper pull-right">
41   - <div class="btn btn-info wl-btn wl-participate-btn" ng-click="openUrl('/pybossa/account/register')">
42   - Participar
43   - </div>
44 43 <a href="/pybossa/account/signin" class="wl-login-link">Entrar</a>
  44 + <a href="/pybossa/account/register" class="btn btn-info wl-btn wl-participate-btn">
  45 + Participar
  46 + </a>
45 47 </div>
46 48 </div>
47 49 </div>
... ... @@ -59,11 +61,11 @@
59 61 </button>
60 62 <div class="col-xs-12 collapse navbar-collapse pull-right" id="bs-navbar-collapse">
61 63 <ul class="nav navbar-nav wl-sections-link-wrapper">
62   - <li class="section-link" du-smooth-scroll="wl-presentation-video" offset="42">o projeto</li>
63   - <li class="section-link" du-smooth-scroll="wl-overview">o que já produzimos</li>
64   - <li class="section-link">tutoriais</li>
65   - <li class="section-link" du-smooth-scroll="wl-features">quem faz o que</li>
66   - <li class="section-link" du-smooth-scroll="wl-signs-and-ranking">ranking</li>
  64 + <li><a href="#wl-presentation-video" class="section-link" du-smooth-scroll offset="42">o projeto</a></li>
  65 + <li><a href="#wl-overview" class="section-link" du-smooth-scroll>o que já produzimos</a></li>
  66 + <li><a href="#wl-features" class="section-link" du-smooth-scroll>quem faz o que </a></li>
  67 + <li><a href="#wl-volunteers" class="section-link" du-smooth-scroll>comunidade</a></li>
  68 + <li><a href="#wl-signs-and-ranking" class="section-link" du-smooth-scroll>ranking</a></li>
67 69 </ul>
68 70 </div>
69 71 </div>
... ...
assets/templates/sections.html
  Diff comments   View file @26ff2ef
... ... @@ -2,7 +2,9 @@
2 2 <div class="container-fluid container wl-video-control-container">
3 3 <div class="row">
4 4 <div class="wl-video-control-wrapper">
5   - <img class="wl-video-control" src="assets/img/wl-icon-play.png">
  5 + <a href="#wl-presentation-video" du-smooth-scroll offset="42">
  6 + <img class="wl-video-control" src="assets/img/wl-icon-play.png">
  7 + </a>
6 8 </div>
7 9 </div>
8 10 </div>
... ... @@ -14,11 +16,13 @@
14 16 <div class="col-xs-12">
15 17 <div class="row">
16 18 <div class="col-xs-12 wl-section-title">
17   - <div class="title">o
18   - que
19   - já
20   - produzimos
21   - </div>
  19 + <a href="#wl-overview" du-smooth-scroll>
  20 + <div class="title">o
  21 + que
  22 + já
  23 + produzimos
  24 + </div>
  25 + </a>>
22 26 </div>
23 27 </div>
24 28 </div>
... ... @@ -27,7 +31,7 @@
27 31 O Wikilibras é uma plataforma colaborativa para construção de dicionário em LIBRAS.
28 32 </p>
29 33 <p>
30   - Acompanhe abaixo o progresso alçado pela comunidade WikiLibras.
  34 + Acompanhe abaixo o progresso conquistado pela comunidade WikiLibras.
31 35 </p>
32 36 </div>
33 37 <div class="col-xs-12 wl-overview-progress-wrapper">
... ... @@ -126,21 +130,23 @@
126 130 <div class="container-fluid">
127 131 <div class="row">
128 132 <div class="col-xs-12 wl-section-title">
129   - <div class="title">você
130   - pode
131   - colaborar
132   - </div>
  133 + <a href="#wl-features" du-smooth-scroll>
  134 + <div class="title">você
  135 + pode
  136 + colaborar
  137 + </div>
  138 + </a>
133 139 </div>
134 140 <div class="col-xs-12 wl-features-container">
135 141 <div class="wl-features-wrapper -salmon">
136 142 <div class="wl-feature">
137 143 <div class="wl-feature-img">
138   - <img src="assets/img/wl-feature-send-video.png">
  144 + <img src="assets/img/wl-feature-send-video.png" alt="Ícone de envio de vídeos">
139 145 </div>
140   - <div class="btn btn-info wl-btn wl-feature-btn" ng-click="openUrl('/pybossa/project/wikilibras/newtask')">
  146 + <a href="/pybossa/project/wikilibras/newtask" class="btn btn-info wl-btn wl-feature-btn">
141 147 enviar
142 148 video
143   - </div>
  149 + </a>
144 150 <div class="wl-feature-description">
145 151 <span>Grave seu sinal e envie para nossa comunidade.</span>
146 152 </div>
... ... @@ -152,12 +158,12 @@
152 158 <div class="wl-features-wrapper -yellow">
153 159 <div class="wl-feature">
154 160 <div class="wl-feature-img">
155   - <img src="assets/img/wl-feature-create-sign.png">
  161 + <img src="assets/img/wl-feature-create-sign.png" alt="Ícone de criação de sinais">
156 162 </div>
157   - <div class="btn btn-info wl-btn wl-feature-btn" ng-click="openUrl('/pybossa/project/wikilibras/newtask')">
  163 + <a href="/pybossa/project/wikilibras/newtask" class="btn btn-info wl-btn wl-feature-btn">
158 164 criar
159 165 sinal
160   - </div>
  166 + </a>
161 167 <div class="wl-feature-description">
162 168 <span> Ensine Ícaro, o nosso avatar, a fazer um sinal.
163 169 </span>
... ... @@ -170,12 +176,12 @@
170 176 <div class="wl-features-wrapper -blue">
171 177 <div class="wl-feature">
172 178 <div class="wl-feature-img">
173   - <img src="assets/img/wl-feature-fix-sign.png">
  179 + <img src="assets/img/wl-feature-fix-sign.png" alt="Ícone de correção de sinais">
174 180 </div>
175   - <div class="btn btn-info wl-btn wl-feature-btn" ng-click="openUrl('/pybossa/project/corretor_sinais/newtask')">
  181 + <a href="/pybossa/project/corretor_sinais/newtask" class="btn btn-info wl-btn wl-feature-btn">
176 182 corrigir
177 183 sinal
178   - </div>
  184 + </a>
179 185 <div class="wl-feature-description">
180 186 <span>O sinal está incorreto? Colabore corrigindo-o.
181 187 </span>
... ... @@ -190,8 +196,10 @@
190 196 <div class="container-fluid">
191 197 <div class="row">
192 198 <div class="col-xs-12 wl-section-title">
193   - <div class="title">pessoas
  199 + <a href="#wl-volunteers" du-smooth-scroll>
  200 + <div class="title">pessoas
194 201 colaborando</div>
  202 + </a>
195 203 </div>
196 204 <div class="col-xs-12 wl-volunteers-container">
197 205 <div ng-repeat="avatar in volunteersData.avatars_data | limitTo: 50" class="wl-volunteers-wrapper">
... ... @@ -207,9 +215,11 @@
207 215 <div class="col-xs-12 wl-signs-and-ranking-container">
208 216 <div class="wl-signs-and-ranking-wrapper" ng-controller="signsCtrl">
209 217 <div class="wl-section-title">
210   - <div class="title">sinais
211   - construídos
212   - </div>
  218 + <a href="#wl-signs-and-ranking" du-smooth-scroll>
  219 + <div class="title">sinais
  220 + construídos
  221 + </div>
  222 + </a>
213 223 </div>
214 224 <div class="wl-section-description">
215 225 <p>Confira alguns sinais que a comunidade WikiLibras já produziu.</p>
... ... @@ -224,12 +234,33 @@
224 234 <div ng-repeat="i in [1,2,3]" ng-if="signsData.length % 3 === 0? false: i <= 3 - signsData.length % 3" class="wl-signs-wrapper">
225 235 </div>
226 236 </div>
  237 + <div class="modal clean-modal sign-modal fade" tabindex="-1"
  238 + role="dialog" aria-labelledby="modalUserSignal">
  239 + <div class="modal-dialog" role="document">
  240 + <div class="modal-content">
  241 + <div class="modal-body">
  242 + <div class="sign-video-container">
  243 + <video id="sign-modal-video" autoplay loop preload="none">
  244 + <source ng-repeat="source in getSignData(activeSignId).sources" vsrc="{{ source.path }}" type="{{ source.type }}" html5vfix>
  245 + Sem suporte a vídeos
  246 + </video>
  247 + </div>
  248 + <p class="sign-name text-center">
  249 + {{ getSignData(activeSignId).signName }}<br>
  250 + <span class="created-by">criado por: {{ getSignData(activeSignId).userId }}</span>
  251 + </p>
  252 + </div>
  253 + </div>
  254 + </div>
  255 + </div>
227 256 </div>
228 257 <div class="wl-signs-and-ranking-wrapper" ng-controller="rankingCtrl">
229 258 <div class="wl-section-title">
230   - <div class="title">ranking
231   - dos colaborandores
232   - </div>
  259 + <a href="#wl-signs-and-ranking" du-smooth-scroll>
  260 + <div class="title">ranking
  261 + dos colaborandores
  262 + </div>
  263 + </a>
233 264 </div>
234 265 <div class="wl-section-description"></div>
235 266 <div class="row">
... ... @@ -262,17 +293,17 @@
262 293 </div>
263 294 </div>
264 295 </div>
265   - <div ng-show="activeTab == 0" class="wl-ranking-container">
266   - <div class="row">
267   - <div class="col-xs-6" ng-repeat="user in rankingData.wikilibras">
  296 + <div ng-show="activeTab === 0" class="wl-ranking-container">
  297 + <div class="row" ng-repeat="row in rankingData.wikilibras">
  298 + <div class="col-xs-6" ng-repeat="user in row">
268 299 <div class="wl-rank">
269 300 <div class="row">
270 301 <div class="col-xs-4">
271 302 <div class="star-wrapper">
272   - <img ng-if="[0,1,2].indexOf($index) !== -1" ng-src="assets/img/{{$index === 0? 'gold':($index === 1? 'silver': 'bronze')}}-star-icon.png">
  303 + <img ng-if="[1,2,3].indexOf(user.rank) !== -1" ng-src="assets/img/{{user.rank === 1? 'gold':(user.rank === 2? 'silver': 'bronze')}}-star-icon.png" alt="Estrela de {{user.rank === 1? 'ouro':(user.rank === 2? 'prata': 'bronze')}}">
273 304 </div>
274 305 <div class="position-wrapper">
275   - {{ $index+1 }}.
  306 + {{ user.rank }}.
276 307 </div>
277 308 </div>
278 309 <div class="col-xs-8 wl-ranked-volunteer">
... ... @@ -284,16 +315,16 @@
284 315 </div>
285 316 </div>
286 317 <div ng-show="activeTab === 1" class="wl-ranking-container">
287   - <div class="row">
288   - <div class="col-xs-6" ng-repeat="user in rankingData.corretor_sinais">
  318 + <div class="row" ng-repeat="row in rankingData.corretor_sinais">
  319 + <div class="col-xs-6" ng-repeat="user in row">
289 320 <div class="wl-rank">
290 321 <div class="row">
291 322 <div class="col-xs-4">
292 323 <div class="star-wrapper">
293   - <img ng-if="[0,1,2].indexOf($index) !== -1" ng-src="assets/img/{{$index === 0? 'gold':($index === 1? 'silver': 'bronze')}}-star-icon.png">
  324 + <img ng-if="[1,2,3].indexOf(user.rank) !== -1" ng-src="assets/img/{{user.rank === 1? 'gold':(user.rank === 2? 'silver': 'bronze')}}-star-icon.png" alt="Estrela de {{user.rank === 1? 'ouro':(user.rank === 2? 'prata': 'bronze')}}">
294 325 </div>
295 326 <div class="position-wrapper">
296   - {{ $index+1 }}.
  327 + {{ user.rank }}.
297 328 </div>
298 329 </div>
299 330 <div class="col-xs-8 wl-ranked-volunteer">
... ... @@ -305,20 +336,20 @@
305 336 </div>
306 337 </div>
307 338 <div ng-show="activeTab === 2" class="wl-ranking-container">
308   - <div class="row">
309   - <div class="col-xs-6" ng-repeat="user in rankingData.validador_sinais">
  339 + <div class="row" ng-repeat="row in rankingData.validador_sinais">
  340 + <div class="col-xs-6" ng-repeat="user in row">
310 341 <div class="wl-rank">
311 342 <div class="row">
312 343 <div class="col-xs-4">
313 344 <div class="star-wrapper">
314   - <img ng-if="[0,1,2].indexOf($index) !== -1" ng-src="assets/img/{{$index === 0? 'gold':($index === 1? 'silver': 'bronze')}}-star-icon.png">
  345 + <img ng-if="[1,2,3].indexOf(user.rank) !== -1" ng-src="assets/img/{{user.rank === 1? 'gold':(user.rank === 2? 'silver': 'bronze')}}-star-icon.png" alt="Estrela de {{user.rank === 1? 'ouro':(user.rank === 2? 'prata': 'bronze')}}">
315 346 </div>
316 347 <div class="position-wrapper">
317   - {{ $index+1 }}.
  348 + {{ user.rank }}.
318 349 </div>
319 350 </div>
320 351 <div class="col-xs-8 wl-ranked-volunteer">
321   - {{ user.fullname }}
  352 + {{ user.name }}
322 353 </div>
323 354 </div>
324 355 </div>
... ... @@ -332,7 +363,7 @@
332 363 <div class="row">
333 364 <div class="col-xs-4">
334 365 <div class="star-wrapper">
335   - <img ng-if="[0,1,2].indexOf($index) !== -1" ng-src="assets/img/{{$index === 0? 'gold':($index === 1? 'silver': 'bronze')}}-star-icon.png">
  366 + <img ng-if="[0,1,2].indexOf($index) !== -1" ng-src="assets/img/{{$index === 0? 'gold':($index === 1? 'silver': 'bronze')}}-star-icon.png" alt="Estrela de {{$index === 0? 'ouro':($index === 1? 'prata': 'bronze')}}">
336 367 </div>
337 368 <div class="position-wrapper">
338 369 {{ $index+1 }}.
... ... @@ -350,23 +381,4 @@
350 381 </div>
351 382 </div>
352 383 </div>
353   -</section>
354   -<div class="modal clean-modal sign-modal fade" tabindex="-1"
355   - role="dialog" aria-labelledby="modalUserSignal">
356   - <div class="modal-dialog" role="document">
357   - <div class="modal-content">
358   - <div class="modal-body">
359   - <div class="sign-video-container">
360   - <video id="sign-modal-video" autoplay loop preload="none">
361   - <source ng-repeat="source in getSignData(activeSignId).sources" vsrc="{{ source.path }}" type="{{ source.type }}" html5vfix>
362   - Sem suporte a vídeos
363   - </video>
364   - </div>
365   - <p class="sign-name text-center">
366   - {{ getSignData(activeSignId).signName }}<br>
367   - <span class="created-by">criado por: {{ getSignData(activeSignId).userId }}</span>
368   - </p>
369   - </div>
370   - </div>
371   - </div>
372   -</div>
373 384 \ No newline at end of file
  385 +</section>
374 386 \ No newline at end of file
... ...