mobile: update home/category pages according to latest discussions (#5929)
This commit is contained in:
parent
1e1b76d4c2
commit
3cc622eb2d
|
|
@ -88,7 +88,7 @@ ul#categories li a {
|
|||
}
|
||||
|
||||
div#main-content {
|
||||
padding: 0 10px;
|
||||
padding: 0 5px;
|
||||
}
|
||||
|
||||
div#login form {
|
||||
|
|
@ -139,7 +139,7 @@ div.category h3 {
|
|||
}
|
||||
|
||||
#content > h2, div.category h3 {
|
||||
margin: 0 -10px 1em -10px;
|
||||
margin: 0 -5px 1em -5px;
|
||||
border-bottom: 1px solid black;
|
||||
padding: 1ex;
|
||||
text-align: center;
|
||||
|
|
@ -178,14 +178,6 @@ div#services > ul > li {
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
div#services > ul > li.active {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
div#services > ul strong a {
|
||||
text-decoration: none;
|
||||
color: black;
|
||||
|
|
@ -195,39 +187,6 @@ div#services > ul strong a:focus {
|
|||
outline: none;
|
||||
}
|
||||
|
||||
div#services > ul > li:active {
|
||||
-moz-transform: scale(1.3);
|
||||
-webkit-transform: scale(1.3);
|
||||
}
|
||||
|
||||
div#services > ul > li.active:active {
|
||||
-moz-transform: none;
|
||||
-webkit-transform: none;
|
||||
}
|
||||
|
||||
div#services > ul > li.active > strong {
|
||||
display: block;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
}
|
||||
|
||||
div#services > ul > li.active > ul {
|
||||
text-align: center;
|
||||
background: white;
|
||||
display: block;
|
||||
}
|
||||
|
||||
div#services > ul > li.active > ul a {
|
||||
padding: 1ex;
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
border-bottom: 1px solid #aaa;
|
||||
}
|
||||
|
||||
div#services ul li.active strong {
|
||||
background-position: 1ex 50%;
|
||||
}
|
||||
|
||||
div#services ul p, div#services ul ul {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -307,3 +266,74 @@ div#services #category-telealarme strong {
|
|||
div#services #category-collecte-des-dechets-menagers strong {
|
||||
background-image: url(../images/categories/icon_trash_207.png);
|
||||
}
|
||||
|
||||
div#services > ul > li.active {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
div#services > ul > li.active > strong {
|
||||
display: block;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
background-position: 1ex 50%;
|
||||
}
|
||||
div#services > ul > li.active > ul {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
background: white;
|
||||
display: block;
|
||||
}
|
||||
|
||||
div#services > ul > li.active > ul {
|
||||
text-align: center;
|
||||
background: white;
|
||||
display: block;
|
||||
}
|
||||
|
||||
div#services > ul > li.active > ul a {
|
||||
padding: 1ex;
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
border-bottom: 1px solid #aaa;
|
||||
}
|
||||
|
||||
|
||||
div#services.active > ul {
|
||||
height: 50px;
|
||||
width: calc(100% - 10px);
|
||||
}
|
||||
|
||||
div#services > ul {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
div#services > ul > li.active {
|
||||
position: absolute;
|
||||
top: 51px;
|
||||
display: inline-block;
|
||||
left: 0px;
|
||||
}
|
||||
|
||||
div#services.active {
|
||||
text-align: center;
|
||||
height: 50px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
div#services > ul > li.inactive {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
display: inline-block;
|
||||
float: none;
|
||||
}
|
||||
|
||||
div#services > ul > li.inactive strong {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
div#services > ul > li.inactive strong {
|
||||
text-indent: -10000px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,14 +1,16 @@
|
|||
$(function() {
|
||||
$(window).on('popstate', function(event) {
|
||||
var data = event.state;
|
||||
$('#services ul > li.active').removeClass('active');
|
||||
$('#services > ul > li.active').removeClass('active');
|
||||
});
|
||||
$(window).on('hashchange', function(event) {
|
||||
if (location.hash && location.hash.length > 1) {
|
||||
$('#services ul > li.active').removeClass('active');
|
||||
$(location.hash).addClass('active');
|
||||
$('#services > ul > li').removeClass('active').addClass('inactive');
|
||||
$(location.hash).removeClass('inactive').addClass('active');
|
||||
$('#services').addClass('active');
|
||||
} else {
|
||||
$('#services ul > li.active').removeClass('active');
|
||||
$('#services > ul > li').removeClass('active').removeClass('inactive');
|
||||
$('#services').removeClass('active');
|
||||
}
|
||||
});
|
||||
$(window).on('load', function(event) {
|
||||
|
|
@ -25,12 +27,17 @@ $(function() {
|
|||
$('#services ul strong').click(function() {
|
||||
var is_already_active = $(this).parent().hasClass('active');
|
||||
var title = $(this).text();
|
||||
$('#services ul > li.active').removeClass('active');
|
||||
$('#services > ul > li').removeClass('active');
|
||||
if (is_already_active) {
|
||||
$('#services > ul > li').removeClass('inactive');
|
||||
$('#services').removeClass('active');
|
||||
history.pushState(document.title, document.title, '#');
|
||||
} else {
|
||||
history.pushState(document.title, document.title, '#');
|
||||
history.pushState(title, title, '#'+$(this).parent().attr('id'));
|
||||
$(this).parent().addClass('active');
|
||||
$('#services > ul > li').addClass('inactive');
|
||||
$(this).parent().removeClass('inactive').addClass('active');
|
||||
$('#services').addClass('active');
|
||||
}
|
||||
return false;
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in New Issue