RanchiMall/rmtimes
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI fixes

Browse Source
This commit is contained in:
sairaj mote 2022-08-31 00:45:32 +05:30
parent 9db31c29f3
commit d6ccb10c79
1 changed files with 20 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
index.html
View File

@ -101,7 +101,7 @@
<h4>RanchiMall Times</h4> <h4>RanchiMall Times</h4>
</a> </a>
<button id="search_button" class="icon-only hide-on-desktop" title="Search for articles" <button id="search_button" class="icon-only hide-on-desktop" title="Search for articles"
onclick="toggleSearch()"> onclick="revealSearch()">
<svg class="icon" slot="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" <svg class="icon" slot="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24"
width="24px" fill="#000000"> width="24px" fill="#000000">
<path d="M0 0h24v24H0V0z" fill="none" /> <path d="M0 0h24v24H0V0z" fill="none" />
@ -111,7 +111,7 @@
</button> </button>
<div id="expanding_search" class="hide-on-mobile"> <div id="expanding_search" class="hide-on-mobile">
<div class="flex align-center"> <div class="flex align-center">
<button class="icon-only hide-on-desktop" onclick="toggleSearch()"> <button class="icon-only hide-on-desktop" onclick="hideSearch()">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24"
width="24px" fill="#000000"> width="24px" fill="#000000">
<path d="M0 0h24v24H0V0z" fill="none" /> <path d="M0 0h24v24H0V0z" fill="none" />
@ -1556,40 +1556,46 @@
let isSearchOn = false let isSearchOn = false
function toggleSearch() { function revealSearch() {
const animOptions = { const animOptions = {
easing: 'ease', easing: 'ease',
fill: 'forwards', fill: 'forwards',
duration: 150, duration: 150,
} }
if (!isSearchOn) { if (!isSearchOn && getRef('expanding_search').classList.contains('hide-on-mobile')) {
getRef('expanding_search').classList.remove('hide-on-mobile') getRef('expanding_search').classList.remove('hide-on-mobile')
getRef('search_articles').focusIn() getRef('search_articles').focusIn()
getRef('expanding_search').animate([ getRef('expanding_search').animate([
{ {
transform: 'scale(0.95)', transform: 'scale(0.95)',
opacity: 1
}, },
{ {
transform: 'scale(1)', transform: 'scale(1)',
opacity: 1
}, },
], animOptions) ], animOptions).onfinish = e => {
isSearchOn = true isSearchOn = true
} else { }
}
}
function hideSearch() {
const animOptions = {
easing: 'ease',
fill: 'forwards',
duration: 150,
}
if (isSearchOn && !getRef('expanding_search').classList.contains('hide-on-mobile')) {
getRef('expanding_search').animate([ getRef('expanding_search').animate([
{ {
transform: 'scale(1)', transform: 'scale(1)',
opacity: 1
}, },
{ {
transform: 'scale(0.95)', transform: 'scale(0.95)',
opacity: 0
}, },
], animOptions) ], animOptions)
.onfinish = () => { .onfinish = (e) => {
getRef('expanding_search').classList.add('hide-on-mobile'); getRef('expanding_search').classList.add('hide-on-mobile');
getRef('search_articles').value = '' getRef('search_articles').value = ''
e.target.cancel()
isSearchOn = false isSearchOn = false
} }
} }
@ -1638,13 +1644,13 @@
if (e.target.value.trim() !== '' && e.key === 'Enter') { if (e.target.value.trim() !== '' && e.key === 'Enter') {
location.hash = `#/explore?type=search&query=${e.target.value.trim()}` location.hash = `#/explore?type=search&query=${e.target.value.trim()}`
e.target.value = '' e.target.value = ''
toggleSearch() hideSearch()
} }
}) })
delegate(getRef('search_suggestions'), 'click', '.search-suggestion', e => { delegate(getRef('search_suggestions'), 'click', '.search-suggestion', e => {
getRef('search_articles').value = '' getRef('search_articles').value = ''
toggleSearch() hideSearch()
}) })
const slideInLeft = [ const slideInLeft = [
{ {