Ver código fonte

Change advanced-search button, mod error messages.

Add:
        templates/index.html, static/sass/index.sass,
        static/img/index/search_bar_magnifying_glass.png
                -Replace the magnifying-glass advanced-search icon with a simple
                textual button.

        static/(js/index.js, sass/index.sass)
                -Slightly modify the appearance of error messages; add message
                for no results.
tags/v1.0^2
Severyn Kozak 10 anos atrás
pai
commit
508a421c45
4 arquivos alterados com 35 adições e 27 exclusões
  1. BIN
     
  2. +8
    -2
      static/js/index.js
  3. +22
    -23
      static/sass/index.sass
  4. +5
    -2
      templates/index.html

+ 8
- 2
static/js/index.js Ver arquivo

@@ -43,7 +43,7 @@ var searchResultsPage = 1;
advancedSearchButton.addClass("clicked");
}
else {
advancedSearchDiv.fadeOut(300).removeClass("visible");
advancedSearchDiv.hide().removeClass("visible");
advancedSearchButton.removeClass("clicked");
if($("div#results .result").length == 0)
searchField.removeClass("partly-visible");
@@ -393,6 +393,8 @@ function queryServer(){
var resultDivs = [];
if("error" in result)
insertErrorMessage(result["error"]);
else if(result["results"].length == 0)
insertErrorMessage("No search results.");
else
for(var codelet = 0; codelet < result["results"].length; codelet++){
resultDivs.push(createResult(result["results"][codelet]));
@@ -439,7 +441,11 @@ function loadMoreResults(){
* @param msg (str) The message string.
*/
function insertErrorMessage(msg){
var error = $("<div id='error'><span>Error: </span></div>");
var error = $(
[
"<div id='error'><span id='s1'>Error</span> ",
"<span id='s2'>&raquo;</span> </div>"
].join(""));
error.append(msg);
resultsDiv.appendChild(error[0]);
}

+ 22
- 23
static/sass/index.sass Ver arquivo

@@ -115,40 +115,29 @@ div#search-field
margin-bottom: 0px
padding: 6px

input[type="text"]
width: 85%
input[type="text"]#query
width: 100%

&:hover
border-color: $baseColor1

button#advanced-search
background-color: white
border: 1px solid white
width: 15%
height: 10%
padding: 0px
float: right
border: none
color: $baseColor2
font-size: 1.1em
font-style: italic

&:hover
img
background-color: black
cursor: pointer
color: $baseColor1
cursor: pointer

&.clicked
img
background-color: $baseColor1
color: $baseColor1

&:focus
outline: 0

img
@extend .t3

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

&.partly-visible
margin-top: 0%
position: absolute
@@ -168,10 +157,14 @@ div#search-field
margin-right: auto
width: 60%

input:hover
input
@extend .t3

border: 1px solid $baseColor1
&#query
width: 80%

&:hover
border: 1px solid $baseColor1

div#advanced-search
background-color: white
@@ -338,9 +331,15 @@ div#results
text-align: center

span
color: $baseColor1
margin-right: 10px
font-size: 150%

&#s1
color: $baseColor1

&#s2
color: $baseColor2

&.disable-hover
pointer-events: none



+ 5
- 2
templates/index.html Ver arquivo

@@ -28,9 +28,10 @@
</a>

<form id="search-bar">
<input type="text" name="query"
<input id="query" type="text" name="query"
><button id="advanced-search" title="advanced search" type="button">
<img src="img/index/search_bar_magnifying_glass.png">
Adv. Search
<!-- <img src="img/index/search_bar_magnifying_glass.png"> -->
</button>

<div id="advanced-search">
@@ -46,6 +47,7 @@
</button>
</div>
</div>

<div id="sidebar">
<ul>
<li>
@@ -82,6 +84,7 @@
</li>
</ul>
</div>

<div id="search-groups">
<div class="search-group" id="selected">
<div id="language">


Carregando…
Cancelar
Salvar