Populated overlay with info containers

static/script.js

@@ -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();

static/style.css

@@ -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;
+	/*padding: 8pt;*/
-	position: absolute; /*Should probably be 'fixed' instead*/
+  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;
+}

templates/partsearch.html

@@ -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>