github-jwinterm/modoboa
1
0
Fork 0
mirror of https://github.com/jwinterm/modoboa.git synced 2026-10-18 05:51:26 +02:00
Code Issues Packages Projects Releases Wiki Activity

Turn footer into a collapse button when screen is smaller than 750px

Browse Source
This commit is contained in:
Maël Solard
2014-08-07 18:38:40 +02:00
parent 8169748b8c
commit 92cb0468bc
3 changed files with 59 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files
modoboa/static/css/custom.css
+28 -21
View File
@@ -1,10 +1,6 @@
/* Media */
@media (max-width: 440px) {
#bottom-bar #bottom-bar-right{
text-align: center;
}
.navbar .nav li a, .navbar .btn-group li .dropdown-toggle{
padding-right:0;
}
@@ -12,15 +8,17 @@
.navbar .col-xs-8{
padding-right:0;
}
html body div#bottom-bar{
display: none;
}
}
@media (max-width: 1200px) and (min-width: 440px) {
}
@media (max-width: 750px) {
#bottom-bar-middle{
display: none;
}
#bottom-bar #bottom-bar-right{
text-align: center;
}
}
@media (max-width: 1200px){
.dropdown{
margin:0px;
@@ -31,7 +29,23 @@
}
/* Colapse Nav */
.navbar-inverse .navbar-toggle {
border-color: #999999;
}
.navbar-inverse .navbar-toggle span{
color: white;
}
.navbar-toggle{
background-color: #000;
margin-bottom: 4px;
margin-right: 18px;
margin-top: 2px;
padding: 9px 10px;
}
/*Global*/
@@ -244,6 +258,8 @@ div.container-fluid .row-fluid .well ul.nav div.side-bar-responsive li a i.glyph
cursor: default;
}
/* Top navbar section */
.top-navbar{
@@ -281,8 +297,9 @@ div.container-fluid .row-fluid .well ul.nav div.side-bar-responsive li a i.glyph
.btn-group{
margin-left: 20px;
}
html body div.navbar div.container-fluid div#bs-example-navbar-collapse-1.collapse ul.nav li.active a,
html body div.navbar div.container-fluid div#bs-example-navbar-collapse-1.collapse ul.nav li.dropdown a.dropdown-toggle{
background-color: black;
color: white;
}
@@ -316,16 +333,6 @@ html body div.navbar div.container-fluid ul.nav li.dropdown ul.dropdown-menu li
color: white;
}
/* Top navbar section -> Button xs */
.navbar-toggle{
background-color: #5B5B5B;
margin-bottom: 4px;
margin-right: 18px;
margin-top: 2px;
padding: 9px 10px;
}
/* listing */
#listing{
modoboa/templates/common/pagination_bar.html
+1 -1
View File
@@ -1,4 +1,4 @@
<div id="pagination_bar" class="simplepagination pull-right">
<div id="pagination_bar" class="simplepagination">
<ul>
<li>
{% if page.has_previous %}<a href="{{ baseurl }}page=1">
modoboa/templates/nlayout.html
+30 -25
View File
@@ -26,47 +26,52 @@
{% extra_static_content "top" user %}
{% block html_head %}{% endblock %}
</head>
<body>
<div class="navbar navbar-inverse top-navbar" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button class="navbar-toggle" data-target="#bs-example-navbar-collapse-1" data-toggle="collapse" type="button">
<span class="sr-only">Toggle navigation</span>
<span class="glyphicon glyphicon-bar"></span>
<span class="glyphicon glyphicon-bar"></span>
<span class="glyphicon glyphicon-bar"></span>
</button>
</div>
<div id="bs-example-navbar-collapse-1" class="collapse navbar-collapse">
<ul class="nav">{% if selection %}
{% extensions_menu selection user %}{% core_menu selection user %}
{% else %}{% extensions_menu "" user %}{% core_menu "" user %}{% endif %}
{% load_optionalmenu user %}
</ul>
<div class="navbar-header">
<button class="navbar-toggle" data-target="#action" data-toggle="collapse" type="button">
<span class="sr-only">Toggle navigation</span>
<span> Action </span>
</button>
<button class="navbar-toggle" data-target="#bs-example-navbar-collapse-1" data-toggle="collapse" type="button">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="bs-example-navbar-collapse-1" class="collapse navbar-collapse">
<ul class="nav">{% if selection %}
{% extensions_menu selection user %}{% core_menu selection user %}
{% else %}{% extensions_menu "" user %}{% core_menu "" user %}{% endif %}
{% load_optionalmenu user %}
</ul>
<ul class="nav pull-right">
{% if selection %}{% user_menu user selection %}{% else %}{% user_menu user "" %}{% endif %}
</ul>
</ul>
<div class="pull-right">{% load_notifications user %}
</div>
</div>
</div>
</div>
{% block content %}{% endblock %}
<div id="action" class="collapse navbar-collapse">
<div id="bottom-bar" class="navbar navbar-inverse navbar-fixed-bottom">
<div class="navbar-inner">
<div class="container-fluid">
<div class="row-fluid">
<div id="bottom-bar-middle" class="col-lg-4 col-lg-offset-4 col-md-4 col-md-offset-4 col-sm-4 col-sm-offset-4 col-xs-4 col-xs-offset-4">
<p class="navbar-text"><i>{% trans "Powered by Modoboa" %}</i></p>
{% block footermiddle %}{% endblock %}
</div>
<div id="bottom-bar-right" class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
{% block footerright %}{% endblock %}
</div>
</div>
<div id="bottom-bar-middle" class="col-lg-4 col-lg-offset-4 col-md-4 col-md-offset-4 col-sm-4 col-sm-offset-4 col-xs-0 col-xs-offset-0">
<p class="navbar-text"><i>{% trans "Powered by Modoboa" %}</i></p>
{% block footermiddle %}{% endblock %}
</div>
<div id="bottom-bar-right" class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
{% block footerright %}{% endblock %}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>