accurator/commit
added language switch to about page
author | Cristina-Iulia Bucur |
---|---|
Tue Sep 29 15:50:44 2015 +0200 | |
committer | Cristina-Iulia Bucur |
Tue Sep 29 15:50:44 2015 +0200 | |
commit | a6e1a197afca8fce556653b9b41d20d37b03473e |
tree | 8af173e09d40dfe7b9805518aabdb741f44b5167 |
parent | 13736baa76048a070f457800e9218f69344d0bb8 |
Diff style: patch stat
diff --git a/web/css/accurator.css b/web/css/accurator.css index 023a113..a7259c1 100644 --- a/web/css/accurator.css +++ b/web/css/accurator.css @@ -261,3 +261,32 @@ slider.slider-horizontal { .btn-link:focus { outline: none; } +/* Flags */ +/* source: http://lipis.github.io/flag-icon-css/ */ +.flag-icon-background { + background-size: contain; + background-position: 50%; + background-repeat: no-repeat; +} + +.flag-icon { + background-size: contain; + background-position: 50%; + background-repeat: no-repeat; + position: relative; + display: inline-block; + width: 1.33333333em; + line-height: 1em; +} + +.flag-icon:before { + content: "\00a0"; +} + +.flag-icon-en { + background-image: url(../img/flags/en.svg); +} + +.flag-icon-nl { + background-image: url(../img/flags/nl.svg); +} diff --git a/web/html/about.html b/web/html/about.html index 642afc5..8682ed1 100644 --- a/web/html/about.html +++ b/web/html/about.html @@ -24,6 +24,8 @@ <div class="collapse navbar-collapse" id="accuratorCollapse"> <ul class="nav navbar-nav navbar-right userDropdown"> </ul> + <ul class="nav navbar-nav navbar-right flagDropdown"> + </ul> </div> </div> </nav> diff --git a/web/img/flags/en.svg b/web/img/flags/en.svg new file mode 100644 index 0000000..05a0bf4 --- /dev/null +++ b/web/img/flags/en.svg @@ -0,0 +1,15 @@ +<svg xmlns="http://www.w3.org/2000/svg" height="480" width="640"> + <defs> + <clipPath id="a"> + <path fill-opacity=".67" d="M-85.333 0h682.67v512h-682.67z"/> + </clipPath> + </defs> + <g clip-path="url(#a)" transform="matrix(.94 0 0 .94 80 0)"> + <g stroke-width="1pt"> + <path fill="#006" d="M-256 0H768.02v512.01H-256z"/> + <path d="M-256 0v57.244l909.535 454.768H768.02V454.77L-141.515 0H-256zM768.02 0v57.243L-141.515 512.01H-256v-57.243L653.535 0H768.02z" fill="#fff"/> + <path d="M170.675 0v512.01h170.67V0h-170.67zM-256 170.67v170.67H768.02V170.67H-256z" fill="#fff"/> + <path d="M-256 204.804v102.402H768.02V204.804H-256zM204.81 0v512.01h102.4V0h-102.4zM-256 512.01L85.34 341.34h76.324l-341.34 170.67H-256zM-256 0L85.34 170.67H9.016L-256 38.164V0zm606.356 170.67L691.696 0h76.324L426.68 170.67h-76.324zM768.02 512.01L426.68 341.34h76.324L768.02 473.848v38.162z" fill="#c00"/> + </g> + </g> +</svg> diff --git a/web/img/flags/nl.svg b/web/img/flags/nl.svg new file mode 100644 index 0000000..9138430 --- /dev/null +++ b/web/img/flags/nl.svg @@ -0,0 +1,37 @@ +<?xml version="1.0" encoding="UTF-8" standalone="no"?> +<!-- Created with Sodipodi ("http://www.sodipodi.com/") --> +<!-- /Creative Commons Public Domain --> +<!-- +<rdf:RDF xmlns="http://web.resource.org/cc/" + xmlns:dc="http://purl.org/dc/elements/1.1/" + xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"> +<Work rdf:about=""> + <dc:title>SVG Graphic of the Dutch flag</dc:title> + <dc:rights><Agent> + <dc:title>Marc Maurer</dc:title> + </Agent></dc:rights> + <license rdf:resource="http://web.resource.org/cc/PublicDomain" /> +</Work> + +<License rdf:about="http://web.resource.org/cc/PublicDomain"> + <permits rdf:resource="http://web.resource.org/cc/Reproduction" /> + <permits rdf:resource="http://web.resource.org/cc/Distribution" /> + <permits rdf:resource="http://web.resource.org/cc/DerivativeWorks" /> +</License> +</rdf:RDF> +--> +<svg id="svg378" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="480" width="640" version="1" y="0" x="0" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/"> + <metadata id="metadata3151"> + <rdf:RDF> + <cc:Work rdf:about=""> + <dc:format>image/svg+xml</dc:format> + <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/> + </cc:Work> + </rdf:RDF> + </metadata> + <g id="flag" fill-rule="evenodd" stroke-width="1pt" transform="scale(1.25 .9375)"> + <rect id="rect171" rx="0" ry="0" height="509.76" width="512" y="-.0000019907" x="0" fill="#fff"/> + <rect id="rect256" rx="0" ry="0" height="169.92" width="512" y="342.08" x="0" fill="#21468b"/> + <rect id="rect255" height="169.92" width="512" y="-.0000019907" x="0" fill="#ae1c28"/> + </g> +</svg> diff --git a/web/js/accurator_about.js b/web/js/accurator_about.js index 7bfa2f0..c7ff4f0 100644 --- a/web/js/accurator_about.js +++ b/web/js/accurator_about.js @@ -5,7 +5,7 @@ var locale, domain; function aboutInit() { locale = getLocale(); domain = getDomain(); - + // Domain settings are needed var onDomain = function(domainSettings) { populateUI(domainSettings); @@ -15,6 +15,7 @@ function aboutInit() { userName = getUserName(userData.user); populateNavbar(userName, [{link:"profile.html", name:"Profile"}]); + populateFlags(locale); domainSettings = domainSettings(domain, onDomain); }; var onNotLoggedIn = function(){ @@ -47,4 +48,4 @@ function addButtonEvents() { $("#btnGoBackHome").click(function() { document.location.href="intro.html"; }); -} \ No newline at end of file +} diff --git a/web/js/accurator_utilities.js b/web/js/accurator_utilities.js index 6511890..11f5b77 100644 --- a/web/js/accurator_utilities.js +++ b/web/js/accurator_utilities.js @@ -282,7 +282,7 @@ function populateNavbar(userName, linkList) { userName + " ", $.el.span({'class':'caret'})), $.el.ul({'class':'dropdown-menu', - 'role':'menu'}, + 'role':'menu'}, $.el.li($.el.a({'href':'#', 'id':'btnLogout'}, data.ddLogOut)), @@ -317,6 +317,47 @@ function localizedPageName(linkList, labels, counter) { } } +// Navbar flags +function populateFlags(locale) { + $(".flagDropdown").append( + $.el.li({'class':'dropdown'}, + getInitialFlag(locale), + $.el.ul({'class':'dropdown-menu', + 'role':'menu'}, + $.el.li($.el.a({'href':'#', + 'id':'flagEn'}, + $.el.span({'class':'flag-icon flag-icon-en'}), + " English")), + $.el.li($.el.a({'href':'#', + 'id':'flagNl'}, + $.el.span({'class':'flag-icon flag-icon-nl'}), + " Nederlands")) + ) + ) + ); + + var onSuccess = function(){location.reload();}; + + $("#flagEn").click(function() { + setLocale("en", onSuccess); + }); + $("#flagNl").click(function() { + setLocale("nl", onSuccess); + }); +} + +function getInitialFlag(locale) { + return $.el.a({'href':'#', + 'class':'dropdown-toggle', + 'data-toggle':'dropdown', + 'role':'button'}, + $.el.span({'class':'flag-icon flag-icon-' + locale}), + " ", + $.el.span({'class':'caret'}) + ) +} + + // Url parameters function getParameterByName(name) { name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");