style.css: Improvements to make floating sidebar fit better on pages with inlines.

The key is using width: auto; overflow: auto; -- this allows the div(s) to the
left of the floating sidebar to be resized to fit next to it, and prevents
any clear: both from pushing the div down below the end of the sidebar.

Many thanks for the Hurd wiki's developers for originally figuring this out.

The edit page recently developed the same problem with its textarea, now
that a sidebar can appear on that page too. In editpage.tmpl I needed to
add a new div around the editcontent textarea, as the above styles cannot
be applied directly to textareas. The textarea's own width is reduced to
98% because at least in chromium this avoids it getting unnecessary
horizonatl scrollbars when a sidebar is displayed next to it.

diff --git a/debian/changelog b/debian/changelog
index abf7a2d87d8bce8314042d73eca93534d69427c9..f7810c66f7731b2040b8eb3ce979dda154d4271b 100644 (file)
--- a/debian/changelog
+++ b/debian/changelog
@@ -11,6 +11,8 @@ ikiwiki (3.20100609) unstable; urgency=low
   * editpage: Avoid storing accidental state changes when previewing pages.
   * page.tmpl: Add a div around the sidebar, page content, and comments,
     to aide in styling.
+  * style.css: Improvements to make floating sidebar fit better on
+    pages with inlines.
 
  -- Joey Hess <joeyh@debian.org>  Mon, 31 May 2010 20:44:17 -0400
 

diff --git a/doc/style.css b/doc/style.css
index 2cd7a9652f983d3601bc11e191bdf26b41f1e5f0..d88c93778dec38754d994fcfd6517c61fa5a5b56 100644 (file)
--- a/doc/style.css
+++ b/doc/style.css
@@ -110,7 +110,12 @@ nav {
 }
 
 #editcontent {
-       width: 100%;
+       width: 98%;
+}
+
+.editcontentdiv {
+       width: auto;
+       overflow: auto;
 }
 
 img {
@@ -121,8 +126,8 @@ div.recentchanges {
        border-style: solid;
        border-width: 1px;
        overflow: auto;
-       clear: both;
-       width: 100%;
+       width: auto;
+       clear: none;
        background: #eee;
        color: black !important;
 }
@@ -176,6 +181,7 @@ div.recentchanges {
 .inlinepage {
        padding: 10px 10px;
        border: 1px solid #aaa;
+       overflow: auto;
 }
 
 .pagedate,

diff --git a/templates/editpage.tmpl b/templates/editpage.tmpl
index 118ca455046ad414f1e41366d7fbb16b33e984e4..36076cb3534bfb269e2cb174784be90ceee88deb 100644 (file)
--- a/templates/editpage.tmpl
+++ b/templates/editpage.tmpl
@@ -17,7 +17,9 @@
 <TMPL_VAR FIELD-TYPE>
 </TMPL_IF>
 <li>
+<div class="editcontentdiv">
 <TMPL_VAR FIELD-EDITCONTENT><br />
+</div>
 </li>
 <TMPL_IF NAME="CAN_COMMIT">
 <li>