mirrors/jellyfin-web
1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00
Code Activity

update search animation

Browse source
This commit is contained in:
Luke Pulverenti 2015-11-17 11:36:48 -05:00
parent b99edc598d
commit 8d0251b825
3 changed files with 27 additions and 40 deletions
Download patch file Download diff file Expand all files Collapse all files

28
dashboard-ui/css/search.css
View file

@ -108,26 +108,20 @@
}
.headerSearchInput {
margin: 0!important;
background: #222!important;
border: 0!important;
color: #ddd!important;
border-radius: 3px!important;
padding: 4px 0 3px 0!important;
text-indent: 50px!important;
margin: 0 !important;
background: #222 !important;
border: 0 !important;
color: #eee !important;
border-radius: 0 !important;
padding: 7px 0 6px 0 !important;
text-indent: 10px !important;
font-size: 16px;
font-family: inherit;
outline: none;
vertical-align: middle;
width: 85%!important;
display: inline-block!important;
}
.searchInputIcon {
position: absolute;
left: 20px;
top: 18px;
color: #ddd !important;
width: 85% !important;
display: inline-block !important;
height: 100%!important;
}
.viewMenuSearch {
@ -163,7 +157,7 @@
.viewMenuSearchForm {
max-width: none;
padding: 10px;
padding: 5px;
}
.searchResultsOverlay {

1
dashboard-ui/scripts/librarymenu.js
View file

@ -24,7 +24,6 @@
html += '<div class="viewMenuSearch hide">';
html += '<form class="viewMenuSearchForm">';
html += '<input type="text" data-role="none" data-type="search" class="headerSearchInput" autocomplete="off" spellcheck="off" />';
html += '<iron-icon class="searchInputIcon" icon="search"></iron-icon>';
html += '<paper-icon-button icon="close" class="btnCloseSearch"></paper-icon-button>';
html += '</form>';
html += '</div>';

32
dashboard-ui/scripts/searchmenu.js
View file

@ -11,20 +11,24 @@
require(["jquery", "velocity"], function ($, Velocity) {
$('.btnCloseSearch').hide();
var elem = $('.viewMenuSearch')
.css({ left: '100%' })
.removeClass('hide')[0];
var elem = $('.viewMenuSearch').removeClass('hide')[0];
Velocity.animate(elem, { "left": "0px" },
{
complete: function () {
fadeIn(elem, 1).onfinish = function () {
$('.headerSearchInput').focus();
$('.btnCloseSearch').show();
}
});
};
});
};
function fadeIn(elem, iterations) {
var keyframes = [
{ opacity: '0', offset: 0 },
{ opacity: '1', offset: 1 }];
var timing = { duration: 200, iterations: iterations };
return elem.animate(keyframes, timing);
}
self.hide = function () {
var viewMenuSearch = document.querySelector('.viewMenuSearch');
@ -34,18 +38,8 @@
}
if (!viewMenuSearch.classList.contains('hide')) {
require(["jquery", "velocity"], function ($, Velocity) {
$('.btnCloseSearch').hide();
viewMenuSearch.style.left = '0';
Velocity.animate(viewMenuSearch, { "left": "100%" },
{
complete: function () {
$('.viewMenuSearch').visible(false);
}
});
});
viewMenuSearch.classList.add('hide');
}
};