highlight active search filters in green

This commit is contained in:
Oliver Gorwits
2012-01-09 10:58:28 +00:00
parent a0c4c21e61
commit 9e9d408857
3 changed files with 46 additions and 5 deletions

View File

@@ -3,6 +3,15 @@ body {
padding-top: 50px;
}
/* the bootstrap style is only set for input */
/* also make the green a little more bold */
form .clearfix.success select {
border-color: green;
}
form .clearfix.success input {
border-color: green;
}
.well {
margin-right: 15px;
}

View File

@@ -72,4 +72,36 @@
$(this).parents('.add-on').toggleClass('active', $(this).is(':checked'));
};
$('.add-on :checkbox').each(syncCheckBox).click(syncCheckBox);
// highlight active search filters in green
// there must be a way to factor this out to a func but my JS is weak :-/
$("form .clearfix input").not("[name=q]").each(function() {
if ($(this).val() === "") {
$(this).parent(".clearfix").removeClass('success');
} else {
$(this).parent(".clearfix").addClass('success');
}
});
$("form .clearfix input").not("[name=q]").change(function() {
if ($(this).val() === "") {
$(this).parent(".clearfix").removeClass('success');
} else {
$(this).parent(".clearfix").addClass('success');
}
});
$("form .clearfix select").each(function() {
if ($(this).find(":selected").length === 0) {
$(this).parent(".clearfix").removeClass('success');
} else {
$(this).parent(".clearfix").addClass('success');
}
});
$("form .clearfix select").change(function() {
if ($(this).find(":selected").length === 0) {
$(this).parent(".clearfix").removeClass('success');
} else {
$(this).parent(".clearfix").addClass('success');
}
});
});

View File

@@ -2,27 +2,27 @@
<p><em>Device Search Options</em></p>
<div class="clearfix">
<input class="span3" placeholder="System Name"
type="text" id="name" name="name"
type="text" id="name" name="name" value="[% params.name %]"
rel="twipsy" data-placement="right" data-offset="5" title="System Name"/>
</div>
<div class="clearfix">
<input class="span3" placeholder="Location"
type="text" id="location" name="location"
type="text" id="location" name="location" value="[% params.location %]"
rel="twipsy" data-placement="right" data-offset="5" title="Location"/>
</div>
<div class="clearfix">
<input class="span3" placeholder="DNS"
type="text" id="dns" name="dns"
type="text" id="dns" name="dns" value="[% params.dns %]"
rel="twipsy" data-placement="right" data-offset="5" title="DNS"/>
</div>
<div class="clearfix">
<input class="span3" placeholder="IP Address"
type="text" id="ip" name="ip"
type="text" id="ip" name="ip" value="[% params.ip %]"
rel="twipsy" data-placement="right" data-offset="5" title="IP Address"/>
</div>
<div class="clearfix">
<input class="span3" placeholder="Description"
type="text" id="description" name="description"
type="text" id="description" name="description" value="[% params.description %]"
rel="twipsy" data-placement="right" data-offset="5" title="Description"/>
</div>
<div class="clearfix">