diff --git a/application/modules/opac/views/scripts/head.phtml b/application/modules/opac/views/scripts/head.phtml index 0a22ff20aee0405473d0cf145098ee4be9a13cc0..dd087a8e89dad6b8aa083cb3ceb2e3383fe6c2c6 100644 --- a/application/modules/opac/views/scripts/head.phtml +++ b/application/modules/opac/views/scripts/head.phtml @@ -71,7 +71,7 @@ 'media' => 'all']); if($current_profil->isResponsive()) - $head_scripts->addOpacStyleSheet('responsive'); + $head_scripts->addOpacStyleSheet('responsive')->addOpacScript('responsive'); if ($this->accessibilite_on) { //Feuilles de styles pour les déficiences visuelles diff --git a/public/opac/css/responsive.css b/public/opac/css/responsive.css index 55c4002fde3e0aba5c0b0f58ccb422309d061ef5..53e9324af97542b6ffdde6621cc309f7a32c9661 100644 --- a/public/opac/css/responsive.css +++ b/public/opac/css/responsive.css @@ -1,6 +1,10 @@ @media screen and (max-device-width: 1024px) { /** FORCED RULES **/ + #banniere, + #header { + height: auto !important; + } #site_web_content { @@ -34,6 +38,7 @@ .siteWeb, .footer, #site_web_content, + #site_web_content > :not(.menu_horizontal), #site_web_wrapper, .layout-division , #col_wrapper .boite > * { @@ -145,9 +150,145 @@ } + #site_web_content > * { + float: left; + } + + + .back_to_phone { + right: 0; + width: auto; + padding: 5px; + z-index: 1; + } + + + .titre { + height: auto !important; + max-height: none !important; + min-height: none !important; + } + + /** MENU **/ + #menu_horizontal { + background: none !important; + height: auto !important; + padding: 0 !important; + margin: 0 !important; + } + + + div[class*="menu"] * { + transition: none !important; + } + + + div[class*="menu"] > ul { + } + + + div[class*="menu"] > ul > li > a { + text-transform: uppercase; + } + + + div[class*="menu"] > ul { + display: block !important; + position: absolute; + height: 0 !important; + visibility: hidden; + } + + + div[class*="menu"] > ul > li { + + } + + + div[class*="menu"].show_menu > ul ul, + div[class*="menu"].show_menu > ul li { + display: block !important; + position: relative !important; + min-width: auto !important; + width: auto !important; + float: left; + clear: both; + text-align: left; + left: 0 !important; + top: 0 !important; + border: none; + } + + + div[class*="menu"].show_menu > ul ul, + div[class*="menu"].show_menu > ul li, + div[class*="menu"].show_menu > ul li a { + background: none !important; + color: #fff !important; + height: auto !important; + } + + + div[class*="menu"].show_menu > ul li a { + line-height: 2em; + } + + + #menu_horizontal ul li ul { + border: none; + } + + + div[class*="menu"].show_menu > ul { + visibility: visible; + width: auto; + height: auto !important; + font-size: 1.5em; + background: #2179FF url(../images/buttons/menu.png) no-repeat top left; + padding: 50px 10px !important; + left: 0; + z-index: 101 !important; + } + div[class*="menu"] .selected_profil { + visibility: visible; + } + + + div:not(.show_menu)[class*="menu"] .selected_profil a { + background-color: #2179FF; + text-transform: uppercase; + line-height: 50px; + margin-left: 50px !important; + font-size: 1.5em; + padding: 0 10px !important; + float: left; + } + + + /* div[class*="menu"].show_menu > ul * { */ + /* display: block; */ + /* clear: both; */ + /* position: relative; */ + /* float: none; */ + /* } */ + + + div:not(.boite)[class*="menu"]:after { + content: ''; + height:50px; + width: 50px; + background: url(../images/buttons/menu.png) no-repeat center center; + float: left; + cursor: pointer; + } + + + #menu_horizontal ul li ul { + + /** WIDGET **/ #col_wrapper .boite { @@ -197,9 +338,9 @@ #col_wrapper .boite { - width: 98%; - max-width: 98%; - min-width: 98%; + width: 96%; + max-width: 96%; + min-width: 96%; } } \ No newline at end of file diff --git a/public/opac/js/responsive.js b/public/opac/js/responsive.js new file mode 100644 index 0000000000000000000000000000000000000000..8b7d5e23d06d71f060d05e3768a6fb9548476ca5 --- /dev/null +++ b/public/opac/js/responsive.js @@ -0,0 +1,8 @@ +$(document).ready(function() { + var enableMenuButton = function() { + $("div:not(.boite)[class*='menu']").click(function(e) { + $(this).toggleClass('show_menu'); + }); + } + enableMenuButton(); +});