witten
/
luminotes
Archived
1
0
Fork 0
Code Releases Activity

Fairly large CSS overhaul with the goal of making both the left and right areas position: fixed; 

Still works in IE 6 and 7. And of course Firefox. Even appears visually okay in Safari.
This commit is contained in:
Dan Helfman 2008-07-30 16:49:50 -07:00
parent 066ffdb308
commit a6bbf04dad
5 changed files with 87 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
static/css/ie6.css
View File

@ -2,21 +2,33 @@
background: #fafafa url(/static/images/1x1.png) fixed; background: #fafafa url(/static/images/1x1.png) fixed;
} }
#toolbar { #left_area {
position: absolute; width: auto;
width: expression( eval( document.all.center_area && ( document.all.center_area.offsetLeft - 60 ) || 0 ) ); margin-left: expression( eval( document.all.everything_area && ( -document.all.everything_area.offsetLeft ) || 0 ) );
text-align: right;
} }
#note_tree_area { #note_tree_area {
left: 0;
width: expression( eval( document.all.center_area && ( document.all.center_area.offsetLeft - 60 ) || 0 ) );
position: absolute; position: absolute;
top: expression( eval( document.compatMode && document.compatMode == 'CSS1Compat' ) ? documentElement.scrollTop + 80 : document.body.scrollTop + 80 ); width: expression( eval( document.all.everything_area && ( document.all.everything_area.offsetLeft - 60 ) || 0 ) );
top: expression( eval( document.compatMode && document.compatMode == 'CSS1Compat' ) ? documentElement.scrollTop + 30 : document.body.scrollTop + 30 );
} }
#note_tree_area_holder { #note_tree_area_holder {
overflow: auto; height: expression( eval( documentElement.offsetHeight - 100 ) );
}
#right_area {
width: auto;
margin-left: auto;
}
#link_area {
position: absolute;
width: expression( eval( document.all.everything_area && ( document.all.everything_area.offsetLeft ) || 0 ) );
top: expression( eval( document.compatMode && document.compatMode == 'CSS1Compat' ) ? documentElement.scrollTop + 30 : document.body.scrollTop + 30 );
}
#link_area_holder {
height: expression( eval( documentElement.offsetHeight - 100 ) ); height: expression( eval( documentElement.offsetHeight - 100 ) );
} }
@ -32,17 +44,9 @@
} }
#everything_area { #everything_area {
width:expression( width:expression(
document.body.clientWidth < ( 1300 / 12 ) * document.body.clientWidth < ( 1300 / 12 ) *
parseInt( document.body.currentStyle.fontSize ) ? "100%": "80em" parseInt( document.body.currentStyle.fontSize ) ? "60%": "45em"
);
}
#center_area {
float: right;
width:expression(
document.body.clientWidth < ( 1300 / 12 ) *
parseInt( document.body.currentStyle.fontSize ) ? "56%": "45em"
); );
} }
@ -55,6 +59,10 @@
width: expression( this.scrollHeight > 200 ? "12em" : "auto" ); width: expression( this.scrollHeight > 200 ? "12em" : "auto" );
} }
#toolbar {
margin-right: 1em;
}
#toolbar .button_wrapper { #toolbar .button_wrapper {
position: absolute; position: absolute;
} }
@ -63,13 +71,3 @@
margin-bottom: 0.25em; margin-bottom: 0.25em;
padding: 0.25em 0.25em 0 0.5em; padding: 0.25em 0.25em 0 0.5em;
} }
#this_notebook_area_title {
margin-top: 1.5em;
}
#clutter_link {
position: relative;
top: 1.25em;
margin-left: 1em;
}

20
static/css/ie7.css
View File

@ -1,24 +1,22 @@
#note_tree_area {
float: right;
margin-left: -6em;
}
#note_tree_area_holder { #note_tree_area_holder {
overflow: auto; overflow: auto;
height: expression( eval( documentElement.offsetHeight - 100 ) ); height: expression( eval( documentElement.offsetHeight - 100 ) );
} }
#center_area { #link_area_holder {
float: right; overflow: auto;
max-width: 59%; height: expression( eval( documentElement.offsetHeight - 100 ) );
} }
#this_notebook_area_title { #left_area {
margin-top: 1.5em; width: auto;
}
#right_area {
width: auto;
} }
#clutter_link { #clutter_link {
position: relative;
top: 1.25em; top: 1.25em;
margin-left: 1em; margin-left: 1em;
} }

51
static/css/style.css
View File

@ -31,20 +31,24 @@ h1 {
} }
#everything_area { #everything_area {
margin: 0 auto;
text-align: center; text-align: center;
max-width: 80em; width: 45em;
max-width: 60%;
margin: 0 auto;
} }
#left_area { #left_area {
position: relative;
float: left; float: left;
width: 17em; width: 20em;
max-width: 20%; max-width: 33%; /* 33% of 60% (everything_area's max-width) = about 20% */
margin-left: -33%;
} }
#toolbar { #toolbar {
text-align: right; text-align: right;
z-index: 1; z-index: 1;
margin-right: 0.5em;
} }
#toolbar .button_wrapper { #toolbar .button_wrapper {
@ -273,7 +277,7 @@ h1 {
#note_tree_area { #note_tree_area {
position: fixed; position: fixed;
width: 17em; width: 15em;
max-width: 20%; max-width: 20%;
text-align: left; text-align: left;
line-height: 140%; line-height: 140%;
@ -341,20 +345,33 @@ h1 {
padding-left: 20px; padding-left: 20px;
} }
#right_area {
position: relative;
float: left;
width: 20em;
max-width: 33%; /* 33% of 60% (everything_area's max-width) = about 20% */
margin-left: 100%;
}
#link_area { #link_area {
float: right; position: fixed;
text-align: left; text-align: left;
line-height: 140%; line-height: 140%;
width: 20%; top: 80px;
bottom: 1em;
width: 20em;
max-width: 20%;
} }
#link_area_holder { #link_area_holder {
padding-left: 1em; max-height: 100%;
padding-right: 1em; overflow: auto;
margin-left: 1em;
margin-right: 1em;
} }
#this_notebook_area_title { #this_notebook_area_title {
margin-top: 0; margin-top: 0.5em;
margin-bottom: 0.25em; margin-bottom: 0.25em;
} }
@ -370,6 +387,13 @@ h1 {
max-width: 60%; max-width: 60%;
} }
#center_content_area {
position: relative;
float: left;
text-align: center;
width: 100%;
}
#status_area { #status_area {
position: fixed; position: fixed;
left: 0.25em; left: 0.25em;
@ -386,7 +410,12 @@ h1 {
#search_text { #search_text {
padding: 0.25em; padding: 0.25em;
border: #999999 1px solid; border: #999999 1px solid;
width: 100%; width: 95%;
}
#clutter_link {
position: relative;
margin-left: 1em;
} }
#notebook_header_area { #notebook_header_area {

12
static/js/Wiki.js
View File

@ -2146,9 +2146,9 @@ Wiki.prototype.declutter_clicked = function () {
if ( link_area_holder ) if ( link_area_holder )
addElementClass( link_area_holder, "undisplayed" ); addElementClass( link_area_holder, "undisplayed" );
var left_area = getElement( "left_area" ); var note_tree_area = getElement( "note_tree_area" );
if ( left_area ) if ( note_tree_area )
addElementClass( left_area, "undisplayed" ); addElementClass( note_tree_area, "undisplayed" );
var clutter_link = getElement( "clutter_link" ); var clutter_link = getElement( "clutter_link" );
if ( clutter_link ) { if ( clutter_link ) {
@ -2179,9 +2179,9 @@ Wiki.prototype.clutter_clicked = function () {
if ( link_area_holder ) if ( link_area_holder )
removeElementClass( link_area_holder, "undisplayed" ); removeElementClass( link_area_holder, "undisplayed" );
var left_area = getElement( "left_area" ); var note_tree_area = getElement( "note_tree_area" );
if ( left_area ) if ( note_tree_area )
removeElementClass( left_area, "undisplayed" ); removeElementClass( note_tree_area, "undisplayed" );
var clutter_link = getElement( "clutter_link" ); var clutter_link = getElement( "clutter_link" );
if ( clutter_link ) if ( clutter_link )

7
view/Main_page.py
View File

@ -163,7 +163,6 @@ class Main_page( Page ):
), ),
id = u"left_area", id = u"left_area",
), ),
Link_area( notebooks, notebook, parent_id, notebook_path, updates_path, user ),
Div( Div(
notebook.read_write and Noscript( notebook.read_write and Noscript(
P( Strong( P( Strong(
@ -229,7 +228,11 @@ class Main_page( Page ):
id = u"notebook_border", id = u"notebook_border",
class_ = ( notebook.name == u"trash" ) and u"trash_notebook_color" or u"current_notebook_color", class_ = ( notebook.name == u"trash" ) and u"trash_notebook_color" or u"current_notebook_color",
), ),
id = u"center_area", id = u"center_content_area",
),
Div(
Link_area( notebooks, notebook, parent_id, notebook_path, updates_path, user ),
id = u"right_area",
), ),
id = u"everything_area", id = u"everything_area",
), ),