From dda79540f3e54562d5dcab24371ade5d5d938d78 Mon Sep 17 00:00:00 2001 From: Severyn Kozak Date: Sun, 18 May 2014 10:44:28 -0400 Subject: [PATCH] Replace old advanced search form with new skeleton. Add: static/js/index.js -Add header comments to existing search-group manipulation functions. static/sass/index.sass -Remove style rules for the old advanced search form. templates/index.html -Add element tree for new search form. --- static/js/index.js | 11 ++++ static/sass/index.sass | 140 ++++--------------------------------------------- templates/index.html | 96 ++++++++++----------------------- 3 files changed, 48 insertions(+), 199 deletions(-) diff --git a/static/js/index.js b/static/js/index.js index 0a81a40..b12bf9d 100644 --- a/static/js/index.js +++ b/static/js/index.js @@ -174,12 +174,14 @@ function loadMoreResults(){ var searchGroups = []; var currentSearchGroup = 0; +// Create a new search group. $("div#add-group").click(function(){ storeSearchGroup(); currentSearchGroup = searchGroups.length; $("span#current, span#total").text(currentSearchGroup + 1); }); +// Save the current's search group's values, and load the previous one. $("div#previous-group").click(function(){ console.log(currentSearchGroup); if(0 < currentSearchGroup){ @@ -190,6 +192,7 @@ $("div#previous-group").click(function(){ } }); +// Save the current's search group's values, and load the next one. $("div#next-group").click(function(){ console.log(currentSearchGroup); if(currentSearchGroup < searchGroups.length - 1){ @@ -200,6 +203,10 @@ $("div#next-group").click(function(){ } }); +/* + * Store the advanced search form's values into the currently selected search + * group object. + */ function storeSearchGroup(){ var searchGroup = {}; var inputs = $("div#advanced-search input[type='text']"); @@ -216,6 +223,10 @@ function storeSearchGroup(){ searchGroups.push(searchGroup); } +/* + * Load the values belonging to the currently selected search group object into + * the advanced search form. + */ function loadSearchGroup(groupNumber){ for(var inputId in searchGroups[currentSearchGroup]){ var selector = "div#advanced-search input[type='text']#" + inputId; diff --git a/static/sass/index.sass b/static/sass/index.sass index 4f1acca..fec4970 100644 --- a/static/sass/index.sass +++ b/static/sass/index.sass @@ -110,145 +110,23 @@ div#search-field height: 26px div#advanced-search - border: 1px solid $baseColor2 - margin: 0px + background-color: red + padding-top: 0px overflow: auto - padding: 0px - // display: none >div @include vendor(box-sizing, border-box) + display: inline-block float: left - height: 100% - - >#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% - - ul - list-style: none - - li - margin-bottom: 0.5em - - label - @extend .t3 - - - &:hover - input[type="text"] - border-color: $baseColor1 - - label - color: black - - label - display: block - font-size: 110% - color: #747575 - - input[type="text"] - @extend .t3 - - border-color: $baseColor3 - font-size: 100% - padding: 4px - width: 100% - - #upper-half - >div - float: left - width: 50% - #col2 - input[type="text"] - width: 50% + #sidebar + background-color: yellow + width: 20% - #lower-half - padding-bottom: 20px + #search-groups + background-color: blue + width: 80% &.partly-visible margin-top: 0% diff --git a/templates/index.html b/templates/index.html index 16759fb..c252499 100644 --- a/templates/index.html +++ b/templates/index.html @@ -34,74 +34,34 @@