Bladeren bron

Add advanced-search icon, move title to corner.

Add:
    static/js/index.js
        -Move `div#title` to the corner of the page when the search bar is
        `.partly-visible` (ie, results are displayed).

    templates/index.html, static/(sass/index.sass, img/*.png)
        -Replace the advanced-search button with a magnifying glass icon.
tags/v1.0^2
Severyn Kozak 10 jaren geleden
bovenliggende
commit
9cfc8a7d23
4 gewijzigde bestanden met toevoegingen van 75 en 37 verwijderingen
  1. BIN
     
  2. +17
    -11
      static/js/index.js
  3. +55
    -25
      static/sass/index.sass
  4. +3
    -1
      templates/index.html

+ 17
- 11
static/js/index.js Bestand weergeven

@@ -7,13 +7,17 @@ var advancedSearchDiv = $("div#advanced-search");
var advancedSearchButton = $("button#advanced-search");
advancedSearchDiv.hide();
advancedSearchButton.click(function(){
var searchField = $("div#search-field");
if(!advancedSearchDiv.hasClass("visible")){
advancedSearchDiv.fadeIn(500);
advancedSearchDiv.addClass("visible");
searchField.addClass("partly-visible");
advancedSearchDiv.fadeIn(500).addClass("visible");
advancedSearchButton.addClass("clicked");
}
else {
advancedSearchDiv.fadeOut(300);
advancedSearchDiv.removeClass("visible");
advancedSearchDiv.fadeOut(300).removeClass("visible");
advancedSearchButton.removeClass("clicked");
if($("div#results .result").length == 0)
searchField.removeClass("partly-visible");
}
});

@@ -38,7 +42,7 @@ $("#languages.typeahead").typeahead({
},
{
name: "languages",
displayKey: 'value',
displayKey: "value",
source: languages.ttAdapter()
});

@@ -94,13 +98,14 @@ function finishedTyping(){

clearResults();
if(searchBar.value){
if(!searchField.hasClass("partly-visible"))
searchField.addClass("partly-visible");

searchField.addClass("partly-visible");
populateResults();
}
else
else {
searchField.removeClass("partly-visible");
$("div#advanced-search").fadeOut(50);
advancedSearchButton.removeClass("clicked");
}
}

/*
@@ -145,7 +150,7 @@ function queryServer(){
newDiv.style.textAlign = "center";
newDiv.style.color = "#" + Math.floor(Math.random() *
16777215).toString(16);
resultDivs.push(newDiv)
resultDivs.push(newDiv);
}

return resultDivs;
@@ -164,6 +169,7 @@ function loadMoreResults(){
return function(){
divReference.classList.add("cascade");
};
}(newDiv)), result * 20);
}(newDiv)),
result * 20);
}
}

+ 55
- 25
static/sass/index.sass Bestand weergeven

@@ -46,14 +46,14 @@ div#search-field
margin: auto
margin-top: 15%
max-height: 100px
position: absolute
right: 0
position: absolute
top: 0
width: 34%
width: 40%

#title
font-size: 400%
padding-bottom: 0.5em
padding-bottom: 0.2em
text-align: center

#title-bit
@@ -67,7 +67,6 @@ div#search-field
font-style: italic

form#search-bar

input[type="text"], button
@extend .t3
@include vendor(box-sizing, border-box)
@@ -76,24 +75,36 @@ div#search-field
font-size: 110%
margin-bottom: 0px
padding: 6px
width: 80%

input[type="text"]
width: 85%

&:hover
border-color: $baseColor1

button
background-color: $lightBlue
border: 1px solid $baseColor2
color: white
display: inline
white-space: nowrap
overflow: hidden
width: 20%
background-color: white
border: 1px solid white
width: 15%
height: 10%
padding: 0px
float: right

&.clicked, &:hover
@extend .t3
img
@extend .t3

background-color: black
cursor: pointer

&:focus
outline: 0

background-color: $blue
img
background-color: $baseColor2
margin-top: 5px
width: 26px
height: 26px

div#advanced-search
background-color: white
@@ -121,24 +132,27 @@ div#search-field
li
margin-bottom: 0.5em

&:hover, &:focus
input[type="text"]
border-color: $baseColor1

label
@extend .t3
color: black

label
display: block
font-size: 110%
color: #747575

input[type="text"]
@extend .t2
@extend .t3

border-color: $baseColor3
font-size: 100%
padding: 4px
width: 100%

&:hover
border-color: $baseColor2

&:focus
border-color: $baseColor1

#upper-half
>div
float: left
@@ -148,15 +162,31 @@ div#search-field
input[type="text"]
width: 50%

#lower-half
padding-bottom: 20px

&.partly-visible
height: 1%
margin-top: 3%
width: 60%
margin-top: 0%
padding-bottom: 3%
position: absolute
width: 100%

#title
display: none
position: absolute
top: -1%
left: 1%

span
font-size: 50%

form#search-bar
padding-top: 3%
margin-left: auto
margin-right: auto
width: 60%

div#results
margin: 3% auto 0 auto
margin-left: auto
margin-right: auto
width: 80%


+ 3
- 1
templates/index.html Bestand weergeven

@@ -27,7 +27,9 @@

<form id="search-bar">
<input type="text" name="query"
><button id="advanced-search">Advanced search</button>
><button id="advanced-search" title="advanced search">
<img src="static/img/search_bar_magnifying_glass.png">
</button>

<div id="advanced-search">
<!-- Tags are closed on the following line to remove whitespace between divs. -->


Laden…
Annuleren
Opslaan