浏览代码

Add `datepicker` and `typeahead`,

Add:
    static/sass/index.sass
        -Add style rules for `datepicker` and `typeahead` elements.

    templates/index.html
        -Add any class specifiers required by both libraries to their
        corresponding elements.
        -Add a hack-ish `script` tag containing setup for `typeahead`.
tags/v1.0^2
Severyn Kozak 10 年前
父节点
当前提交
450e7cec0b
共有 4 个文件被更改,包括 98 次插入16 次删除
  1. +7
    -0
      static/js/jquery-ui.min.js
  2. +7
    -0
      static/js/typeahead.bundle.min.js
  3. +44
    -0
      static/sass/index.sass
  4. +40
    -16
      templates/index.html

+ 7
- 0
static/js/jquery-ui.min.js
文件差异内容过多而无法显示
查看文件


+ 7
- 0
static/js/typeahead.bundle.min.js
文件差异内容过多而无法显示
查看文件


+ 44
- 0
static/sass/index.sass 查看文件

@@ -5,6 +5,38 @@
@import mixins
@import variables

.ui-datepicker
font-size: 0.7em

.twitter-typeahead
width: 100%

.tt-hint
color: $baseColor2

.tt-dropdown-menu
width: 100%
padding: 4px 0
background-color: white
border: 1px solid $baseColor2

.tt-suggestion
padding: 4px

p
margin: 0

strong
color: $baseColor1

&.tt-cursor
@extend .t1

background-color: $baseColor1

*
color: white

div#search-field
@extend .t2

@@ -74,16 +106,28 @@ div#search-field
font-size: 1.1em

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

border-color: $baseColor3
font-size: 1em
padding: 2px
width: 100%

&:hover
border-color: $baseColor2

&:focus
border-color: $baseColor1

#upper-half
>div
float: left
width: 50%

#col2
input[type="text"]
width: 50%

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


+ 40
- 16
templates/index.html 查看文件

@@ -5,13 +5,16 @@
= endblock

= block head
{{ assets.tag("index.css") }}
{{ assets.tag("jqueryui.custom.min.css") }}
{{ assets.tag("jquery.min.js") }}
{{ assets.tag("jquery-ui.min.js") }}
{{ assets.tag("typeahead.bundle.min.js") }}

{{ assets.tag("index.css") }}
= endblock

= block body
<div id="search-field" class="partly-visible">

<div id="title">
<span id="title-bit">bit</span
><span id="title-angle">&laquo;</span
@@ -21,38 +24,34 @@
<form id="search-bar">
<input type="text" name="query">
<div id="advanced-search">

<!-- Tags are closed on the following line to remove whitespace between divs. -->
<div id="col1">
+ Add group
+ Add group <!-- Placeholder. -->
</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"><br>
<input class="typeahead" type="text" name="languages" id="languages"><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">Date last modified</label>
<input type="text" name="date-last-modifi id="date"ed">
<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">Date created</label>
<input type="text" name="date-creat id="date"ed">
<label for="date-created">Date created</label>
<input type="text" name="date-created" id="date-created">
</li>

</ul>
</div>
</div>
@@ -78,16 +77,41 @@
<label for="variables">Variables</label>
<input type="text" name="variables" id="variables"><br>
</li>

<u/l>
</ul>
</div>
</div>
</div>
</form>
</div>

<div id="results">
</div>
<div id="results"></div>

{{ assets.tag("index.js") }}
<script>
TYPEAHEAD_LANGUAGES = {{ typeahead_languages | safe }};
$(function() {
$("#date-last-modified").datepicker();
$("#date-created").datepicker();
});

var languages = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace("value"),
queryTokenizer: Bloodhound.tokenizers.whitespace,
local: $.map(TYPEAHEAD_LANGUAGES, function(state){
return {value : state};
})
});

languages.initialize();
$(".typeahead").typeahead({
hint: true,
highlight: true,
minLength: 1
},
{
name: "languages",
displayKey: 'value',
source: languages.ttAdapter()
});
</script>
= endblock

正在加载...
取消
保存