From e92abddb502275630cf45b19a7d59f53b1eb78c9 Mon Sep 17 00:00:00 2001 From: Severyn Kozak Date: Sat, 17 May 2014 12:19:17 -0400 Subject: [PATCH] Add search group creation/selection. Add: static/js/index.js -Add advanced-search form search-group logic. -Allow users to create new search groups, and cycle through existing ones. static/templates/index.html -Add search-group count widget, and selection/addition buttons. static/sass/index.sass -Style the various search group elements. --- static/js/index.js | 59 ++++++++++++++++++++++--- static/sass/index.sass | 117 ++++++++++++++++++++++++++++++++++++++++++------- templates/index.html | 33 ++++++++++---- 3 files changed, 179 insertions(+), 30 deletions(-) diff --git a/static/js/index.js b/static/js/index.js index 05c4ae0..0a81a40 100644 --- a/static/js/index.js +++ b/static/js/index.js @@ -5,7 +5,6 @@ var advancedSearchDiv = $("div#advanced-search"); var advancedSearchButton = $("button#advanced-search"); -advancedSearchDiv.hide(); advancedSearchButton.click(function(){ var searchField = $("div#search-field"); if(!advancedSearchDiv.hasClass("visible")){ @@ -21,10 +20,8 @@ advancedSearchButton.click(function(){ } }); -$(function() { - $("#date-last-modified").datepicker(); - $("#date-created").datepicker(); -}); +$("#date-last-modified").datepicker(); +$("#date-created").datepicker(); var languages = new Bloodhound({ datumTokenizer: Bloodhound.tokenizers.obj.whitespace("value"), @@ -173,3 +170,55 @@ function loadMoreResults(){ result * 20); } } + +var searchGroups = []; +var currentSearchGroup = 0; + +$("div#add-group").click(function(){ + storeSearchGroup(); + currentSearchGroup = searchGroups.length; + $("span#current, span#total").text(currentSearchGroup + 1); +}); + +$("div#previous-group").click(function(){ + console.log(currentSearchGroup); + if(0 < currentSearchGroup){ + storeSearchGroup(); + currentSearchGroup--; + loadSearchGroup(); + $("span#current").text(currentSearchGroup + 1); + } +}); + +$("div#next-group").click(function(){ + console.log(currentSearchGroup); + if(currentSearchGroup < searchGroups.length - 1){ + storeSearchGroup(); + currentSearchGroup++; + loadSearchGroup(); + $("span#current").text(currentSearchGroup + 1); + } +}); + +function storeSearchGroup(){ + var searchGroup = {}; + var inputs = $("div#advanced-search input[type='text']"); + + for(var input = 0; input < inputs.length; input++) + if(inputs[input].value.length > 0){ + searchGroup[inputs[input].id] = inputs[input].value; + inputs[input].value = ""; + } + + if(currentSearchGroup < searchGroups.length) + searchGroups[currentSearchGroup] = searchGroup; + else + searchGroups.push(searchGroup); +} + +function loadSearchGroup(groupNumber){ + for(var inputId in searchGroups[currentSearchGroup]){ + var selector = "div#advanced-search input[type='text']#" + inputId; + $(selector).val(searchGroups[currentSearchGroup][inputId]); + } +} diff --git a/static/sass/index.sass b/static/sass/index.sass index c91c63d..4f1acca 100644 --- a/static/sass/index.sass +++ b/static/sass/index.sass @@ -51,20 +51,23 @@ div#search-field top: 0 width: 40% - #title - font-size: 400% - padding-bottom: 0.2em - text-align: center + a#title + text-decoration: none - #title-bit - color: $baseColor1 + div#title + font-size: 400% + padding-bottom: 0.2em + text-align: center - #title-angle - color: $baseColor3 + #title-bit + color: $baseColor1 - #title-shift - color: $baseColor2 - font-style: italic + #title-angle + color: $baseColor3 + + #title-shift + color: $baseColor2 + font-style: italic form#search-bar input[type="text"], button @@ -82,7 +85,7 @@ div#search-field &:hover border-color: $baseColor1 - button + button#advanced-search background-color: white border: 1px solid white width: 15% @@ -107,12 +110,11 @@ div#search-field height: 26px div#advanced-search - background-color: white border: 1px solid $baseColor2 margin: 0px overflow: auto padding: 0px - display: none + // display: none >div @include vendor(box-sizing, border-box) @@ -123,6 +125,86 @@ div#search-field >#col1 width: 10% + div#group-count + font-size: 150% + margin-left: 10% + padding: 35% 0 20% 12% + + #current + color: green + font-size: 140% + + #seperator + color: $baseColor3 + font-weight: bold + + div#group-selector + margin-left: 20% + + div + $triangleHeight: 40% + + display: inline-block + height: 0 + padding-bottom: $triangleHeight + padding-top: $triangleHeight + overflow: hidden + + &:after + border-bottom: 500px solid transparent + border-top: 500px solid transparent + content: "" + display: block + height: 0 + margin-top: -500px + width: 0 + + &#previous-group + width: $triangleHeight + + &:after + border-right: 500px solid $baseColor3 + + &:hover + &:after + @extend .t3 + + border-right-color: green + + &#next-group + padding-left: $triangleHeight + width: 0 + + &:after + border-left: 500px solid $baseColor3 + margin-left: -500px + + &:hover + &:after + @extend .t3 + + border-left-color: green + + div#add-group + margin-top: -10px + margin-left: auto + margin-right: auto + width: 50% + + span + color: $baseColor3 + font-size: 510% + font-weight: bold + + &:hover + @extend .t3 + + color: green + + div#add-group, div#group-selector div + &:hover + cursor: pointer + >#col2 width: 84% @@ -132,12 +214,15 @@ div#search-field li margin-bottom: 0.5em - &:hover, &:focus + label + @extend .t3 + + + &:hover input[type="text"] border-color: $baseColor1 label - @extend .t3 color: black label diff --git a/templates/index.html b/templates/index.html index bd2b0ae..16759fb 100644 --- a/templates/index.html +++ b/templates/index.html @@ -18,12 +18,14 @@ = endblock = block body -
-
- bit«shift -
+
+ +
+ bit«shift +
+