Filters starting to flow better

This commit is contained in:
Kaelin Hooper
2016-08-10 16:02:26 -07:00
parent 0952a243f3
commit f3c94ba7a7
2 changed files with 68 additions and 18 deletions
@@ -106,22 +106,30 @@ Nav Bar Views
#filtersForm { #filtersForm {
margin-top: 15px; margin-top: 15px;
}
#filtersForm label {
display: block;
color: white; color: white;
} }
.filter { .filter {
display: inline; display: block;
width: 200px; width: 300px;
height: 27px; height: 27px;
} }
.singleFilterContainer {
display: inline;
}
.findContainer { .findContainer {
position: fixed; position: fixed;
right: 0; right: 0;
width: 446px; width: 446px;
margin-right: 16px; margin-right: 16px;
height: 30px; height: 30px;
margin-top: 140px; margin-top: 180px;
background-color: #dddddd; background-color: #dddddd;
padding-left: 10px; padding-left: 10px;
} }
@@ -262,3 +270,14 @@ Footer View
line-height: 2em; line-height: 2em;
} }
/*----------*/ /*----------*/
.fullWidth {
width: 100%;
margin-left: auto;
margin-right: auto;
max-width: initial;
}
@@ -12,27 +12,48 @@
<div class="fixedContainer"> <div class="fixedContainer">
<div class="nav"></div> <div class="nav"></div>
<form id="filtersForm"> <form id="filtersForm" class="row fullWidth align-middle">
Start:<input class="filter" id="start-filter" name="start" list="start-filter-list" type="text"> <div class="singleFilterContainer small-12 medium-4 large-3 columns">
<datalist id="start-filter-list"></datalist> <label>Start:</label>
<input class="filter" id="start-filter" name="start" list="start-filter-list" type="text">
<datalist id="start-filter-list"></datalist>
</div>
End:<input class="filter" id="end-filter" name="end" list="end-filter-list" type="text"> <div class="singleFilterContainer small-12 medium-4 large-3 columns">
<datalist id="end-filter-list"></datalist> <label>End:</label>
<input class="filter" id="end-filter" name="end" list="end-filter-list" type="text">
<datalist id="end-filter-list"></datalist>
</div>
GroupPats:<input class="filter" name="grouppats" list="grouppats-filter-list" type="text"> <div class="singleFilterContainer small-12 medium-4 large-3 columns">
<datalist id="grouppats-filter-list"></datalist> <label>GroupPats:</label>
<input class="filter" name="grouppats" list="grouppats-filter-list" type="text">
<datalist id="grouppats-filter-list"></datalist>
</div>
Fold%:<input class="filter" name="foldpct" list="foldpercent-filter-list" type="text" value="1"> <div class="singleFilterContainer small-12 medium-4 large-3 columns">
<datalist id="foldpercent-filter-list"></datalist> <label>Fold%:</label>
<input class="filter" name="foldpct" list="foldpercent-filter-list" type="text" value="1">
<datalist id="foldpercent-filter-list"></datalist>
</div>
FoldPats:<input class="filter" name="foldpats" list="foldpats-filter-list" type="text"> <div class="singleFilterContainer small-12 medium-4 large-3 columns">
<datalist id="foldpats-filter-list"></datalist> <label>FoldPats:</label>
<input class="filter" name="foldpats" list="foldpats-filter-list" type="text">
<datalist id="foldpats-filter-list"></datalist>
</div>
IncPats:<input class="filter" name="incpats" list="incpats-filter-list" type="text"> <div class="singleFilterContainer small-12 medium-4 large-3 columns">
<datalist id="incpats-filter-list"></datalist> <label>IncPats:</label>
<input class="filter" name="incpats" list="incpats-filter-list" type="text">
<datalist id="incpats-filter-list"></datalist>
</div>
ExcPats:<input class="filter" name="excpats" list="excpats-filter-list" type="text"> <div class="singleFilterContainer small-12 medium-4 large-3 columns">
<datalist id="excpats-filter-list"></datalist> <label>ExcPats:</label>
<input class="filter" name="excpats" list="excpats-filter-list" type="text">
<datalist id="excpats-filter-list"></datalist>
</div>
</form> </form>
<ul class="tabs" data-tabs id="tabs"> <ul class="tabs" data-tabs id="tabs">
@@ -184,8 +205,17 @@
$('#footer').append(foot); $('#footer').append(foot);
$(document).foundation(); $(document).foundation();
placeFindContainer();
} }
); );
//$(window).resize(function() {
// placeFindContainer();
//});
//function placeFindContainer() {
// $(".findContainer").css("top", $("#tabs").offset().top - 52);
//}
</script> </script>
@@ -235,6 +265,7 @@
}); });
/*_____________________________________*/ /*_____________________________________*/
/*_______ Tab Updater Function ________*/ /*_______ Tab Updater Function ________*/
/*_____________________________________*/ /*_____________________________________*/