Search Bar scales a bit

This commit is contained in:
Marco van Dijk 2022-03-05 00:05:37 +01:00
parent a5a6a3e475
commit 976ed8c97e

View File

@ -12,6 +12,7 @@ const stakeColour = "rgba(71, 23, 122, 0.3)";
const claimColour = "rgba(77, 91, 42, 0.3)"; const claimColour = "rgba(77, 91, 42, 0.3)";
const unbondColour = "rgba(122, 23, 51, 0.3)"; const unbondColour = "rgba(122, 23, 51, 0.3)";
const greyColour = "rgba(122, 128, 127, 0.3)"; const greyColour = "rgba(122, 128, 127, 0.3)";
const maxShown = 500;
const EventViewer = (obj) => { const EventViewer = (obj) => {
const [searchTerm, setSearchTerm] = useState(obj.prefill || ""); const [searchTerm, setSearchTerm] = useState(obj.prefill || "");
@ -43,13 +44,20 @@ const EventViewer = (obj) => {
return ( return (
<div className="stroke roundedOpaque" style={{ padding: 0, margin: 0, marginTop: '2em', position: 'absolute', bottom: 0, top: '300px', left: '0px', right: '0px', overflowY: 'auto', overflowX: 'hidden', width: '100%' }}> <div className="stroke roundedOpaque" style={{ padding: 0, margin: 0, marginTop: '2em', position: 'absolute', bottom: 0, top: '300px', left: '0px', right: '0px', overflowY: 'auto', overflowX: 'hidden', width: '100%' }}>
<div className="fixed-container" style={{ padding: 0, width: '300px' }}> <div className="row">
<input className="searchField" style={{ width: '300px' }} <div className="row">
value={searchTerm} <h4>Shows the latest {maxShown} entries of your search query</h4>
onChange={(evt) => setSearchTerm(evt.target.value)} </div>
placeholder='Filter by Orchestrator address' <div className="row">
type="text" <input className="searchField" style={{ marginLeft: '2em', width: '100%' }}
/> value={searchTerm}
onChange={(evt) => setSearchTerm(evt.target.value)}
placeholder='Filter by Orchestrator address'
type="text"
/>
</div>
<div className="row">
</div>
</div> </div>
<div className="content-wrapper" style={{ alignItems: 'stretch', width: '100%' }}> <div className="content-wrapper" style={{ alignItems: 'stretch', width: '100%' }}>
<ScrollContainer className="overflow-container" hideScrollbars={false}> <ScrollContainer className="overflow-container" hideScrollbars={false}>
@ -119,7 +127,7 @@ const EventViewer = (obj) => {
return null; return null;
} }
if (unfiltered < 500) { if (unfiltered < maxShown) {
unfiltered++; unfiltered++;
return <EventButton return <EventButton
key={eventObj.transactionHash + idx} key={eventObj.transactionHash + idx}