Clear search improvements

pull/65/merge
Tobias Reich 10 years ago
parent 5f61b1be1d
commit 285e611f90

File diff suppressed because one or more lines are too long

@ -282,30 +282,4 @@
100% {
opacity: 1;
}
}
/* rotate ------------------------------------------------
@-webkit-keyframes rotate {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
@-moz-keyframes rotate {
0% {
-moz-transform: rotate(0deg);
}
100% {
-moz-transform: rotate(360deg);
}
}
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
} */
}

@ -122,30 +122,30 @@ 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;
}
header #search:focus {
width: 140px;
}
header #search:focus ~ #clearSearch {
opacity: 1;
}
header #clearSearch {
position: absolute;
top: 15px;
right: 81px;
padding: 0;
font-size: 20px;
opacity: 0;
-webkit-transition: opacity .2s ease-out;
-moz-transition: opacity .2s ease-out;
transition: opacity .2s ease-out;
}
header #clearSearch:hover {
opacity: 1;
}
/* Tools ------------------------------------------------*/
header .tools:first-of-type {

File diff suppressed because one or more lines are too long

@ -41,6 +41,12 @@ $(document).ready(function(){
/* Search */
$("#search").on("keyup click", function() { search.find($(this).val()) });
/* Clear Search */
$("#clearSearch").on(event_name, function () {
$("#search").focus();
search.reset();
});
/* Back Buttons */
$("#button_back_home").on(event_name, function() { lychee.goto("") });
@ -101,13 +107,6 @@ $(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")) })

@ -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,7 +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>
<a id="clearSearch" class="button right">&times;</a>
</div>
<div id="tools_album">
<a class="button left icon-arrow-left" id="button_back_home"></a>
@ -99,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>
@ -114,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>
Loading…
Cancel
Save