changeset 68:5716cb072c43

Simplified CSS. The width of the central column is now dynamically determined by calculating the width of a 80-column, fixed-pitch line. The top window is also more faithful to its intended presentation in that it doesn't always display in reverse video.
author Atul Varma <varmaa@toolness.com>
date Sat, 17 May 2008 02:14:49 -0700
parents 41c698849ec9
children 23f9e15fa690
files gnusto.css gnusto.html web-zui.js
diffstat 3 files changed, 21 insertions(+), 21 deletions(-) [+]
line wrap: on
line diff
--- a/gnusto.css	Fri May 16 18:28:59 2008 -0700
+++ b/gnusto.css	Sat May 17 02:14:49 2008 -0700
@@ -7,34 +7,22 @@
 }
 
 .buffered-window {
-    width: 640px;
     text-align: center;
     margin: 0 auto;
     font-family: monaco;
-    font-size: 10px;
+    font-size: 10pt;
+    line-height: 12pt;
     top: 0px;
     left: 0px;
     position: fixed;
     z-index: 0;
-    line-height: 12px;
 }
 
 #top-window {
-    width: 640px;
-    text-align: center;
-    margin: 0 auto;
-    font-family: monaco;
-    font-size: 10px;
-    color: #ffffff;
-    background: #000000;
-    top: 0px;
-    left: 0px;
-    position: fixed;
     z-index: 1;
 }
 
 #content {
-    width: 640px;
     text-align: left;
     margin: 0 auto;
 }
@@ -68,10 +56,6 @@
     font-family: monaco;
 }
 
-#top-window .z-roman {
-    color: #ffffff;
-}
-
 #top-window .z-bold {
     font-variant: none;
     font-weight: bold;
--- a/gnusto.html	Fri May 16 18:28:59 2008 -0700
+++ b/gnusto.html	Sat May 17 02:14:49 2008 -0700
@@ -8,7 +8,7 @@
   <title></title>
 </head>
 <body>
-<div id="top-window"></div>
+<div id="top-window" class="buffered-window"></div>
 <div id="buffered-windows"></div>
 <div id="content"></div>
 </body>
--- a/web-zui.js	Fri May 16 18:28:59 2008 -0700
+++ b/web-zui.js	Sat May 17 02:14:49 2008 -0700
@@ -140,12 +140,11 @@
 
     _windowResize: function() {
       var contentLeft = $("#content").get(0).offsetLeft + "px";
-      $("#top-window").get(0).style.left = contentLeft;
       $(".buffered-window").css({left: contentLeft});
     },
 
     _removeBufferedWindows: function() {
-      var windows = $(".buffered-window");
+      var windows = $("#buffered-windows > .buffered-window");
       windows.fadeOut("slow", function() { windows.remove(); });
       // A more conservative alternative to the above is:
       // $("#buffered-windows").empty();
@@ -270,6 +269,7 @@
           var html = $("#top-window").get(0).innerHTML;
           newDiv.className = "buffered-window";
           newDiv.innerHTML = html;
+          newDiv.style.width = self._pixelWidth + "px";
           $("#buffered-windows").append(newDiv);
 
           // Pretend the window was just resized, which will position
@@ -309,9 +309,25 @@
       } else {
         self._console.write(output, styles);
       }
+    },
+
+    _getFixedPitchRowWidth: function() {
+      var row = document.createElement("div");
+      row.className = "buffered-window";
+      for (var i = 0; i < self._size[0]; i++)
+        row.innerHTML += "O";
+      $("#buffered-windows").append(row);
+      var width = row.clientWidth;
+      $("#buffered-windows").empty();
+      return width;
     }
   };
 
+  self._pixelWidth = self._getFixedPitchRowWidth();
+
+  $("#top-window").get(0).style.width = self._pixelWidth + "px";
+  $("#content").get(0).style.width = self._pixelWidth + "px";
+
   self._windowResize();
   self._bindEventHandlers();
   self._eraseBottomWindow();