[prev in list] [next in list] [prev in thread] [next in thread]
List: rt-devel
Subject: [Rt-devel] [PATCH] css/html layout cleanup
From: Emmanuel Lacour <elacour () easter-eggs ! com>
Date: 2009-01-11 17:39:18
Message-ID: 20090111173916.GA3384 () easter-eggs ! com
[Download RAW message or body]
Dear RT hackers,
trying to resolve the following tickets, I did a first "rewrite" of RT
css/html. Goal was also to remove absolute/fixed positionning in favour
of dynamic positionning (using floats).
12437: problem with #topactions in konqueror
6823: try to make proper xhtml
12770: #nav in konqueror > 4
10079: display problem when $Showbar = 0
here is some comments of my work:
- tools in search results was not using $actions, but wrote ul/li itself
with bad positionning, so I moved it to an update of $actions in
Ticket/Elements/Tab
- 12770: was just a problem with the three "empty" <div> used between
<ul> and <li> which is not allowed, I just removed them with no side
effect it seems
- there was some curious ordering in html between page-navigation, nav,
header and quickbar, I moved them to have a simple layout: a top
"quickbar", a left "nav", a right "page" (new div, which contains
topactions, then page-navigation, then body) and a footer
- I don't think RT can be used without scrolling under less than
1024x768 screens, so I added a min-width of 76em to body to avoid
"page" to go down "nav" in case of overflow
- I leave the title (mostly ticket subject) in topactions to wrap and so
use two lines if necessary, this makes the navigation bar to go down if
needed, but seems far better to me than truncated subjects
I tested this with:
- ie6 win$
- ie7 win$
- ff2 win$
- safari win$
- ff3 GNU/Linux
- konqueror 4 GNU/Linux
12437, 12770 and 10079 seems resolved with this, there doesn't seems to
be major issues (doesn't looks worse than actually ;)).
Can you _test this_ then _report any major regression_ (with screenshots
and navigator version) before I commit this?
I now there is still some little bugs (mostly with ie6 :() and other
thinks I want to enhance, But I'm tired and prefer to commit this as
soon as possible and fix remaining issues one by one :)
PS: attached, test2.html which is the minimal layout I wanted to apply
on RT.
["layout-cleanup.patch" (text/x-diff)]
diff --git a/share/html/Elements/Footer b/share/html/Elements/Footer
index d5e3177..3707e70 100755
--- a/share/html/Elements/Footer
+++ b/share/html/Elements/Footer
@@ -47,7 +47,10 @@
%# END BPS TAGGED BLOCK }}}
%# End of div#body from /Elements/PageLayout
</div>
+%# End of div#page from /Elements/PageLayout
+</div>
% $m->callback( %ARGS );
+<div style="clear: both;"></div>
<div id="footer">
% if ($m->{'rt_base_time'}) {
<p id="time">
diff --git a/share/html/Elements/Header b/share/html/Elements/Header
index ef50839..1348cef 100755
--- a/share/html/Elements/Header
+++ b/share/html/Elements/Header
@@ -50,6 +50,7 @@
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head>
+<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title><%$Title%></title>
@@ -83,9 +84,9 @@
<body<% $id && qq[ id="comp-$id"] |n %>>
% if ($ShowBar) {
-<& /Elements/Logo, %ARGS &>
<div id="quickbar">
+<& /Elements/Logo, %ARGS &>
<div id="quick-personal">
<span class="hide"><a href="#skipnav"><&|/l&>Skip Menu</&></a> | </span>
% if ($session{'CurrentUser'}->Name) {
diff --git a/share/html/Elements/Login b/share/html/Elements/Login
index 8dfbe51..f30bfba 100755
--- a/share/html/Elements/Login
+++ b/share/html/Elements/Login
@@ -70,6 +70,7 @@ my $form_action = defined $goto ? $goto
<& /Elements/Header, Title => loc('Login'), Focus => 'user' &>
+<div style="clear: both;"></div>
%# End of div#quickbar from /Elements/Header
</div>
diff --git a/share/html/Elements/Menu b/share/html/Elements/Menu
index 83644da..e6a6eb9 100755
--- a/share/html/Elements/Menu
+++ b/share/html/Elements/Menu
@@ -46,7 +46,6 @@
%#
%# END BPS TAGGED BLOCK }}}
<ul<% !$level ? ' id="system-menu"' : ''|n %><% $menu_class ? qq[ \
class="$menu_class"] : ''|n %>>
-<div<% $menu_class ? qq[ class="$menu_class"] : ''|n %>><div class="wrapper">
<%perl>
my $sep = 0;
my $postsep = 0;
@@ -117,7 +116,6 @@ my @tabs = sort keys %$toptabs;
%
% $postsep = $sep;
% }
-</div></div>
</ul>
<%INIT>
diff --git a/share/html/Elements/PageLayout b/share/html/Elements/PageLayout
index 4ab89ad..ac44347 100755
--- a/share/html/Elements/PageLayout
+++ b/share/html/Elements/PageLayout
@@ -45,12 +45,8 @@
%# those contributions and any derivatives thereof.
%#
%# END BPS TAGGED BLOCK }}}
-<div id="topactions">
-% foreach my $action (reverse sort keys %{$topactions}) {
-<span class="topaction" id="topaction-<%$action%>"><% \
$topactions->{"$action"}->{'html'} |n %></span>
-% }
-</div>
+<div style="clear: both;"></div>
%# End of div#quickbar from /Elements/Header
</div>
@@ -60,8 +56,18 @@
</div>
% }
+%# Right page
+<div id="page">
+
<div id="header">
<h1><% $title %></h1>
+<div id="topactions">
+% foreach my $action (reverse sort keys %{$topactions}) {
+<div class="topaction" id="topaction-<%$action%>"><% \
$topactions->{"$action"}->{'html'} |n %></div> +% }
+</div>
+<div style="clear: both;"></div>
+</div>
<div id="page-navigation">
% my $sep = 0;
% my $postsep = 0;
@@ -69,7 +75,6 @@
% my $class = { };
%
<ul id="page-menu" <% (($actions && %$actions) || ($subactions && %$subactions)) \
&& q[ class="actions-present"] | n %>>
- <div><div><div>
<%perl>
if ($page_tabs) {
my @tabs = ( sort grep { $_ !~ /^(?:current_toptab|this)$/ } keys \
%{$page_tabs}); @@ -108,9 +113,13 @@
% } else {
% }
- </div></div></div>
</ul>
+</div>
+<div id="body">
+% $m->callback( %ARGS, CallbackName => 'BeforeBody' );
+% $m->flush_buffer(); # we've got the page laid out, let's flush the buffer;
+
% if (($actions && %$actions) || ($subactions && %$subactions)) {
<ul id="actions-menu">
<div><div><div>
@@ -153,11 +162,6 @@
</div></div></div>
</ul>
% }
-</div>
-</div>
-<div id="body">
-% $m->callback( %ARGS, CallbackName => 'BeforeBody' );
-% $m->flush_buffer(); # we've got the page laid out, let's flush the buffer;
<%INIT>
if ( defined $current_toptab ) {
diff --git a/share/html/Elements/Refresh b/share/html/Elements/Refresh
index 7e36c68..f080c5b 100755
--- a/share/html/Elements/Refresh
+++ b/share/html/Elements/Refresh
@@ -45,7 +45,7 @@
%# those contributions and any derivatives thereof.
%#
%# END BPS TAGGED BLOCK }}}
-<select name="<%$Name%>">
+<select name="<%$Name%>" id="<%$Name%>">
<option value="-1"
%unless ($Default) {
selected="selected"
diff --git a/share/html/NoAuth/Logout.html b/share/html/NoAuth/Logout.html
index 5a4926b..9a830f5 100755
--- a/share/html/NoAuth/Logout.html
+++ b/share/html/NoAuth/Logout.html
@@ -46,6 +46,7 @@
%#
%# END BPS TAGGED BLOCK }}}
<& /Elements/Header, Title => loc('Logout'), Refresh => "1;URL=$URL" &>
+<div style="clear: both;"></div>
</div>
<div id="body" class="login-body">
diff --git a/share/html/NoAuth/css/web2/layout.css \
b/share/html/NoAuth/css/web2/layout.css index 5fcb15f..7f5a063 100644
--- a/share/html/NoAuth/css/web2/layout.css
+++ b/share/html/NoAuth/css/web2/layout.css
@@ -56,73 +56,69 @@ body {
background: #547CCC \
url(<%RT->Config->Get('WebPath')%>/NoAuth/css/web2/images/background-gradient.png) \
top left repeat-x ; font-family: arial, helvetica, sans-serif;
+ /* below this total width, it's impossible to display RT left page will not
+ fit and go under nav, FIXME : doesn't works for IE 6 :( */
+ min-width: 76em;
+}
+
+div#page {
+ float: left;
+ width: 87.9%;
}
div#body {
- position: relative;
padding: 1em;
padding-top: 1.8em;
-moz-border-radius: 0.5em;
-webkit-border-radius: 0.5em;
- margin-left: 10.5em;
- margin-top: 5.2em;
+ margin-top: 1em;
+ margin-left: 1em;
margin-right: 1em;
- margin-bottom: 0em;
+ /* cross browser min-height */
min-height: 10%;
+ height: auto !important;
+ height: 10%;
+ /* end */
background: #fff;
border-top: 2px solid #ccc;
border-left: 2px solid #ccc;
- z-index:1;
+}
+div#header {
+ margin-left: 1em;
+ margin-right: 1em;
}
#topactions {
- position: absolute;
background: transparent;
- top: 3.8em;
- right: 1em;
- width: auto;
- min-width: 42em;
font-size: 0.9em;
- z-index: 99;
-}
-
-#topactions form * {
- vertical-align: top;
+ float: right;
+ width: 60%;
+ margin-top: 1.1em;
+ text-align: right;
}
#topactions button, #topactions select, #topactions input{
- padding-top: 0em;
- padding-bottom: 0em;
- width: 8em;
+ padding: 0em;
+ margin: 0em;
}
-#topactions form {
- display: block;
-
+#topactions div {
+ display: inline;
}
#topactions #CreateTicketInQueue {
- text-align: right;
-
-}
-#topactions #simple-search {
- float: right;
+ display: inline;
}
-#topactions #simple-search input.button {
- width: 5em;
+#topactions #simple-search {
+ display: inline;
}
-#topactions #simple-search .field{
- margin-left: 1em;
- }
div#footer {
- position: absolute;
- right: 0;
- text-align: right;
+ text-align: right;
font-size: 0.9em;
margin-top: 2em;
background: #fff;
@@ -133,6 +129,8 @@ div#footer {
+ float: right;
+ width: 40%;
border-top: 2px solid #aaa;
border-left: 2px solid #aaa;
@@ -146,7 +144,7 @@ div#footer {
}
div#footer #time {
-display: none ;
+ display: none ;
}
div#footer #bpscredits {
@@ -159,23 +157,18 @@ div#footer #bpscredits {
/* logo stuff */
div#logo {
+ float: left;
}
div#logo a {
display: none;
- position: absolute;
- left: 0;
- bottom: 0;
}
div#logo a img {
border: 0;
}
div#logo .rtname {
- position: absolute;
font-weight: bold;
- top: 1em;
- left: 1em;
}
@@ -189,30 +182,28 @@ div#quickbar a, div#logo a {
div#quickbar {
background: #eaeaea;
- padding-top: 1em;
+ padding-top: 0.5em;
padding-left: 1em;
+ padding-right: 1em;
padding-bottom: 0.5em;
- height: 1em;
border-bottom: 1px solid #ccc;
}
div#quick-personal {
- position: absolute;
- right: 1em;
- top: 1em;
+ float: right;
+ width: 50%;
+ text-align: right;
}
div#header h1 {
- position: absolute;
- left: 7.25em;
- right: 20em;
+ float: left;
overflow: hidden;
- height: 1em;
font-size: 1.4em;
margin-top: 0.4em;
- padding: 0.25em;
+ padding: 0.25em 0.25em 0em 0em;
color: #fff;
+ width: 39%;
}
/* in multi-column layouts, make sure we have an internal gutter */
diff --git a/share/html/NoAuth/css/web2/msie.css \
b/share/html/NoAuth/css/web2/msie.css index 943c467..b84e3d7 100644
--- a/share/html/NoAuth/css/web2/msie.css
+++ b/share/html/NoAuth/css/web2/msie.css
@@ -45,76 +45,6 @@
%# those contributions and any derivatives thereof.
%#
%# END BPS TAGGED BLOCK }}}
-div#body {
- left: 0.25em;
- height: 100%;
- top: 1em;
-
-}
-
-
-#footer {
- padding: 1em;
-}
-
-
-div#header h1 {
- position: absolute;
- left: 7.25em;
- overflow: hidden;
- height: 1em;
- font-size: 1.4em;
- margin-top: 0.4em;
- right: 23.5em;
- padding: 0.25em;
-}
-
-
-#topactions {
- top: 4.1em;
- width: auto;
-}
-.topaction form * {
- vertical-align: top;
-}
-
-.topaction form button, .topaction form input {
- height: 2em;
-}
-
-.topaction form input.field {
- height: 1.6em;
-}
-
-.topaction .select-queue {
- margin-top: 0.2em;
-}
-
-div#page-navigation ul#actions-menu {
- margin-top: -2.9em;
- margin-right: -0.2em;
- border-top: 1px solid #ccc;
- border-right: none;
-}
-
-
-div#page-navigation {
- position: absolute;
- top: 6.2em;
- height: 1.8em;
- background: #fff;
- border-top: 2px solid #ccc;
-}
-
-
-
-div#page-navigation ul#page-menu {
- margin-top: -2.5em;
- margin-left: 4em;
- background: none;
- border: none;
-}
-
div#quickbar { height: 1.2em;
@@ -132,22 +62,6 @@ div#quickbar { height: 1.2em;
left: 60%;
}
-div#nav li.first {
- margin-top: 0.75em;
- border-top: none;
-}
-div#nav ul ul li.first {
- border-top: 1px solid #cccccc;
- margin-top: 0.25em;
-}
-
-div#nav li.last {
- border-bottom: none;
- padding-bottom: 0;
- margin-bottom: 0;
-}
-
-
.ticket-transaction .type a { font-weight: normal; text-decoration: none; color: \
#fff; }
@@ -231,4 +145,4 @@ table.queue-summary td, td.collection-as-table {
#comp-Search-Build #pick-criteria td.operator {
width: 7.5em;
-}
\ No newline at end of file
+}
diff --git a/share/html/NoAuth/css/web2/msie6.css \
b/share/html/NoAuth/css/web2/msie6.css index d192313..fe647a3 100644
--- a/share/html/NoAuth/css/web2/msie6.css
+++ b/share/html/NoAuth/css/web2/msie6.css
@@ -49,10 +49,6 @@
margin-top: 0;
}
-div#page-navigation ul#page-menu {
- margin-top: -3.2em;
-}
-
.titlebox-title .widget {
top: -1em;
left: 0.5em;
diff --git a/share/html/NoAuth/css/web2/nav.css b/share/html/NoAuth/css/web2/nav.css
index b8e5da3..7dce085 100644
--- a/share/html/NoAuth/css/web2/nav.css
+++ b/share/html/NoAuth/css/web2/nav.css
@@ -46,20 +46,24 @@
%#
%# END BPS TAGGED BLOCK }}}
div#nav {
- position: absolute;
- left: 0;
font-size: 0.9em;
- top: 3.2em;
- width: 10.5em;
+ width: 12%;
background: #fff;
-moz-border-radius-bottomright: 0.5em;
-webkit-border-bottom-right-radius: 0.5em;
- border-left: 1px solid #999;
-border-top: 1px solid #999;
+ border-left: 1px solid #999;
+ border-top: 1px solid #999;
-moz-border-radius-topright: 0.5em;
-webkit-border-top-right-radius: 0.5em;
- z-index: 99;
+
+ /* cross browser min-height */
+ min-height: 5%;
+ height: auto !important;
+ height: 5%;
+ /* end */
+ float: left;
+ margin-top: 1em;
}
@@ -133,46 +137,32 @@ div#nav a.selected:after {
}
div#page-navigation {
- background: white;
- position: relative;
- width:100%;
- z-index: 10;
-
+ margin-right: 0;
+ margin-left: 0;
}
div#page-navigation ul {
-
+ margin: 0;
+ padding: 0;
}
div#page-navigation ul#page-menu {
- display: block;
- position: absolute;
- left: 8em;
font-size: 0.9em;
- top: 2.3em;
min-height: 1em;
background-color: white;
- right: 0em;
padding-top:0.3em;
padding-bottom:0.5em;
+ padding-left: 1em;
border-top: 1px solid #aaa;
}
-/* ie hack */
-* html div#page-navigation ul#page-menu {
- left: 6.5em;
- top: 3.2em;
- padding-left: 2em;
-}
-
-div#page-navigation ul#actions-menu {
- position: absolute;
- right: 1em;
- top: 5.2em;
- margin-top: 0em;
+div#body ul#actions-menu {
+ float: right;
+ margin-top: -1.9em;
+ margin-right: -1em;
padding: 0.25em;
padding-left: 0.5em;
padding-right: 0.5em;
@@ -191,6 +181,12 @@ div#page-navigation ul#actions-menu {
+div#body ul#actions-menu li{
+ display: inline;
+
+}
+
+
div#page-navigation ul li{
display: inline;
diff --git a/share/html/NoAuth/css/web2/ticket-search.css \
b/share/html/NoAuth/css/web2/ticket-search.css index a9af6a3..5fa9670 100644
--- a/share/html/NoAuth/css/web2/ticket-search.css
+++ b/share/html/NoAuth/css/web2/ticket-search.css
@@ -197,3 +197,8 @@
float: left;
}
+/* Force some widget to fit at max parent box */
+#HomeRefreshInterval, #SavedSearchLoad, #SavedSearchOwner {
+ width: 100%;
+}
+
diff --git a/share/html/NoAuth/css/web2/ticket.css \
b/share/html/NoAuth/css/web2/ticket.css index aed9b5a..ad5345a 100644
--- a/share/html/NoAuth/css/web2/ticket.css
+++ b/share/html/NoAuth/css/web2/ticket.css
@@ -48,6 +48,7 @@
div#ticket-history div.ticket-transaction {
border-top: 1px solid #ccc;
padding-bottom: 0.25em;
+ position: relative;
}
@@ -65,9 +66,13 @@ div#ticket-history {
}
+.ticket-transaction div.metadata {
+ position: relative;
+}
.ticket-transaction div.metadata span.actions {
position: absolute;
- right: 2.3em;
+ right: 0;
+ top: 0;
padding: 0em;
background: #ccc;
text-align: right;
diff --git a/share/html/Search/Elements/ResultViews \
b/share/html/Search/Elements/ResultViews index b438b56..dfbf841 100644
--- a/share/html/Search/Elements/ResultViews
+++ b/share/html/Search/Elements/ResultViews
@@ -56,14 +56,6 @@ $RSSFeedURL => undef
$ShortQueryString => undef
</%args>
-<ul class="search-result-views">
-<li><a href="<%RT->Config->Get('WebPath')%>/Search/Results.tsv<%$QueryString%>"><&|/l&>Spreadsheet</&></a></li>
-<li><a href="<%$RSSFeedURL%>"><&|/l&>RSS</&></a></li>
-<li><a href="<%RT->Config->Get('WebURL')%>/NoAuth/iCal/<% $ical_path %>"><% \
loc('iCal') %></a></li>
-<li><a href="<%RT->Config->Get('WebPath')%>/Tools/Offline.html<%$ShortQueryString%>"><&|/l&>Editable \
text</&></a></li>
-% # Now let callbacks add their extra tools
-% $m->callback( %ARGS, CallbackName => 'AfterTools' );
-</ul>
<form method="get" action="<%RT->Config->Get('WebPath')%>/Search/Chart.html">
% my %hiddens = (Query => $Query, Format => $Format, Rows => $Rows, OrderBy => \
$OrderBy, Order => $Order); % foreach my $key (keys(%hiddens)) {
diff --git a/share/html/Search/Results.html b/share/html/Search/Results.html
index 53b406c..bb0c180 100755
--- a/share/html/Search/Results.html
+++ b/share/html/Search/Results.html
@@ -53,6 +53,9 @@
Title => $title,
Format => $Format,
Query => $Query,
+ QueryString => $QueryString,
+ RSSFeedURL => $RSSFeedURL,
+ ShortQueryString => $ShortQueryString,
Rows => $Rows,
OrderBy => $OrderBy,
Order => $Order,
diff --git a/share/html/Ticket/Elements/Tabs b/share/html/Ticket/Elements/Tabs
index 55b4b87..0fe63bc 100755
--- a/share/html/Ticket/Elements/Tabs
+++ b/share/html/Ticket/Elements/Tabs
@@ -308,6 +308,34 @@ if ($has_query) {
}
+# Tools for result view
+if ( $QueryString && ! $Ticket ) {
+my $ical_path = join '/', map $m->interp->apply_escapes($_, 'u'),
+ $session{'CurrentUser'}->UserObj->Name,
+ $session{'CurrentUser'}->UserObj->GenerateAuthString( $Query ),
+ $Query;
+
+ $actions->{'A'} = {
+ title => loc('Spreadsheet'),
+ path => "Search/Results.tsv".$QueryString,
+ };
+ $actions->{'B'} = {
+ title => loc('RSS'),
+ path => $RSSFeedURL,
+ };
+ $actions->{'C'} = {
+ title => loc('iCal'),
+ path => "NoAuth/iCal/".$ical_path,
+ };
+ $actions->{'D'} = {
+ title => loc('Editable text'),
+ path => "Tools/Offline.html".$ShortQueryString,
+ };
+ # Now let callbacks add their extra tools
+ $m->callback( Query => $Query, QueryString => $QueryString, ShortQueryString => \
$ShortQueryString, actions=> $actions, tabs => $tabs, %ARGS, CallbackName => \
'AfterResultTools' ); +
+}
+
foreach my $searchtab ( keys %{$searchtabs} ) {
( $searchtab =~ /^_/ )
? $tabs->{ "s" . $searchtab } = $searchtabs->{$searchtab}
@@ -324,4 +352,8 @@ $current_tab => ''
$current_subtab => ''
$Title => undef
$RowsPerPage => undef
+$Query => undef
+$RSSFeedURL => undef
+$ShortQueryString => undef
+$QueryString => undef
</%ARGS>
["test2.html" (text/html)]
<html>
<body>
<style>
body {
margin: 0em;
}
div#quickbar {
background: #f00000;
width: 100%;
}
div#nav {
background: #8f0000;
width: 12%;
/* cross browser min-height */
min-height: 20em;
height: auto !important;
height: 20em;
/* end */
float: left;
margin-top: 1em;
}
div#page {
float: left;
width: 88%;
}
div#header {
background: #00f000;
margin-left: 1em;
width: 100%;
}
div#header h1 {
float: left;
width: 60%;
margin: 0em;
background: #acacac;
}
div#header div#topactions {
float: right;
width: 40%;
margin-top: 0.5em;
background: #5c5c5c;
}
div#page-navigation {
background: #8f0000;
margin-left: 0;
margin-right: 0;
}
div#body {
background: #0000f0;
/* cross browser min-height */
min-height: 30em;
height: auto !important;
height: 30em;
/* end */
margin-left: 1em;
margin-top: 1em;
width: 100%
}
div#footer {
background: #00008f;
float: right;
width: 20em;
margin-top: 1em;
}
</style>
<!-- Layout -->
<div id="quickbar">quickbar</div>
<div class="clear: both;"></div>
<div id="nav">
<ul>
<li>nav1</li>
<li>nav1</li>
<li>nav1</li>
<li>nav1</li>
</ul>
</div>
<div id="page">
<div id="header">
<h1>title</h1>
<div id="topactions">topactions</div>
<div style="clear: both;"></div>
</div>
<div id="page-navigation">page-navigation</div>
<div id="body">body</div>
</div>
<div style="clear: both;"></div>
<div id="footer">footer</div>
</body>
</html>
_______________________________________________
List info: http://lists.bestpractical.com/cgi-bin/mailman/listinfo/rt-devel
[prev in list] [next in list] [prev in thread] [next in thread]
Configure |
About |
News |
Add a list |
Sponsored by KoreLogic