- Xtemplate improvements by Ax. Patch 190.

3 files changed, 143 insertions, 124 deletions

diff --git a/themes/xtemplate/xtemplate.css b/themes/xtemplate/xtemplate.css
index baef82131..9f2196658 100644
--- a/themes/xtemplate/xtemplate.css
+++ b/themes/xtemplate/xtemplate.css
@@ -1,12 +1,14 @@
 /* $Id$ */
 
+/*
+** HTML elements
+*/
 body {
   margin: 0;
   padding: 0;
   color: #000;
   background-color: #fff;
-  font-family: verdana, arial, helvetica, sans-serif;
-  font-size: 76%;
+  font: 76% Tahoma, Verdana, Arial, Helvetica, sans-serif;
 }
 tr.dark {
   background-color: #ddd;
@@ -17,6 +19,9 @@ tr.light {
 tr.dark td, tr.light td {
   padding: 0.3em;
 }
+h1, h2, h3, h4, h5, h6 {
+  margin: 0;
+}
 h1 {
   font-size: 1.2em;
 }
@@ -44,12 +49,37 @@ fieldset {
   border: 1px solid #ccc;
 }
 p {
-  margin: 0 0 1em 0;
+  margin: 0 0 .5em 0;
   padding: 0;
 }
 img {
   border-width: 0;
 }
+pre {
+  background-color: #eee;
+  padding: 0.75em 1.5em;
+  font-size: 12px;
+  border: 1px solid #ddd;
+}
+table {
+  /* make <td> sizes relative to body size! */
+  font-size: 1em;
+}
+.form-item {
+  margin-top: 1em;
+}
+.form-item label {
+  font-size: 1em;
+  color: #222;
+}
+.item-list .title {
+  font-size: 1em;
+  color: #222;
+}
+
+/*
+** Page layout blocks / IDs
+*/
 #header, #content {
   width: 100%;
 }
@@ -112,25 +142,25 @@ img {
   /* padding in px not ex because IE messes up 100% width tables otherwise */
   padding: 10px;
 }
-#mission, #main .node .content, .comment .content {
+#mission, .node .content, .comment .content {
   line-height: 1.4;
 }
 #help {
   font-size: 0.9em;
   margin-bottom: 1em;
 }
-.error-message {
-  background-color: #eee;
-  border: 1px solid red;
-  padding: 0.3em;
-  margin-bottom: 1em;
+.breadcrumb {
+  margin-bottom: .5em;
 }
-.status-message {
+.message {
   background-color: #eee;
   border: 1px solid #ccc;
   padding: 0.3em;
   margin-bottom: 1em;
 }
+.error {
+  border-color: red;
+}
 #sidebar-left, #sidebar-right {
   background-color: #ddd;
   width: 16em;
@@ -143,15 +173,28 @@ img {
   padding: 1em;
   font-size: 0.8em;
 }
-#forum td {
-  padding: 0.5em 0.5em 0.5em 0.5em;
+
+/*
+** Common declarations for child classes of node, comment, block, box, etc.
+** If you want any of them styled differently for a specific parent, add
+** additional rules /with only the differing properties!/ to .parent .class.
+** See .comment .title for an example.
+*/
+.title, .title a {
+  font-weight: bold;
+  font-size: 1.3em;
+  color: #777;
+  margin: 0 auto 0 auto;  /* decrease default margins for h<x>.title */
 }
-#forum td.statistics, #forum td.settings, #forum td.pager {
-  height: 1.5em;
-  border: 1px solid #bbb;
+.submitted {
+  color: #999;
+  font-size: 0.8em;
 }
-table {
-  font-size: 1em;
+.links {
+  color: #999;
+}
+.links a {
+  font-weight: bold;
 }
 .block, .box {
   padding: 0 0 1.5em 0;
@@ -161,56 +204,35 @@ table {
   padding-bottom: 0.75em;
   margin-bottom: 1.5em;
 }
-.comment {
-  border: 1px solid #abc;
-  padding: 0 1.5em 1.5em 1.5em;
-  margin: 0.5em 0 0.5em 0;
+.block .title {
+  margin-bottom: .25em;
 }
-.node h2, .node h2 a, .block h2, .box h2 {
-  font-weight: bold;
-  font-size: 1.3em;
-  color: #777;
+.box .title {
+  font-size: 1.1em;
 }
-.static-node {
+.node {
+  margin: .5em 0 1em 0;
+}
+.static {
+  padding: .5em;
   background-color: #eee;
   border: solid 1px #ddd;
-  padding: 0em 1em 1em 1em;
-}
-.form-item label {
-  font-size: 1em;
-  color: #222;
-}
-.item-list .title {
-  font-size: 1em;
-  color: #222;
 }
-.node .author, .comment .author {
-  color: #999;
-  font-size: 0.8em;
-  padding-bottom: 1em;
+.node .content, .comment .content {
+  padding: .5em 0 .75em 0;
 }
 .node .taxonomy {
   color: #999;
   font-size: 0.8em;
   padding: 1.5em;
 }
-.node .content, .comment .content {
-  padding-top: 0.5em;
-}
-.node .links, .comment .links {
-  padding-top: 0.5em;
-  color: #999;
-}
-.node .links a, .comment .links a {
-  font-weight: bold;
-}
-.path a, .path a:visited {
-  color: #777;
+.comment {
+  border: 1px solid #abc;
+  padding: .5em;
+  margin-bottom: 1em;
 }
-.comment h3 {
-  font-weight: bold;
+.comment .title {
   font-size: 1.1em;
-  color: #777;
 }
 .comment .new {
   text-align: right;
@@ -219,6 +241,10 @@ table {
   float: right;
   color: red;
 }
+
+/*
+** Module specific styles
+*/
 #tracker th {
   text-align: left;
   border-bottom: 1px solid #ddd;
@@ -231,6 +257,16 @@ table {
   padding: 1em 1em 1em 0;
   border-bottom: 1px solid #ddd;
 }
+#forum td {
+  padding: 0.5em 0.5em 0.5em 0.5em;
+}
+#forum td.statistics, #forum td.settings, #forum td.pager {
+  height: 1.5em;
+  border: 1px solid #bbb;
+}
+.block-forum h3 {
+  margin-bottom: .5em;
+}
 .calendar a {
   text-decoration: none;
 }
@@ -266,12 +302,3 @@ table {
 .calendar .row-week td a:hover {
   background-color: #fff; color: #000;
 }
-pre {
-  background-color: #eee;
-  padding: 0.75em 1.5em;
-  font-size: 12px;
-  border: 1px solid #ddd;
-}
-.content li {
-  padding-bottom: 0.25em;
-}
diff --git a/themes/xtemplate/xtemplate.theme b/themes/xtemplate/xtemplate.theme
index 09022d506..069a31d45 100644
--- a/themes/xtemplate/xtemplate.theme
+++ b/themes/xtemplate/xtemplate.theme
@@ -36,28 +36,24 @@ function xtemplate_node($node, $main = 0, $page = 0) {
 
   $xtemplate->template->assign(array(
         "link"      => url("node/view/$node->nid"),
-        "title"     => ucfirst($node->title),
+        "title"     => $node->title,
         "author"    => format_name($node),
         "date"      => format_date($node->created),
-        "classes"   => ($main && $node->static) ? 'node static-node' : 'node',
+        "static"    => ($main && $node->static) ? 'static' : '',
         "content"   => ($main && $node->teaser) ? $node->teaser : $node->body));
 
+  if ($page == 0) {
+    $xtemplate->template->parse("node.title");
+  }
+
   if (module_exist("taxonomy") && ($taxonomy = taxonomy_link("taxonomy terms", $node))) {
     $xtemplate->template->assign("taxonomy", theme_links($taxonomy));
-  }
-  else {
-    $xtemplate->template->assign("taxonomy", "");
+    $xtemplate->template->parse("node.taxonomy");
   }
 
   if ($links = link_node($node, $main)) {
     $xtemplate->template->assign("links", theme_links($links));
-  }
-  else {
-    $xtemplate->template->assign("links", "");
-  }
-
-  if ($page == 0) {
-    $xtemplate->template->parse("node.title");
+    $xtemplate->template->parse("node.links");
   }
 
   $xtemplate->template->parse("node");
@@ -66,26 +62,27 @@ function xtemplate_node($node, $main = 0, $page = 0) {
   return $output;
 }
 
-function xtemplate_comment($comment, $link = 0) {
+function xtemplate_comment($comment, $links = 0) {
   global $xtemplate;
 
   $xtemplate->template->assign(array (
-        "title"     => ucfirst($comment->subject),
-        "author"    => format_name($comment),
-        "date"      => format_date($comment->timestamp),
-        "content"   => $comment->comment,
-        "links"     => $link));
+    "title"   => $comment->subject,
+    "author"  => format_name($comment),
+    "date"    => format_date($comment->timestamp),
+    "content" => $comment->comment
+  ));
 
   if ($comment->new) {
-    $xtemplate->template->parse("comment_new");
-    $output = $xtemplate->template->text("comment_new");
-    $xtemplate->template->reset("comment_new");
+    $xtemplate->template->parse("comment.new");
   }
-  else {
-    $xtemplate->template->parse("comment_old");
-    $output = $xtemplate->template->text("comment_old");
-    $xtemplate->template->reset("comment_old");
+  if ($links) {
+    $xtemplate->template->assign("links", $links);
+    $xtemplate->template->parse("comment.links");
   }
+  $xtemplate->template->parse("comment");
+  $output = $xtemplate->template->text("comment");
+  $xtemplate->template->reset("comment");
+
   return $output;
 }
 
@@ -111,8 +108,8 @@ function xtemplate_header() {
   }
 
   if ($message = drupal_get_message()) {
-    $xtemplate->template->assign("class", $message->type ."-message");
-    $xtemplate->template->assign("message", ucfirst($message->message));
+    $xtemplate->template->assign("message", $message->message);
+    $xtemplate->template->assign("type", $message->type);
     $xtemplate->template->parse("header.message");
   }
 
@@ -146,7 +143,7 @@ function xtemplate_block(&$block) {
 
   // create template variables for all block variables (module, delta, region, subject, content, ...)
   foreach ($block as $key => $value) {
-    $xtemplate->template->assign($key, $value);
+    $xtemplate->template->assign($key == "subject" ? "title" : $key, $value); // TODO: standardize on 'title' (ie. rename all $block["subject"] to "title")
   }
   $xtemplate->template->parse("block");
   $output = $xtemplate->template->text("block");
@@ -158,7 +155,7 @@ function xtemplate_box($title, $content, $region = "main") {
   global $xtemplate;
 
   $xtemplate->template->assign(array(
-        "subject" => $title,
+        "title" => $title,
         "content" => $content));
 
   $xtemplate->template->parse("box");
diff --git a/themes/xtemplate/xtemplate.xtmpl b/themes/xtemplate/xtemplate.xtmpl
index 93c051456..f481ae8a9 100644
--- a/themes/xtemplate/xtemplate.xtmpl
+++ b/themes/xtemplate/xtemplate.xtmpl
@@ -1,6 +1,5 @@
 <!-- BEGIN: header -->
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-
 <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
 
 <head>
@@ -34,66 +33,62 @@
 <table border="0" cellpadding="0" cellspacing="0" id="content">
   <tr>
     <!-- BEGIN: blocks -->
-      <td id="sidebar-left">
-        {blocks}
-      </td>
+    <td id="sidebar-left">
+      {blocks}
+    </td>
     <!-- END: blocks -->
     <td valign="top">
       <!-- BEGIN: mission -->
-       <div id="mission">{mission}</div>
+      <div id="mission">{mission}</div>
       <!-- END: mission -->
-     <div id="main">
-       {breadcrumb}
-       <h1>{body_title}</h1>
-       <!-- BEGIN: help -->
+      <div id="main">
+        {breadcrumb}
+        <h1 class="title">{body_title}</h1>
+        <!-- BEGIN: help -->
         <div id="help">{help}</div>
-       <!-- END: help -->
-       <!-- BEGIN: message -->
-        <div class="{class}">{message}</div>
-       <!-- END: message -->
+        <!-- END: help -->
+        <!-- BEGIN: message -->
+        <div class="message {type}">{message}</div>
+        <!-- END: message -->
 <!-- END: header -->
 
 <!-- BEGIN: node -->
-  <div class="{classes}">
+  <div class="node {static}">
     <!-- BEGIN: title -->
-    <h2><a href="{link}">{title}</a></h2>
+    <h2 class="title"><a href="{link}">{title}</a></h2>
     <!-- END: title -->
-    <span class="author">Submitted by {author} on {date}.</span>
+    <span class="submitted">Submitted by {author} on {date}.</span>
+    <!-- BEGIN: taxonomy -->
     <span class="taxonomy">{taxonomy}</span>
+    <!-- END: taxonomy -->
     <div class="content">{content}</div>
+    <!-- BEGIN: links -->
     <div class="links">&raquo; {links}</div>
+    <!-- END: links -->
   </div>
 <!-- END: node -->
 
-<!-- BEGIN: comment_new -->
-  <div class="comment">
-    <h3>{title}</h3>
-    <span class="new">new</span>
-    <div class="author">Posted by {author} on {date}.</div>
-    <div class="content">{content}</div>
-    <div class="links">&raquo; {links}</div>
-  </div>
-<!-- END: comment_new -->
-
-<!-- BEGIN: comment_old -->
+<!-- BEGIN: comment -->
   <div class="comment">
-    <h3>{title}</h3>
-    <div class="author">Posted by {author} on {date}.</div>
+    <h3 class="title">{title}</h3><!-- BEGIN: new --><span class="new">new</span><!-- END: new -->
+    <div class="submitted">Submitted by {author} on {date}.</div>
     <div class="content">{content}</div>
+    <!-- BEGIN: links -->
     <div class="links">&raquo; {links}</div>
+    <!-- END: links -->
   </div>
-<!-- END: comment_old -->
+<!-- END: comment -->
 
 <!-- BEGIN: box -->
   <div class="box">
-    <h2>{subject}</h2>
+    <h2 class="title">{title}</h2>
     <div class="content">{content}</div>
  </div>
 <!-- END: box -->
 
 <!-- BEGIN: block -->
   <div class="block block-{module}" id="block-{module}-{delta}">
-    <h2>{subject}</h2>
+    <h2 class="title">{title}</h2>
     <div class="content">{content}</div>
  </div>
 <!-- END: block -->