Repare the design of quarantine and make it responsive

This commit is contained in:
Maël Solard
2014-08-07 18:38:42 +02:00
parent b960233313
commit e36b068705
4 changed files with 98 additions and 53 deletions
@@ -1,5 +1,25 @@
#menubar {
position: fixed;
@media (max-width: 600px){
th#subject,
td[name='subject']{
display: none;
}
}
@media (max-width: 770px){
th#to,
td[name='to']{
display: none;
}
}
@media (max-width: 990px){
#filters_bar,
th#date,
td[name='date']{
display: none;
}
}
#menubar {
top: 60px;
padding-left: 15px;
padding-right: 15px;
@@ -12,11 +32,21 @@
margin: 0;
}
#listing {
position: fixed;
padding: 0 15px;
right: 0;
#listing.fluid-content-quarantine{
position: relative;
padding-top: 30px;
height: 0;
overflow: hidden;
padding-bottom: 56.25%; /* proportion value to aspect ratio 16:9 (9 / 16 = 0.5625 or 56.25%) */
}
#listing.fluid-content-quarantine iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#mailcontent {
@@ -27,14 +57,11 @@
height: 100%;
}
#emails tbody tr:hover {
#emails tbody tr:hover {
color: #0088cc;
}
#filters_bar {
/*padding-top: 5px;*/
padding-left: 15px;
}
thead tr {
position: relative;
@@ -49,7 +76,7 @@ td[name=type] span {
cursor: pointer;
}
td.unseen {
td.unseen {
font-weight: bold;
}
@@ -44,13 +44,20 @@ Quarantine.prototype = {
$("#menubar").html(data.menu);
$("#searchfield").searchbar({navobj: this.navobj});
}
if (data.listing != undefined) {
$("#listing").html(data.listing);
$("#listing").css({
top: $("#menubar").outerHeight() + 60 + "px",
bottom: $("#bottom-bar").outerHeight() + "px",
overflow: "auto"
});
$("#listing:has(iframe)").addClass('fluid-content-quarantine');
if ($( window ).width()>1198){
$("#listing").css({
top: $("#menubar").outerHeight() + 60 + "px",
bottom: $("#bottom-bar").outerHeight() + "px",
overflow: "auto"
});
}
}
this.update_listing(data);
},
@@ -20,5 +20,5 @@ $(document).ready(function() {
{% endblock %}
{% block fixed_content %}
<div id="menubar">{% quar_menu %}</div>
<div id="listing"></div>
<div id="listing" class="col-lg-12 col-md-12 col-dm-12 col-xs-12"></div>
{% endblock %}
@@ -1,38 +1,49 @@
{% load lib_tags i18n %}
<div class="btn-toolbar pull-left">
<div class="btn-group" title="{% trans 'Select' %}">
<a class="btn"><input type="checkbox" id="selectall" /></a>
<button class="btn dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a name="selectmsgs" href="S">{% trans "Spam" %}</a></li>
<li><a name="selectmsgs" href="V">{% trans "Virus" %}</a></li>
<li><a name="selectmsgs" href="H">{% trans "Bad Header" %}</a></li>
<li><a name="selectmsgs" href="M">{% trans "Bad MIME" %}</a></li>
<li><a name="selectmsgs" href="B">{% trans "Banned" %}</a></li>
</ul>
</div>
<div class="btn-group">
<a name="release-multi" href="{% url 'modoboa.extensions.amavis.views.process' %}" class="btn btn-success disabled">
<i class="glyphicon glyphicon-ok"></i> {% trans "Release" %}
</a>
</div>
<div class="btn-group">
<a name="delete-multi" href="{% url 'modoboa.extensions.amavis.views.process' %}" class="btn btn-danger disabled">
<i class="glyphicon glyphicon-trash"></i> {% trans "Delete" %}
</a>
</div>
{% include "common/email_searchbar.html" with extraopts=extraopts %}
<div class="col-lg-9 col-md-8 col-sm-12 col-xs-12">
<div class="navbar-nav">
<div>
<div class="btn-group" title="{% trans 'Select' %}">
<a class="btn btn-default"><input type="checkbox" id="selectall" /></a>
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a name="selectmsgs" href="S">{% trans "Spam" %}</a></li>
<li><a name="selectmsgs" href="V">{% trans "Virus" %}</a></li>
<li><a name="selectmsgs" href="H">{% trans "Bad Header" %}</a></li>
<li><a name="selectmsgs" href="M">{% trans "Bad MIME" %}</a></li>
<li><a name="selectmsgs" href="B">{% trans "Banned" %}</a></li>
</ul>
</div>
<div class="btn-group">
<a name="release-multi" href="{% url 'modoboa.extensions.amavis.views.process' %}" class="btn btn-success disabled">
<i class="glyphicon glyphicon-ok"></i> <span>{% trans "Release" %}</span>
</a>
</div>
<div class="btn-group">
<a name="delete-multi" href="{% url 'modoboa.extensions.amavis.views.process' %}" class="btn btn-danger disabled">
<i class="glyphicon glyphicon-trash"></i> <span>{% trans "Delete" %}</span>
</a>
</div>
<div class="btn-group">
{% include "common/email_searchbar.html" with extraopts=extraopts %}
</div>
</div>
</div>
<div id="filters_bar" class="btn-toolbar pull-right">
<span class="label label-title">{% trans "Display" %}</span>
<div id="filters" class="btn-group" data-toggle="buttons-radio">
<button name="msgtype_all" class="btn" title="{% trans 'All messages' %}">{% trans "All" %}</button>
<button name="msgtype_S" class="btn btn-danger" title="{% trans 'Spam only' %}">S</button>
<button name="msgtype_V" class="btn btn-danger" title="{% trans 'Virus only' %}">V</button>
<button name="msgtype_H" class="btn btn-warning" title="{% trans 'Bad Header only' %}">H</button>
<button name="msgtype_M" class="btn btn-warning" title="{% trans 'Bad MIME only' %}">M</button>
<button name="msgtype_B" class="btn btn-warning" title="{% trans 'Banned only' %}">B</button>
</div>
</div>
<div class="col-lg-3 col-md-4">
<div class="btn-group">
<div id="filters_bar" class="navbar-nav navbar-right">
<span class="label label-default">{% trans "Display" %}</span>
<div id="filters" class="btn-group" data-toggle="buttons-radio">
<button name="msgtype_all" class="btn btn-default" title="{% trans 'All messages' %}">{% trans "All" %}</button>
<button name="msgtype_S" class="btn btn-danger" title="{% trans 'Spam only' %}">S</button>
<button name="msgtype_V" class="btn btn-danger" title="{% trans 'Virus only' %}">V</button>
<button name="msgtype_H" class="btn btn-warning" title="{% trans 'Bad Header only' %}">H</button>
<button name="msgtype_M" class="btn btn-warning" title="{% trans 'Bad MIME only' %}">M</button>
<button name="msgtype_B" class="btn btn-warning" title="{% trans 'Banned only' %}">B</button>
</div>
</div>
</div>
</div>