changeset 373:1fdea580d5b1

improve spacing with judicious use of margins; insert a colon between titles and excerpts; fix bug where 'body' URL parameter wasn't being applied on load
author Myk Melez <myk@mozilla.org>
date Fri, 07 Nov 2008 16:14:41 -0800
parents 2a9341395f36
children b61d30b9f36f
files content/river.css content/river.js
diffstat 2 files changed, 40 insertions(+), 22 deletions(-) [+]
line wrap: on
line diff
--- a/content/river.css	Fri Nov 07 15:16:10 2008 -0800
+++ b/content/river.css	Fri Nov 07 16:14:41 2008 -0800
@@ -149,6 +149,7 @@
 .message {
   /* Clear the float on the previous message's icon. */
   clear: both;
+  margin-bottom: 1em;
 }
 
 /* The selector has to include #contentBox here so the rule takes precedence
@@ -157,6 +158,7 @@
   max-width: 100px;
   max-height: 100px;
   float: right;
+  margin-bottom: 1em;
 }
 
 .byline {
@@ -167,16 +169,14 @@
 
 .title {
   font-size: 100%;
-  margin-bottom: 0.5em;
-  margin-top: 0;
+  margin: 0;
 }
 
-/* Suppress the top margin on the initial content element so we can control
- * the amount of margin between the subject and the content with the rule
- * above on the title element. */
-.body > *:first-child {
-  margin-top: 0;
-}
+/* Specify the margins above and below the message bodies.  In order to control
+ * these more consistently, we remove margins on the content they contain. */
+.body > *:first-child { margin-top: 0; }
+.body > *:last-child  { margin-bottom: 0; }
+.body { margin-top: 0.2em; margin-bottom: 0.2em; }
 
 /* Make the title and source links look less like links to differentiate
  * between the links in the content and these links that are in chrome. */
@@ -189,13 +189,21 @@
   color: #555;
 }
 
+.excerpt {
+  font-style: italic;
+}
+
 /* Show/hide elements based on whether we're displaying full content. */
-#contentBox .body             { display: none; }
-#contentBox .title            { display: inline; }
-#contentBox.body .body        { display: block; }
-#contentBox.body .title       { display: block; }
-#contentBox.body .excerpt     { display: none; }
-#contentBox.body .messageIcon { display: none; }
+#contentBox .body                 { display: none; }
+#contentBox .title                { display: inline; }
+#contentBox.showBody .body        { display: block; }
+#contentBox.showBody .title       { display: block; }
+#contentBox.showBody .excerpt     { display: none; }
+#contentBox.showBody .messageIcon { display: none; }
+
+/* Separate the title and excerpt with a colon when the body is hidden. */
+#contentBox .title:after          { content: ": " }
+#contentBox.showBody .title:after { content: none }
 
 /* Don't draw borders around hyperlinked favicons, but do pad them a bit
  * between the end of the favicon and the start of the source name. */
--- a/content/river.js	Fri Nov 07 15:16:10 2008 -0800
+++ b/content/river.js	Fri Nov 07 16:14:41 2008 -0800
@@ -309,8 +309,10 @@
     if ("current" in this._params)
       this._currentButton.checked = true;
 
-    if ("body" in this._params)
+    if ("body" in this._params) {
       this._bodyButton.checked = true;
+      this._setBody(true);
+    }
 
     if ("filter" in this._params)
       document.getElementById("filterTextbox").value = this._params.filter;
@@ -388,16 +390,24 @@
     this.rebuildView();
   },
 
-  onCommandBodyButton: function(aEvent) {
+  onCommandBodyButton: function() {
+    this._setBody(this._bodyButton.checked);
+    this._updateURI();
+  },
+
+  _setBody: function(showBody) {
     let contentBox = document.getElementById("contentBox");
-    if (this._bodyButton.checked) {
+    if (showBody) {
       let classes = contentBox.className.split(/\s/);
-      classes.push("body");
+      classes.push("showBody");
       contentBox.className = classes.join(" ");
     }
-    else
-      contentBox.className = contentBox.className.split(/\s/).filter(function(v) v != "body").join(" ");
-    this._updateURI();
+    else {
+      contentBox.className = contentBox.className.
+                             split(/\s/).
+                             filter(function(v) v != "showBody").
+                             join(" ");
+    }
   },
 
   onCommandColumnsButton: function() {
@@ -839,10 +849,10 @@
       // FIXME: implement support for enclosures.
 
       messageBox.appendChild(messageIcon);
-      messageBox.appendChild(bylineBox);
       messageBox.appendChild(title);
       messageBox.appendChild(excerpt);
       messageBox.appendChild(body);
+      messageBox.appendChild(bylineBox);
 
       this._contentSandbox.messageBox = messageBox;