Several cosmetic and layout changes to the wiki editing page. Specifically,

made the header that's on the product pages present at the top of the wiki
page as well. Still need to make links bold when viewing certain pages
(help, contact, etc).

NEWS

@@ -1,4 +1,5 @@
 1.2.24: April ?, 2008
+ * Several cosmetic and layout changes to the wiki editing page.
  * Added rss icon to blog subscribe link.
 
 1.2.23: April 2, 2008

static/css/header.css

@@ -0,0 +1,36 @@
+.header {
+  background-color: #afcfff;
+  background-image: url(/static/images/header.png);
+  background-repeat: repeat-x;
+  height: 60px;
+  margin-left: 0;
+  margin-right: 0;
+  border-bottom: 1px solid #999999;
+}
+
+.luminotes_title {
+  float: left;
+}
+
+.header_links {
+  float: right;
+  text-align: right;
+  font-size: 85%;
+  padding-top: 5px;
+}
+
+.header_user_links {
+  text-align: right;
+  font-size: 85%;
+  padding-top: 10px;
+}
+
+.bold_link {
+  font-weight: bold;
+}
+
+.wide_center_area {
+  width: 45em;
+  height: 100%;
+  margin: 0 auto;
+}

static/css/ie6.css

@@ -6,10 +6,10 @@
   position: absolute;
   float: none;
   width: auto;
-  top: expression( eval( document.compatMode && document.compatMode == 'CSS1Compat' ) ? documentElement.scrollTop + 20 : document.body.scrollTop + 20 );
+  top: expression( eval( document.compatMode && document.compatMode == 'CSS1Compat' ) ? documentElement.scrollTop + 80 : document.body.scrollTop + 80 );
   margin-left: expression( 
     document.body.clientWidth < ( 900 / 12 ) * 
-    parseInt( document.body.currentStyle.fontSize ) ?  "-2em": "2em"
+    parseInt( document.body.currentStyle.fontSize ) ?  "-120px": "-80px"
   );
 }
 
@@ -36,6 +36,7 @@
     document.body.clientWidth < ( 1300 / 12 ) * 
     parseInt( document.body.currentStyle.fontSize ) ?  "18%": "15em"
   );
+  text-align: right;
 }
 
 #center_area {
@@ -46,11 +47,18 @@
   );
 }
 
+#notebook_header_area {
+  width: 100%;
+}
+
 #link_area {
   width:expression( 
     document.body.clientWidth < ( 1300 / 12 ) * 
     parseInt( document.body.currentStyle.fontSize ) ?  "17%": "15em"
   );
+}
+
+#link_area_wrapper {
   margin-left: 1.5em;
 }
 
@@ -63,18 +71,11 @@
   position: absolute;
 }
 
-.toolbar_text {
-  position: relative;
-  top: 0.375em;
-}
-
-.toolbar_list_text {
-  position: relative;
-  top: -0.625em;
-  line-height: 50%;
-}
-
 .link_area_item {
   margin-bottom: 0.25em;
   padding: 0.25em 0.25em 0 0.5em;
 }
+
+#this_notebook_area_title {
+  margin-top: 1.5em;
+}

static/css/ie7.css

@@ -1,29 +1,7 @@
-#content {
-  position: absolute;
-  left: 0em;
-  top: 0em;
-}
-
-#center_area {
-  float: right;
-}
-
 #toolbar {
-  margin-left: -1em;
+  left: 2em;
 }
 
-#link_area {
+#this_notebook_area_title {
-  margin-left: 1.5em;
+  margin-top: 1.5em;
-}
-
-.toolbar_text {
-  position: relative;
-  top: 0.375em;
-  height: 2em;
-}
-
-.toolbar_list_text {
-  position: relative;
-  top: -0.625em;
-  line-height: 50%;
 }

static/css/product.css

@@ -52,32 +52,6 @@
   background-image: url(/static/images/numbered_list_button.png);
 }
 
-.header {
-  background-color: #afcfff;
-  background-image: url(/static/images/header.png);
-  background-repeat: repeat-x;
-  height: 60px;
-  margin-left: 0;
-  margin-right: 0;
-  border-bottom: 1px solid #999999;
-}
-
-.luminotes_title {
-  float: left;
-}
-
-.header_links {
-  text-align: right;
-  font-size: 85%;
-  padding-top: 5px;
-}
-
-.header_user_links {
-  text-align: right;
-  font-size: 85%;
-  padding-top: 10px;
-}
-
 .hook_area {
   padding-top: 1.5em;
   padding-bottom: 1.5em;
@@ -88,8 +62,6 @@
 
 .wide_center_area {
   width: 840px;
-  height: 100%;
-  margin: 0 auto;
 }
 
 .center_area {
@@ -135,10 +107,6 @@
   text-align: center;
 }
 
-.bold_link {
-  font-weight: bold;
-}
-
 .what_is_luminotes_area {
   width: 400px;
   margin-bottom: 1em;

static/css/style.css

@@ -43,7 +43,6 @@ img {
   max-width: 18%;
   position: fixed;
   text-align: right;
-  margin-top: 5em;
   z-index: 1;
 }
 
@@ -236,14 +235,18 @@ img {
 #link_area {
   float: right;
   text-align: left;
-  margin-top: 1em;
+  padding-right: 1em;
-  margin-right: 1em;
   line-height: 100%;
   width: 15em;
   max-width: 17%;
 }
 
-#link_area h4 {
+#this_notebook_area_title {
+  margin-top: 0.5em;
+  margin-bottom: 0.25em;
+}
+
+#notebooks_area_title {
   margin-top: 1.5em;
   margin-bottom: 0.25em;
 }
@@ -257,34 +260,15 @@ img {
 
 #status_area {
   position: fixed;
+  left: 0.25em;
+  top: 0.25em;
   padding: 1em;
   z-index: 1;
 }
 
-#title_area {
-  text-align: left;
-  padding-top: 0.5em;
-  margin-top: 0.5em;
-  margin-bottom: 1em;
-}
-
-#top_area {
-  margin-left: 0.25em;
-  margin-right: 0.25em;
-}
-
-#search_and_user_area {
-  float: right;
-  margin-top: 0.5em;
-  margin-bottom: 0.5em;
-}
-
-#search_area {
-  margin-top: 0.5em;
-}
-
 #search_form {
-  margin-bottom: 0em;
+  margin-top: 0;
+  margin-bottom: 0;
 }
 
 #search_text {
@@ -292,17 +276,10 @@ img {
   border: #999999 1px solid;
 }
 
-#user_area {
-  text-align: right;
-  margin-bottom: 1em;
-}
-
-#user_area a {
-  font-weight: bold;
-}
-
 #notebook_header_area {
   padding: 0.2em;
+  margin-top: 1em;
+  width: 45em;
 }
 
 #notebook_header_name:hover {

static/js/Wiki.js

@@ -62,6 +62,7 @@ function Wiki( invoker ) {
   connect( this.invoker, "error_message", this, "display_error" );
   connect( this.invoker, "message", this, "display_message" );
   connect( "search_form", "onsubmit", this, "search" );
+  connect( "search_text", "onfocus", this, "search_focused" );
   connect( "html", "onclick", this, "background_clicked" );
   connect( "html", "onkeydown", this, "key_pressed" );
   connect( window, "onresize", this, "resize_editors" );
@@ -1313,6 +1314,13 @@ Wiki.prototype.search = function ( event ) {
   event.stop();
 }
 
+Wiki.prototype.search_focused = function ( event ) {
+  var search_text = getElement( "search_text" );
+
+  if ( search_text.value == 'search' )
+    search_text.value = '';
+}
+
 Wiki.prototype.display_search_results = function ( result ) {
   // if there are no search results, indicate that and bail
   if ( !result || result.notes.length == 0 ) {

view/Header.py

@@ -0,0 +1,77 @@
+from Tags import Div, A, Img, Span
+
+class Header( Div ):
+  def __init__( self, user, first_notebook, login_url, logout_url, note_title ):
+    title_image = Img(
+      src ="/static/images/luminotes_title.png",
+      class_ = u"luminotes_title", width = u"193", height = u"60",
+      alt = u"Luminotes",
+    )
+
+    Div.__init__(
+      self,
+      Div(
+        ( note_title == u"home" ) and title_image or A( title_image, href = u"/" ),   
+        ( login_url and user.username == u"anonymous" ) and Div(
+          ( note_title == u"pricing" ) and Span( u"pricing &amp sign up", class_ = u"bold_link" ) or \
+          A( u"pricing & sign up", href = u"/pricing", class_ = u"bold_link" ), u" | ",
+          A(
+            u"login",
+            href = login_url,
+            id = u"login_link",
+            class_ = u"bold_link",
+          ),
+          class_ = u"header_user_links",
+        ) or Div(
+          u"logged in as %s" % ( user.username or u"a guest" ),
+          u" | ",
+          ( note_title != u"wiki" ) and first_notebook and Span(
+            A(
+              u"my wiki",
+              href = u"/notebooks/%s" % first_notebook.object_id,
+            ),
+            u" | ",
+          ) or None,
+          user.username and Span(
+            A(
+              u"upgrade",
+              href = u"/pricing",
+              title = u"Upgrade your Luminotes account.",
+              class_ = u"bold_link",
+            ),
+            " | ",
+          ) or Span(
+            ( note_title == u"pricing" ) and Span( u"pricing &amp sign up", class_ = u"bold_link" ) or \
+            A(
+              u"pricing & sign up",
+              href = u"/pricing",
+              title = u"Sign up for a real Luminotes account.",
+              class_ = u"bold_link",
+            ),
+            " | ",
+          ) or None,
+          A(
+            u"logout",
+            href = logout_url,
+            id = u"logout_link",
+            title = u"Sign out of your account.",
+          ),
+          class_ = u"header_user_links",
+        ),
+        Div(
+          ( note_title == u"home" ) and Span( u"home", class_ = u"bold_link" ) or A( u"home", href = u"/" ), u" | ",
+          ( note_title == u"tour" ) and Span( u"tour", class_ = u"bold_link" ) or A( u"tour", href = u"/tour" ), u" | ",
+          ( user.username in ( None, u"anonymous" ) ) and Span( ( note_title == u"wiki" ) and Span( u"demo", class_ = u"bold_link" ) or A( u"demo", href = u"/users/demo" ), u" | " ) or None,
+          ( note_title == u"faq" ) and Span( u"faq", class_ = u"bold_link" ) or A( u"faq", href = u"/faq" ), u" | ",
+          ( note_title == u"guide" ) and Span( u"guide", class_ = u"bold_link" ) or A( u"help", href = u"/guide" ), u" | ",
+          ( note_title == u"contact" ) and Span( u"contact", class_ = u"bold_link" ) or A( u"contact", href = u"/contact_info" ), u" | ",
+          ( note_title == u"team" ) and Span( u"team", class_ = u"bold_link" ) or A( u"team", href = u"/meet_the_team" ), u" | ",
+          ( note_title == u"blog" ) and Span( u"blog", class_ = u"bold_link" ) or A( u"blog", href = u"/blog" ), u" | ",
+          ( note_title == u"privacy" ) and Span( u"privacy", class_ = u"bold_link" ) or A( u"privacy", href = u"/privacy" ),
+          class_ = u"header_links",
+        ),
+        class_ = u"wide_center_area",
+      ),
+      class_ = u"header",
+    )
+

view/Link_area.py

@@ -1,5 +1,6 @@
 from Tags import Div, Span, H4, A, Strong, Img
 from Rounded_div import Rounded_div
+from Search_form import Search_form
 
 
 class Link_area( Div ):
@@ -13,7 +14,12 @@ class Link_area( Div ):
     Div.__init__(
       self,
       Div(
-        H4( u"this notebook" ),
+        Div(
+          H4( u"this notebook", id = u"this_notebook_area_title" ),
+          Div(
+            Search_form(),
+            class_ = u"link_area_item",
+          ),
           ( parent_id is None ) and Div(
             A(
               u"all notes",
@@ -150,5 +156,7 @@ class Link_area( Div ):
         Div(
           id = u"storage_usage_area",
         ),
+        id = u"link_area_wrapper",
+      ),
       id = u"link_area",
     )

view/Main_page.py

@@ -1,8 +1,7 @@
 from cgi import escape
 from Page import Page
-from Tags import Input, Div, Span, H2, H4, A, Br, Strong, Script, Img
+from Header import Header
-from Search_form import Search_form
+from Tags import Link, Input, Div, Span, H2, H4, A, Br, Strong, Script, Img
-from User_area import User_area
 from Link_area import Link_area
 from Toolbar import Toolbar
 from Json import Json
@@ -92,6 +91,7 @@ class Main_page( Page ):
     Page.__init__(
       self,
       title,
+      Link( rel = u"stylesheet", type = u"text/css", href = u"/static/css/header.css" ),
       Script( type = u"text/javascript", src = u"/static/js/MochiKit.js" ) or None,
       Script( type = u"text/javascript", src = u"/static/js/Invoker.js" ) or None,
       Script( type = u"text/javascript", src = u"/static/js/Editor.js" ) or None,
@@ -113,6 +113,7 @@ class Main_page( Page ):
       Div(
         id = u"status_area",
       ),
+      Header( user, notebook, login_url, logout_url, notes and notes[ 0 ].title or u"wiki" ),
       Div(
         Div(
           Br(),
@@ -121,21 +122,6 @@ class Main_page( Page ):
         ),
         Link_area( notebooks, notebook, total_notes_count, parent_id, notebook_path, user ),
         Div(
-          Div(
-            Div(
-              User_area( user, login_url, logout_url ),
-              Div(
-                Search_form(),
-                id = u"search_area",
-              ),
-              id = u"search_and_user_area",
-            ),
-            Div(
-              A( Img( src = u"/static/images/luminotes_title_full.png", width = u"206", height = u"69" ), href = u"/", title = u"Luminotes personal wiki notebook" ),
-              id = u"title_area",
-            ),
-            id = u"top_area",
-          ),
           Rounded_div(
             ( notebook.name == u"trash" ) and u"trash_notebook" or u"current_notebook",
             ( notebook.name == u"trash" or not notebook.read_write ) \

view/Page.py

@@ -30,5 +30,5 @@ class Page( Html ):
       ),
       id = "html",
       xmlns = u"http://www.w3.org/1999/xhtml",
-      prefix = u'<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">\n'
+      prefix = u'<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">\n'
     )

view/Product_page.py

@@ -1,84 +1,17 @@
 from Page import Page
-from Tags import Link, Div, Img, A, Span
+from Header import Header
+from Tags import Link, Div, A, Span
 
 
 class Product_page( Page ):
   def __init__( self, user, first_notebook, login_url, logout_url, note_title, *nodes ):
-    title_image = Img(
-      src ="/static/images/luminotes_title.png",
-      class_ = u"luminotes_title", width = u"193", height = u"60",
-      alt = u"Luminotes",
-    )
     Page.__init__(
       self,
       None, # use the default title
+      Link( rel = u"stylesheet", type = u"text/css", href = u"/static/css/header.css" ),
       Link( rel = u"stylesheet", type = u"text/css", href = u"/static/css/product.css" ),
 
-      Div(
+      Header( user, first_notebook, login_url, logout_url, note_title ),
-        Div(
-          ( note_title == u"home" ) and title_image or A( title_image, href = u"/" ),   
-          ( login_url and user.username == u"anonymous" ) and Div(
-            ( note_title == u"pricing" ) and Span( u"pricing &amp sign up", class_ = u"bold_link" ) or \
-            A( u"pricing & sign up", href = u"/pricing", class_ = u"bold_link" ), u" | ",
-            A(
-              u"login",
-              href = login_url,
-              id = u"login_link",
-              class_ = u"bold_link",
-            ),
-            class_ = u"header_user_links",
-          ) or Div(
-            u"logged in as %s" % ( user.username or u"a guest" ),
-            u" | ",
-            first_notebook and Span(
-              A(
-                u"my wiki",
-                href = u"/notebooks/%s" % first_notebook.object_id,
-              ),
-              u" | ",
-            ) or None,
-            user.username and Span(
-              A(
-                u"upgrade",
-                href = u"/pricing",
-                title = u"Upgrade your Luminotes account.",
-                class_ = u"bold_link",
-              ),
-              " | ",
-            ) or Span(
-              ( note_title == u"pricing" ) and Span( u"pricing &amp sign up", class_ = u"bold_link" ) or \
-              A(
-                u"pricing & sign up",
-                href = u"/pricing",
-                title = u"Sign up for a real Luminotes account.",
-                class_ = u"bold_link",
-              ),
-              " | ",
-            ) or None,
-            A(
-              u"logout",
-              href = logout_url,
-              id = u"logout_link",
-              title = u"Sign out of your account.",
-            ),
-            class_ = u"header_user_links",
-          ),
-          Div(
-            ( note_title == u"home" ) and Span( u"home", class_ = u"bold_link" ) or A( u"home", href = u"/" ), u" | ",
-            ( note_title == u"tour" ) and Span( u"tour", class_ = u"bold_link" ) or A( u"tour", href = u"/tour" ), u" | ",
-            ( note_title == u"demo" ) and Span( u"demo", class_ = u"bold_link" ) or A( u"demo", href = u"/users/demo" ), u" | ",
-            ( note_title == u"faq" ) and Span( u"faq", class_ = u"bold_link" ) or A( u"faq", href = u"/faq" ), u" | ",
-            ( note_title == u"guide" ) and Span( u"guide", class_ = u"bold_link" ) or A( u"help", href = u"/guide" ), u" | ",
-            ( note_title == u"contact" ) and Span( u"contact", class_ = u"bold_link" ) or A( u"contact", href = u"/contact_info" ), u" | ",
-            ( note_title == u"team" ) and Span( u"team", class_ = u"bold_link" ) or A( u"team", href = u"/meet_the_team" ), u" | ",
-            ( note_title == u"blog" ) and Span( u"blog", class_ = u"bold_link" ) or A( u"blog", href = u"/blog" ), u" | ",
-            ( note_title == u"privacy" ) and Span( u"privacy", class_ = u"bold_link" ) or A( u"privacy", href = u"/privacy" ),
-            class_ = u"header_links",
-          ),
-          class_ = u"wide_center_area",
-        ),
-        class_ = u"header",
-      ),
 
       Span(
         *nodes

view/Search_form.py

@@ -1,4 +1,4 @@
-from Tags import Form, Strong, Input
+from Tags import Form, Input
 
 
 class Search_form( Form ):
@@ -7,7 +7,6 @@ class Search_form( Form ):
 
     Form.__init__(
       self,
-      Strong( u"search: " ),
+      Input( type = u"text", name = u"search_text", id = u"search_text", size = 20, maxlength = 512, value = "search" ),
-      Input( type = u"text", name = u"search_text", id = u"search_text", size = 30, maxlength = 512 ),
       id = u"search_form",
     )

view/User_area.py

@@ -1,40 +0,0 @@
-from Tags import Div, Span, H4, A
-
-
-class User_area( Div ):
-  def __init__( self, user, login_url, logout_url ):
-    Div.__init__(
-      self,
-      ( login_url and user.username == u"anonymous" ) and Div(
-        A(
-          u"login",
-          href = login_url,
-          id = u"login_link",
-        ),
-      ) or Div(
-        u"logged in as %s" % ( user.username or u"a guest" ),
-        " | ",
-        user.username and Span(
-          A(
-            u"upgrade",
-            href = u"/pricing",
-            title = u"Upgrade your Luminotes account.",
-          ),
-          " | ",
-        ) or Span(
-          A(
-            u"sign up",
-            href = u"/pricing",
-            title = u"Sign up for a real Luminotes account.",
-          ),
-          " | ",
-        ) or None,
-        A(
-          u"logout",
-          href = logout_url,
-          id = u"logout_link",
-          title = u"Sign out of your account."
-        ),
-      ),
-      id = u"user_area",
-    )