Oops, forgot the patch itself (Re: Switching from table layout to div layout in html)



-- 
Maurice van der Pot

Gentoo Linux Developer   griffon26 gentoo org    http://www.gentoo.org
Gnome Planner Developer  griffon26 kfk4ever com  http://live.gnome.org/Planner

Index: ChangeLog
===================================================================
--- ChangeLog	(revision 926)
+++ ChangeLog	(working copy)
@@ -1,3 +1,19 @@
+2008-07-27  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-22  Maurice van der Pot  <griffon26 kfk4ever com>
 
 	* src/Makefile.am:
Index: data/stylesheets/html1_css_ie.xsl
===================================================================
--- data/stylesheets/html1_css_ie.xsl	(revision 925)
+++ data/stylesheets/html1_css_ie.xsl	(working copy)
@@ -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;
Index: data/stylesheets/html1_tasks.xsl
===================================================================
--- data/stylesheets/html1_tasks.xsl	(revision 925)
+++ data/stylesheets/html1_tasks.xsl	(working copy)
@@ -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>
@@ -307,5 +309,6 @@
     </xsl:for-each>
   </table>
   </div>
+  </div>
 </xsl:template>
 </xsl:stylesheet>
Index: data/stylesheets/html1_css.xsl
===================================================================
--- data/stylesheets/html1_css.xsl	(revision 925)
+++ data/stylesheets/html1_css.xsl	(working copy)
@@ -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 @@
  * Footer
  */
 .footer {
+ float: left;
+ width: 100%;
  margin-top: 50px;  
  padding-top: 2px;
  border-style: dotted;
@@ -78,21 +80,42 @@
 
 
 /*
- * 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 {
  width: 100%;
  border-collapse: collapse;
@@ -174,16 +197,19 @@
  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 +217,33 @@
 }
 
 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;
 }
 
Index: data/stylesheets/html1_resources.xsl
===================================================================
--- data/stylesheets/html1_resources.xsl	(revision 925)
+++ data/stylesheets/html1_resources.xsl	(working copy)
@@ -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>
@@ -50,6 +51,7 @@
     </xsl:for-each>
   </table>
   </div>
+  </div>
 </xsl:template>
 
 
Index: data/stylesheets/html1_css_ie7.xsl
===================================================================
--- data/stylesheets/html1_css_ie7.xsl	(revision 0)
+++ data/stylesheets/html1_css_ie7.xsl	(revision 0)
@@ -0,0 +1,13 @@
+<?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>
Index: data/stylesheets/html1_gantt.xsl
===================================================================
--- data/stylesheets/html1_gantt.xsl	(revision 925)
+++ data/stylesheets/html1_gantt.xsl	(working copy)
@@ -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,12 +305,8 @@
     </xsl:for-each>
   </table>
   </div>
+  </div>
 
 
-  </td>
-  </tr>
-  </table>
-
-
 </xsl:template>
 </xsl:stylesheet>
Index: data/stylesheets/Makefile.am
===================================================================
--- data/stylesheets/Makefile.am	(revision 925)
+++ data/stylesheets/Makefile.am	(working copy)
@@ -4,6 +4,7 @@
 	planner2html.xsl		\
 	html1_css.xsl			\
 	html1_css_ie.xsl		\
+	html1_css_ie7.xsl		\
 	html1_gantt.xsl			\
 	html1_resources.xsl		\
 	html1_tasks.xsl			\
Index: data/stylesheets/planner2html.xsl
===================================================================
--- data/stylesheets/planner2html.xsl	(revision 925)
+++ data/stylesheets/planner2html.xsl	(working copy)
@@ -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>
 

Attachment: pgpucy2daTao8.pgp
Description: PGP signature



[Date Prev][Date Next]   [Thread Prev][Thread Next]   [Thread Index] [Date Index] [Author Index]