From e4bb2d661671ce8ef08c0e525a6e296d1fc01f10 Mon Sep 17 00:00:00 2001 From: Davide Bongiovanni Date: Mon, 5 Jun 2017 00:34:24 +0200 Subject: [PATCH] Added overlay with in and out animation --- static/script.js | 31 +++++++++++++++++++++++++++++-- static/style.css | 28 ++++++++++++++++++++++++++++ templates/partsearch.html | 15 ++++++++++++++- 3 files changed, 71 insertions(+), 3 deletions(-) diff --git a/static/script.js b/static/script.js index 0b31957..b73b61a 100644 --- a/static/script.js +++ b/static/script.js @@ -1,3 +1,19 @@ +function overlay_in() { + $('.shadow').css({'display' : 'block'}); + $('.overlay').css({'display' : 'block'}); + $('.shadow').animate({'opacity' : 0.7}); + $('.overlay').animate({'top' : '10%'}); +} + +function overlay_out() { + $('.shadow').animate({'opacity' : 0.0}, function () { + $('.overlay').css({'display' : 'none'}); + }); + $('.overlay').animate({'top' : '-70%'}, function () { + $('.shadow').css({'display' : 'none'}); + }); +} + $(document).ready(function() { $('.search-bar').on('keyup', function() { var query = $('.search-bar').val(); @@ -13,7 +29,8 @@ $(document).ready(function() { $.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 += ''; } newResults += '
'; $('.results').replaceWith(newResults); }).fail(function() { - console.log( "failed" ); + console.log( "Query failed" ); }); }); + + $('.results-row').on('click', function() { + var partID = $(this).attr('part-id'); + $.getJSON('http://127.0.0.1:5000/getpartinfo/' + partID, function(data) { + // TODO: Fill stuff with the fetched info + }).fail(function() { + console.log( "Fetching part info failed" ); + }); + }); }); diff --git a/static/style.css b/static/style.css index 20ab81f..184f74c 100644 --- a/static/style.css +++ b/static/style.css @@ -67,6 +67,7 @@ input[type=checkbox] + label.toggle-btn { margin-right: 3pt; width: 100pt; text-align: center; + border: 1pt solid #D7E2E2; transition: 0.2s; -webkit-transition: 0.2s; } @@ -188,3 +189,30 @@ div label input { border-style: solid; border-color: transparent transparent transparent black; } + +.shadow { + background-color: black; + display: none; + height: 100%; + left: 0; + opacity: 0.0; + position: absolute; + top: 0; + width: 100%; + z-index: 200; +} + +.overlay { + background-color: #226666; + color: #D7E2E2; + display: none; + height: 70%; + left: 20%; + padding: 8pt; + position: absolute; /*Should probably be 'fixed' instead*/ + top: -70%; + width: 60%; + z-index: 201; + border-radius: 2pt; + text-align: center; +} diff --git a/templates/partsearch.html b/templates/partsearch.html index 7beaf5f..91ffd37 100644 --- a/templates/partsearch.html +++ b/templates/partsearch.html @@ -31,6 +31,19 @@
Description
Notes
Docs
-
+
+
+ +
+
+ +