From: Joey Hess <joey@kitenet.net>
Date: Fri, 7 May 2010 01:45:17 +0000 (-0400)
Subject: Gave comment and page editing forms some CSS and accessability love.
X-Git-Tag: 3.20100515~75^2~14
X-Git-Url: http://git.vanrenterghem.biz/git.ikiwiki.info.git/commitdiff_plain/931045301a3a5be917b775277f2a3088209a00f2

Gave comment and page editing forms some CSS and accessability love.

In particular, added <label> tags.

(However, could not find a good way to add a label tag for the main
page edit textarea.)
---

diff --git a/debian/changelog b/debian/changelog
index 6b4ba7592..77fd13826 100644
--- a/debian/changelog
+++ b/debian/changelog
@@ -4,6 +4,7 @@ ikiwiki (3.20100505) UNRELEASED; urgency=low
     a single template, page.tmpl.
   * If you have a locally customised page.tmpl, it needs to be updated
     to set <base> when BASEURL or FORCEBAREURL is set.
+  * Gave comment and page editing forms some CSS and accessability love.
 
  -- Joey Hess <joeyh@debian.org>  Wed, 05 May 2010 18:07:29 -0400
 
diff --git a/doc/style.css b/doc/style.css
index f2f558497..393f40135 100644
--- a/doc/style.css
+++ b/doc/style.css
@@ -419,6 +419,20 @@ span.color {
 	padding: 3px;
 }
 
+label.block {    
+	display: block;   
+}
+label.inline {    
+	display: inline;
+}
+ol.form {
+	list-style: none;
+	padding: 0;
+}
+li.form {
+	padding-bottom: 1em;
+}
+
 /* Used by the highlight plugin. */
 pre.hl { color:#000000; background-color:#ffffff; }
 .hl.num { color:#2928ff; }
diff --git a/templates/editcomment.tmpl b/templates/editcomment.tmpl
index 51ab10f2c..f3a8e7395 100644
--- a/templates/editcomment.tmpl
+++ b/templates/editcomment.tmpl
@@ -4,22 +4,37 @@
 <TMPL_VAR FIELD-DO>
 <TMPL_VAR FIELD-SID>
 <TMPL_VAR FIELD-PAGE>
-<TMPL_UNLESS USERNAME>
-<TMPL_IF ALLOWAUTHOR>
-Name: <TMPL_VAR FIELD-AUTHOR> (optional, or
-<a href="<TMPL_VAR SIGNINURL>">signin</a>)<br />
-Website: <TMPL_VAR FIELD-URL> (optional)<br />
+<ol class="form">
+<TMPL_UNLESS NAME=USERNAME>
+<TMPL_IF NAME=ALLOWAUTHOR>
+<li>
+<label for="author" class="block">Name:</label>
+<TMPL_VAR NAME=FIELD-AUTHOR> (optional, or <a href="<TMPL_VAR SIGNINURL>">signin</a>)
+</li>
+<li>
+<label for="url" class="block">Website:</label>
+<TMPL_VAR NAME=FIELD-URL> (optional)
+</li>
 <TMPL_ELSE>
-(You might want to <a href="<TMPL_VAR SIGNINURL>">Signin</a> first?)<br />
+<li>
+(You might want to <a href="<TMPL_VAR SIGNINURL>">Signin</a> first?)
+</li>
 </TMPL_IF>
 </TMPL_UNLESS>
-Subject: <TMPL_VAR FIELD-SUBJECT><br />
+<li>
+<label for="subject" class="block">Subject:</label>
+<TMPL_VAR FIELD-SUBJECT><br />
+</li>
+<li>
+<label for="editcontent" class="block">Comment:</label>
 <TMPL_VAR FIELD-EDITCONTENT><br />
+</li>
+</ol>
 <TMPL_VAR FORM-SUBMIT> <TMPL_VAR FIELD-TYPE> <TMPL_VAR HELPONFORMATTINGLINK><br />
-<TMPL_VAR FORM-END>
+<TMPL_VAR NAME="FORM-END">
 <TMPL_VAR WMD_PREVIEW>
 
-<TMPL_IF PAGE_PREVIEW>
+<TMPL_IF NAME="PAGE_PREVIEW">
 <hr />
 <div class="header">
 <span>Comment preview:</span>
diff --git a/templates/editpage.tmpl b/templates/editpage.tmpl
index 6d8a902a2..1e2d070ed 100644
--- a/templates/editpage.tmpl
+++ b/templates/editpage.tmpl
@@ -1,4 +1,3 @@
-<br />
 <TMPL_VAR JAVASCRIPT>
 <TMPL_VAR MESSAGE>
 <TMPL_VAR FORM-START>
@@ -7,30 +6,37 @@
 <TMPL_VAR FIELD-FROM>
 <TMPL_VAR FIELD-RCSINFO>
 <TMPL_VAR FIELD-NEWFILE>
-<TMPL_IF PAGE_SELECT>
-Page location: <TMPL_VAR FIELD-PAGE>
-Page type: <TMPL_VAR FIELD-TYPE>
+<ol class="form">
+<TMPL_IF NAME="PAGE_SELECT">
+<li>
+<label for="page" class="inline">Page location:</label><TMPL_VAR FIELD-PAGE>
+<label for="type" class="inline">Page type:</label><TMPL_VAR FIELD-TYPE>
+</li>
 <TMPL_ELSE>
-<br />
 <TMPL_VAR FIELD-PAGE>
 <TMPL_VAR FIELD-TYPE>
 </TMPL_IF>
+<li>
 <TMPL_VAR FIELD-EDITCONTENT><br />
-<TMPL_IF CAN_COMMIT>
-Optional comment about this change:<br />
+</li>
+<TMPL_IF NAME="CAN_COMMIT">
+<li>
+<label for="comments" class="block">Optional comment about this change:</label>
 <TMPL_VAR FIELD-COMMENTS><br />
+</li>
 </TMPL_IF>
+</ol>
 <TMPL_VAR FORM-SUBMIT>
 <TMPL_VAR HELPONFORMATTINGLINK>
-<TMPL_IF FIELD-ATTACHMENT>
+<TMPL_IF NAME="FIELD-ATTACHMENT">
 <a class="toggle" href="#attachments">Attachments</a>
 <div class="<TMPL_VAR ATTACHMENTS-CLASS>" id="attachments">
 <table>
 <tr><td colspan="5"><TMPL_VAR FIELD-ATTACHMENT><TMPL_VAR FIELD-UPLOAD></td></tr>
-<TMPL_LOOP ATTACHMENT_LIST>
+<TMPL_LOOP NAME="ATTACHMENT_LIST">
 <tr><td><TMPL_VAR FIELD-SELECT><TMPL_VAR LINK></td><td><TMPL_VAR SIZE></td><td><TMPL_VAR MTIME></td></tr>
 </TMPL_LOOP>
-<TMPL_IF ATTACHMENT_LIST>
+<TMPL_IF NAME="ATTACHMENT_LIST">
 <tr><td colspan="2"><TMPL_VAR FIELD-LINK><TMPL_VAR FIELD-RENAME><TMPL_VAR FIELD-REMOVE></td></tr>
 </TMPL_IF>
 </table>
@@ -39,7 +45,7 @@ Optional comment about this change:<br />
 <TMPL_VAR FORM-END>
 <TMPL_VAR WMD_PREVIEW>
 
-<TMPL_IF PAGE_PREVIEW>
+<TMPL_IF NAME="PAGE_PREVIEW">
 <hr />
 <div class="header">
 <span>Page preview:</span>