From 513140f087b46e18179c623729bf130e229165f9 Mon Sep 17 00:00:00 2001
From: Thomas Keil <tkeil (at) datacrystal (dot) de>
Date: Thu, 24 May 2007 19:26:47 +0000
Subject: Added nice frames around checkboxes and their labels, added logical
 labels (you can click the label now to enable the checkbox/radio)

---
 css/styles.css        |  5 +++--
 pages/edit_timer.ecpp | 45 ++++++++++++++++++++++++++++++++++++---------
 2 files changed, 39 insertions(+), 11 deletions(-)

diff --git a/css/styles.css b/css/styles.css
index 31b76f7..b88343f 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -711,10 +711,11 @@ div.screenshot {
 */
 
 div.dotted {
-	border: 1px dotted black;
-	padding: 5px;
+	border: 1px dotted #bbbbbb;
+	padding: 3px;
 	margin: 2px;
 	float: left;
+	background-color: #f3f3f3;
 }
 
 
diff --git a/pages/edit_timer.ecpp b/pages/edit_timer.ecpp
index c450505..2ed8863 100644
--- a/pages/edit_timer.ecpp
+++ b/pages/edit_timer.ecpp
@@ -135,8 +135,14 @@ if (!logged_in && LiveSetup().UseAuth()) return reply.redirect("login.html");
 						<td class="border" style="border-left: 1px solid black"></td>
 						<td class="label"><$ tr("Active") $>:</td>
 						<td>
-							<input name="active" value="1" <{ reply.out() << ( active ? "checked=\"checked\"" : "" ); }> type="radio"><$ tr("Yes") $>
-							<input name="active" value="0" <{ reply.out() << ( !active ? "checked=\"checked\"" : "" ); }> type="radio"><$ tr("No") $>
+							<div class="dotted">
+								<input id="active_1" name="active" value="1" <{ reply.out() << ( active ? "checked=\"checked\"" : "" ); }> type="radio"></input>
+								<label for="active_1"><$ tr("Yes") $></label>
+							</div>
+							<div class="dotted">
+								<input id="active_0" name="active" value="0" <{ reply.out() << ( !active ? "checked=\"checked\"" : "" ); }> type="radio"></input>
+								<label for="active_0"><$ tr("No") $></label>
+							</div>
 						</td>
 						<td class="border" style="border-right: 1px solid black"></td>
 					</tr>
@@ -166,13 +172,34 @@ if (!logged_in && LiveSetup().UseAuth()) return reply.redirect("login.html");
 						<td class="border" style="border-left: 1px solid black"></td>
 						<td class="label"><$ tr("Weekday") $>:</td>
 						<td>
-							<input type="checkbox" name="wday_mon" value="1" <{ reply.out() << ( wday_mon ? "checked=\"checked\"" : "" ); }>/> <$ tr("Monday") $>
-							<input type="checkbox" name="wday_tue" value="1" <{ reply.out() << ( wday_tue ? "checked=\"checked\"" : "" ); }>/> <$ tr("Tuesday") $>
-							<input type="checkbox" name="wday_wed" value="1" <{ reply.out() << ( wday_wed ? "checked=\"checked\"" : "" ); }>/> <$ tr("Wednesday") $>
-							<input type="checkbox" name="wday_thu" value="1" <{ reply.out() << ( wday_thu ? "checked=\"checked\"" : "" ); }>/> <$ tr("Thursday") $>
-							<input type="checkbox" name="wday_fri" value="1" <{ reply.out() << ( wday_fri ? "checked=\"checked\"" : "" ); }>/> <$ tr("Friday") $>
-							<input type="checkbox" name="wday_sat" value="1" <{ reply.out() << ( wday_sat ? "checked=\"checked\"" : "" ); }>/> <$ tr("Saturday") $>
-							<input type="checkbox" name="wday_sun" value="1" <{ reply.out() << ( wday_sun ? "checked=\"checked\"" : "" ); }>/> <$ tr("Sunday") $>
+							<div class="dotted">
+								<input id="wday_mon" type="checkbox" name="wday_mon" value="1" <{ reply.out() << ( wday_mon ? "checked=\"checked\"" : "" ); }> />
+								<label for="wday_mon"><$ tr("Monday") $></label>
+							</div>
+							<div class="dotted">
+								<input id="wday_tue" type="checkbox" name="wday_tue" value="1" <{ reply.out() << ( wday_tue ? "checked=\"checked\"" : "" ); }> />
+								<label for="wday_tue"><$ tr("Tuesday") $></label>
+							</div>
+							<div class="dotted">
+								<input id="wdry_wed" type="checkbox" name="wday_wed" value="1" <{ reply.out() << ( wday_wed ? "checked=\"checked\"" : "" ); }> />
+								<label for="wday_wed"><$ tr("Wednesday") $></label>
+							</div>
+							<div class="dotted">
+								<input id="wday_thu" type="checkbox" name="wday_thu" value="1" <{ reply.out() << ( wday_thu ? "checked=\"checked\"" : "" ); }> />
+								<label for="wday_thu"><$ tr("Thursday") $></label>
+							</div>
+							<div class="dotted">
+								<input id ="wday_fri" type="checkbox" name="wday_fri" value="1" <{ reply.out() << ( wday_fri ? "checked=\"checked\"" : "" ); }> />
+								<label for="wday_fri"><$ tr("Friday") $></label>
+							</div>
+							<div class="dotted">
+								<input id="wday_sat" type="checkbox" name="wday_sat" value="1" <{ reply.out() << ( wday_sat ? "checked=\"checked\"" : "" ); }> />
+								<label for="wday_sat"><$ tr("Saturday") $></label>
+							</div>
+							<div class="dotted">
+								<input id="wday_sun" type="checkbox" name="wday_sun" value="1" <{ reply.out() << ( wday_sun ? "checked=\"checked\"" : "" ); }> />
+								<label for="wday_sun"><$ tr("Sunday") $></label>
+							</div>
 						<td class="border" style="border-right: 1px solid black"></td>
 						</td>
 					</tr>
-- 
cgit v1.2.3