From 97d8a6a36e1dfc03f4e5222f921802703812bc1a Mon Sep 17 00:00:00 2001 From: Davide Bongiovanni Date: Sun, 4 Jun 2017 22:25:27 +0200 Subject: [PATCH] Continued building web page --- .gitignore | 1 + static/script.js | 56 ++++++++++++ static/style.css | 179 +++++++++++++++++++++++++++++++++++++- templates/partsearch.html | 25 +++++- 4 files changed, 257 insertions(+), 4 deletions(-) diff --git a/.gitignore b/.gitignore index c4637c8..10274b4 100644 --- a/.gitignore +++ b/.gitignore @@ -1 +1,2 @@ admin.json +*.scss diff --git a/static/script.js b/static/script.js index e69de29..0b31957 100644 --- a/static/script.js +++ b/static/script.js @@ -0,0 +1,56 @@ +$(document).ready(function() { + $('.search-bar').on('keyup', function() { + var query = $('.search-bar').val(); + var filter = 0; + if($('#type').is(':checked')) + filter += 1; + if($('#partno').is(':checked')) + filter += 2 + 4 + 8; + if($('#description').is(':checked')) + filter += 16; + if($('#notes').is(':checked')) + filter += 32; + $.getJSON('http://127.0.0.1:5000/query/' + filter + '/' + query, function(data) { + var newResults = '
'; + for(var i = 0; i < data.length; i++) { // Create new view for results + newResults += '
'; + + newResults += '
'; + if (data[i].block != null) + newResults += data[i].block; + newResults += '
'; + + newResults += '
'; + if (data[i].type != null) + newResults += data[i].type; + newResults += '
'; + + newResults += '
'; + if (data[i].partno != null) + newResults += data[i].partno; + newResults += '
'; + + newResults += '
'; + if (data[i].description != null) + newResults += data[i].description; + newResults += '
'; + + newResults += '
'; + if (data[i].notes != null) + newResults += '
' + data[i].notes + '
'; + //newResults += data[i].notes; + newResults += '
'; + + newResults += '
'; + if (data[i].datasheet != null) + newResults += ''; + newResults += '
'; + newResults += '
'; + } + newResults += '
'; + $('.results').replaceWith(newResults); + }).fail(function() { + console.log( "failed" ); + }); + }); +}); diff --git a/static/style.css b/static/style.css index 2f4e4e3..20ab81f 100644 --- a/static/style.css +++ b/static/style.css @@ -4,12 +4,187 @@ html { font-family: 'Roboto', sans-serif; } +body { + margin: 0; +} + h1 { - margin-left: 40pt; - margin-top: 20pt; + padding: 16pt; + margin: 0 0 20pt 0; + text-align: center; + color: #D7E2E2; + background-color: #013A3A; } p { + text-align: center; +} + +input[type=text] { + color: #404040; + font-size: 20pt; + padding: 5pt 8pt 5pt 8pt; + margin-top: 8pt; + margin-bottom: 8pt; margin-left: 20pt; + width: 70%; + border: 2pt solid grey; + border-radius: 5pt; +} + +.filter-container { + background-color: #226666; + padding: 5pt; + margin-top: 10pt; + margin-left: 15%; + margin-right: 13%; + margin-bottom: 10pt; + border-radius: 2pt; + padding-left: 15pt; +} + +.filter-container p { + text-align: left; + color: #D7E2E2; + font-size: 10pt; + margin-top: 4pt; + margin-left: 16pt; + margin-bottom: 4pt; +} + +input[type=checkbox]{ + display: none; +} + +input[type=checkbox] + label.toggle-btn { + border-radius: 3pt; + display: inline-block; + padding: 5pt; + color: #D7E2E2; + margin-top: 6pt; + margin-bottom: 6pt; + margin-left: 3pt; + margin-right: 3pt; + width: 100pt; + text-align: center; + transition: 0.2s; + -webkit-transition: 0.2s; +} + +input[type=checkbox]:checked + label.toggle-btn { + background-color: #D7E2E2; + color: #000F0F; +} + +.search-bar-container { + text-align: center; +} + +.results { + margin-top: 5pt; + margin-left: 2pt; + margin-right: 2pt; +} + +.results-row { + padding: 5pt; + font-size: 16pt; +} + +.results-row:nth-child(2n+1) { + background-color: #5E9292; +} + +.results-row div { + display: inline-block; + width: 16.7%; + margin-left: 6pt; + margin-right: 6pt; } +.results-row .results-datasheet { + width: 5%; + text-align: center; +} + +.results-row .results-notes { + width: 5%; + text-align: center; +} + +.results-row .results-block { + width: 5%; + text-align: center; +} + +.results-row .results-description { + width: 43.5%; +} + +div label input { + margin-right:100px; +} + +.res-header, .res-header-3, .res-header-small { + display: inline-block; + margin-left: 2pt; + background-color: #226666; + color: #D7E2E2; + padding: 4pt; + border-radius: 2pt; + text-align: center; +} + +.res-header { + width: 16.7%; +} + +.res-header-small { + width: 5%; +} + +.res-header-3 { + width: 43.5%; +} + +.tooltip { + position: relative; + display: inline-block; + border-bottom: 1px dotted black; +} + +.tooltip .tooltiptext { + font-size: 10pt; + visibility: hidden; + width: 120px; + background-color: black; + color: #fff; + text-align: center; + border-radius: 6px; + padding: 5px 0; + position: absolute; + z-index: 1; + top: -5px; + right: 105%; + margin-left: -60px; + + /* Fade in tooltip - takes 1 second to go from 0% to 100% opac: */ + opacity: 0; + transition: opacity 0.2s; +} + +.tooltip:hover .tooltiptext { + visibility: visible; + opacity: 1; +} + +.tooltip .tooltiptext::after { + content: " "; + position: absolute; + top: 50%; + left: 100%; /* To the right of the tooltip */ + margin-top: -5px; + border-width: 5px; + border-style: solid; + border-color: transparent transparent transparent black; +} diff --git a/templates/partsearch.html b/templates/partsearch.html index c21999d..7beaf5f 100644 --- a/templates/partsearch.html +++ b/templates/partsearch.html @@ -3,13 +3,34 @@ ELAB Part Search Engine + +

ELAB Part Search Engine

-

Looking for obsolete ICs that were discontinued years ago?

+

Looking for obsolete ICs that were discontinued years ago? Just start typing!

+
+ +
+
+

Search in:

+ + + + +
+
Block
+
Manufacturer
+
Part Number
+
Description
+
Notes
+
Docs
+
-