Commit f8983c6f authored by Maurice van der Pot's avatar Maurice van der Pot Committed by Maurice van der Pot

Switched over from tables to divs for layout. Markup and CSS was validated

2008-08-21  Maurice van der Pot  <griffon26@kfk4ever.com>

	* data/stylesheets/Makefile.am:
	* data/stylesheets/html1_css.xsl:
	* data/stylesheets/html1_css_ie.xsl:
	* data/stylesheets/html1_css_ie7.xsl:
	* data/stylesheets/html1_gantt.xsl:
	* data/stylesheets/html1_resources.xsl:
	* data/stylesheets/html1_tasks.xsl:
	* data/stylesheets/planner2html.xsl:
	Switched over from tables to divs for layout. Markup and CSS was validated
	and tested with Firefox 3.0.1 (perfect), Firefox 2.0.0.16 (minor issue with
	scrollbars), Opera 9.51 (perfect), Internet Explorer 6.0 & 7.0 (gantt
	scrollbars always visible, milestone diamond is shown as a square).
	Should fix bugs #471218 and #478027.


svn path=/trunk/; revision=931
parent 36154b3f
2008-08-21 Maurice van der Pot <griffon26@kfk4ever.com>
* data/stylesheets/Makefile.am:
* data/stylesheets/html1_css.xsl:
* data/stylesheets/html1_css_ie.xsl:
* data/stylesheets/html1_css_ie7.xsl:
* data/stylesheets/html1_gantt.xsl:
* data/stylesheets/html1_resources.xsl:
* data/stylesheets/html1_tasks.xsl:
* data/stylesheets/planner2html.xsl:
Switched over from tables to divs for layout. Markup and CSS was validated
and tested with Firefox 3.0.1 (perfect), Firefox 2.0.0.16 (minor issue with
scrollbars), Opera 9.51 (perfect), Internet Explorer 6.0 & 7.0 (gantt
scrollbars always visible, milestone diamond is shown as a square).
Should fix bugs #471218 and #478027.
2008-07-29 Maurice van der Pot <griffon26@kfk4ever.com>
* Makefile.win32: Fix makefile for Windows to work with both libpng <=
......
......@@ -4,6 +4,7 @@ stylesheet_DATA = \
planner2html.xsl \
html1_css.xsl \
html1_css_ie.xsl \
html1_css_ie7.xsl \
html1_gantt.xsl \
html1_resources.xsl \
html1_tasks.xsl \
......
......@@ -17,13 +17,13 @@
* Fonts
*/
html,body,table {
font-family: Bitstream Vera Sans, helvetica, Arial, sans-serif;
font-family: "Bitstream Vera Sans", helvetica, Arial, sans-serif;
font-size: 12px;
white-space: nowrap;
}
tr,td,th,table,font,span,div,h1,h2,h3 {
font-family: Bitstream Vera Sans, helvetica, Arial, sans-serif;
font-family: "Bitstream Vera Sans", helvetica, Arial, sans-serif;
}
h1 {
......@@ -56,6 +56,8 @@ table.proj-header .header {
* Footer
*/
.footer {
float: left;
width: 100%;
margin-top: 50px;
padding-top: 2px;
border-style: dotted;
......@@ -78,19 +80,40 @@ a:hover[href] {
/*
* Tables
* Layout
*/
.scroll-div {
overflow: auto;
.gantt, .gantt-tasklist, .gantt-chart, .tasklist, .resourcelist {
float: left;
}
.gantt-tasklist, .gantt-chart, .tasklist-table, .resourcelist-table {
border-style: solid;
border-width: 1px;
border-color: #aaa;
}
.no-scroll-div {
border-style: solid;
border-color: #aaa;
.gantt-tasklist, .gantt-chart, .tasklist, .resourcelist {
overflow: auto;
}
.gantt, .tasklist, .resourcelist {
clear: both;
width: 100%;
}
.gantt-tasklist {
border-width: 1px 0px 1px 1px;
width: 30%;
}
.gantt-chart {
border-color: #aaa #aaa #aaa #fff;
width: 69.5%;
}
.tasklist, .resourcelist {
clear: left;
}
table {
......@@ -135,7 +158,11 @@ th span, td span {
margin-right: 6px;
}
span.note {
th.note {
min-width: 20em;
}
td.note {
white-space: normal;
}
......@@ -174,16 +201,19 @@ div.gantt-empty-end {
margin-left: 0;
}
span.gantt-milestone {
font-size: 0.8em;
div.gantt-milestone {
float: left;
font-size: 0.9em;
color: #000000;
position: relative;
margin-left: 0;
margin-right: 0;
}
span.gantt-resources {
div.gantt-resources {
float: left;
margin-left: 0.5em;
white-space: nowrap;
}
th.gantt-1day-header {
......@@ -191,32 +221,33 @@ th.gantt-1day-header {
}
th.gantt-2day-header {
width: 38px;
width: 39px;
}
th.gantt-3day-header {
width: 57px;
width: 59px;
}
th.gantt-4day-header {
width: 76px;
width: 79px;
}
th.gantt-5day-header {
width: 95px;
width: 99px;
}
th.gantt-6day-header {
width: 114px;
width: 119px;
}
th.gantt-week-header {
width: 133px;
th.gantt-week-header, .gantt-resources {
width: 139px;
}
th.gantt-day-header {
margin: 0;
padding: 0;
padding-top: 1px;
padding-bottom: 1px;
width: 19px;
}
......
......@@ -9,6 +9,37 @@
* (see http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug)
*/
.gantt-resources {
overflow: hidden;
}
<!-- to prevent overlapping part of the content with the horizontal scrollbar
and to turn off the vertical scrollbar -->
.tasklist, .resourcelist {
overflow-x: auto;
overflow-y: hidden;
padding-bottom: 1em;
}
<!-- the padding in the above fix is visible (and ugly) in the gantt, so there
it's nicer to just have a disabled scrollbar -->
.gantt-tasklist, .gantt-chart {
overflow-x: scroll;
overflow-y: hidden;
}
<!-- fix a misalignment with the gantt-tasklist -->
.gantt-chart {
padding-bottom: 1px;
}
<!-- to prevent IE from showing scrollbars because the border of the table does
not fit within the container -->
.tasklist-table, .resourcelist-table {
width: 99.8%;
}
/*
div.gantt-empty-begin, div.gantt-empty-end, div.gantt-complete-done, div.gantt-complete-notdone, div.gantt-summary {
height: 1.75em;
......
<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE xsl:stylesheet [ <!ENTITY nbsp "&#160;"> ]>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns="http://www.w3.org/1999/xhtml">
<xsl:comment>
.gantt-chart {
padding-bottom: 0px;
}
</xsl:comment>
</xsl:stylesheet>
......@@ -76,9 +76,12 @@
</xsl:template>
<xsl:template name="gantt">
<div class="gantt">
<h2><a name="gantt"><xsl:value-of select="I18N:gettext('Gantt Chart')"/></a></h2>
<xsl:variable name="tmpdays" select="ceiling($projlength div 86400)"/>
<!-- add 7 days to make room for at least part of the resource names of tasks
that end close to the end of the project -->
<xsl:variable name="tmpdays" select="ceiling($projlength div 86400) + 7"/>
<xsl:variable name="days">
<xsl:choose>
......@@ -87,11 +90,7 @@
</xsl:choose>
</xsl:variable>
<table cellspacing="0" cellpadding="0" border="0">
<tr>
<td>
<div class="no-scroll-div">
<div class="gantt-tasklist">
<table cellspacing="0" cellpadding="0" border="1">
<tr class="header" align="left">
<th><span><xsl:value-of select="I18N:gettext('WBS')"/></span></th>
......@@ -186,10 +185,7 @@
</table>
</div>
</td>
<td>
<div class="scroll-div" style="border-color: #aaa #aaa #aaa #fff;">
<div class="gantt-chart">
<table cellspacing="0" cellpadding="0" border="1" style="table-layout: fixed;">
<tr class="header" align="left">
<xsl:call-template name="create-week-row">
......@@ -255,8 +251,8 @@
<xsl:choose>
<xsl:when test="@type = 'milestone'">
<span class="gantt-milestone">&#9670;</span>
<span class="gantt-resources">
<div class="gantt-milestone">&#9670;</div>
<div class="gantt-resources">
<xsl:variable name="task-id" select="@id"/>
<xsl:for-each select="/project/allocations/allocation[@task-id=$task-id]">
<xsl:sort data-type="number" select="@resource-id" order="descending"/>
......@@ -275,11 +271,11 @@
<xsl:text>, </xsl:text>
</xsl:if>
</xsl:for-each>
</span>
</div>
</xsl:when>
<xsl:otherwise>
<div class="gantt-empty-end"></div>
<span class="gantt-resources">
<div class="gantt-resources">
<xsl:variable name="task-id" select="@id"/>
<xsl:for-each select="/project/allocations/allocation[@task-id=$task-id]">
<xsl:sort data-type="number" select="@resource-id" order="descending"/>
......@@ -298,7 +294,7 @@
<xsl:text>, </xsl:text>
</xsl:if>
</xsl:for-each>
</span>
</div>
</xsl:otherwise>
</xsl:choose>
......@@ -309,11 +305,7 @@
</xsl:for-each>
</table>
</div>
</td>
</tr>
</table>
</div>
</xsl:template>
......
......@@ -23,9 +23,10 @@
<xsl:variable name="hasnotes"
select="boolean (count(//resource[@note!='']))"/>
<div class="resourcelist">
<h2><a name="resources"><xsl:value-of select="I18N:gettext('Resources')"/></a></h2>
<div class="scroll-div">
<div class="resourcelist-table">
<table cellspacing="0" cellpadding="0" border="1" width="100%">
<tr class="header" align="left">
<th><span><xsl:value-of select="I18N:gettext('Name')"/></span></th>
......@@ -35,7 +36,7 @@
<th><span><xsl:value-of select="I18N:gettext('Email')"/></span></th>
<th><span><xsl:value-of select="I18N:gettext('Cost')"/></span></th>
<xsl:if test="$hasnotes">
<th><span>Notes</span></th>
<th class="note"><span>Notes</span></th>
</xsl:if>
</tr>
......@@ -50,6 +51,7 @@
</xsl:for-each>
</table>
</div>
</div>
</xsl:template>
......@@ -104,7 +106,7 @@
</span>
</td>
<xsl:if test="$hasnotes">
<td>
<td class="note">
<span>
<xsl:value-of select="@note"/>
</span>
......
......@@ -42,9 +42,11 @@
<xsl:template match="tasks">
<xsl:variable name="hasproperties" select="boolean (count(//task/properties/property[@value!='']))"/>
<xsl:variable name="hasnotes" select="boolean (count(//task[@note!='']))"/>
<div class="tasklist">
<h2><a name="tasks"><xsl:value-of select="I18N:gettext('Tasks')"/></a></h2>
<div class="scroll-div">
<div class="tasklist-table">
<table cellspacing="0" cellpadding="0" border="1">
<tr class="header" align="left">
<th><span><xsl:value-of select="I18N:gettext('WBS')"/></span></th>
......@@ -56,7 +58,7 @@
<th><span><xsl:value-of select="I18N:gettext('Complete')"/></span></th>
<th><span><xsl:value-of select="I18N:gettext('Cost')"/></span></th>
<xsl:if test="$hasnotes">
<th><span>Notes</span></th>
<th class="note"><span>Notes</span></th>
</xsl:if>
</tr>
<xsl:for-each select="//task">
......@@ -152,10 +154,10 @@
</span>
</td>
<xsl:if test="$hasnotes">
<td>
<span class="note">
<td class="note">
<span>
<xsl:value-of select="@note"/>
</span>
</span>
</td>
</xsl:if>
</tr>
......@@ -217,8 +219,8 @@
</span>
</td>
<xsl:if test="$hasnotes">
<td>
<span class="note">
<td class="note">
<span>
<xsl:value-of select="@note"/>
</span>
</td>
......@@ -295,8 +297,8 @@
</span>
</td>
<xsl:if test="$hasnotes">
<td>
<span class="note">
<td class="note">
<span>
<xsl:value-of select="@note"/>
</span>
</td>
......@@ -307,5 +309,6 @@
</xsl:for-each>
</table>
</div>
</div>
</xsl:template>
</xsl:stylesheet>
......@@ -34,6 +34,7 @@
<!-- CSS file to be included in XHTML output -->
<xsl:variable name="css-stylesheet-local" select="'html1_css.xsl'"/>
<xsl:variable name="css-stylesheet-local-ie" select="'html1_css_ie.xsl'"/>
<xsl:variable name="css-stylesheet-local-ie7" select="'html1_css_ie7.xsl'"/>
<!-- Current date/time at UTC/GMT -->
......@@ -147,10 +148,15 @@
<xsl:value-of select="document($css-stylesheet-local)"/>
</style>
<xsl:comment>
<xsl:text>[if lte IE 6]&gt;&lt;style type="text/css"&gt;</xsl:text>
<xsl:text>[if IE]&gt;&lt;style type="text/css"&gt;</xsl:text>
<xsl:value-of select="document($css-stylesheet-local-ie)"/>
<xsl:text>&lt;/style&gt;&lt;![endif]</xsl:text>
</xsl:comment>
<xsl:comment>
<xsl:text>[if gte IE 7]&gt;&lt;style type="text/css"&gt;</xsl:text>
<xsl:value-of select="document($css-stylesheet-local-ie7)"/>
<xsl:text>&lt;/style&gt;&lt;![endif]</xsl:text>
</xsl:comment>
</head>
</xsl:template>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment