Style improvements

pull/3/head
assar 7 years ago
parent d5b2b8708b
commit bbdeffed65

@ -2,14 +2,14 @@ function overlay_in() {
$('.shadow').css({'display' : 'block'}); $('.shadow').css({'display' : 'block'});
$('.overlay').css({'display' : 'block'}); $('.overlay').css({'display' : 'block'});
$('.shadow').animate({'opacity' : 0.7}); $('.shadow').animate({'opacity' : 0.7});
$('.overlay').animate({'top' : '10%'}); $('.overlay').animate({'opacity' : 1.0, 'top' : '10%'});
} }
function overlay_out() { function overlay_out() {
$('.shadow').animate({'opacity' : 0.0}, function () { $('.shadow').animate({'opacity' : 0.0}, function () {
$('.overlay').css({'display' : 'none'}); $('.overlay').css({'display' : 'none'});
}); });
$('.overlay').animate({'top' : '-70%'}, function () { $('.overlay').animate({'opacity' : 0.0, 'top' : '5%'}, function () {
$('.shadow').css({'display' : 'none'}); $('.shadow').css({'display' : 'none'});
}); });
end_edit(); end_edit();

@ -55,11 +55,11 @@ input[type=text].search-bar {
.filter-container { .filter-container {
background-color: #226666; background-color: #226666;
padding: 5pt; padding: 10pt 15pt 10pt 15pt;
margin: 10pt auto; margin-top: 10pt;
width: 48%; margin-bottom: 10pt;
border-radius: 2pt; border-radius: 2pt;
padding-left: 15pt; display: inline-block;
} }
.filter-container p { .filter-container p {
@ -71,6 +71,10 @@ input[type=text].search-bar {
margin-bottom: 4pt; margin-bottom: 4pt;
} }
.filter-concontainertainer {
text-align: center;
}
input[type=checkbox]{ input[type=checkbox]{
display: none; display: none;
} }
@ -222,16 +226,14 @@ div label input {
display: none; display: none;
height: 70%; height: 70%;
left: 20%; left: 20%;
/*padding: 8pt;*/ padding: 0;
padding: 0; position: fixed;
/*position: absolute; /*Should probably be 'fixed' instead*/ top:5%;
position: fixed;
top: -70%;
top:10%;
width: 60%; width: 60%;
z-index: 201; z-index: 201;
border-radius: 2pt; border-radius: 2pt;
text-align: center; text-align: center;
opacity: 0.0;
} }
/*.details-row { /*.details-row {
@ -308,3 +310,7 @@ div label input {
#datasheet-info p { #datasheet-info p {
font-size: 12pt; font-size: 12pt;
} }
.bottom-spacer {
height: 80pt;
}

@ -18,12 +18,14 @@
<div class="search-bar-container"> <div class="search-bar-container">
<input type="text" name="search-bar" class="search-bar" placeholder="Search parts"> <input type="text" name="search-bar" class="search-bar" placeholder="Search parts">
</div> </div>
<div class="filter-container"> <div class="filter-concontainertainer">
<p>Search in:</p> <div class="filter-container">
<input type="checkbox" id="type" checked></input><label class="toggle-btn" for="type">Manufacturer</label> <p>Search in:</p>
<input type="checkbox" id="partno" checked></input><label class="toggle-btn" for="partno">Part Number</label> <input type="checkbox" id="type" checked></input><label class="toggle-btn" for="type">Manufacturer</label>
<input type="checkbox" id="description" checked></input><label class="toggle-btn" for="description">Description</label> <input type="checkbox" id="partno" checked></input><label class="toggle-btn" for="partno">Part Number</label>
<input type="checkbox" id="notes" checked></input><label class="toggle-btn" for="notes">Notes</label> <input type="checkbox" id="description" checked></input><label class="toggle-btn" for="description">Description</label>
<input type="checkbox" id="notes" checked></input><label class="toggle-btn" for="notes">Notes</label>
</div>
</div> </div>
<div class="res-header-small">Block</div> <div class="res-header-small">Block</div>
<div class="res-header">Manufacturer</div> <div class="res-header">Manufacturer</div>
@ -33,6 +35,7 @@
<div class="res-header-small">Docs</div> <div class="res-header-small">Docs</div>
<div class="results"> <div class="results">
</div> </div>
<div class="bottom-spacer"></div>
<div class="shadow" onclick="overlay_out()"></div> <div class="shadow" onclick="overlay_out()"></div>
<div class="overlay"> <div class="overlay">

Loading…
Cancel
Save