Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Rework lang selector #39

Merged
merged 1 commit into from Nov 10, 2019
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
1 change: 1 addition & 0 deletions galette/includes/dependencies.php
Expand Up @@ -119,6 +119,7 @@
}
/** galette_lang should be removed and languages used instead */
$smarty->assign('galette_lang', $c->i18n->getAbbrev());
$smarty->assign('galette_lang_name', $c->i18n->getName());
$smarty->assign('languages', $c->i18n->getList());
$smarty->assign('plugins', $c->plugins);
$smarty->assign('preferences', $c->preferences);
Expand Down
19 changes: 11 additions & 8 deletions galette/templates/default/page.tpl
Expand Up @@ -196,16 +196,19 @@ We have to use a template file, so Smarty will do its work (like replacing varia
{* Include plugins menu entries *}
{$plugins->getMenus($tpl)}

<form action="">
<select id="lang_selector" name="ui_pref_lang">
<nav id="plang_selector" class="onhover">
<a href="#plang_selector" class="tooltip" aria-expanded="false" aria-controls="lang_selector" title="{_T string="Change language"}">
<i class="fas fa-language"></i>
{$galette_lang_name}
</a>
<ul id="lang_selector">
{foreach item=langue from=$languages}
<option value="{$langue->getID()}" lang="{$langue->getAbbrev()}"{if $galette_lang eq $langue->getAbbrev()} selected="selected"{/if}>{$langue->getName()|ucfirst}</option>
<li {if $galette_lang eq $langue->getAbbrev()} selected="selected"{/if}>
<a href="?ui_pref_lang={$langue->getID()}" lang="{$langue->getAbbrev()}">{$langue->getName()}</a>
</li>
{/foreach}
</select>
<noscript>
<input type="submit" name="{_T string="Change language"}" />
</noscript>
</form>
</ul>
</nav>
{if $login->isLogged()}
<div>{$login->loggedInAs()}</div>
<a id="logout_10" class="button" href="{if $login->isImpersonated()}{path_for name="unimpersonate"}{else}{path_for name="logout"}{/if}"><i class="fas fa-{if $login->isImpersonated()}user-secret{else}sign-out-alt{/if}"></i>{_T string="Log off"}</a>
Expand Down
19 changes: 11 additions & 8 deletions galette/templates/default/public_page.tpl
Expand Up @@ -70,16 +70,19 @@ We have to use a template file, so Smarty will do its work (like replacing varia
<![endif]-->
<header>
<img src="{path_for name="logo"}" width="{$logo->getOptimalWidth()}" height="{$logo->getOptimalHeight()}" alt="[ Galette ]" />
<form action="" id="plang_selector">
<select id="lang_selector" name="ui_pref_lang">
<nav id="plang_selector" class="onhover">
<a href="#plang_selector" class="tooltip" aria-expanded="false" aria-controls="lang_selector" title="{_T string="Change language"}">
<i class="fas fa-language"></i>
{$galette_lang_name}
</a>
<ul id="lang_selector">
{foreach item=langue from=$languages}
<option value="{$langue->getID()}" lang="{$langue->getAbbrev()}"{if $galette_lang eq $langue->getAbbrev()} selected="selected"{/if}>{$langue->getName()}</option>
<li {if $galette_lang eq $langue->getAbbrev()} selected="selected"{/if}>
<a href="?ui_pref_lang={$langue->getID()}" lang="{$langue->getAbbrev()}">{$langue->getName()}</a>
</li>
{/foreach}
</select>
<noscript>
<input type="submit" name="{_T string="Change language"}" />
</noscript>
</form>
</ul>
</nav>
{if $login->isLogged()}
<div id="user">
<a id="userlink" class="tooltip" title="{_T string="View your member card"}" href="{if $login->isSuperAdmin()}{path_for name="slash"}{else}{path_for name="me"}{/if}">{$login->loggedInAs(true)}</a>
Expand Down
19 changes: 18 additions & 1 deletion galette/webroot/js/common.js
Expand Up @@ -238,7 +238,24 @@ $(function() {
});
}

$('#lang_selector').change(function() {
$('select#lang_selector').change(function() {
this.form.submit();
});

/* Language selector.
* Works per default with CSS only, use javascript to replace with a click event,
* which is required because of the current way the menu is hidden on mobile devices.
*/
$('#plang_selector').removeClass('onhover');
var _langs = $('#plang_selector ul');
_langs.hide();

$('#plang_selector > a').on('click', function(event) {
event.preventDefault();
var _this = $(this);
var _open = _this.attr('aria-expanded');
_this.attr('aria-expanded', !open);
console.log(_open);
_langs.toggle();
});
});
70 changes: 52 additions & 18 deletions galette/webroot/themes/default/galette.css
Expand Up @@ -233,7 +233,7 @@ nav a{
border-bottom:none;
}

#menu li a{
#menu li a, #plang_selector a {
padding: .1em .3em;
display:block;
color: #212121;
Expand Down Expand Up @@ -693,16 +693,9 @@ a:hover i {
background-repeat: repeat!important;
}

/*#sendmail{
background-image:url(images/icon-mail.png), url("jquery-ui/images/ui-bg_glass_75_e6e6e6_1x400.png");
}
#sendmail.ui-state-hover {
background-image:url(images/icon-mail.png), url("jquery-ui/images/ui-bg_glass_75_ffb619_1x400.png");
}*/

#recup_mailing {
position: absolute;
right: .5em;
float: right;
margin-right: .5em;
}

h1 #sendmail {
Expand Down Expand Up @@ -1092,8 +1085,8 @@ legend .tab-button {

.public_page #user {
position: absolute;
top:3em;
right:0;
top:.4em;
right:.4em;
display:inline-block;

}
Expand All @@ -1109,13 +1102,54 @@ legend .tab-button {
}

.public_page #logout_10 {
margin: 0 .5em .2em;
margin: 0 0 .2em;
}

nav#plang_selector {
background: #fff;
text-align: left;
z-index: 100;
}

nav#plang_selector > ul {
margin: 0;
padding: 0;
background: white;
}

#plang_selector li {
margin:0.5em 0;
list-style-type:none;
}

#plang_selector li a:hover{
background-color: #DDDDFF;
text-decoration:underline;
}

nav#plang_selector a {
color: #666666;
display: block!important;
}
nav#plang_selector > a {
padding: .1em .3em;
}
#menu nav#plang_selector > a {
border-bottom:1px #DDDDFF solid;
}

nav#plang_selector.onhover > ul {
display: none;
}

nav#plang_selector.onhover:hover > ul {
display: block;
}

.public_page #plang_selector {
position: absolute;
right: .5em;
top: .5em;
left: .4em;
top: .4em;
}

/* =/ Public pages */
Expand Down Expand Up @@ -1482,8 +1516,8 @@ a.listing:hover {

#content {
margin-left:17em;
margin-top: 10px;
padding: 0.5em;
margin-top: .4em;
padding: 0 .5em .5em;
position: relative;
min-height: 100vh;
}
Expand Down Expand Up @@ -2324,7 +2358,7 @@ label:hover > i, span.bline:hover > i {
body {
width: auto !important;
margin: auto !important;
padding: auto !important;
padding: .4em 0 0;
}

#details_menu, #member_stateofdue, .details {
Expand Down