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

Responsive layouts improvements. (not finished)

Browse Source 
see #585
This commit is contained in:
Antoine Nguyen
2014-09-01 17:38:05 +02:00
parent 31f64c0b4e
commit bd92bd6213
9 changed files with 147 additions and 180 deletions
Download Patch File Download Diff File Expand all files Collapse all files
MANIFEST.in
+1 -1
View File
@@ -1,5 +1,5 @@
include README.rst COPYING requirements.txt
recursive-include modoboa *.html *.js *.css *.png *.po *.mo *.json *.gif
recursive-include modoboa *.html *.js *.css *.png *.po *.mo *.json *.gif *.ttf *.woff
recursive-include modoboa/core/templates *.tpl
recursive-include modoboa/core/commands/templates *.tpl
recursive-include doc *
modoboa/extensions/webmail/static/webmail/css/webmail.css
+38 -42
View File
@@ -1,4 +1,12 @@
/* MEDIA */
/* MEDIA */
#listing {
position: absolute;
overflow: auto;
top: 60px;
padding: 0;
margin: 0;
}
@media (max-width: 400px) {
td#subject,
td[name='subject']
@@ -18,14 +26,24 @@
}
}
@media (max-width: 770px) {
#searchbox{
@media (max-width: 768px) {
#searchbox {
margin-left: 20px;
}
td[name=from] {
width: 35%;
}
}
@media (min-width: 768px) {
td[name=from] {
width: 20%;
}
}
@media (max-width: 1198px) {
.container-fluid{
.container-fluid {
padding:0;
}
th#date,
@@ -38,13 +56,11 @@
th#withatts,
td[name="withatts"],
th#drag,
td[name="drag"]{
td[name="drag"] {
display: none;
}
#leftcol.leftcol-display-none{
display: none;
}
.display-up-1198-webmail{
.display-up-1198-webmail {
display: none;
}
.display-less-1198{
@@ -53,13 +69,20 @@
}
@media (min-width: 1198px) {
#listing {
padding-left: 15px;
}
}
/* GENERAL */
body, html {
/*overflow: hidden;*/
}
#rightcol {
/* padding-top: 20px;*/
position: relative;
}
#folders {
@@ -99,8 +122,8 @@ body, html {
}
.nav-sidebar > li > a {
padding-top: 5px;
padding-bottom: 5px;
padding-top: 7px;
padding-bottom: 7px;
}
#mboxes_container a[name=loadfolder] {
@@ -144,34 +167,6 @@ td[name="date"] {
display: inline-block;
}
/*
*listing
*/
#listing {
overflow: auto;
padding-top: 60px;
}
#listing.listing-up-1198 {
padding-left: 15px;
}
#listing.listing-less-1198 {
bottom: 0px;
left: 0px;
padding-left: 0px;
right: 0;
top: 0px;
overflow-y: hidden;
}
#listing .test {
overflow-y: scroll;
position: absolute;
left: 0;
right: 0;
top: 41px;
bottom: 41px;
}
/*
* Mailboxes list
*/
@@ -322,8 +317,9 @@ td[class*=openable] {
*/
#menubar {
background-color: #fff;
position: fixed;
/*background-color: #fff;*/
position: absolute;
top: 0;
padding-top: 20px;
z-index: 100;
}
modoboa/extensions/webmail/static/webmail/js/webmail.js
+67 -108
View File
@@ -43,87 +43,6 @@ Webmail.prototype = {
bottom: $("#bottom-bar").outerHeight(true) + "px"
});
/* Responsive */
/* Responsive -> init */
if ($(window).width() < 1198) {
$("#leftcol").addClass(
"leftcol-display-none"
);
$("#listing").css({
height: $(window).height() - 150 + 'px'
});
}
if ($(window).width() > 1198) {
/*$("#folders").css({
bottom: $("#bottom-bar").outerHeight(true) + 10,
width: this.options.mboxes_col_width + 'px'
});*/
/*$("#folders").innerWidth(this.options.mboxes_col_width);*/
$("#listing").addClass(
"listing-up-1198"
);
/*$("#listing").css({
height: $(window).height() - 180 + 'px'
});*/
/*$("#rightcol").css({
marginLeft: 200 + 'px',
paddingRight: 90 + 'px'
});*/
}
/* Responsive -> on resizing window */
var that = this;
$(window).resize(function() {
if ($(window).width() < 767) {
$("tr td[name='from']").css({
width: 35 + '%'
});
}
if ($(window).width() > 767) {
$("tr td[name='from']").css({
width: 20 + '%'
});
}
if ($(window).width() < 1198) {
$("#leftcol").addClass(
"leftcol-display-none"
);
$("#listing").addClass(
"col-lg-12 col-md-12 col-ms-12 col-xs-12"
);
/*$("#listing").css({
height: $(window).height() - 150 + 'px'
});*/
$("#listing").removeClass(
"listing-up-1198"
);
}
if ($(window).width() > 1198) {
$("#folders").css({
/*bottom: $("#bottom-bar").outerHeight(true) + 10,*/
width: that.options.mboxes_col_width + 'px'
});
$("#listing").addClass(
"listing-up-1198"
);
//$("#listing").height($(window).height());
// $("#listing").css({
// height: $(window).height() + 'px'
// });
}
});
/* Responsive -> on resizing folders (leftcol) */
$("#folders").resizable({
start: function(event, ui) {
@@ -178,7 +97,7 @@ Webmail.prototype = {
},
listen: function() {
$(window).resize(this.resize);
$(window).resize($.proxy(this.resize, this));
$(document).on("click", "a[name=compose]", $.proxy(this.compose_loader, this));
$(document).on("click", "a[name=totrash]", $.proxy(this.delete_messages, this));
@@ -221,9 +140,63 @@ Webmail.prototype = {
this.unseen_counters = unseen_counters;
},
/**
* Global resize event callback.
*/
resize: function() {
/*$("#mboxes_container").height(
$("#folders").height() - $("#mboxactions").height());*/
var $window = $(window);
var current_action = this.navobject.getparam("action");
if ($window.width() > 1198) {
$("#folders").css({
/*bottom: $("#bottom-bar").outerHeight(true) + 10,*/
width: this.options.mboxes_col_width + 'px'
});
}
if (current_action == "listmailbox") {
this.resize_listing("auto");
} else if (current_action == "viewmail") {
this.resize_listing("hidden");
} else if (current_action == "compose") {
this.resize_compose_body();
}
},
/**
* Resize the "listing" div.
*/
resize_listing: function(overflow) {
$("#listing").css("overflow", overflow);
$("#listing").height(
$("#bottom-bar").offset().top -
($("#menubar").offset().top + $("#menubar").outerHeight())
);
},
/**
* Resize the textarea used to write plain/text messages.
*/
resize_compose_body: function() {
var $container = $("#body_container");
if ($container.length) {
var top = $container.offset().top;
var bottom = $("#bottom-bar").offset().top;
$("#body_container").innerHeight(bottom - top - 10);
}
},
/*
* Callback of the 'compose' action.
*
* It is also shared with other similar actions : reply, forward.
*/
resize_editor: function() {
CKEDITOR.instances[this.editorid].resize("100%",
$("#body_container").outerHeight(true));
},
/*
@@ -308,7 +281,6 @@ Webmail.prototype = {
$("#pagination-responsive").html(response.navbar);
}
$("#listing").html(response.listing);
$("body").css("overflow", "auto");
},
/*
@@ -402,7 +374,7 @@ Webmail.prototype = {
href: mailbox
});
var parts = mailbox.split(this.options.hdelimiter);
var linkcontent = "<i class='glyphicon glyphicon-folder-close'></i> ";
var linkcontent = "<span class='glyphicon glyphicon-folder-close'></span> ";
var displayname = linkcontent + parts[parts.length - 1];
$li.append($link);
@@ -703,7 +675,7 @@ Webmail.prototype = {
url: url,
dataType: 'json'
}).done($.proxy(function(data) {
if (cb != undefined) {
if (cb !== undefined) {
cb.apply(this, [data]);
}
}, this));
@@ -892,28 +864,24 @@ Webmail.prototype = {
$("#emails").htmltable();
this.htmltable = $("#emails").data("htmltable");
this.init_draggables();
this.resize_listing("auto");
},
/*
* Callback of the 'compose' action.
*
* It is also shared with other similar actions : reply, forward.
*/
resize_editor: function() {
CKEDITOR.instances[this.editorid].resize("100%",
$("#body_container").outerHeight(true));
},
add_field: function(e, name) {
e.preventDefault();
$("label[for=id_" + name + "]").parent().show();
$(e.target).hide();
this.position_body();
this.resize_compose_body();
if (this.editormode == "html") {
this.resize_editor();
}
},
/**
* Compose form loading and initialization.
*/
compose_callback: function(resp) {
this.page_update(resp);
$("#add_cc").click($.proxy(function(e) { this.add_field(e, "cc"); }, this));
@@ -936,15 +904,7 @@ Webmail.prototype = {
if (resp.id !== undefined) {
this.navobject.setparam("id", resp.id).update(false, true);
}
this.position_body();
},
position_body: function() {
var $container = $("#body_container");
var top = $container.offset().top;
var bottom = $("#bottom-bar").offset().top;
$("#body_container").height(bottom - top - 30);
this.resize_compose_body();
},
/*
@@ -952,9 +912,8 @@ Webmail.prototype = {
*/
viewmail_callback: function(resp) {
this.page_update(resp);
$("#listing").css("overflow", "hidden");
$("body").css("overflow", "hidden");
$("a[name=close]").click($.proxy(function(e) {
this.resize_listing("hidden");
$("a[name=back]").click($.proxy(function(e) {
e.preventDefault();
this.go_back_to_listing();
}, this));
@@ -966,7 +925,7 @@ Webmail.prototype = {
} else {
this.htmltable.current_selection().addClass("unseen");
}
if (data.unseen != undefined && data.mbox) {
if (data.unseen !== undefined && data.mbox) {
this.set_unseen_messages(data.mbox, data.unseen);
}
},
modoboa/extensions/webmail/templates/webmail/index.html
+4 -4
View File
@@ -32,17 +32,17 @@ $(document).ready(function() {
{% block fixed_content %}
<div class="row">
<div id="leftcol" class="col-lg-2 col-md-3 col-ms-3 col-xs-0 sidebar">
<div id="leftcol" class="col-lg-2 col-md-3 col-sm-3 col-xs-0 sidebar">
<!--<div class="row">-->
{{ mboxes }}
<!--</div>-->
</div>
<div id="rightcol" class="col-lg-offset-2 col-lg-10 col-md-offset-3 col-md-9 col-ms-offset-3 col-ms-9 col-xs-12">
<div id="rightcol" class="col-lg-offset-2 col-lg-10 col-md-offset-3 col-md-9 col-sm-offset-3 col-sm-9 col-xs-12">
<div class="row">
<div id="menubar" role="navbar" class="col-lg-12 col-md-12 col-ms-12 col-xs-12"></div>
<div id="menubar" role="navbar" class="col-lg-12 col-md-12 col-sm-12 col-xs-12"></div>
</div>
<div class="row">
<div id="listing" class="col-lg-12 col-md-12 col-ms-12 col-xs-12"></div>
<div id="listing" class="col-lg-12 col-md-12 col-sm-12 col-xs-12"></div>
</div>
</div>
</div>
modoboa/lib/templatetags/form_tags.py
+1
View File
@@ -67,6 +67,7 @@ def render_field_with_activator(field, activator_label=ugettext_lazy("activate")
@register.simple_tag
def render_and_hide_field(field):
configure_field_classes(field)
return render_to_string("common/generic_field.html", dict(
field=field, hidden=True
))
modoboa/static/css/custom.css
+4 -7
View File
@@ -19,7 +19,7 @@
}
tr th#tags,
tr.muted td[name="tags"]{
td[name="tags"] {
display: none;
}
button.navbar-toggle[data-target="#navigate-navbar-collapse"]{
@@ -106,6 +106,7 @@
/* Global */
body {
padding-top: 50px;
padding-bottom: 50px;
}
h5 {
@@ -197,7 +198,7 @@ html body div.navbar div.container-fluid div#navigate-navbar-collapse.collapse u
color: white;
}
#pagination-responsive #pagination_bar{
#pagination-responsive #pagination_bar {
display: none;
}
@@ -242,10 +243,6 @@ html body div.navbar div.container-fluid div#navigate-navbar-collapse.collapse u
/* listing */
#listing {
/*margin-bottom:60px;*/
}
/* Bottom navBar*/
.nav-bottom {
@@ -273,7 +270,7 @@ html body div.navbar div.container-fluid div#navigate-navbar-collapse.collapse u
display: inline;
cursor: pointer;
}
.simplepagination li i{
.simplepagination li span {
color: white;
margin-bottom: 15px;
margin-top: 15px;
modoboa/templates/common/pagination_bar.html
+27 -13
View File
@@ -1,28 +1,42 @@
<div id="pagination_bar" class="simplepagination">
<ul>
{% if page.has_previous %}
<li>
{% if page.has_previous %}<a href="{{ baseurl }}page=1">
<i class="glyphicon glyphicon-fast-backward"></i></a>{% else %}
<i class="glyphicon glyphicon-fast-backward"></i>{% endif %}
<a href="{{ baseurl }}page=1">
<span class="glyphicon glyphicon-fast-backward"></span></a>
</li>
<li>
{% if page.has_previous %}<a href="{{ baseurl }}page={{ page.previous_page_number }}">
<i class="glyphicon glyphicon-step-backward"></i></a>{% else %}
<i class="glyphicon glyphicon-step-backward"></i>{% endif %}
<a href="{{ baseurl }}page={{ page.previous_page_number }}">
<span class="glyphicon glyphicon-step-backward"></span></a>
</li>
{% else %}
<li>
<span class="glyphicon glyphicon-fast-backward"></span>
</li>
<li>
<span class="glyphicon glyphicon-step-backward"></span>
</li>
{% endif %}
<li class="disabled navbar-text">
{{ page.number }}/{{ page.paginator.num_pages }}
</li>
{% if page.has_next %}
<li>
{% if page.has_next %}<a href="{{ baseurl }}page={{ page.next_page_number }}">
<i class="glyphicon glyphicon-step-forward"></i></a>{% else %}
<i class="glyphicon glyphicon-step-forward"></i>{% endif %}
<a href="{{ baseurl }}page={{ page.next_page_number }}">
<span class="glyphicon glyphicon-step-forward"></span></a>
</li>
<li>
{% if page.has_next %}<a href="{{ baseurl }}page={{ page.paginator.num_pages }}">
<i class="glyphicon glyphicon-fast-forward"></i></a>{% else %}
<i class="glyphicon glyphicon-fast-forward"></i>{% endif %}
<a href="{{ baseurl }}page={{ page.paginator.num_pages }}">
<span class="glyphicon glyphicon-fast-forward"></span></a>
</li>
{% else %}
<li>
<span class="glyphicon glyphicon-step-forward"></span>
</li>
<li>
<span class="glyphicon glyphicon-fast-forward"></span>
</li>
{% endif %}
</ul>
</div>
@@ -37,4 +51,4 @@
{% else %}
<a class="btn btn-lg btn-link glyphicon glyphicon-chevron-right" type="button"></a>
{% endif %}
</div>
</div>
modoboa/templates/nlayout.html
+3 -3
View File
@@ -42,7 +42,7 @@
<div class="navbar-header">
<button class="navbar-toggle" data-target="#navigate-navbar-collapse" data-toggle="collapse" type="button">
<span class="sr-only">Toggle navigation</span>
<span class="">Mailbox</span>
<span class="">{% trans "Menu" %}</span>
</button>
</div>
@@ -97,7 +97,7 @@
</div>
</div>
{% block content %}{% endblock %}
<div class="display-up-1198 nav-bottom">
<!--<div class="display-up-1198 nav-bottom">-->
<div id="bottom-bar" class="navbar navbar-inverse navbar-fixed-bottom">
<div class="container-fluid">
<div id="bottom-bar-left" class="col-lg-4 col-md-4 col-sm-4 col-xs-0">
@@ -112,6 +112,6 @@
</div>
</div>
</div>
</div>
<!--</div>-->
</body>
</html>
modoboa/templates/twocols.html
+2 -2
View File
@@ -1,10 +1,10 @@
{% extends "fluid.html" %}
{% load core_tags %}
{% block rowcontent %}
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-12 sidebar">
<div class="col-lg-2 col-md-2 col-sm-3 col-xs-12 sidebar">
{% block leftcol %}{% endblock %}
</div>
<div class="main col-lg-offset-2 col-lg-10 col-md-offset-3 col-md-9 col-sm-offset-4 col-sm-8 col-xs-12">
<div class="main col-lg-offset-2 col-lg-10 col-md-offset-2 col-md-10 col-sm-offset-3 col-sm-9 col-xs-12">
{% if messages %}{% display_messages messages %}{% endif %}
{% block apparea %}{% endblock %}
</div>