Improve HTML structure so toolbar and content are in separate containers.

This makes splitters size and positioning better.
pull/193/head
Aleksander Machniak 10 years ago
parent 4d61806cc5
commit f8a9c2c59c

@ -39,7 +39,7 @@
#directorylistbox {
position: absolute;
top: 42px;
top: 0;
left: 0;
width: 100%;
bottom: 0;
@ -47,7 +47,7 @@
#addresslist {
position: absolute;
top: 42px;
top: 0;
left: 0;
width: 280px;
bottom: 0;
@ -55,7 +55,7 @@
#contacts-box {
position: absolute;
top: 42px;
top: 0;
left: 292px;
right: 0;
bottom: 0;

@ -34,7 +34,7 @@
#mailview-top {
position: absolute;
top: 42px;
top: 0;
left: 0;
right: 0;
bottom: 0px;
@ -59,7 +59,7 @@
#mailboxcontainer,
#messagelistcontainer {
position: absolute;
top: 42px;
top: 0;
left: 0;
width: 100%;
bottom: 0;
@ -1203,7 +1203,7 @@ div.message-partheaders .headers-table td.header {
#messagepartcontainer {
position: absolute;
top: 42px;
top: 0;
left: 232px;
right: 0;
bottom: 0;
@ -1217,7 +1217,7 @@ div.message-partheaders .headers-table td.header {
#messagepartheader {
position: absolute;
top: 42px;
top: 0;
left: 0;
width: 220px;
bottom: 0;
@ -1259,7 +1259,7 @@ div.message-partheaders .headers-table td.header {
#compose-contacts {
position: absolute;
top: 42px;
top: 0;
left: 0;
width: 100%;
bottom: 0;
@ -1362,7 +1362,7 @@ div.message-partheaders .headers-table td.header {
#compose-content {
position: absolute;
top: 42px;
top: 0;
left: 0;
right: 0;
bottom: 0px;

@ -964,6 +964,14 @@ a.iconlink.upload {
bottom: 20px;
}
#mainscreencontent {
position: absolute;
top: 42px;
left: 0;
right: 0;
bottom: 0;
}
.minimal #mainscreen {
top: 62px;
}
@ -996,11 +1004,6 @@ a.iconlink.upload {
}
.minwidth {
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 100%;
min-width: 1024px;
}

@ -24,6 +24,15 @@
<roundcube:container name="toolbar" id="addressbooktoolbar" />
</div>
<!-- search box -->
<div id="quicksearchbar" class="searchbox">
<roundcube:object name="searchform" id="quicksearchbox" />
<roundcube:button name="searchmenulink" id="searchmenulink" class="iconbutton searchoptions" onclick="UI.show_popup('searchmenu');return false" title="searchmod" content=" " />
<roundcube:button command="reset-search" id="searchreset" class="iconbutton reset" title="resetsearch" content=" " />
</div>
<div id="mainscreencontent">
<div id="addressview-left">
<!-- sources/groups list -->
@ -41,13 +50,6 @@
<div id="addressview-right">
<!-- search box -->
<div id="quicksearchbar" class="searchbox">
<roundcube:object name="searchform" id="quicksearchbox" />
<roundcube:button name="searchmenulink" id="searchmenulink" class="iconbutton searchoptions" onclick="UI.show_popup('searchmenu');return false" title="searchmod" content=" " />
<roundcube:button command="reset-search" id="searchreset" class="iconbutton reset" title="resetsearch" content=" " />
</div>
<!-- contacts list -->
<div id="addresslist" class="uibox listbox">
<roundcube:object name="addresslisttitle" label="contacts" tag="h2" class="boxtitle" />
@ -73,9 +75,10 @@
</div>
</div>
</div><!-- end addressview-right -->
</div><!-- end mainscreencontent -->
</div><!-- end mainscreen -->
<div id="exportmenu" class="popupmenu">

@ -35,6 +35,8 @@
</div>
</div>
<div id="mainscreencontent">
<div id="composeview-left">
<!-- inline address book -->
@ -181,6 +183,8 @@
</div><!-- end mailview-right -->
</div><!-- end mainscreencontent -->
</div><!-- end mainscreen -->
<div id="upload-dialog" class="propform popupdialog" title="<roundcube:label name='addattachment' />">

@ -11,9 +11,8 @@
<roundcube:endif />
</style>
</head>
<body>
<body class="minwidth">
<div class="minwidth">
<roundcube:include file="/includes/header.html" />
<div id="mainscreen">
@ -24,6 +23,23 @@
<roundcube:include file="/includes/mailtoolbar.html" />
</div>
<div id="messagesearchtools">
<!-- search filter -->
<div id="searchfilter">
<roundcube:object name="searchfilter" class="searchfilter decorated" />
</div>
<!-- search box -->
<div id="quicksearchbar" class="searchbox">
<roundcube:object name="searchform" id="quicksearchbox" />
<roundcube:button name="searchmenulink" id="searchmenulink" class="iconbutton searchoptions" onclick="UI.show_popup('searchmenu');return false" title="searchmod" content=" " />
<roundcube:button command="reset-search" id="searchreset" class="iconbutton reset" title="resetsearch" content=" " />
</div>
</div>
<div id="mainscreencontent">
<div id="mailview-left">
<!-- folders list -->
@ -43,22 +59,6 @@
<div id="mailview-right">
<div id="messagesearchtools">
<!-- search filter -->
<div id="searchfilter">
<roundcube:object name="searchfilter" class="searchfilter decorated" />
</div>
<!-- search box -->
<div id="quicksearchbar" class="searchbox">
<roundcube:object name="searchform" id="quicksearchbox" />
<roundcube:button name="searchmenulink" id="searchmenulink" class="iconbutton searchoptions" onclick="UI.show_popup('searchmenu');return false" title="searchmod" content=" " />
<roundcube:button command="reset-search" id="searchreset" class="iconbutton reset" title="resetsearch" content=" " />
</div>
</div>
<roundcube:if condition="config:preview_pane == true" />
<div id="mailview-top" class="uibox">
<roundcube:else />
@ -119,9 +119,9 @@
</div><!-- end mailview-right -->
</div><!-- end mainscreen -->
</div><!-- end mainscreencontent -->
</div><!-- end minwidth -->
</div><!-- end mainscreen -->
<div id="searchmenu" class="popupmenu">
<ul class="toolbarmenu">

@ -20,6 +20,8 @@
<roundcube:if condition="!env:extwin" />
<div id="mainscreencontent">
<div id="mailview-left">
<!-- folders list -->
@ -31,7 +33,7 @@
</div>
<div id="mailview-right" class="offset uibox">
<div id="mailview-right" class="uibox">
<roundcube:else />
<roundcube:object name="mailboxlist" folder_filter="mail" type="js" />
@ -84,6 +86,10 @@
</div><!-- end mailview-right -->
<roundcube:if condition="!env:extwin" />
</div><!-- end mainscreencontent -->
<roundcube:endif />
</div><!-- end mainscreen -->
<div id="attachmentmenu" class="popupmenu">

@ -23,6 +23,8 @@
</div>
</div>
<div id="mainscreencontent">
<div id="mailview-left">
<!-- folders list -->
@ -40,6 +42,8 @@
</div><!-- end mailview-right -->
</div><!-- end mainscreencontent -->
</div><!-- end mainscreen -->
<roundcube:include file="/includes/footer.html" />

@ -16,6 +16,8 @@
<roundcube:container name="toolbar" id="messagetoolbar" />
</div>
<div id="mainscreencontent">
<div id="messagepartheader" class="uibox listbox">
<h2 class="boxtitle"><roundcube:label name="properties" /></h2>
<div class="scroller">
@ -29,6 +31,7 @@
</div>
</div>
</div>
</div>
<roundcube:include file="/includes/footer.html" />

@ -329,7 +329,7 @@ function rcube_mail_ui()
});
// set min-width to show all toolbar buttons
var screen = $('body > div.minwidth');
var screen = $('body.minwidth');
if (screen.length) {
screen.css('min-width', $('.toolbar').width() + $('#quicksearchbar').width() + $('#searchfilter').width() + 30);
}

Loading…
Cancel
Save