From: paul <paul@plutz.net>
Date: Mon, 7 Nov 2016 19:05:45 +0000 (+0000)
Subject: improved styling for filter input
X-Git-Url: https://git.plutz.net/?p=confetti;a=commitdiff_plain;h=0148cdea1cf6f906cc401885013da20774034d75

improved styling for filter input

svn path=/trunk/; revision=137
---

diff --git a/static/cards.css b/static/cards.css
index 9397dc3..5d78a0f 100644
--- a/static/cards.css
+++ b/static/cards.css
@@ -64,6 +64,26 @@
   margin-top: .5em;
 }
 
+.filter fieldset.item { padding-left: 0; }
+.filter fieldset.item legend { display: none; }
+.filter fieldset.item input[type=text] {
+  background-color: #FFF;
+  border: 1px solid #000;
+  margin-top: -1px;
+  padding: .25em .5em;
+}
+.filter fieldset.item input[type=radio] { display: none; }
+.filter fieldset.item input[type=radio] + label {
+  position: relative; z-index: 1;
+  margin: 0; padding: .25em 1em;
+  
+}
+.filter fieldset.item input[type=radio]:checked + label {
+  background-color: #FFF;
+  border: 1px solid #000;
+  border-bottom-color: #FFF;
+}
+
 .newcard {
   display: block;
   border: solid 1px;
diff --git a/templates/cards.html.sh b/templates/cards.html.sh
index df630c0..2eca4d1 100755
--- a/templates/cards.html.sh
+++ b/templates/cards.html.sh
@@ -26,21 +26,35 @@ cat <<EOF
 <form class="filter" action="?action=filter_card" method="POST">
   <h1>$(l10n filter_label)</h1>
   <input type="hidden" name="page" value="cards"/>
-  <input type="text" name="filter" value="${_GET[filter]}" placeholder="$(l10n filter_placeholder)"/>
-  <br />
-  <fieldset>
-  <legend>$(l10n filter_type):</legend>
-    <label><input type="radio" name="filtertype" value="any"       $(check_type any)      >$(l10n filter_all)</label>
-    <label><input type="radio" name="filtertype" value="name"      $(check_type name)     >$(l10n filter_name)</label>
-    <label><input type="radio" name="filtertype" value="street"    $(check_type street)   >$(l10n filter_street)</label>
-    <label><input type="radio" name="filtertype" value="zip"       $(check_type zip)      >$(l10n filter_zip)</label>
-    <label><input type="radio" name="filtertype" value="telephone" $(check_type telephone)>$(l10n filter_phone)</label>
-    <label><input type="radio" name="filtertype" value="birth"     $(check_type birth)    >$(l10n filter_birthyear)</label>
+  <fieldset class="item">
+  <legend>$(l10n filter_item):</legend>
+    <input  id="any" type="radio" name="filtertype" value="any" $(check_type any)>
+    <label for="any" >$(l10n filter_all)</label>
+
+    <input  id="name" type="radio" name="filtertype" value="name" $(check_type name)>
+    <label for="name">$(l10n filter_name)</label>
+
+    <input  id="street" type="radio" name="filtertype" value="street" $(check_type street)>
+    <label for="street">$(l10n filter_street)</label>
+
+    <input  id="zip" type="radio" name="filtertype" value="zip" $(check_type zip)>
+    <label for="zip">$(l10n filter_zip)</label>
+
+    <input  id="telephone" type="radio" name="filtertype" value="telephone" $(check_type telephone)>
+    <label for="telephone">$(l10n filter_phone)</label>
+
+    <input  id="birth" type="radio" name="filtertype" value="birth" $(check_type birth)>
+    <label for="birth">$(l10n filter_birthyear)</label>
+
     ${profile_circus:+
-    <label><input type="radio" name="filtertype" value="course"    $(check_type course)   >$(l10n filter_course)</label>
+    <input  id="course" type="radio" name="filtertype" value="course" $(check_type course)>
+    <label for="course">$(l10n filter_course)</label>
     }
+
+    <input type="text" name="filter" value="${_GET[filter]}" placeholder="$(l10n filter_placeholder)"/>
   </fieldset>
-  <fieldset>
+
+  <fieldset class="order">
     <legend>$(l10n filter_order):</legend>
     <label><input type="radio" name="order" value="firstname" $(check_order firstname)>$(l10n filter_firstname)</label>
     <label><input type="radio" name="order" value="lastname"  $(check_order lastname) >$(l10n filter_lastname)</label>