From a833ebbfe64cab3e9c742bb522e0577ab268cdb7 Mon Sep 17 00:00:00 2001 From: Amolith Date: Sat, 2 Feb 2019 15:35:21 -0500 Subject: [PATCH] . . . lots of stuff --- _sass/_default.scss | 33 +++++++++++++ app.js | 112 ++++++++++++++++++++++++++++++++++++++++++++ cards/info.json | 20 ++++++++ index.html | 2 +- jquery-3.3.1.min.js | 2 + librehost.json | 4 +- test.html | 28 +++++++++++ 7 files changed, 198 insertions(+), 3 deletions(-) create mode 100644 app.js create mode 100644 cards/info.json create mode 100644 jquery-3.3.1.min.js create mode 100644 test.html diff --git a/_sass/_default.scss b/_sass/_default.scss index a2bdb26724e8391ea6dc6900d1e7f03581f9f345..378b8ef7186be116fbff4b2738011b847c8e000f 100644 --- a/_sass/_default.scss +++ b/_sass/_default.scss @@ -60,6 +60,33 @@ } /* =Base */ + + + + +input[type=text] { + width: 25%; + box-sizing: border-box; + border: 2px solid #333333; + border-radius: 40px; + background-color: #333333; + font-size: 16px; + text-align: center; + padding: 10px 0px 10px 0px; + -webkit-transition: width 0.4s ease-in-out; + transition: width 0.4s ease-in-out; + -moz-box-shadow: inset 0 0 10px #191919; + -webkit-box-shadow: inset 0 0 10px #191919; + box-shadow: inset 0 0 10px #191919; +} + +input[type=text]:focus { + width: 75%; +} + + + + body { font-family: 'Open Sans'; color: $iron; @@ -505,6 +532,12 @@ strong { } } @media (max-width: 620px) { + input[type=text] { + width: 80%; + } + input[type=text]:focus { + width: 100%; + } .card { width: 80%; } diff --git a/app.js b/app.js new file mode 100644 index 0000000000000000000000000000000000000000..0f09039cd6d067530c53a6966bb9bedb4ae34d27 --- /dev/null +++ b/app.js @@ -0,0 +1,112 @@ + +$(function(){ + + var model = { + // renomear + dat: [ + + ], + read_json: function() { + + $.ajax({ + url: "cards/info.json", + dataType: 'json', + async: false, + success: function(data) { + $(data["cards"]).each(function(){ + var card_info = $(this)[0]; + model.set_data(card_info); + }); + } + }); + + }, + set_data: function(d) { + model.dat.push(d); + }, + get_data: function() { + return model.dat; + }, + filter_data: function(conteudo) { + var $d = model.dat; + var $filter = []; + var $c = conteudo.toLowerCase(); + $($d).each(function(i){ + if( + $d[i].name.toLowerCase().indexOf($c) >= 0 || + $d[i].description.toLowerCase().indexOf($c) >= 0 || + $d[i].button_text.toLowerCase().indexOf($c) >= 0 + ) { + $filter.push($d[i]); + } + }); + + return $filter; + }, + init: function() { + model.read_json(); + } + }; + + + var octopus = { + init: function() { + model.init(); + view.init(); + octopus.create_card(model.get_data()); + }, + create_card: function(d) { + $.each(d, function(i){ + view.create_card(d[i].name, d[i].description, d[i].button_text); + }); + }, + filter_data: function(c) { + var d = model.filter_data(c); + $.each(d, function(i){ + view.create_card(d[i].name, d[i].description, d[i].button_text); + }); + }, + recreate_cards: function() { + octopus.create_card(model.get_data()); + } + }; + + // Renomear + var view = { + init: function() { + this.container = $(".flex-wrapper"); + this.search_field = $("#search_field"); + view.events(); + }, + events: function(){ + this.search_field.on('input',function(){ + var $conteudo = $(this).val(); + view.clean_cards(); + + + if($conteudo.length == 0){ + octopus.recreate_cards(); + }else { + octopus.filter_data($conteudo); + } + + }); + }, + create_card: function(name, desc, bt_txt){ + var $card = $("
").addClass("card"); + var $h2 = $("

").addClass("title").text(name); + var $desc = $("
").addClass("description").text(desc); + var $button = $("