Browse Source

Add adv-search form, skeleton-pages.

Add:
    templates/index.html
        -Add compartmental `div` structure for the advanced-search form.

    static/sass/index.sass
        -Add layout style rules to the advanced-search form.

    app.py, templates/(about, developers).html
        -Add `Flask` routes and skeleton files for pages to be developed later.

Ref:
    static/js/index.js
        -Substitute some verbose `JavaScript` calls with their `jQuery`
        equivalents.
tags/v1.0^2
Severyn Kozak 10 years ago
parent
commit
947ed59bfc
6 changed files with 157 additions and 26 deletions
  1. +14
    -6
      app.py
  2. +26
    -12
      static/js/index.js
  3. +65
    -6
      static/sass/index.sass
  4. +11
    -0
      templates/about.html
  5. +11
    -0
      templates/developers.html
  6. +30
    -2
      templates/index.html

+ 14
- 6
app.py View File

@@ -6,8 +6,8 @@ from flask import Flask
from flask import render_template, session

from bitshift import assets
from bitshift.database import Database
from bitshift.query import parse_query
# from bitshift.database import Database
# from bitshift.query import parse_query

app = Flask(__name__)
app.config.from_object("bitshift.config")
@@ -16,7 +16,7 @@ app_env = app.jinja_env
app_env.line_statement_prefix = "="
app_env.globals.update(assets=assets)

database = Database()
# database = Database()

@app.route("/")
def index():
@@ -24,9 +24,17 @@ def index():

@app.route("/search/<query>")
def search(query):
tree = parse_query(query)
database.search(tree)
# tree = parse_query(query)
# database.search(tree)
pass

@app.route("/about")
def about():
return render_template("about.html")

@app.route("/developers")
def developers():
return render_template("developers.html")

if __name__ == "__main__":
app.run()
app.run(debug=True)

+ 26
- 12
static/js/index.js View File

@@ -4,26 +4,42 @@
*/

FINISH_TYPING_INTERVAL = 650;
searchBar = document.querySelectorAll("form#search-bar input[type='text']")[0];
resultsDiv = document.querySelectorAll("div#results")[0];
searchBar = $("form#search-bar input[type='text']")[0];
resultsDiv = $("div#results")[0];

var typingTimer, lastValue;
searchBar.onkeyup = typingTimer;

// Enable infinite scrolling down the results page.
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() == $(document).height()) {
if($(window).scrollTop() + $(window).height() == $(document).height()){
loadMoreResults();
}
});

// Enable capturing the `enter` key.
$("form#search-bar").submit(function(event){
event.preventDefault();
return false;
});

/*
* Clear the existing timer and set a new one the the user types text into the
* search bar.
*/
function typingTimer(){
function typingTimer(event){
clearTimeout(typingTimer);
if(lastValue != searchBar.value)
typingTimer = setTimeout(finishedTyping, FINISH_TYPING_INTERVAL);

var enterKeyCode = 13;
if(event.keyCode != enterKeyCode){
if(lastValue != searchBar.value)
typingTimer = setTimeout(finishedTyping, FINISH_TYPING_INTERVAL);
}
else {
event.preventDefault();
finishedTyping();
return false;
}
};

/*
@@ -35,17 +51,17 @@ function typingTimer(){
*/
function finishedTyping(){
lastValue = searchBar.value;
var searchField = document.querySelectorAll("div#search-field")[0]
var searchField = $("div#search-field");

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

populateResults();
}
else
searchField.classList.remove("partly-visible");
searchField.removeClass("partly-visible");
}

/*
@@ -73,8 +89,6 @@ function populateResults(){
};
}(newDiv)), result * 20);
}

for(var result = 0; result < results.length; result++);
}

/*


+ 65
- 6
static/sass/index.sass View File

@@ -13,6 +13,7 @@ div#search-field
left: 0
margin: auto
margin-top: 15%
max-height: 100px
position: absolute
right: 0
top: 0
@@ -33,15 +34,73 @@ div#search-field
color: $baseColor2
font-style: italic

form input[type="text"]
border: 1px solid $baseColor1
font-size: 1.1em
padding: 3px
width: 100%
form#search-bar

input[type="text"]
@include vendor(box-sizing, border-box)

border: 1px solid $baseColor1
font-size: 1.1em
margin-bottom: 0px
padding: 3px
width: 100%

div#advanced-search
background-color: white
border: 1px solid $baseColor2
margin: 0px
overflow: auto

>div
float: left
height: 100%

>#col1
background-color: red
width: 10%

>#col2
background-color: yellow
width: 15%

>#col3
background-color: blue
width: 75%

div
width: 100%

#upper-half
background-color: brown

div
float: left
height: 100%

#col1
background-color: red
width: 40%

#col2
background-color: magenta
width: 20%

#col3
background-color: pink
width: 40%

#lower-half
background-color: purple

input[type="text"]
border-color: $baseColor3
font-size: 1em
width: 30%

&.partly-visible
height: 1%
margin-top: 3%
width: 46%
width: 60%

#title
display: none


+ 11
- 0
templates/about.html View File

@@ -0,0 +1,11 @@
= extends "layout.html"

= block title
About
= endblock

= block body
<div>
About us, son.
</div>
= endblock

+ 11
- 0
templates/developers.html View File

@@ -0,0 +1,11 @@
= extends "layout.html"

= block title
About
= endblock

= block body
<div>
For developers, son.
</div>
= endblock

+ 30
- 2
templates/index.html View File

@@ -10,12 +10,40 @@
= endblock

= block body
<div id="search-field">
<div id="search-field" class="partly-visible">
<div id="title">
<span id="title-bit">bit</span><span id="title-angle">&laquo;</span><span id="title-shift">shift</span>
</div>
<form id="search-bar">
<input type="text">
<input type="text" name="query">
<div id="advanced-search">

<!-- Tags are closed on the following line to remove whitespace between divs. -->
<div id="col1">
H
</div><div id="col2">
H
</div><div id="col3">
<div id="upper-half">
<div id="col1">
A
</div><div id="col2">
B
</div><div id="col3">
C
</div>
</div>
<div id="lower-half">
Z
</div>
</div>
<!-- Languages <input type="text" name="languages"><br> -->
<!-- Authors <input type="text" name="authors"><br> -->
<!-- Symbols <input type="text" name="symbols"><br> -->
<!-- Functions <input type="text" name="functions"><br> -->
<!-- Classes <input type="text" name="classes"><br> -->
<!-- Variables <input type="text" name="variables"><br> -->
</div>
</form>
</div>



Loading…
Cancel
Save