Populated overlay with info containers

pull/3/head
Davide Bongiovanni 8 years ago
parent dc9367de80
commit e95b6df540

@ -14,6 +14,41 @@ function overlay_out() {
});
}
function init_edit() {
var block_input = $('<input type="text" class="part-edit-input" id="block-input" placeholder="Location">')
block_input.val($('#block-info').text());
$('#block-info').replaceWith(block_input);
var partno_input = $('<input type="text" class="part-edit-input" id="partno-input" placeholder="Part number">')
partno_input.val($('#partno-info').text());
$('#partno-info').replaceWith(partno_input);
var description_input = $('<input type="text" class="part-edit-input" id="description-input" placeholder="Description">')
description_input.val($('#description-info').text());
$('#description-info').replaceWith(description_input);
var quantity_input = $('<input type="text" class="part-edit-input" id="quantity-input" placeholder="Quantity">')
quantity_input.val($('#quantity-info').text());
$('#quantity-info').replaceWith(quantity_input);
var notes_input = $('<input type="text" class="part-edit-input" id="notes-input" placeholder="Notes">')
notes_input.val($('#notes-info').text());
$('#notes-info').replaceWith(notes_input);
var datasheet_input = $('<input type="text" class="part-edit-input" id="datasheet-input" placeholder="Datasheet">')
datasheet_input.val($('#datasheet-info').text());
$('#datasheet-info').replaceWith(datasheet_input);
var newButton = '<div class="round-button"><a href="#" onclick="save()"><i class="fa fa-check" aria-hidden="true"></i></a></div>';
$('.round-button').replaceWith(newButton);
}
function save() {
var newButton = '<div class="round-button"><a href="#" onclick="init_edit()"><i class="fa fa-pencil" aria-hidden="true"></i></a></div>';
console.log('pls add init edit code')
$('.round-button').replaceWith(newButton);
}
$(document).ready(function() {
$('.search-bar').on('keyup', function() {
var query = $('.search-bar').val();

@ -20,7 +20,11 @@ p {
text-align: center;
}
input[type=text] {
a {
color: #000F0F;
}
input[type=text].search-bar {
color: #404040;
font-size: 20pt;
padding: 5pt 8pt 5pt 8pt;
@ -206,11 +210,85 @@ div label input {
display: none;
height: 70%;
left: 20%;
padding: 8pt;
position: absolute; /*Should probably be 'fixed' instead*/
/*padding: 8pt;*/
padding: 0;
/*position: absolute; /*Should probably be 'fixed' instead*/
position: fixed;
top: -70%;
top:10%;
width: 60%;
z-index: 201;
border-radius: 2pt;
text-align: center;
}
/*.details-row {
padding-top: 10pt;
padding-bottom: 10pt;
}*/
.details-item {
display: inline-block;
width: 25%;
padding: 12pt 10pt 12pt 0;
text-align: right;
text-transform: uppercase;
}
.details-content {
display: inline-block;
width: 65%;
padding-left: 20pt;
text-align: left;
}
.details-content p {
text-align: left;
}
.round-button {
position: absolute;
bottom: 15pt;
right: 15pt;
width: 40pt;
height: 32pt;
border-radius: 20pt;
background-color: #5E9292;
font-size: 20pt;
padding-top: 8pt;
box-shadow: 2pt 1pt 8pt black;
}
.round-button a{
color: #D7E2E2;
}
.small-square-button {
position: absolute;
top: 5pt;
right: 5pt;
padding-right: 5pt;
font-size: 16pt;
}
.small-square-button a {
color: #D7E2E2;
}
.round-floating-button {
position: fixed;
bottom: 15pt;
right: 15pt;
width: 40pt;
height: 32pt;
border-radius: 20pt;
background-color: #5E9292;
font-size: 22pt;
padding-top: 8pt;
box-shadow: 2pt 1pt 8pt black;
text-align: center;
}
.round-floating-button a{
color: #D7E2E2;
}

@ -36,7 +36,41 @@
<div class="shadow" onclick="overlay_out()"></div>
<div class="overlay">
<!--<h2 class="card-id"></h2>
<h2>Part Details</h2>
<div class="details-row">
<div class="details-item">Location</div>
<div class="details-content"><p id="block-info">Block 1</p></div>
</div>
<div class="details-row">
<div class="details-item">Part Number</div>
<div class="details-content"><p id="partno-info"></p></div>
</div>
<div class="details-row">
<div class="details-item">Description</div>
<div class="details-content"><p id="description-info"></p></div>
</div>
<div class="details-row">
<div class="details-item">Quantity</div>
<div class="details-content"><p id="quantity-info"></p></div>
</div>
<div class="details-row">
<div class="details-item">Notes</div>
<div class="details-content"><p id="notes-info"></p></div>
</div>
<div class="details-row">
<div class="details-item">Datasheet</div>
<div class="details-content"><p id="datasheet-info"></p></div>
</div>
<div class="round-button"><a href="#" onclick="init_edit()"><i class="fa fa-pencil" aria-hidden="true"></i></a></div>
<div class="small-square-button"><a href="#" onclick="overlay_out()"><i class="fa fa-times" aria-hidden="true"></i></a></div>
<!--<h2 class="card-id"></h2>
<input type="text" name="name" placeholder="Name" id="name"><br><br>
<div class="checkbox-wrapper">
&emsp;<input type="checkbox" name="fridge" value="Fridge" id="fridge"> Fridge <br>
@ -45,5 +79,6 @@
<input type="button" class="button" value="Cancel" id="cancel" onclick="overlay_out()">
<input type="button" class="button" value="Save" id="save" onclick="save()">-->
</div>
<div class="round-floating-button"><a href="#"><i class="fa fa-plus" aria-hidden="true"></i></a></div>
</body>
</html>

Loading…
Cancel
Save