Clear search improvements
This commit is contained in:
Tobias Reich
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;
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
#search:focus ~ #clearSearch {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#clearSearch:hover + #search {
|
||||
width: 140px;
|
||||
}
|
||||
|
||||
#clearSearch:hover {
|
||||
display: block;
|
||||
}
|
||||
|
||||
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")) })
|
||||
|
||||
18
index.html
18
index.html
@ -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="#">×</a>
|
||||
<a id="clearSearch" class="button right">×</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…
Reference in New Issue
Block a user