arno/lychee
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Add an 'X' button for clearing text in the search field.

Browse Source
This commit is contained in:
birdwing 2014-01-27 18:53:28 -05:00
parent c23c4f5c03
commit 5f61b1be1d
3 changed files with 37 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
assets/css/modules/header.css
View File

@ -122,10 +122,31 @@ header {
-moz-transition: opacity .3s ease-out, -moz-transform .3s ease-out, box-shadow .3s, width .2s ease-out;
transition: opacity .3s ease-out, transform .3s ease-out, box-shadow .3s, width .2s ease-out;
}
header #clearSearch {
position: absolute;
font-size: 24px;
right: 61px;
padding-top: 0px;
padding-bottom: 0;
top: 13px;
display: none;
}
header #search:focus {
width: 140px;
}
#search:focus ~ #clearSearch {
display: block;
}
#clearSearch:hover + #search {
width: 140px;
}
#clearSearch:hover {
display: block;
}
/* Tools ------------------------------------------------*/
header .tools:first-of-type {
margin-right: 6px;

7
assets/js/modules/init.js
View File

@ -101,6 +101,13 @@ $(document).ready(function(){
else album.setTitle(album.getID());
})
/* Clear Search */
.on(event_name, "#clearSearch", function (e) {
e.preventDefault();
$("#search").val("");
$("#search").focus();
})
/* Navigation */
.on("click", ".album", function() { lychee.goto($(this).attr("data-id")) })
.on("click", ".photo", function() { lychee.goto(album.getID() + "/" + $(this).attr("data-id")) })

17
index.html
View File

@ -12,7 +12,7 @@
<!-- CSS -->
<link type="text/css" rel="stylesheet" href="assets/css/min/reset.css">
<!-- Development
<!-- Development -->
<link type="text/css" rel="stylesheet" href="assets/css/modules/upload.css">
<link type="text/css" rel="stylesheet" href="assets/css/modules/tooltip.css">
<link type="text/css" rel="stylesheet" href="assets/css/modules/misc.css">
@ -25,10 +25,10 @@
<link type="text/css" rel="stylesheet" href="assets/css/modules/font.css">
<link type="text/css" rel="stylesheet" href="assets/css/modules/contextmenu.css">
<link type="text/css" rel="stylesheet" href="assets/css/modules/content.css">
<link type="text/css" rel="stylesheet" href="assets/css/modules/animations.css"> -->
<link type="text/css" rel="stylesheet" href="assets/css/modules/animations.css">
<!-- Production -->
<link type="text/css" rel="stylesheet" href="assets/css/min/main.css">
<!-- Production
<link type="text/css" rel="stylesheet" href="assets/css/min/main.css">-->
<link rel="shortcut icon" href="assets/img/favicon.ico">
<link rel="apple-touch-icon" href="assets/img/apple-touch-icon-iphone.png" sizes="120x120">
@ -55,6 +55,7 @@
<a class="button right icon icon-plus button_add"></a>
<a class="button_divider"></a>
<input id="search" type="text" name="search" placeholder="Search …">
<a id="clearSearch" class="button right" href="#">&times;</a>
</div>
<div id="tools_album">
<a class="button left icon-arrow-left" id="button_back_home"></a>
@ -98,7 +99,7 @@
<!-- JS -->
<script defer type="text/javascript" src="assets/js/min/frameworks.js"></script>
<!-- Development
<!-- Development -->
<script defer type="text/javascript" src="assets/js/modules/init.js"></script>
<script defer type="text/javascript" src="assets/js/modules/lychee.js"></script>
<script defer type="text/javascript" src="assets/js/modules/build.js"></script>
@ -113,10 +114,10 @@
<script defer type="text/javascript" src="assets/js/modules/visible.js"></script>
<script defer type="text/javascript" src="assets/js/modules/loadingBar.js"></script>
<script defer type="text/javascript" src="assets/js/modules/contextMenu.js"></script>
<script defer type="text/javascript" src="assets/js/modules/search.js"></script> -->
<script defer type="text/javascript" src="assets/js/modules/search.js"></script>
<!-- Production -->
<script defer type="text/javascript" src="assets/js/min/main.js"></script>
<!-- Production
<script defer type="text/javascript" src="assets/js/min/main.js"></script> -->
</body>
</html>