Selaa lähdekoodia

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.
tags/v1.0^2
Severyn Kozak 10 vuotta sitten
vanhempi
commit
e92abddb50
3 muutettua tiedostoa jossa 179 lisäystä ja 30 poistoa
  1. +54
    -5
      static/js/index.js
  2. +101
    -16
      static/sass/index.sass
  3. +24
    -9
      templates/index.html

+ 54
- 5
static/js/index.js Näytä tiedosto

@@ -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]);
}
}

+ 101
- 16
static/sass/index.sass Näytä tiedosto

@@ -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


+ 24
- 9
templates/index.html Näytä tiedosto

@@ -18,12 +18,14 @@
= endblock

= block body
<div id="search-field">
<div id="title">
<span id="title-bit">bit</span
><span id="title-angle">&laquo;</span
><span id="title-shift">shift</span>
</div>
<div id="search-field" class="partly-visible">
<a id="title" href="/">
<div id="title">
<span id="title-bit">bit</span
><span id="title-angle">&laquo;</span
><span id="title-shift">shift</span>
</div>
</a>

<form id="search-bar">
<input type="text" name="query"
@@ -34,14 +36,27 @@
<div id="advanced-search">
<!-- Tags are closed on the following line to remove whitespace between divs. -->
<div id="col1">
+ Add group <!-- Placeholder. -->
</div><div id="col2">
<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 class="typeahead" type="text" name="languages" id="languages"><br>
<input type="text" name="languages" id="languages" class="typeahead"><br>
</li>

<li>


Ladataan…
Peruuta
Tallenna