Adicionado um esboço do Ranking.

Adabriand Furtado
1 parent bd5123ef
Showing 50 changed files with 269 additions and 21 deletions Show diff stats
view/assets/css/main.css
view/assets/css/ranking.css
view/assets/fonts/Helvetica.otf
view/assets/fonts/TitilliumWeb-Black.ttf
view/assets/fonts/TitilliumWeb-Bold.ttf
view/assets/fonts/TitilliumWeb-BoldItalic.ttf
view/assets/fonts/TitilliumWeb-ExtraLight.ttf
view/assets/fonts/TitilliumWeb-ExtraLightItalic.ttf
view/assets/fonts/TitilliumWeb-Italic.ttf
view/assets/fonts/TitilliumWeb-Light.ttf
view/assets/fonts/TitilliumWeb-LightItalic.ttf
view/assets/fonts/TitilliumWeb-Regular.ttf
view/assets/fonts/TitilliumWeb-SemiBold.ttf
view/assets/fonts/TitilliumWeb-SemiBoldItalic.ttf
view/assets/fonts/roboto/Roboto-Black.ttf
view/assets/fonts/roboto/Roboto-BlackItalic.ttf
view/assets/fonts/roboto/Roboto-Bold.ttf
view/assets/fonts/roboto/Roboto-BoldItalic.ttf
view/assets/fonts/roboto/Roboto-Italic.ttf
view/assets/fonts/roboto/Roboto-Light.ttf
 @import url("articulation.css");
 @import url("submit-sign.css");
 @import url("teached-signs.css");
+@import url("ranking.css");
  
 /* Main */
 body nav.navbar:first-child {
@@ -13,7 +14,7 @@ footer {
  
 @font-face {
 	font-family: 'Titillium Web';
-	src: url('../fonts/TitilliumWeb-SemiBold.ttf') format('truetype');
+	src: url('../fonts/titilliumweb/TitilliumWeb-SemiBold.ttf') format('truetype');
 }
  
 h1, h2, h3, h4, h5, h6, h7, h8 {
@@ -51,6 +52,10 @@ body {
 	opacity: 0.95;
 }
  
+.navbar-wl .navbar-collapse.in .nav {
+	padding-top: 35px;
+}
+
 .navbar-default .navbar-nav>li>a {
 	color: #FFFFFF;
 }
@@ -0,0 +1,83 @@
+@font-face {
+	font-family: 'Roboto';
+	src: url('../fonts/roboto/Roboto-Light.ttf') format('truetype');
+}
+
+#ranking-container {
+	background-color: #ffffff;
+	border-radius: 5px;
+	-moz-border-radius: 5px;
+	-webkit-border-radius: 5px;
+	padding-right: 0px;
+	overflow: hidden;
+	font-family: 'Roboto';
+}
+
+#ranking-info-container {
+	padding-left: 0px;
+}
+
+#ranking-info-container .title {
+	color: #000000;
+	font-size: 50px;
+}
+
+#ranking-info-container .avatar-info {
+	text-align: center;
+	padding-top: 30px;
+}
+
+#ranking-info-container .achievement-info {
+	color: #028c12;
+}
+
+#leaderboard-container {
+	background-color: #fefcfc;
+	padding: 0px;
+}
+
+#leaderboard-container table {
+	margin-bottom: 0px;
+}
+
+#ranking-container .table-striped>tbody>tr:nth-of-type(odd) {
+	background-color: #f1f2f2;
+}
+
+#ranking-container .table-striped>tbody>tr:hover {
+	background-color: #e0e0e0;
+}
+
+#ranking-container .table-striped>tbody>tr.highlight {
+	background-color: #fbefa3;
+}
+
+#ranking-container .table-striped>tbody>tr.highlight:hover {
+	background-color: #f7e783;
+}
+
+#ranking-container th {
+	text-align: center;
+	border: 0px;
+	padding-bottom: 15px;
+}
+
+#ranking-container td {
+	text-align: center;
+	border: 0px;
+}
+
+#ranking-container td:nth-of-type(1), #ranking-container td:nth-of-type(2)
+	{
+	width: 75px;
+}
+
+#ranking-container td:nth-of-type(2), #ranking-container th:nth-of-type(2),
+	#ranking-container td:nth-of-type(3), #ranking-container th:nth-of-type(3)
+	{
+	text-align: left;
+}
+
+#ranking-container th:nth-of-type(3) img {
+	padding-left: 20px;
+}
 \ No newline at end of file
@@ -0,0 +1,21 @@
+(function(loadHtmlHelper, $, undefined) {
+	
+	var baseUrl = '';
+	
+	function _preprocessHtml(data) {
+		return data.replace(/{{ server }}/g, baseUrl);
+	}
+	
+	loadHtmlHelper.load = function(target, url, callback) {
+		var completeUrl = baseUrl + url;
+		$.get(completeUrl, function(data) {
+			$(target).html(_preprocessHtml(data));
+			callback && callback();
+		});
+	}
+	
+	loadHtmlHelper.setup = function(url) {
+		baseUrl = url;
+	};
+
+}(window.loadHtmlHelper = window.loadHtmlHelper || {}, jQuery));
@@ -0,0 +1,15 @@
+(function(ranking, $, undefined) {
+
+	var baseUrl = '';
+	
+	ranking.show = function() {
+		$(".sub-main-container").hide();
+		$("#ranking-container").show();
+	}
+	
+	ranking.setup = function(serverUrl) {
+		baseUrl = serverUrl;
+		loadHtmlHelper.load("#ranking-container", "/ranking/ranking.html");
+	};
+
+}(window.ranking = window.ranking || {}, jQuery));
 (function(dynengine, $, undefined) {
-  var setup = undefined;
+  
+  var baseUrl = '';
  
   _preprocessHtml = function(data, url) {
     var matchSubConfig = data.match(/sub(?:C|c)onfig="(.*?)"/);
@@ -67,13 +68,13 @@
     goodData = replaceHandFolderTag(goodData, currentMainConfig);
     goodData = replaceMovementNameTag(goodData, currentMainConfig);
     goodData = goodData.replace(/{{ hand }}/g, currentMainConfig);
-    return goodData.replace(/{{ server }}/g, url);
+    return goodData.replace(/{{ server }}/g, baseUrl);
   };
  
-  dynengine.render = function(serverUrl, templatePath, target, prepend, callback) {
-    var url = serverUrl + templatePath;
+  dynengine.render = function(templatePath, target, prepend, callback) {
+    var url = baseUrl + templatePath;
     $.get(url, function(data) {
-      var processedHtml = _preprocessHtml(data, serverUrl);
+      var processedHtml = _preprocessHtml(data);
       if (prepend) {
         $(target).prepend(processedHtml);
       } else {
@@ -85,12 +86,8 @@
     });
   };
  
-  dynengine.clean = function(target)  {
-    $(target).html('');
-  };
-
-  dynengine.load = function() {
-    var url = $('#server-url').data('url');
+  dynengine.setup = function(url) {
+    baseUrl = url;
   };
  
 }(window.dynengine = window.dynengine || {}, jQuery));
@@ -99,7 +99,7 @@
 		} else {
 			var step = currentSubconfig[stepNumber];
 			step = typeof step == 'undefined' ? 'passo-1' : step;
-			dynengine.render(baseUrl, '/' + preprocessedMainConfig + '/'
+			dynengine.render('/' + preprocessedMainConfig + '/'
 					+ subConfig + '/' + step + '.html', '#selection-panel',
 					true);
 		}
@@ -270,7 +270,7 @@
 		if (_isTimelineLoaded()) {
 			_setupTimelineIcons(timelineBaseId, toUpdate);
 		} else {
-			dynengine.render(baseUrl, '/' + preprocessedMainConfig
+			dynengine.render('/' + preprocessedMainConfig
 					+ '/timeline.html', '#selection-panel', false, function() {
 				_setupTimelineIcons(timelineBaseId, true);
 			});
@@ -356,8 +356,8 @@
 		_initTimeline();
 	};
  
-	dynworkflow.load = function() {
-		baseUrl = $('#server-url').data('url');
+	dynworkflow.setup = function(url) {
+		baseUrl = url;
 		$.get(baseUrl + '/conf/selection-workflow-json', function(result) {
 			jsonWF = $.parseJSON(result);
 		}).fail(function() {
@@ -190,11 +190,13 @@
  
 	function _loadMainComponents() {
 		iconHelper.setup(base_url);
-		dynengine.load();
-		dynworkflow.load();
+		loadHtmlHelper.setup(base_url);
+		dynengine.setup(base_url);
+		dynworkflow.setup(base_url);
 		submitSign.setup(upload_signs_url);
 		teachedSigns.setup();
 		renderSign.setup(api_url);
+		ranking.setup(base_url);
 		_setupLoginContainer();
 	}
  
@@ -0,0 +1,120 @@
+<div id="ranking-info-container" class="col-sm-4">
+	<div class="title">WikiRanking</div>
+	<div>Lorem Ipsum é apenas uma simulação de texto da indústria
+		tipográfica e de impressos, e vem sendo utilizado desde o século XVI.</div>
+	<div class="avatar-info">
+		<img src="{{ server }}/img/ranking/user-shape.png">
+		<div>Teste 11</div>
+	</div>
+	<div>
+		<div>
+			<strong>Nível</strong>: 5
+		</div>
+		<div>
+			<strong>Conquista</strong>:<span class="achievement-info"> construir
+				5 sinais em 24 horas.</span>
+		</div>
+		<div>
+			<strong>Atributo</strong>: lorem ipsum
+		</div>
+		<div>
+			<strong>Atributo</strong>: lorem ipsum
+		</div>
+		<div>
+			<strong>Atributo</strong>: lorem ipsum
+		</div>
+	</div>
+</div>
+<div id="leaderboard-container" class="col-sm-8">
+	<table class="table table-striped table-hover">
+		<thead>
+			<tr>
+				<th></th>
+				<th>#</th>
+				<th><img src="{{ server }}/img/ranking/trophy-icon.png">
+					<div>Membro</div></th>
+				<th><img src="{{ server }}/img/ranking/signs-icon.png">
+					<div>Sinais</div></th>
+			</tr>
+		</thead>
+		<tbody>
+			<tr>
+				<td><img src="{{ server }}/img/ranking/gold-star-icon.png"></td>
+				<td>1.</td>
+				<td><a href="/pybossa/account/adabriand/" target="_blank">Teste
+						1</a></td>
+				<td>6</td>
+			</tr>
+			<tr>
+				<td><img src="{{ server }}/img/ranking/silver-star-icon.png"></td>
+				<td>2.</td>
+				<td><a href="/pybossa/account/adabriand/" target="_blank">Teste
+						2</a></td>
+				<td>3</td>
+			</tr>
+			<tr>
+				<td><img src="{{ server }}/img/ranking/bronze-star-icon.png"></td>
+				<td>3.</td>
+				<td><a href="/pybossa/account/adabriand/" target="_blank">Teste
+						3</a></td>
+				<td>2</td>
+			</tr>
+			<tr>
+				<td></td>
+				<td>4.</td>
+				<td><a href="/pybossa/account/adabriand/" target="_blank">Teste
+						4</a></td>
+				<td>2</td>
+			</tr>
+			<tr>
+				<td></td>
+				<td>5.</td>
+				<td><a href="/pybossa/account/adabriand/" target="_blank">Teste
+						5</a></td>
+				<td>2</td>
+			</tr>
+			<tr>
+				<td></td>
+				<td>6.</td>
+				<td><a href="/pybossa/account/adabriand/" target="_blank">Teste
+						6</a></td>
+				<td>2</td>
+			</tr>
+			<tr>
+				<td></td>
+				<td>7.</td>
+				<td><a href="/pybossa/account/adabriand/" target="_blank">Teste
+						7</a></td>
+				<td>2</td>
+			</tr>
+			<tr>
+				<td></td>
+				<td>8.</td>
+				<td><a href="/pybossa/account/adabriand/" target="_blank">Teste
+						8</a></td>
+				<td>2</td>
+			</tr>
+			<tr>
+				<td></td>
+				<td>9.</td>
+				<td><a href="/pybossa/account/adabriand/" target="_blank">Teste
+						9</a></td>
+				<td>2</td>
+			</tr>
+			<tr>
+				<td></td>
+				<td>10.</td>
+				<td><a href="/pybossa/account/adabriand/" target="_blank">Teste
+						10</a></td>
+				<td>2</td>
+			</tr>
+			<tr class="highlight">
+				<td></td>
+				<td>25.</td>
+				<td><a href="/pybossa/account/adabriand/" target="_blank">Teste
+						11</a></td>
+				<td>2</td>
+			</tr>
+		</tbody>
+	</table>
+</div>
 \ No newline at end of file
 <link rel="stylesheet" href="{{ server }}/assets/css/main.css">
-<span id="server-url" data-url="{{ server }}" class="hidden" hidden>server-url</span>
  
 <a href="{{ homepage_url }}" class="wl-logo"> <img
 	src="{{ server }}/img/logo.svg">
@@ -9,7 +8,7 @@
 		<!-- Brand and toggle get grouped for better mobile display -->
 		<div class="navbar-header">
 			<button type="button" class="navbar-toggle collapsed"
-				data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"
+				data-toggle="collapse" data-target="#navbar-collapse-1"
 				aria-expanded="false">
 				<span class="sr-only">Toggle navigation</span> <span
 					class="icon-bar"></span> <span class="icon-bar"></span> <span
@@ -18,7 +17,7 @@
 		</div>
 		<!-- Collect the nav links, forms, and other content for toggling -->
 		<div class="collapse navbar-collapse"
-			id="bs-example-navbar-collapse-1">
+			id="navbar-collapse-1">
 			<ul class="nav navbar-nav navbar-right">
 				<li><a href="javascript:void(0);"
 					onclick="wikilibras.showTeachContainer()">Ensinar</a></li>
@@ -29,6 +28,8 @@
 						ensinados</a></li>
 				<li><a href="javascript:void(0);"
 					onclick="wikilibras.showTutorialContainer()">Tutorial</a></li>
+				<li><a href="javascript:void(0);"
+					onclick="ranking.show()">Ranking</a></li>
 				<li id="login-container"></li>
 			</ul>
 		</div>
@@ -326,6 +327,8 @@
 			src="http://www.youtube.com/embed/JJV2DX8s1rg?controls=2&showinfo=0">
 		</iframe>
 	</div>
+	<div id="ranking-container" class="sub-main-container container">
+	</div>
 </div>
  
 <!-- External Libs -->
@@ -347,10 +350,12 @@
 <script src="{{ server }}/assets/js/selection-panel/selection-panel.js"></script>
  
 <!-- Helpers -->
+<script src="{{ server }}/assets/js/helpers/load-html-helper.js"></script>
 <script src="{{ server }}/assets/js/helpers/video-helper.js"></script>
 <script src="{{ server }}/assets/js/helpers/icon-helper.js"></script>
 <script src="{{ server }}/assets/js/helpers/tmpJSONParser.js"></script>
  
+<script src="{{ server }}/assets/js/ranking.js"></script>
 <script src="{{ server }}/assets/js/teached-signs.js"></script>
 <script src="{{ server }}/assets/js/submit-sign.js"></script>
 <script src="{{ server }}/assets/js/configuration-screen.js"></script>
1	1	@import url("articulation.css");
2	2	@import url("submit-sign.css");
3	3	@import url("teached-signs.css");
	4	+@import url("ranking.css");
4	5
5	6	/* Main */
6	7	body nav.navbar:first-child {
...	...	@@ -13,7 +14,7 @@ footer {
13	14
14	15	@font-face {
15	16	font-family: 'Titillium Web';
16		- src: url('../fonts/TitilliumWeb-SemiBold.ttf') format('truetype');
	17	+ src: url('../fonts/titilliumweb/TitilliumWeb-SemiBold.ttf') format('truetype');
17	18	}
18	19
19	20	h1, h2, h3, h4, h5, h6, h7, h8 {
...	...	@@ -51,6 +52,10 @@ body {
51	52	opacity: 0.95;
52	53	}
53	54
	55	+.navbar-wl .navbar-collapse.in .nav {
	56	+ padding-top: 35px;
	57	+}
	58	+
54	59	.navbar-default .navbar-nav>li>a {
55	60	color: #FFFFFF;
56	61	}
...	...
...	...	@@ -0,0 +1,83 @@
	1	+@font-face {
	2	+ font-family: 'Roboto';
	3	+ src: url('../fonts/roboto/Roboto-Light.ttf') format('truetype');
	4	+}
	5	+
	6	+#ranking-container {
	7	+ background-color: #ffffff;
	8	+ border-radius: 5px;
	9	+ -moz-border-radius: 5px;
	10	+ -webkit-border-radius: 5px;
	11	+ padding-right: 0px;
	12	+ overflow: hidden;
	13	+ font-family: 'Roboto';
	14	+}
	15	+
	16	+#ranking-info-container {
	17	+ padding-left: 0px;
	18	+}
	19	+
	20	+#ranking-info-container .title {
	21	+ color: #000000;
	22	+ font-size: 50px;
	23	+}
	24	+
	25	+#ranking-info-container .avatar-info {
	26	+ text-align: center;
	27	+ padding-top: 30px;
	28	+}
	29	+
	30	+#ranking-info-container .achievement-info {
	31	+ color: #028c12;
	32	+}
	33	+
	34	+#leaderboard-container {
	35	+ background-color: #fefcfc;
	36	+ padding: 0px;
	37	+}
	38	+
	39	+#leaderboard-container table {
	40	+ margin-bottom: 0px;
	41	+}
	42	+
	43	+#ranking-container .table-striped>tbody>tr:nth-of-type(odd) {
	44	+ background-color: #f1f2f2;
	45	+}
	46	+
	47	+#ranking-container .table-striped>tbody>tr:hover {
	48	+ background-color: #e0e0e0;
	49	+}
	50	+
	51	+#ranking-container .table-striped>tbody>tr.highlight {
	52	+ background-color: #fbefa3;
	53	+}
	54	+
	55	+#ranking-container .table-striped>tbody>tr.highlight:hover {
	56	+ background-color: #f7e783;
	57	+}
	58	+
	59	+#ranking-container th {
	60	+ text-align: center;
	61	+ border: 0px;
	62	+ padding-bottom: 15px;
	63	+}
	64	+
	65	+#ranking-container td {
	66	+ text-align: center;
	67	+ border: 0px;
	68	+}
	69	+
	70	+#ranking-container td:nth-of-type(1), #ranking-container td:nth-of-type(2)
	71	+ {
	72	+ width: 75px;
	73	+}
	74	+
	75	+#ranking-container td:nth-of-type(2), #ranking-container th:nth-of-type(2),
	76	+ #ranking-container td:nth-of-type(3), #ranking-container th:nth-of-type(3)
	77	+ {
	78	+ text-align: left;
	79	+}
	80	+
	81	+#ranking-container th:nth-of-type(3) img {
	82	+ padding-left: 20px;
	83	+}
0	84	\ No newline at end of file
...	...
...	...	@@ -0,0 +1,21 @@
	1	+(function(loadHtmlHelper, $, undefined) {
	2	+
	3	+ var baseUrl = '';
	4	+
	5	+ function _preprocessHtml(data) {
	6	+ return data.replace(/{{ server }}/g, baseUrl);
	7	+ }
	8	+
	9	+ loadHtmlHelper.load = function(target, url, callback) {
	10	+ var completeUrl = baseUrl + url;
	11	+ $.get(completeUrl, function(data) {
	12	+ $(target).html(_preprocessHtml(data));
	13	+ callback && callback();
	14	+ });
	15	+ }
	16	+
	17	+ loadHtmlHelper.setup = function(url) {
	18	+ baseUrl = url;
	19	+ };
	20	+
	21	+}(window.loadHtmlHelper = window.loadHtmlHelper \|\| {}, jQuery));
...	...
...	...	@@ -0,0 +1,15 @@
	1	+(function(ranking, $, undefined) {
	2	+
	3	+ var baseUrl = '';
	4	+
	5	+ ranking.show = function() {
	6	+ $(".sub-main-container").hide();
	7	+ $("#ranking-container").show();
	8	+ }
	9	+
	10	+ ranking.setup = function(serverUrl) {
	11	+ baseUrl = serverUrl;
	12	+ loadHtmlHelper.load("#ranking-container", "/ranking/ranking.html");
	13	+ };
	14	+
	15	+}(window.ranking = window.ranking \|\| {}, jQuery));
...	...
1	1	(function(dynengine, $, undefined) {
2		- var setup = undefined;
	2	+
	3	+ var baseUrl = '';
3	4
4	5	_preprocessHtml = function(data, url) {
5	6	var matchSubConfig = data.match(/sub(?:C\|c)onfig="(.*?)"/);
...	...	@@ -67,13 +68,13 @@
67	68	goodData = replaceHandFolderTag(goodData, currentMainConfig);
68	69	goodData = replaceMovementNameTag(goodData, currentMainConfig);
69	70	goodData = goodData.replace(/{{ hand }}/g, currentMainConfig);
70		- return goodData.replace(/{{ server }}/g, url);
	71	+ return goodData.replace(/{{ server }}/g, baseUrl);
71	72	};
72	73
73		- dynengine.render = function(serverUrl, templatePath, target, prepend, callback) {
74		- var url = serverUrl + templatePath;
	74	+ dynengine.render = function(templatePath, target, prepend, callback) {
	75	+ var url = baseUrl + templatePath;
75	76	$.get(url, function(data) {
76		- var processedHtml = _preprocessHtml(data, serverUrl);
	77	+ var processedHtml = _preprocessHtml(data);
77	78	if (prepend) {
78	79	$(target).prepend(processedHtml);
79	80	} else {
...	...	@@ -85,12 +86,8 @@
85	86	});
86	87	};
87	88
88		- dynengine.clean = function(target) {
89		- $(target).html('');
90		- };
91		-
92		- dynengine.load = function() {
93		- var url = $('#server-url').data('url');
	89	+ dynengine.setup = function(url) {
	90	+ baseUrl = url;
94	91	};
95	92
96	93	}(window.dynengine = window.dynengine \|\| {}, jQuery));
...	...
...	...	@@ -99,7 +99,7 @@
99	99	} else {
100	100	var step = currentSubconfig[stepNumber];
101	101	step = typeof step == 'undefined' ? 'passo-1' : step;
102		- dynengine.render(baseUrl, '/' + preprocessedMainConfig + '/'
	102	+ dynengine.render('/' + preprocessedMainConfig + '/'
103	103	+ subConfig + '/' + step + '.html', '#selection-panel',
104	104	true);
105	105	}
...	...	@@ -270,7 +270,7 @@
270	270	if (_isTimelineLoaded()) {
271	271	_setupTimelineIcons(timelineBaseId, toUpdate);
272	272	} else {
273		- dynengine.render(baseUrl, '/' + preprocessedMainConfig
	273	+ dynengine.render('/' + preprocessedMainConfig
274	274	+ '/timeline.html', '#selection-panel', false, function() {
275	275	_setupTimelineIcons(timelineBaseId, true);
276	276	});
...	...	@@ -356,8 +356,8 @@
356	356	_initTimeline();
357	357	};
358	358
359		- dynworkflow.load = function() {
360		- baseUrl = $('#server-url').data('url');
	359	+ dynworkflow.setup = function(url) {
	360	+ baseUrl = url;
361	361	$.get(baseUrl + '/conf/selection-workflow-json', function(result) {
362	362	jsonWF = $.parseJSON(result);
363	363	}).fail(function() {
...	...
...	...	@@ -190,11 +190,13 @@
190	190
191	191	function _loadMainComponents() {
192	192	iconHelper.setup(base_url);
193		- dynengine.load();
194		- dynworkflow.load();
	193	+ loadHtmlHelper.setup(base_url);
	194	+ dynengine.setup(base_url);
	195	+ dynworkflow.setup(base_url);
195	196	submitSign.setup(upload_signs_url);
196	197	teachedSigns.setup();
197	198	renderSign.setup(api_url);
	199	+ ranking.setup(base_url);
198	200	_setupLoginContainer();
199	201	}
200	202
...	...
...	...	@@ -0,0 +1,120 @@
	1	+<div id="ranking-info-container" class="col-sm-4">
	2	+ <div class="title">WikiRanking</div>
	3	+ <div>Lorem Ipsum é apenas uma simulação de texto da indústria
	4	+ tipográfica e de impressos, e vem sendo utilizado desde o século XVI.</div>
	5	+ <div class="avatar-info">
	6	+ <img src="{{ server }}/img/ranking/user-shape.png">
	7	+ <div>Teste 11</div>
	8	+ </div>
	9	+ <div>
	10	+ <div>
	11	+ <strong>Nível</strong>: 5
	12	+ </div>
	13	+ <div>
	14	+ <strong>Conquista</strong>:<span class="achievement-info"> construir
	15	+ 5 sinais em 24 horas.</span>
	16	+ </div>
	17	+ <div>
	18	+ <strong>Atributo</strong>: lorem ipsum
	19	+ </div>
	20	+ <div>
	21	+ <strong>Atributo</strong>: lorem ipsum
	22	+ </div>
	23	+ <div>
	24	+ <strong>Atributo</strong>: lorem ipsum
	25	+ </div>
	26	+ </div>
	27	+</div>
	28	+<div id="leaderboard-container" class="col-sm-8">
	29	+ <table class="table table-striped table-hover">
	30	+ <thead>
	31	+ <tr>
	32	+ <th></th>
	33	+ <th>#</th>
	34	+ <th><img src="{{ server }}/img/ranking/trophy-icon.png">
	35	+ <div>Membro</div></th>
	36	+ <th><img src="{{ server }}/img/ranking/signs-icon.png">
	37	+ <div>Sinais</div></th>
	38	+ </tr>
	39	+ </thead>
	40	+ <tbody>
	41	+ <tr>
	42	+ <td><img src="{{ server }}/img/ranking/gold-star-icon.png"></td>
	43	+ <td>1.</td>
	44	+ <td><a href="/pybossa/account/adabriand/" target="_blank">Teste
	45	+ 1</a></td>
	46	+ <td>6</td>
	47	+ </tr>
	48	+ <tr>
	49	+ <td><img src="{{ server }}/img/ranking/silver-star-icon.png"></td>
	50	+ <td>2.</td>
	51	+ <td><a href="/pybossa/account/adabriand/" target="_blank">Teste
	52	+ 2</a></td>
	53	+ <td>3</td>
	54	+ </tr>
	55	+ <tr>
	56	+ <td><img src="{{ server }}/img/ranking/bronze-star-icon.png"></td>
	57	+ <td>3.</td>
	58	+ <td><a href="/pybossa/account/adabriand/" target="_blank">Teste
	59	+ 3</a></td>
	60	+ <td>2</td>
	61	+ </tr>
	62	+ <tr>
	63	+ <td></td>
	64	+ <td>4.</td>
	65	+ <td><a href="/pybossa/account/adabriand/" target="_blank">Teste
	66	+ 4</a></td>
	67	+ <td>2</td>
	68	+ </tr>
	69	+ <tr>
	70	+ <td></td>
	71	+ <td>5.</td>
	72	+ <td><a href="/pybossa/account/adabriand/" target="_blank">Teste
	73	+ 5</a></td>
	74	+ <td>2</td>
	75	+ </tr>
	76	+ <tr>
	77	+ <td></td>
	78	+ <td>6.</td>
	79	+ <td><a href="/pybossa/account/adabriand/" target="_blank">Teste
	80	+ 6</a></td>
	81	+ <td>2</td>
	82	+ </tr>
	83	+ <tr>
	84	+ <td></td>
	85	+ <td>7.</td>
	86	+ <td><a href="/pybossa/account/adabriand/" target="_blank">Teste
	87	+ 7</a></td>
	88	+ <td>2</td>
	89	+ </tr>
	90	+ <tr>
	91	+ <td></td>
	92	+ <td>8.</td>
	93	+ <td><a href="/pybossa/account/adabriand/" target="_blank">Teste
	94	+ 8</a></td>
	95	+ <td>2</td>
	96	+ </tr>
	97	+ <tr>
	98	+ <td></td>
	99	+ <td>9.</td>
	100	+ <td><a href="/pybossa/account/adabriand/" target="_blank">Teste
	101	+ 9</a></td>
	102	+ <td>2</td>
	103	+ </tr>
	104	+ <tr>
	105	+ <td></td>
	106	+ <td>10.</td>
	107	+ <td><a href="/pybossa/account/adabriand/" target="_blank">Teste
	108	+ 10</a></td>
	109	+ <td>2</td>
	110	+ </tr>
	111	+ <tr class="highlight">
	112	+ <td></td>
	113	+ <td>25.</td>
	114	+ <td><a href="/pybossa/account/adabriand/" target="_blank">Teste
	115	+ 11</a></td>
	116	+ <td>2</td>
	117	+ </tr>
	118	+ </tbody>
	119	+ </table>
	120	+</div>
0	121	\ No newline at end of file
...	...
1	1	<link rel="stylesheet" href="{{ server }}/assets/css/main.css">
2		-<span id="server-url" data-url="{{ server }}" class="hidden" hidden>server-url</span>
3	2
4	3	<a href="{{ homepage_url }}" class="wl-logo"> <img
5	4	src="{{ server }}/img/logo.svg">
...	...	@@ -9,7 +8,7 @@
9	8	<!-- Brand and toggle get grouped for better mobile display -->
10	9	<div class="navbar-header">
11	10	<button type="button" class="navbar-toggle collapsed"
12		- data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"
	11	+ data-toggle="collapse" data-target="#navbar-collapse-1"
13	12	aria-expanded="false">
14	13	<span class="sr-only">Toggle navigation</span> <span
15	14	class="icon-bar"></span> <span class="icon-bar"></span> <span
...	...	@@ -18,7 +17,7 @@
18	17	</div>
19	18	<!-- Collect the nav links, forms, and other content for toggling -->
20	19	<div class="collapse navbar-collapse"
21		- id="bs-example-navbar-collapse-1">
	20	+ id="navbar-collapse-1">
22	21	<ul class="nav navbar-nav navbar-right">
23	22	<li><a href="javascript:void(0);"
24	23	onclick="wikilibras.showTeachContainer()">Ensinar</a></li>
...	...	@@ -29,6 +28,8 @@
29	28	ensinados</a></li>
30	29	<li><a href="javascript:void(0);"
31	30	onclick="wikilibras.showTutorialContainer()">Tutorial</a></li>
	31	+ <li><a href="javascript:void(0);"
	32	+ onclick="ranking.show()">Ranking</a></li>
32	33	<li id="login-container"></li>
33	34	</ul>
34	35	</div>
...	...	@@ -326,6 +327,8 @@
326	327	src="http://www.youtube.com/embed/JJV2DX8s1rg?controls=2&showinfo=0">
327	328	</iframe>
328	329	</div>
	330	+ <div id="ranking-container" class="sub-main-container container">
	331	+ </div>
329	332	</div>
330	333
331	334	<!-- External Libs -->
...	...	@@ -347,10 +350,12 @@
347	350	<script src="{{ server }}/assets/js/selection-panel/selection-panel.js"></script>
348	351
349	352	<!-- Helpers -->
	353	+<script src="{{ server }}/assets/js/helpers/load-html-helper.js"></script>
350	354	<script src="{{ server }}/assets/js/helpers/video-helper.js"></script>
351	355	<script src="{{ server }}/assets/js/helpers/icon-helper.js"></script>
352	356	<script src="{{ server }}/assets/js/helpers/tmpJSONParser.js"></script>
353	357
	358	+<script src="{{ server }}/assets/js/ranking.js"></script>
354	359	<script src="{{ server }}/assets/js/teached-signs.js"></script>
355	360	<script src="{{ server }}/assets/js/submit-sign.js"></script>
356	361	<script src="{{ server }}/assets/js/configuration-screen.js"></script>
...	...