make toolbar responsive (#8566)
This commit is contained in:
parent
693c5bbea1
commit
45f82f8a6d
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -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">
|
||||
|
|
|
@ -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>
|
||||
|
|
Reference in New Issue