}
/** 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);
{* 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>
<![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>
});
}
- $('#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();
+ });
});
border-bottom:none;
}
-#menu li a{
+#menu li a, #plang_selector a {
padding: .1em .3em;
display:block;
color: #212121;
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 {
.public_page #user {
position: absolute;
- top:3em;
- right:0;
+ top:.4em;
+ right:.4em;
display:inline-block;
}
}
.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 */
#content {
margin-left:17em;
- margin-top: 10px;
- padding: 0.5em;
+ margin-top: .4em;
+ padding: 0 .5em .5em;
position: relative;
min-height: 100vh;
}
body {
width: auto !important;
margin: auto !important;
- padding: auto !important;
+ padding: .4em 0 0;
}
#details_menu, #member_stateofdue, .details {