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 {
margin-top: 15px;
}
#filtersForm label {
display: block;
color: white;
}
.filter {
display: inline;
width: 200px;
display: block;
width: 300px;
height: 27px;
}
.singleFilterContainer {
display: inline;
}
.findContainer {
position: fixed;
right: 0;
width: 446px;
margin-right: 16px;
height: 30px;
margin-top: 140px;
margin-top: 180px;
background-color: #dddddd;
padding-left: 10px;
}
@@ -262,3 +270,14 @@ Footer View
line-height: 2em;
}
/*----------*/
.fullWidth {
width: 100%;
margin-left: auto;
margin-right: auto;
max-width: initial;
}
@@ -12,27 +12,48 @@
<div class="fixedContainer">
<div class="nav"></div>
<form id="filtersForm">
Start:<input class="filter" id="start-filter" name="start" list="start-filter-list" type="text">
<datalist id="start-filter-list"></datalist>
<form id="filtersForm" class="row fullWidth align-middle">
<div class="singleFilterContainer small-12 medium-4 large-3 columns">
<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">
<datalist id="end-filter-list"></datalist>
<div class="singleFilterContainer small-12 medium-4 large-3 columns">
<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">
<datalist id="grouppats-filter-list"></datalist>
<div class="singleFilterContainer small-12 medium-4 large-3 columns">
<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">
<datalist id="foldpercent-filter-list"></datalist>
<div class="singleFilterContainer small-12 medium-4 large-3 columns">
<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">
<datalist id="foldpats-filter-list"></datalist>
<div class="singleFilterContainer small-12 medium-4 large-3 columns">
<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">
<datalist id="incpats-filter-list"></datalist>
<div class="singleFilterContainer small-12 medium-4 large-3 columns">
<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">
<datalist id="excpats-filter-list"></datalist>
<div class="singleFilterContainer small-12 medium-4 large-3 columns">
<label>ExcPats:</label>
<input class="filter" name="excpats" list="excpats-filter-list" type="text">
<datalist id="excpats-filter-list"></datalist>
</div>
</form>
<ul class="tabs" data-tabs id="tabs">
@@ -184,8 +205,17 @@
$('#footer').append(foot);
$(document).foundation();
placeFindContainer();
}
);
//$(window).resize(function() {
// placeFindContainer();
//});
//function placeFindContainer() {
// $(".findContainer").css("top", $("#tabs").offset().top - 52);
//}
</script>
@@ -235,6 +265,7 @@
});
/*_____________________________________*/
/*_______ Tab Updater Function ________*/
/*_____________________________________*/