make toolbar responsive (#8566)

This commit is contained in:
Serghei Mihai 2015-12-07 11:31:50 +01:00
parent 693c5bbea1
commit 45f82f8a6d
3 changed files with 126 additions and 11 deletions

View File

@ -50,7 +50,7 @@
.mandaye-toolbar-link li {
list-style-type: none;
float: right;
display: inline;
}
.mandaye-toolbar-link a {
@ -74,3 +74,87 @@ body {
margin-top: 36px !important;
position: relative !important;
}
#mandaye-responsive-menu-toggle {
position: absolute;
top: 0;
left: 0;
width: 50px;
height: 37px;
z-index: 100;
display: none;
border: 1px solid #5f5f5f;
border-radius: .2em;
margin: 5px;
box-shadow: 1px 1px 3px #2f2f2f;
}
@media screen and (max-width: 767px) {
body {
margin: 0 !important;
position: static !important;
}
#mandaye-toolbar {
width: 100%;
height: 45px;
background: #2c2c2c;
position: absolute;
}
.mandaye-toolbar-logo {
padding-top: 10px;
}
div.mandaye-toolbar-right {
position: absolute;
top: 40px;
left: 0;
float: none;
margin: 0;
display: none;
z-index: 10000;
}
div.mandaye-toolbar-left {
position: absolute;
top: 0;
left: 0;
padding: 0;
z-index: 1000;
}
ul.mandaye-toolbar-link {
background: #2C2C2C;
margin: 5px 0 0 0;
padding: 2px 3px;
float: right;
z-index: 1000;
}
ul.mandaye-toolbar-link li {
margin: 0;
padding: 5px 3px;
border-bottom: 1px solid white;
display: block;
float: none;
}
ul.mandaye-toolbar-link li:hover {
background: #808080;
}
ul.mandaye-toolbar-link li:last-child {
border: 0;
}
ul.mandaye-toolbar-link a {
padding: 5px 10px;
margin: 0;
}
#mandaye-responsive-menu-toggle {
display: block;
}
}

View File

@ -9,9 +9,26 @@
<meta name="description" content="">
<meta name="keywords" content=";">
<meta name="robots" content="index, follow">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<style type="text/css">
.fake_toolbar {
width:100%;
height:47px;
background:#2c2c2c;
position:absolute;
top:0;
left:0
}
@media screen and (max-width: 767px) {
.fake_toolbar {
height: 47px;
}
}
</style>
</head>
<body style="color: #777 !important; font: normal 15px Arial, Helvetica, sans-serif !important;">
<div style="width: 640px; margin: 5em auto; padding: 15px; position: relative; display: block;">
<div class='fake_toolbar'></div>
<div style="max-width: 640px; margin: 5em auto; padding: 15px; position: relative; display: block;">
<img src="${static_url}/images/keys.png" id="login-img" style="left: 0px; top: 0px; margin: 0px;">
<div style="padding-bottom: 20px;">
<span style="text-align: left; left: 100px; top: 42px; margin: 0px; position: absolute!important; font-size: 26px; color:black">

View File

@ -1,5 +1,6 @@
<div id="mandaye-toolbar">
<div class="mandaye-toolbar-left">
<div id="mandaye-responsive-menu-toggle"></div>
<div class="mandaye-toolbar-logo">
<a href="http://www.montpellier3m.fr/">
<img src="${static_url}/images/logo.png" alt="Montpellier Méditerranée Métropole" title="Montpellier Méditerranée Métropole" />
@ -8,15 +9,23 @@
</div>
<div class="mandaye-toolbar-right">
<ul class="mandaye-toolbar-link">
% if is_login or is_user_associated:
<li>
<a href="${idp_url}/accounts" title="Cliquer ici pour vous rendre sur votre compte citoyen" class="manaye_account">Mon compte citoyen</a>
</li>
% endif
% if is_login:
<li>
<a href="${urls['toolbar_logout_url']}" title="Cliquer ici pour vous déconnecter">Me déconnecter</a>
</li>
% if account:
<li>
<a href="javascript:mandaye_disassociate_logout('${urls['disassociate_url']}', '${account['sp_login']}', ${account['id']})" title="Cliquer ici pour supprimer l'association entre ce compte et votre compte citoyen.">Délier mon compte</a>
<a href="javascript:mandaye_disassociate_logout('${urls['disassociate_url']}', '${account['sp_login']}', ${account['id']})" title="Cliquer ici pour supprimer l'association entre ce compte et votre compte citoyen." class="mandaye_unlink">Délier mon compte</a>
</li>
<li>
<a href="${urls['toolbar_logout_url']}" title="Cliquer ici pour vous déconnecter" clas="mandaye_logout">Me déconnecter</a>
</li>
% endif
% elif is_user_locally_logged_in:
% if not is_user_associated:
<li>
@ -28,11 +37,16 @@
<a href="/mandaye/sso" title="Cliquer ici pour vous connecter en utilisant votre compte citoyen 3M">Me connecter avec mon compte citoyen</a>
</li>
% endif
% if is_login or is_user_associated:
<li>
<a href="${idp_url}/accounts" title="Cliquer ici pour vous rendre sur votre compte citoyen">Mon compte citoyen</a>
</li>
% endif
</ul>
</div>
</div>
<script type="text/javascript">
var menu_toggle = document.getElementById('mandaye-responsive-menu-toggle');
var menu = document.getElementsByClassName('mandaye-toolbar-right')[0];
menu_toggle.onclick = function(e) {
if (menu.style.display != 'block')
menu.style.display = 'block';
else
menu.style.display = 'none';
};
</script>