rework theme responsiveness
This commit is contained in:
parent
1987cb862f
commit
752a8caeef
|
|
@ -0,0 +1,6 @@
|
|||
$(function() {
|
||||
$('div#services > ul > li > strong a').on('click', function() {
|
||||
$(this).parents('li').toggleClass('toggled');
|
||||
return false;
|
||||
});
|
||||
});
|
||||
|
|
@ -21,22 +21,20 @@ div#page {
|
|||
}
|
||||
|
||||
div#header {
|
||||
background-color: #ffffff;
|
||||
background: white url("header-agglo.jpg") no-repeat scroll calc((100vw - 1000px) / 2) 0px;
|
||||
width: 100%;
|
||||
margin: 0 0 0 0;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
margin-left: -500px;
|
||||
z-index: 0;
|
||||
|
||||
}
|
||||
|
||||
div#top {
|
||||
background: url(header-agglo.jpg) 0% 0% no-repeat;
|
||||
height: 456px;
|
||||
width: 1500px;
|
||||
width: 100%;
|
||||
max-width: 1000px;
|
||||
margin: 0 auto 0 auto;
|
||||
margin-left: 50%;
|
||||
}
|
||||
|
||||
div#top h1 {
|
||||
|
|
@ -61,7 +59,8 @@ div#top a img {
|
|||
div#main-content-wrapper {
|
||||
position: relative;
|
||||
z-index: 100;
|
||||
width: 1000px;
|
||||
max-width: 1000px;
|
||||
width: 100%;
|
||||
margin: 200px auto 0px auto;
|
||||
}
|
||||
|
||||
|
|
@ -74,7 +73,8 @@ div#footer {
|
|||
clear: both;
|
||||
background: white url(background_footer.png) no-repeat top left;
|
||||
padding: 0px;
|
||||
width: 1000px;
|
||||
max-width: 1000px;
|
||||
width: 100%;
|
||||
height: 160px;
|
||||
margin: 10px auto 0 auto;
|
||||
position: relative;
|
||||
|
|
@ -284,9 +284,9 @@ div.login-actions {
|
|||
margin: 0 auto;
|
||||
}
|
||||
|
||||
|
||||
.region-header {
|
||||
width: 1000px;
|
||||
width: 100%;
|
||||
max-width: 1000px;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
}
|
||||
|
|
@ -938,75 +938,76 @@ ul.account-management li {
|
|||
/* bits of responsive design */
|
||||
|
||||
@media screen and (max-width: 760px) {
|
||||
div#main-content-wrapper {
|
||||
width: auto;
|
||||
margin-top: 0;
|
||||
}
|
||||
div#header {
|
||||
margin: 0;
|
||||
}
|
||||
div#top {
|
||||
margin: 0;
|
||||
width: auto;
|
||||
}
|
||||
#toplinks {
|
||||
float: none;
|
||||
margin: 0 auto;
|
||||
}
|
||||
#menu {
|
||||
margin-top: 180px;
|
||||
}
|
||||
#menu ul {
|
||||
margin-top: 45px;
|
||||
}
|
||||
#menu li,
|
||||
#menu li.has-children {
|
||||
display: block;
|
||||
width: auto;
|
||||
margin-left: 10px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.region-header {
|
||||
width: 100%;
|
||||
}
|
||||
div#agglolinks,
|
||||
ul#footer-menu,
|
||||
div#welcome p {
|
||||
display: none;
|
||||
}
|
||||
div#welcome div.login-actions p,
|
||||
div#welcome div.msp p {
|
||||
display: block;
|
||||
}
|
||||
div#welcome h2 {
|
||||
text-align: left;
|
||||
}
|
||||
div.login-actions {
|
||||
margin-left: 10px;
|
||||
}
|
||||
body.narrow-page div.right {
|
||||
width: auto;
|
||||
}
|
||||
body.narrow-page div.right form input {
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
margin-right: 1em;
|
||||
}
|
||||
body.narrow-page div.right form div label {
|
||||
float: none;
|
||||
}
|
||||
body.narrow-page div.right form div input {
|
||||
width: 95%;
|
||||
}
|
||||
body.narrow-page div.right form button {
|
||||
display: none;
|
||||
}
|
||||
div#footer {
|
||||
width: auto;
|
||||
height: 50px;
|
||||
}
|
||||
div#left, div#right {
|
||||
width: auto;
|
||||
float: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media screen and (max-width: 990px) {
|
||||
div#header {
|
||||
margin-left: 30px;
|
||||
z-index: 10;
|
||||
}
|
||||
div#menu {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background: #eee no-repeat 0% 140%;
|
||||
z-index: 10000;
|
||||
height: 100vh;
|
||||
width: 12em;
|
||||
border: none;
|
||||
margin: 0;
|
||||
box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.26), 0px 2px 10px 0px rgba(0, 0, 0, 0.22);
|
||||
width: 5px;
|
||||
transition: all ease 0.5s;
|
||||
}
|
||||
div#menu.toggled {
|
||||
width: 15em;
|
||||
background: #eee url(logo-m3m-50p.png) no-repeat 50% 98%;
|
||||
}
|
||||
div#menu:before {
|
||||
content: "≡";
|
||||
padding-right: 0.3ex;
|
||||
font-size: 300%;
|
||||
background: #eee;
|
||||
color: #EA5B0C;
|
||||
border-radius: 0 5px 5px 0;
|
||||
cursor: pointer;
|
||||
box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.16), 0px 2px 10px 0px rgba(0, 0, 0, 0.12);
|
||||
transition: all ease 0.5s;
|
||||
}
|
||||
div#menu.toggled:before {
|
||||
box-shadow: none;
|
||||
}
|
||||
div#menu ul {
|
||||
height: auto;
|
||||
overflow: hidden;
|
||||
border: 0;
|
||||
}
|
||||
div#menu li {
|
||||
float: none;
|
||||
display: block;
|
||||
white-space: nowrap;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
div#menu li a {
|
||||
display: block;
|
||||
border: none;
|
||||
}
|
||||
|
||||
#agglolinks > a, #agglolinks > span > a {
|
||||
display: block;
|
||||
margin-right: 10px;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@
|
|||
{% block extra_scripts %}
|
||||
<script src="{{site_base}}{% xstatic 'jquery' 'jquery.min.js' %}"></script>
|
||||
<script src="{{site_base}}{% static 'js/combo.public.js' %}"></script>
|
||||
<script src="{{site_base}}{% static 'js/mobile.js' %}"></script>
|
||||
{% skeleton_extra_placeholder 'extra-head' %}
|
||||
{% endblock %}
|
||||
|
||||
|
|
|
|||
|
|
@ -64,7 +64,7 @@
|
|||
<a class="agglo-entreprendre" href="{{ site_agglo_montpellier_url }}/entreprendre">Entreprendre</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div id="menu">
|
||||
<div id="menu" class="togglable">
|
||||
|
||||
{% block menu %}
|
||||
{% if user.is_authenticated %}
|
||||
|
|
|
|||
|
|
@ -828,3 +828,85 @@ div.qommon-map {
|
|||
br.quixoteform {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
div#gauche {
|
||||
display: none;
|
||||
}
|
||||
div#gauche + div#rub_service {
|
||||
width: 100%;
|
||||
}
|
||||
body {
|
||||
background: white;
|
||||
}
|
||||
div#header {
|
||||
background-image: none;
|
||||
}
|
||||
div#services > ul {
|
||||
margin: 0 auto;
|
||||
column-count: 1;
|
||||
-webkit-column-count: 1;
|
||||
-moz-column-count: 1;
|
||||
width: 95%;
|
||||
}
|
||||
div#services > ul > li {
|
||||
width: 46%;
|
||||
float: left;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
div#services > ul > li > strong {
|
||||
padding: 0;
|
||||
}
|
||||
div#services > ul > li > strong a {
|
||||
display: block;
|
||||
width: 92%;
|
||||
height: 100%;
|
||||
padding: 4%;
|
||||
min-height: 4em;
|
||||
transition: all ease 0.2s;
|
||||
}
|
||||
div#services > ul > li > strong a:hover {
|
||||
font-weight: inherit;
|
||||
box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.16), 0px 2px 10px 0px rgba(0, 0, 0, 0.12);
|
||||
background: #dd4e00;
|
||||
}
|
||||
div#services > ul > li > p,
|
||||
div#services > ul > li > div {
|
||||
display: none; /* no category description */
|
||||
}
|
||||
div#services > ul > li ul {
|
||||
display: none;
|
||||
}
|
||||
div#services > ul > li.toggled {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
min-height: 100%;
|
||||
background: white;
|
||||
box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.26), 0px 2px 10px 0px rgba(0, 0, 0, 0.22);
|
||||
}
|
||||
div#services > ul > li.toggled ul {
|
||||
display: block;
|
||||
}
|
||||
div#services > ul > li ul {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
div#services > ul > li ul a {
|
||||
background-image: none;
|
||||
font-size: 120%;
|
||||
display: block;
|
||||
padding: 2ex 2ex;
|
||||
outline: none;
|
||||
border: 1px solid #ccc;
|
||||
border-width: 1px 0;
|
||||
margin-top: -1px;
|
||||
transition: all ease 0.2s;
|
||||
}
|
||||
div#services > ul > li ul a:hover {
|
||||
background-color: #EA5B0C;
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Reference in New Issue