1) Bugfix: changed INNER JOIN to LEFT JOIN to make forum topics with no comments show on the topic overview page.

2) Beautified the forum module views; rewritten to use the table() rendering functions, X HTML-ified the emitted code, added additional CSS tags, and removed hard-coded markup.  This improves themeabality; it should be able to mimic the view and color scheme of, say, http://www.phpbb.com/.

3) Reorganized forms and links (interactive elements) to improve usability.  Also ensured that the link names and page titles match.

4) Temporary removed container functionality: this simplified the work and eliminated some usability issues.

1 files changed, 260 insertions, 83 deletions

diff --git a/misc/drupal.css b/misc/drupal.css
index b07334f96..67f4817a7 100644
--- a/misc/drupal.css
+++ b/misc/drupal.css
@@ -1,83 +1,260 @@
-form                      { margin: 0; padding: 0;}
-
-th                        { text-align: left; padding-right: 1em; border-bottom: 1px solid #ccc; }
-
-#tracker table            { border-collapse: collapse; }
-#tracker td               { vertical-align: top; padding: 1em; }
-#tracker td ul            { margin-top: 0; margin-bottom: 0; }
-#tracker td ul a          { font-weight: normal; }
-#tracker th               { text-align: left; padding: 0.25em 1em 0.25em 0em; }
-
-#pager                    { text-align: center; }
-#pager div                { padding: 0.5em; }
-
-.book                     { margin-bottom: 2em; }
-.book hr                  { clear: both; border: 0; height: 1px; background-color: #888; color: #888; }
-.book .title              { font-weight: bold; font-size: 1.3em; }
-.book .last-updated       { font-size: 0.8em; margin-top: 0.25em; }
-.book .body               { margin: 1em 0 1em 0; }
-.book .links              { clear: both; border-top: 1px solid #888; padding-top: 0.5em; }
-.book .nav .links         { margin-top: 2em; }
-
-.book .nav                { margin: 1em 0; clear: both; }
-.book .nav .prev          { float: left; width: 45%; padding-bottom: 0.5em; }
-.book .nav .next          { float: right; text-align: right; width: 45%; padding-bottom: 0.5em; }
-.book .nav .up            { text-align: center; }
-.book .nav .titles        { clear: both; }
-
-.calendar .row-week td a  { display: block; }
-.calendar .row-week td a:hover { background-color: #888; color: #fff; }
-.calendar a               { text-decoration: none; }
-.calendar a:hover         { text-decoration: none; }
-.calendar table           { border-collapse: collapse; width: 100%; }
-.calendar td              { text-align: center; border: 1px solid #000;
-                            padding: 1px; margin: 0; font-size: 0.8em; }
-
-.container-inline div     { display: inline; }
-.container-inline .form-submit { margin: 0; }
-
-.form-item .description   { font-size: 0.85em; }
-.form-item .title         { font-weight: bold; margin-top: 1.1em; margin-bottom: 1px; }
-.form-submit              { margin: 0.5em 0; }
-
-.item-list .icon          { color: #555; float: right; padding-left: 0.25em; clear: right; }
-.item-list .icon img      { border: 0; }
-.item-list .icon a        { color: #000; text-decoration: none; }
-.item-list .icon a:hover  { color: #000; text-decoration: none; }
-.item-list .title         { font-weight: bold; }
-.item-list ul             { margin: 0 0 0.75em 0; padding: 0; }
-.item-list ul li          { margin: 0 0 0.25em 1.5em; padding: 0; list-style: disc; }
-
-.poll .bar                { height: 1em; margin: 1px 0; }
-.poll .bar .background    { background-color: #ddd; float: left; height: 1em; margin-left: -1px; }
-.poll .bar .foreground    { background-color: #000; float: left; height: 1em; margin-right: -1px; }
-.poll .links              { text-align: center; }
-.poll .percent            { text-align: right; }
-.poll .total              { text-align: center; }
-.poll .vote-form          { text-align: center; }
-
-.poll .vote-form .choices { text-align: left; margin: 0 auto; display: table; }
-
-.queue-user-numeral       { color: red; }
-
-.node-form .form-text                   { display: block; width: 95%; }
-.node-form textarea                     { display: block; width: 95%; }
-.node-form .standard                    { clear: both; }
-.node-form .admin .form-item .title     { margin-top: 0; }
-.node-form .admin .authored .form-item  { margin-bottom: 1.1em; }
-.node-form .admin .authored .form-text  { width: auto; }
-.node-form .admin .authored,
-.node-form .admin .options,
-.node-form .admin .extra                { float: left; margin-right: 2em; margin-bottom: 1em; }
-
-.marker                   { color: #f00; }
-.error                    { color: #f00; }
-.ok                       { color: #080; }
-
-.user-login-block         { text-align: center; }
-.user-page-menu           { text-align: center; }
-.user-login-block, .user-information-block { white-space: nowrap; }
-tr.dark                   { background-color: #ddd; }
-tr.light                  { background-color: #eee; }
-pre                       { white-space: pre-wrap; white-space: -moz-pre-wrap; white-space: -o-pre-wrap; white-space: -pre-wrap;}
-pre, code                 { font-size: 11px; }
+form {
+  margin: 0;
+  padding: 0;
+}
+th {
+  text-align: left;
+  padding-right: 1em;
+  border-bottom: 1px solid #ccc;
+}
+#tracker table {
+  border-collapse: collapse;
+}
+#tracker td {
+  vertical-align: top;
+  padding: 1em;
+}
+#tracker td ul {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+#tracker td ul a {
+  font-weight: normal;
+}
+#tracker th {
+  text-align: left;
+  padding: 0.25em 1em 0.25em 0em;
+}
+#pager {
+  text-align: center;
+}
+#pager div {
+  padding: 0.5em;
+}
+.book {
+  margin-bottom: 2em;
+}
+.book hr {
+  clear: both;
+  border: 0;
+  height: 1px;
+  background-color: #888;
+  color: #888;
+}
+.book .title {
+  font-weight: bold;
+  font-size: 1.3em;
+}
+.book .last-updated {
+  font-size: 0.8em;
+  margin-top: 0.25em;
+}
+.book .body {
+  margin: 1em 0 1em 0;
+}
+.book .links {
+  clear: both;
+  border-top: 1px solid #888;
+  padding-top: 0.5em;
+}
+.book .nav .links {
+  margin-top: 2em;
+}
+.book .nav {
+  margin: 1em 0;
+  clear: both;
+}
+.book .nav .prev {
+  float: left; width: 45%;
+  padding-bottom: 0.5em;
+}
+.book .nav .next {
+  float: right;
+  text-align: right;
+  width: 45%;
+  padding-bottom: 0.5em;
+}
+.book .nav .up {
+  text-align: center;
+}
+.book .nav .titles {
+  clear: both;
+}
+.calendar .row-week td a {
+  display: block;
+}
+.calendar .row-week td a:hover {
+  background-color: #888; color: #fff;
+}
+.calendar a {
+  text-decoration: none;
+}
+.calendar a:hover {
+  text-decoration: none;
+}
+.calendar table {
+  border-collapse: collapse;
+  width: 100%;
+}
+.calendar td {
+  text-align: center;
+  border: 1px solid #000;
+  padding: 1px;
+  margin: 0;
+  font-size: 0.8em;
+}
+.container-inline div {
+  display: inline;
+}
+.container-inline .form-submit {
+  margin: 0;
+}
+.form-item .description {
+  font-size: 0.85em;
+}
+.form-item .title {
+  font-weight: bold;
+  margin-top: 1.1em;
+  margin-bottom: 1px;
+}
+.form-submit {
+  margin: 0.5em 0;
+}
+#forum .name {
+ font-size: 1.2em; margin: 0.5em;
+}
+#forum .description, #forum .navigation {
+  font-size: 0.9em;
+  margin: 0.5em;
+}
+#forum td.posts, #forum td.topics, #forum td.last-post, #forum td.posted, #forum td.replies, #forum td.statistics, #forum td.settings, #forum td.pager {
+  text-align: center;
+  white-space: nowrap;
+}
+.item-list .icon {
+  color: #555;
+  float: right;
+  padding-left: 0.25em;
+  clear: right;
+}
+.item-list .icon img {
+  border: 0;
+}
+.item-list .icon a {
+  color: #000;
+  text-decoration: none;
+}
+.item-list .icon a:hover {
+  color: #000;
+  text-decoration: none;
+}
+.item-list .title {
+  font-weight: bold;
+}
+.item-list ul {
+  margin: 0 0 0.75em 0;
+  padding: 0;
+}
+.item-list ul li {
+  margin: 0 0 0.25em 1.5em;
+  padding: 0;
+  list-style: disc;
+}
+.path {
+  padding-bottom: 0.7em;
+  font-size: 1.1em;
+}
+.poll .bar {
+  height: 1em;
+  margin: 1px 0;
+}
+.poll .bar .background {
+  background-color: #ddd;
+  float: left;
+  height: 1em;
+  margin-left: -1px;
+}
+.poll .bar .foreground {
+  background-color: #000;
+  float: left;
+  height: 1em;
+  margin-right: -1px;
+}
+.poll .links {
+  text-align: center;
+}
+.poll .percent {
+  text-align: right;
+}
+.poll .total {
+  text-align: center;
+}
+.poll .vote-form {
+  text-align: center;
+}
+.poll .vote-form .choices {
+  text-align: left;
+  margin: 0 auto;
+  display: table;
+}
+.node-form .form-text {
+  display: block;
+  width: 95%;
+}
+.node-form textarea {
+  display: block;
+  width: 95%;
+}
+.node-form .standard {
+  clear: both;
+}
+.node-form .admin .form-item .title {
+  margin-top: 0;
+}
+.node-form .admin .authored .form-item {
+  margin-bottom: 1.1em;
+}
+.node-form .admin .authored .form-text  {
+  width: auto;
+}
+.node-form .admin .authored, .node-form .admin .options, .node-form .admin .extra {
+  float: left;
+  margin-right: 2em;
+  margin-bottom: 1em;
+}
+.marker {
+  color: #f00;
+}
+.error {
+  color: #f00;
+}
+.ok {
+  color: #080;
+}
+.user-login-block {
+  text-align: center;
+}
+.user-page-menu {
+  text-align: center;
+}
+.user-login-block, .user-information-block {
+  white-space: nowrap;
+}
+tr.dark {
+  background-color: #ddd;
+}
+tr.light {
+  background-color: #eee;
+}
+pre {
+  white-space: pre-wrap;
+  white-space: -moz-pre-wrap;
+  white-space: -o-pre-wrap;
+  white-space: -pre-wrap;
+}
+pre, code {
+  font-size: 11px;
+}
+.queue-user-numeral {
+  color: red;
+}