ben
/
bitshift
mirror of https://github.com/earwig/bitshift
1
1
Fork 0
Code Releases 1 Activity
Browse Source

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.
tags/v1.0^2
Severyn Kozak 10 years ago
parent
e92abddb50
commit
dda79540f3
3 changed files with 48 additions and 199 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +11
    -0
      static/js/index.js
  2. +9
    -131
      static/sass/index.sass
  3. +28
    -68
      templates/index.html

+ 11
- 0
static/js/index.js View File

@@ -174,12 +174,14 @@ function loadMoreResults(){
var searchGroups = []; var searchGroups = [];
var currentSearchGroup = 0; var currentSearchGroup = 0;


// Create a new search group.
$("div#add-group").click(function(){ $("div#add-group").click(function(){
storeSearchGroup(); storeSearchGroup();
currentSearchGroup = searchGroups.length; currentSearchGroup = searchGroups.length;
$("span#current, span#total").text(currentSearchGroup + 1); $("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(){ $("div#previous-group").click(function(){
console.log(currentSearchGroup); console.log(currentSearchGroup);
if(0 < 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(){ $("div#next-group").click(function(){
console.log(currentSearchGroup); console.log(currentSearchGroup);
if(currentSearchGroup < searchGroups.length - 1){ 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(){ function storeSearchGroup(){
var searchGroup = {}; var searchGroup = {};
var inputs = $("div#advanced-search input[type='text']"); var inputs = $("div#advanced-search input[type='text']");
@@ -216,6 +223,10 @@ function storeSearchGroup(){
searchGroups.push(searchGroup); searchGroups.push(searchGroup);
} }


/*
* Load the values belonging to the currently selected search group object into
* the advanced search form.
*/
function loadSearchGroup(groupNumber){ function loadSearchGroup(groupNumber){
for(var inputId in searchGroups[currentSearchGroup]){ for(var inputId in searchGroups[currentSearchGroup]){
var selector = "div#advanced-search input[type='text']#" + inputId; var selector = "div#advanced-search input[type='text']#" + inputId;


+ 9
- 131
static/sass/index.sass View File

@@ -110,145 +110,23 @@ div#search-field
height: 26px height: 26px


div#advanced-search div#advanced-search
border: 1px solid $baseColor2
margin: 0px
background-color: red
padding-top: 0px
overflow: auto overflow: auto
padding: 0px
// display: none


>div >div
@include vendor(box-sizing, border-box) @include vendor(box-sizing, border-box)


display: inline-block
float: left 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 &.partly-visible
margin-top: 0% margin-top: 0%


+ 28
- 68
templates/index.html View File

@@ -34,74 +34,34 @@
</button> </button>


<div id="advanced-search"> <div id="advanced-search">
<!-- Tags are closed on the following line to remove whitespace between divs. -->
<div id="col1">
<div id="group-count">
<span id="current">1</span
><span id="seperator">/</span
><span id="total">1</span>
</div>
<div id="group-selector">
<div id="previous-group"></div>
<div></div>
<div id="next-group"></div>
</div>
<div id="add-group">
<span>+</span>
</div>
</div
><div id="col2">
<div id="upper-half">
<div id="col1">
<ul>
<li>
<label for="languages">Languages</label>
<input type="text" name="languages" id="languages" class="typeahead"><br>
</li>

<li>
<label for="authors">Authors</label>
<input type="text" name="authors" id="authors"><br>
</li>
</ul>
</div><div id="col2">
<ul>
<li>
<label for="date-last-modified">Date last modified</label>
<input type="text" name="date-last-modified" id="date-last-modified">
</li>

<li>
<label for="date-created">Date created</label>
<input type="text" name="date-created" id="date-created">
</li>
</ul>
</div>
</div>

<div id="lower-half">
<ul>
<li>
<label for="symbols">Symbols</label>
<input class="typeahead" type="text" name="symbols" id="symbols"><br>
</li>

<li>
<label for="functions">Functions</label>
<input type="text" name="functions" id="functions"><br>
</li>

<li>
<label for="classes">Classes</label>
<input type="text" name="classes" id="classes"><br>
</li>

<li>
<label for="variables">Variables</label>
<input type="text" name="variables" id="variables"><br>
</li>
</ul>
</div>
<div id="sidebar">
<div>Fields</div>
<ul>
<li><button id="language">languages</button></li>
<li><button id="author">authors</button></li>
<li><button id="modified">date last modified</button></li>
<li><button id="created">date created</button></li>
<li><button id="symbol">symbols</button></li>
<li><button id="function">functions</button></li>
<li><button id="class">classes</button></li>
<li><button id="variable">variables</button></li>
</ul>
<button id="add-group">
Add group.
</button>
</div>
<div id="search-groups">
<div class="search-group">Hello, world.</div>
<div class="search-group">Hello, world.</div>
<div class="search-group">Hello, world.</div>
<div class="search-group">Hello, world.</div>
<div class="search-group">Hello, world.</div>
<div class="search-group">Hello, world.</div>
<div class="search-group">Hello, world.</div>
<div class="search-group">Hello, world.</div>
<div class="search-group">Hello, world.</div>
<div class="search-group">Hello, world.</div>
<div class="search-group">Hello, world.</div>
</div> </div>
</div> </div>
</form> </form>


Write Preview
Loading…
Cancel
Save