Skip to content
Snippets Groups Projects
Commit 0531a124 authored by Mateus Rambo Strey's avatar Mateus Rambo Strey
Browse files

partial rewrite accessibility

parent d4744d85
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
app/assets/javascripts/application.js
+ 0
− 91
View file @ 0531a124
......@@ -17,94 +17,3 @@
//= require bootstrap-sprockets
//= require select2
//= require_tree ./application
$(document).ready(function(){
//// accessibility
// font size
size_c = readCookie('fontSize');
if (size_c != null) {
document.body.style.fontSize = size_c + 'px';
reloadFont(size_c - 15);
}
// contrast
contrast();
});
//source: http://www.linhadecodigo.com.br/artigo/1615/acessibilidade-aumentando-e-diminuindo-tamanho-de-letra-em-seu-site.aspx
function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
} else var expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}
function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(";");
for(var i=0;i < ca.length;i++)
{
var c = ca[i];
while (c.charAt(0)==" ") c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}
function resizeText(increment) {
if (document.body.style.fontSize == "") {
document.body.style.fontSize = "15px";
}
size = parseFloat(document.body.style.fontSize)
if ((increment > 0) && (size < 25) || ((increment < 0) && (size > 10))) {
document.body.style.fontSize = parseFloat(document.body.style.fontSize) + increment + "px";
reloadFont(increment);
}
else if (increment === 0) {
size = parseFloat(document.body.style.fontSize);
document.body.style.fontSize = '15px';
reloadFont(increment);
}
createCookie('fontSize', parseFloat(document.body.style.fontSize), 365);
}
function reloadFont(increment) {
$('.dropdown-menu').css('fontSize', document.body.style.fontSize);
$('h1 ,h2 ,h3, h4, h5 ,h6').each(function(index,value) {
$(this).css('fontSize', parseFloat($(this).css('fontSize')) + increment + 'px');
});
}
function changeContrast() {
if (readCookie('contrast') == null || readCookie('contrast') == "false") {
createCookie('contrast',"true",0);
} else {
createCookie('contrast',"false",0);
}
contrast();
}
function contrast() {
contrast_c = readCookie('contrast');
if (contrast_c == null || contrast_c != "true"){
$('body').addClass('contraste');
$('.barra-brasil').addClass('contraste');
$('.search-bar').addClass('contraste');
$('.search-bar').css('border-top','2px solid white');
$('#menu-bar').addClass('menu-bar-contrast');
$('.object-vertical .panel').addClass('contraste');
$('.navbar').addClass('contraste');
$('.well').addClass('contraste');
}else {
$('body').removeClass('contraste');
$('.barra-brasil').removeClass('contraste');
$('.search-bar').removeClass('contraste');
$('.search-bar').css('border-top','none');
$('#menu-bar').removeClass('menu-bar-contrast');
$('.object-vertical .panel').removeClass('contraste');
$('.navbar').removeClass('contraste');
$('.well').removeClass('contraste');
}
}
app/assets/javascripts/application/accessibility.js 0 → 100644
+ 109
− 0
View file @ 0531a124
//// font size
var fontSize = function() {
var elements = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', '.btn'],
elements_length = elements.length,
elements_size = {};
// get elements size with jquery after document ready
$(document).ready(function() {
for (var i = 0; i < elements_length; i++) {
elements_size[elements[i]] = $(elements[i]).css('fontSize');
}
alert(JSON.stringify(elements_size));
});
// init
size_c = readCookie('fontSize');
if (size_c != null) {
$(document).ready(function() {
reloadFontSize(size_c);
});
}
function reloadFontSize(size) {
var i = 0;
size = (parseFloat(size) / 10) + 1;
// change body font size
$('body').css('fontSize', (size * 100) + '%', 'important');
// change custom elements
for (i; i < elements_length; i++) {
$(elements[i]).css('fontSize', (parseFloat(elements_size[elements[i]]) * size) + "px", 'important');
}
}
return {
resizeText: function(increment) {
var size = parseFloat(readCookie('fontSize'));
increment = parseFloat(increment);
if (increment === 0) size = 0;
else if (((size > -6) && (increment < 0)) || ((size < 7) && (increment > 0))) {
size = size + increment;
};
reloadFontSize(size);
createCookie('fontSize', size, 365);
}
};
}
//// contrast
var contrast = function() {
var contrast_elements = 'body, .barra-brasil, .search-bar, .learning-object-vertical .panel, .navbar, .well';
// init
$(document).ready(function() {
run();
});
function run() {
var contrast_c = readCookie('contrast');
if (contrast_c == null || contrast_c != "true") {
$(contrast_elements).removeClass('contraste');
$('.search-bar').css('border-top','none');
$('#menu-bar').removeClass('menu-bar-contrast');
}
else {
$(contrast_elements).addClass('contraste');
$('.search-bar').css('border-top','2px solid white');
$('#menu-bar').addClass('menu-bar-contrast');
}
}
return {
change: function() {
(readCookie('contrast') == "true") ? createCookie('contrast',"false",0) : createCookie('contrast',"true",0);
run();
}
};
}
//// cookies
//source: http://www.linhadecodigo.com.br/artigo/1615/acessibilidade-aumentando-e-diminuindo-tamanho-de-letra-em-seu-site.aspx
function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
} else var expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}
function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(";");
for (var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==" ") c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}
// font size
var fontSize = fontSize();
// contrast
var contrast = contrast();
app/assets/stylesheets/application.scss
+ 21
− 7
View file @ 0531a124
......@@ -27,7 +27,7 @@ body {
padding:0;
height:100%;
font-size: 15px;
font-size: 100%;
font-family: 'Roboto', "Helvetica Neue", Helvetica, Arial, sans-serif;
}
......@@ -92,11 +92,14 @@ header {
.logo {
margin-top: 10px;
padding: 0px;
font-size: 24px;
// font-size: 24px;
font-weight: bold;
text-align: center;
float: left;
width: 165px;
h3 {
margin-top: 10px;
}
a {
color: #FFF;
}
......@@ -153,11 +156,15 @@ header {
// user info
.status-text {
margin-top: 20px;
font-size: 20px;
// font-size: 20px;
text-align: right;
h2, h4 {
margin-top: 5px;
}
.media-heading {
font-size: 32px;
// font-size: 32px;
a {
color: #FFF;
}
......@@ -178,20 +185,27 @@ header {
.nav {
height: 50px;
h3 {
margin-top: 13px;
}
.nav-button {
min-width: 140px;
min-width: 130px;
height: 100%;
font-size: 20px;
padding-left: 15px;
padding-right: 10px;
// font-size: 20px;
font-weight: 500 !important;
a { color: #000; }
}
.nav-button-first {
a { padding-left: 0px !important; }
padding-left: 0 !important;
}
.divider {
width: 2px;
margin-left: 3px;
height: 100%;
background-color: #FFF;
}
......
app/views/shared/application/_header.html.erb
+ 15
− 13
View file @ 0531a124
......@@ -17,17 +17,17 @@
<div class="logo">
<%= link_to root_path do %>
<%= image_tag image_path("logo.png"), class: "logo-image" %><br/>
CONTEÚDO EDUCACIONAL
<h3>CONTEÚDO EDUCACIONAL</h3>
<% end %>
</div>
</div>
<div class="col-md-6">
<div class="search-accessibility">
<%= image_tag 'fonte_mais.png', onclick: 'resizeText(1)' %>&nbsp;&nbsp;
<%= image_tag 'fonte_inicial.png', onclick: 'resizeText(0)' %>&nbsp;&nbsp;
<%= image_tag 'fonte_menos.png', onclick: 'resizeText(-1)' %>&nbsp;&nbsp;
<%= image_tag 'contraste.png', onclick: 'changeContrast()' %>
<%= image_tag 'fonte_mais.png', onclick: 'fontSize.resizeText(1)' %>&nbsp;&nbsp;
<%= image_tag 'fonte_inicial.png', onclick: 'fontSize.resizeText(0)' %>&nbsp;&nbsp;
<%= image_tag 'fonte_menos.png', onclick: 'fontSize.resizeText(-1)' %>&nbsp;&nbsp;
<%= image_tag 'contraste.png', onclick: 'contrast.change()' %>
</div>
<div class="search-input">
<form action="/search" method="get">
......@@ -46,8 +46,8 @@
<% if user_signed_in? %>
<div class="media">
<div class="media-body">
<h4 class="media-heading"><%= link_to current_user.name.split(" ").first, edit_user_registration_path %></h4>
<%= link_to 'sair', destroy_user_session_path, method: 'delete', class: "quit-link" %>
<h2 class="media-heading"><%= link_to current_user.name.split(" ").first, edit_user_registration_path %></h2>
<h4><%= link_to 'sair', destroy_user_session_path, method: 'delete', class: "quit-link" %></h4>
</div>
<div class="media-right">
<a href="#">
......@@ -58,8 +58,8 @@
<% else %>
<div class="media">
<div class="media-body">
<h4 class="media-heading"><%= link_to 'entre', new_user_session_path %></h4>
ou <%= link_to 'cadastre-se', new_user_registration_path, class: "register-link" %>
<h2 class="media-heading"><%= link_to 'entre', new_user_session_path %></h2>
<h4>ou <%= link_to 'cadastre-se', new_user_registration_path, class: "register-link" %></h4>
</div>
</div>
<% end %>
......@@ -72,10 +72,12 @@
<div class="container">
<div class="row">
<ul class="nav navbar-nav">
<li class="nav-button nav-button-first"><%= link_to 'Assuntos' %></li>
<li class="nav-button nav-button-first"><h3><%= link_to 'Assuntos' %></h3></li>
<li role="separator" class="divider"></li>
<li class="dropdown nav-button">
<a class="dropdown-toggle" data-toggle="dropdown" href="javascript:void(0);">Níveis de Ensino&nbsp;<span class="caret" /></a>
<h3>
<a class="dropdown-toggle" data-toggle="dropdown" href="javascript:void(0);">Níveis de Ensino&nbsp;<span class="caret" /></a>
</h3>
<ul class="dropdown-menu">
<li>
<div class="row" style="width: 400px;">
......@@ -104,9 +106,9 @@
</ul>
</li>
<li role="separator" class="divider"></li>
<li class="nav-button"><%= link_to 'FAQ', faq_path %></li>
<li class="nav-button"><h3><%= link_to 'FAQ', faq_path %></h3></li>
<li role="separator" class="divider"></li>
<li class="nav-button"><%= link_to 'Contato', contact_path %></li>
<li class="nav-button"><h3><%= link_to 'Contato', contact_path %></h3></li>
<li role="separator" class="divider"></li>
</ul>
</div>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment