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
parent
066ffdb308
commit
a6bbf04dad
|
|
@ -2,21 +2,33 @@
|
|||
background: #fafafa url(/static/images/1x1.png) fixed;
|
||||
}
|
||||
|
||||
#toolbar {
|
||||
position: absolute;
|
||||
width: expression( eval( document.all.center_area && ( document.all.center_area.offsetLeft - 60 ) || 0 ) );
|
||||
text-align: right;
|
||||
#left_area {
|
||||
width: auto;
|
||||
margin-left: expression( eval( document.all.everything_area && ( -document.all.everything_area.offsetLeft ) || 0 ) );
|
||||
}
|
||||
|
||||
#note_tree_area {
|
||||
left: 0;
|
||||
width: expression( eval( document.all.center_area && ( document.all.center_area.offsetLeft - 60 ) || 0 ) );
|
||||
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 {
|
||||
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 ) );
|
||||
}
|
||||
|
||||
|
|
@ -32,17 +44,9 @@
|
|||
}
|
||||
|
||||
#everything_area {
|
||||
width:expression(
|
||||
document.body.clientWidth < ( 1300 / 12 ) *
|
||||
parseInt( document.body.currentStyle.fontSize ) ? "100%": "80em"
|
||||
);
|
||||
}
|
||||
|
||||
#center_area {
|
||||
float: right;
|
||||
width:expression(
|
||||
document.body.clientWidth < ( 1300 / 12 ) *
|
||||
parseInt( document.body.currentStyle.fontSize ) ? "56%": "45em"
|
||||
width:expression(
|
||||
document.body.clientWidth < ( 1300 / 12 ) *
|
||||
parseInt( document.body.currentStyle.fontSize ) ? "60%": "45em"
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -55,6 +59,10 @@
|
|||
width: expression( this.scrollHeight > 200 ? "12em" : "auto" );
|
||||
}
|
||||
|
||||
#toolbar {
|
||||
margin-right: 1em;
|
||||
}
|
||||
|
||||
#toolbar .button_wrapper {
|
||||
position: absolute;
|
||||
}
|
||||
|
|
@ -63,13 +71,3 @@
|
|||
margin-bottom: 0.25em;
|
||||
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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,24 +1,22 @@
|
|||
#note_tree_area {
|
||||
float: right;
|
||||
margin-left: -6em;
|
||||
}
|
||||
|
||||
#note_tree_area_holder {
|
||||
overflow: auto;
|
||||
height: expression( eval( documentElement.offsetHeight - 100 ) );
|
||||
}
|
||||
|
||||
#center_area {
|
||||
float: right;
|
||||
max-width: 59%;
|
||||
#link_area_holder {
|
||||
overflow: auto;
|
||||
height: expression( eval( documentElement.offsetHeight - 100 ) );
|
||||
}
|
||||
|
||||
#this_notebook_area_title {
|
||||
margin-top: 1.5em;
|
||||
#left_area {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
#right_area {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
#clutter_link {
|
||||
position: relative;
|
||||
top: 1.25em;
|
||||
margin-left: 1em;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -31,20 +31,24 @@ h1 {
|
|||
}
|
||||
|
||||
#everything_area {
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
max-width: 80em;
|
||||
width: 45em;
|
||||
max-width: 60%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
#left_area {
|
||||
position: relative;
|
||||
float: left;
|
||||
width: 17em;
|
||||
max-width: 20%;
|
||||
width: 20em;
|
||||
max-width: 33%; /* 33% of 60% (everything_area's max-width) = about 20% */
|
||||
margin-left: -33%;
|
||||
}
|
||||
|
||||
#toolbar {
|
||||
text-align: right;
|
||||
z-index: 1;
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
|
||||
#toolbar .button_wrapper {
|
||||
|
|
@ -273,7 +277,7 @@ h1 {
|
|||
|
||||
#note_tree_area {
|
||||
position: fixed;
|
||||
width: 17em;
|
||||
width: 15em;
|
||||
max-width: 20%;
|
||||
text-align: left;
|
||||
line-height: 140%;
|
||||
|
|
@ -341,20 +345,33 @@ h1 {
|
|||
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 {
|
||||
float: right;
|
||||
position: fixed;
|
||||
text-align: left;
|
||||
line-height: 140%;
|
||||
width: 20%;
|
||||
top: 80px;
|
||||
bottom: 1em;
|
||||
width: 20em;
|
||||
max-width: 20%;
|
||||
}
|
||||
|
||||
#link_area_holder {
|
||||
padding-left: 1em;
|
||||
padding-right: 1em;
|
||||
max-height: 100%;
|
||||
overflow: auto;
|
||||
margin-left: 1em;
|
||||
margin-right: 1em;
|
||||
}
|
||||
|
||||
#this_notebook_area_title {
|
||||
margin-top: 0;
|
||||
margin-top: 0.5em;
|
||||
margin-bottom: 0.25em;
|
||||
}
|
||||
|
||||
|
|
@ -370,6 +387,13 @@ h1 {
|
|||
max-width: 60%;
|
||||
}
|
||||
|
||||
#center_content_area {
|
||||
position: relative;
|
||||
float: left;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#status_area {
|
||||
position: fixed;
|
||||
left: 0.25em;
|
||||
|
|
@ -386,7 +410,12 @@ h1 {
|
|||
#search_text {
|
||||
padding: 0.25em;
|
||||
border: #999999 1px solid;
|
||||
width: 100%;
|
||||
width: 95%;
|
||||
}
|
||||
|
||||
#clutter_link {
|
||||
position: relative;
|
||||
margin-left: 1em;
|
||||
}
|
||||
|
||||
#notebook_header_area {
|
||||
|
|
|
|||
|
|
@ -2146,9 +2146,9 @@ Wiki.prototype.declutter_clicked = function () {
|
|||
if ( link_area_holder )
|
||||
addElementClass( link_area_holder, "undisplayed" );
|
||||
|
||||
var left_area = getElement( "left_area" );
|
||||
if ( left_area )
|
||||
addElementClass( left_area, "undisplayed" );
|
||||
var note_tree_area = getElement( "note_tree_area" );
|
||||
if ( note_tree_area )
|
||||
addElementClass( note_tree_area, "undisplayed" );
|
||||
|
||||
var clutter_link = getElement( "clutter_link" );
|
||||
if ( clutter_link ) {
|
||||
|
|
@ -2179,9 +2179,9 @@ Wiki.prototype.clutter_clicked = function () {
|
|||
if ( link_area_holder )
|
||||
removeElementClass( link_area_holder, "undisplayed" );
|
||||
|
||||
var left_area = getElement( "left_area" );
|
||||
if ( left_area )
|
||||
removeElementClass( left_area, "undisplayed" );
|
||||
var note_tree_area = getElement( "note_tree_area" );
|
||||
if ( note_tree_area )
|
||||
removeElementClass( note_tree_area, "undisplayed" );
|
||||
|
||||
var clutter_link = getElement( "clutter_link" );
|
||||
if ( clutter_link )
|
||||
|
|
|
|||
|
|
@ -163,7 +163,6 @@ class Main_page( Page ):
|
|||
),
|
||||
id = u"left_area",
|
||||
),
|
||||
Link_area( notebooks, notebook, parent_id, notebook_path, updates_path, user ),
|
||||
Div(
|
||||
notebook.read_write and Noscript(
|
||||
P( Strong(
|
||||
|
|
@ -229,7 +228,11 @@ class Main_page( Page ):
|
|||
id = u"notebook_border",
|
||||
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",
|
||||
),
|
||||
|
|
|
|||
Reference in New Issue