stronk/LivepeerEvents
1
0
Fork 0
mirror of https://github.com/stronk-dev/LivepeerEvents.git synced 2025-07-05 10:45:10 +02:00
Code Issues Packages Projects Releases Wiki Activity

Clean up lots of CSS. Halfway done

Browse Source
This commit is contained in:
Marco van Dijk 2022-03-14 01:15:04 +01:00
parent 2308aac677
commit d517be8a39
12 changed files with 203 additions and 126 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/components/OrchDelegatorViewer.js
View File

@ -6,20 +6,20 @@ const OrchDelegatorViewer = (obj) => {
let delegators = obj.delegators; let delegators = obj.delegators;
if (delegators && delegators.length) { if (delegators && delegators.length) {
return ( return (
<div className="row" style={{ width: 'unset', marginBottom: '1em', marginTop: '1em' }}> <div className="row">
<div className="strokeSmollLeft" style={{ display: "flex" }}> <div className="strokeSmollLeft fullMargin">
<div className="row" style={{ margin: '0' }}> <div className="row">
<h3 style={{ padding: 0, margin: 0 }}>{delegators.length} Current Delegators</h3> <h3>{delegators.length} Current Delegators</h3>
</div> </div>
<div className="content-wrapper"> <div className="content-wrapper">
<ScrollContainer className="overflow-container" hideScrollbars={false} style={{ }}> <ScrollContainer className="overflow-container" hideScrollbars={false} style={{}}>
<div className="overflow-content" style={{ cursor: 'grab', padding: 0, maxHeight: '300px', margin: '0.5em' }}> <div className="overflow-content" style={{ cursor: 'grab', maxHeight: '300px' }}>
{ {
delegators.map((delObj, idx) => { delegators.map((delObj, idx) => {
return ( return (
<div className="flexContainer forceWrap" key={"delegator" + idx} style={{ margin: 0, textAlign: 'center', alignItems: 'center', justifyContent: 'center' }}> <div className="flexContainer forceWrap" key={"delegator" + idx}>
<Address address={delObj.id} seed={"delegator" + idx + delObj.id} /> <Address address={delObj.id} seed={"delegator" + idx + delObj.id} />
<div className="rowAlignRight" style={{ margin: 0 }}> <div className="rowAlignRight">
<p className="darkText">{parseFloat(delObj.bondedAmount).toFixed(2)} LPT since round {delObj.startRound}</p> <p className="darkText">{parseFloat(delObj.bondedAmount).toFixed(2)} LPT since round {delObj.startRound}</p>
</div> </div>
</div> </div>
@ -34,13 +34,13 @@ const OrchDelegatorViewer = (obj) => {
) )
} }
return ( return (
<div className="row" style={{ width: 'unset', marginBottom: '1em', marginTop: '1em' }}> <div className="row">
<div className="strokeSmollLeft" style={{ display: "flex" }}> <div className="strokeSmollLeft">
<div className="row" style={{ margin: '0' }}> <div className="row">
<h3 style={{ padding: 0, margin: 0 }}>The selected Orchestrator has no Delegators</h3> <h3>The selected Orchestrator has no Delegators</h3>
</div>
</div> </div>
</div> </div>
</div >
) )
} }

30
src/components/OrchInfoViewer.js
View File

@ -69,41 +69,43 @@ const OrchInfoViewer = (obj) => {
} }
return ( return (
<div className="row" style={{ width: 'unset', }}> <div className="row sideMargin">
<div className="strokeSmollLeft" style={{ display: "flex" }}> <div className="stroke stretchAndBetween sideMargin">
<div style={{ flexDirection: 'row', display: "flex", borderBottom: '2px solid rgba(15,15,15,0.05)', marginTop: '1em' }}> <div className="verticalDivider" />
<div className="row" style={{ borderBottom: '2px solid rgba(15,15,15,0.05)' }}>
<a href={thisUrl}> <a href={thisUrl}>
<h3 style={{ padding: 0, margin: 0 }}>Orchestrator Info</h3> <h3 >Orchestrator Info</h3>
<Address address={thisID} /> <Address address={thisID} />
</a> </a>
</div> </div>
<div className="row" style={{ margin: 0 }}> <div className="stretchAndBetween sideMargin" >
<Stat header={"Earned Fees"} content1={totalVolumeETH + " Eth"} content2={"$" + totalVolumeUSD} /> <Stat header={"Earned Fees"} content1={totalVolumeETH + " Eth"} content2={"$" + totalVolumeUSD} />
</div> </div>
<div className="row" style={{ margin: 0 }}> <div className="stretchAndBetween sideMargin" >
<Stat header={"Commission"} title1={"Reward"} content1={rewardCut + "%"} title2={"Fee"} content2={feeCut + "%"} /> <Stat header={"Commission"} title1={"Reward"} content1={rewardCut + "%"} title2={"Fee"} content2={feeCut + "%"} />
</div> </div>
<div className="row" style={{ margin: 0 }}> <div className="stretchAndBetween sideMargin" >
<Stat header={"Stake"} title1={"Total"} content1={totalStake + " LPT"} title2={"Self"} content2={selfStake + " LPT (" + selfStakeRatio + ")%"} /> <Stat header={"Stake"} title1={"Total"} content1={totalStake + " LPT"} title2={"Self"} content2={selfStake + " LPT (" + selfStakeRatio + ")%"} />
</div> </div>
<div className="strokeSmollLeft" style={{ display: "flex" }}> <div className="stretchAndBetween strokeSmollLeft">
<button style={{ marginBottom: '1em' }} className="selectOrchLight" onClick={() => { <button className="selectOrchLight" onClick={() => {
copyLink(shareUrl); copyLink(shareUrl);
}}> }}>
<img alt="" src="clipboard.svg" width="20em" height="20em" /> <img alt="" src="clipboard.svg" width="20em" height="20em" />
</button> </button>
</div> </div>
</div> </div>
<div className="verticalDivider" />
</div> </div>
) )
} }
return ( return (
<div className="row" style={{ width: 'unset', marginBottom: '1em', marginTop: '1em' }}> <div className="stroke stretchAndBetween sideMargin">
<div className="strokeSmollLeft" style={{ display: "flex" }}> <div className="verticalDivider" />
<div className="row" style={{ margin: '0' }}> <div className="stretchAndBetween sideMargin" >
<h3 style={{ padding: 0, margin: 0 }}>The selected Orchestrator is currently inactive</h3> <h3 >The selected Orchestrator is currently inactive</h3>
</div>
</div> </div>
<div className="verticalDivider" />
</div> </div>
) )
} }

10
src/components/TicketViewer.js
View File

@ -2,22 +2,22 @@ import React from "react";
const Ticket = (obj) => { const Ticket = (obj) => {
return ( return (
<div className="flexContainer" style={{ justifyContent: 'space-between', alignItems: "stretch", width: "100%" }}> <div className="flexContainer stretchAndBetween">
<div className="strokeSmoll" style={{flex: 1}}> <div className="strokeSmoll" style={{flex: 1}}>
<div className="row"> <div className="row">
<h3 style={{ margin: 0, padding: 0 }}>{obj.icon}</h3> <h3>{obj.icon}</h3>
</div> </div>
<div className="row"> <div className="row">
<p style={{ fontSize: 'small' }}> <p className="smallTxt">
{obj.subtext} {obj.subtext}
</p> </p>
</div> </div>
</div> </div>
<div className="verticalSeparator"></div> <div className="verticalSeparator"></div>
<div className="stroke" style={{ margin: 0, padding : 0, flex: 2 }}> <div className="stroke" style={{ flex: 2 }}>
{obj.descriptions.map(function (thisTextItem, i) { {obj.descriptions.map(function (thisTextItem, i) {
return ( return (
<p style={{ fontSize: 'small' }}> <p className="smallTxt">
{thisTextItem} {thisTextItem}
</p> </p>
) )

23
src/components/eventViewer.js
View File

@ -207,7 +207,7 @@ const EventViewer = (obj) => {
showMoreButton = showMoreButton =
<div className="stroke" style={{ width: '100%', padding: 0, margin: 0, marginBottom: '2em', marginTop: '2em' }}> <div className="stroke" style={{ width: '100%', padding: 0, margin: 0, marginBottom: '2em', marginTop: '2em' }}>
<div className="strokeSmollLeft" style={{ borderRadius: "1.2em", padding: 0, margin: 0, width: '100%' }}> <div className="strokeSmollLeft" style={{ borderRadius: "1.2em", padding: 0, margin: 0, width: '100%' }}>
<button className="row nonHomeButton" style={{ backgroundColor: greyColour }} onClick={() => { <button className="row nonHomeButton buttonPadding" style={{ backgroundColor: greyColour }} onClick={() => {
obj.setMaxAmount(obj.maxAmount + defaultIncrementMaxShown); obj.setMaxAmount(obj.maxAmount + defaultIncrementMaxShown);
}}> }}>
<h3>🔄 Show More</h3> <h3>🔄 Show More</h3>
@ -232,7 +232,7 @@ const EventViewer = (obj) => {
<div className="strokeSmollLeft" style={{ padding: 0, margin: 0, height: 'calc( 100vh - 50px)' }}> <div className="strokeSmollLeft" style={{ padding: 0, margin: 0, height: 'calc( 100vh - 50px)' }}>
{filterBit} {filterBit}
<div className="row" style={{ padding: 0, margin: 0, width: '100%', height: '100%' }}> <div className="row" style={{ padding: 0, margin: 0, width: '100%', height: '100%' }}>
<div className="stroke roundedOpaque" style={{ padding: 0, margin: 0, width: 'unset', minWidth: "350px", height: '100%', marginRight: '1em', overflow: 'hidden', marginTop: '1em', overflowX: 'scroll' }}> <div className="stroke roundedOpaque" style={{ padding: 0, margin: 0, width: 'unset', minWidth: "400px", height: '100%', marginRight: '1em', overflow: 'hidden', marginTop: '1em', overflowX: 'scroll' }}>
<div className="content-wrapper" style={{ width: '100%' }}> <div className="content-wrapper" style={{ width: '100%' }}>
<ScrollContainer activationDistance={1} className="overflow-container" <ScrollContainer activationDistance={1} className="overflow-container"
hideScrollbars={false} onEndScroll={updateOnScroll} ref={listInnerRef}> hideScrollbars={false} onEndScroll={updateOnScroll} ref={listInnerRef}>
@ -243,43 +243,44 @@ const EventViewer = (obj) => {
</div> </div>
</div> </div>
</ScrollContainer> </ScrollContainer>
<div className="strokeSmollLeft" style={{ marginRight: "1em" }}> <div className="strokeSmollLeft sideMargin">
<button className={delegatorRewardActivated ? "row nonHomeButton active" : "row nonHomeButton"} style={{ backgroundColor: delegatorActivatedColour, marginTop: '0.7em' }} onClick={() => { <div className="verticalDivider"/>
<button className={delegatorRewardActivated ? "row nonHomeButton buttonPadding active" : "row nonHomeButton buttonPadding"} style={{ backgroundColor: delegatorActivatedColour}} onClick={() => {
setDelegatorRewardActivated(!delegatorRewardActivated); setDelegatorRewardActivated(!delegatorRewardActivated);
}}> }}>
<h3>Claim</h3> <h3>Claim</h3>
</button> </button>
<button className={stakeActivated ? "row nonHomeButton active" : "row nonHomeButton"} style={{ backgroundColor: stakeActivatedColour }} onClick={() => { <button className={stakeActivated ? "row nonHomeButton buttonPadding active" : "row nonHomeButton buttonPadding"} style={{ backgroundColor: stakeActivatedColour }} onClick={() => {
setStakeActivated(!stakeActivated); setStakeActivated(!stakeActivated);
}}> }}>
<h3>Stake</h3> <h3>Stake</h3>
</button> </button>
<button className={ticketRedemptionActivated ? "row nonHomeButton active" : "row nonHomeButton"} style={{ backgroundColor: ticketActivatedColour }} onClick={() => { <button className={ticketRedemptionActivated ? "row nonHomeButton buttonPadding active" : "row nonHomeButton buttonPadding"} style={{ backgroundColor: ticketActivatedColour }} onClick={() => {
setTicketRedemptionActivated(!ticketRedemptionActivated); setTicketRedemptionActivated(!ticketRedemptionActivated);
}}> }}>
<h3>Tickets</h3> <h3>Tickets</h3>
</button> </button>
<button className={rewardActivated ? "row nonHomeButton active" : "row nonHomeButton"} style={{ backgroundColor: rewardActivatedColour }} onClick={() => { <button className={rewardActivated ? "row nonHomeButton buttonPadding active" : "row nonHomeButton buttonPadding"} style={{ backgroundColor: rewardActivatedColour }} onClick={() => {
setRewardActivated(!rewardActivated); setRewardActivated(!rewardActivated);
}}> }}>
<h3>Reward</h3> <h3>Reward</h3>
</button> </button>
<button className={unbondActivated ? "row nonHomeButton active" : "row nonHomeButton"} style={{ backgroundColor: unbondActivatedColour }} onClick={() => { <button className={unbondActivated ? "row nonHomeButton buttonPadding active" : "row nonHomeButton buttonPadding"} style={{ backgroundColor: unbondActivatedColour }} onClick={() => {
setUnbondActivated(!unbondActivated); setUnbondActivated(!unbondActivated);
}}> }}>
<h3>Unbond</h3> <h3>Unbond</h3>
</button> </button>
<button className={updateActivated ? "row nonHomeButton active" : "row nonHomeButton"} style={{ backgroundColor: updateActivatedColour }} onClick={() => { <button className={updateActivated ? "row nonHomeButton buttonPadding active" : "row nonHomeButton buttonPadding"} style={{ backgroundColor: updateActivatedColour }} onClick={() => {
setUpdateActivated(!updateActivated); setUpdateActivated(!updateActivated);
}}> }}>
<h3>Update</h3> <h3>Update</h3>
</button> </button>
<button className={withdrawActivated ? "row nonHomeButton active" : "row nonHomeButton"} style={{ backgroundColor: withdrawActivatedColour }} onClick={() => { <button className={withdrawActivated ? "row nonHomeButton buttonPadding active" : "row nonHomeButton buttonPadding"} style={{ backgroundColor: withdrawActivatedColour }} onClick={() => {
setWithdrawActivated(!withdrawActivated); setWithdrawActivated(!withdrawActivated);
}}> }}>
<h3>Withdraw</h3> <h3>Withdraw</h3>
</button> </button>
<button className={filterActivated ? "row nonHomeButton active" : "row nonHomeButton"} style={{ backgroundColor: filterActivatedColour }} onClick={() => { <button className={filterActivated ? "row nonHomeButton buttonPadding active" : "row nonHomeButton buttonPadding"} style={{ backgroundColor: filterActivatedColour }} onClick={() => {
setFilterActivated(!filterActivated); setFilterActivated(!filterActivated);
}}> }}>
<h3>Activated</h3> <h3>Activated</h3>

36
src/components/filterComponent.js
View File

@ -15,20 +15,20 @@ const Filter = (obj) => {
} }
return ( return (
<div className="flexContainer" style={{ margin: 0, width: '100%' }}> <div className="flexContainer" style={{ width: '100%' }}>
<div className="strokeSmollLeft" style={{ margin: 0, padding: 0, flex: 2 }}> <div className="strokeSmollLeft" style={{ flex: 2 }}>
<div className="row" style={{ margin: 0, padding: 0 }}> <div className="row">
{searchTermText} {searchTermText}
</div> </div>
<div className="row" style={{ margin: 0, padding: 0 }}> <div className="row">
<div className="strokeSmollLeft" style={{ margin: 0, padding: 0 }}> <div className="strokeSmollLeft">
<button className={"nonHomeButton"} style={{ backgroundColor: greyColour, margin: 0, padding: '0', width: '5em' }} onClick={() => { <button className={"nonHomeButton buttonPadding"} style={{ backgroundColor: greyColour, width: '5em' }} onClick={() => {
obj.setSearchTerm(""); obj.setSearchTerm("");
}}> }}>
<h3>Clear</h3> <h3>Clear</h3>
</button> </button>
</div> </div>
<input className="searchField" style={{ margin: 0, padding: 0, height: '2em', width: '80%', paddingLeft: '1em', paddingRight: '1em', marginRight: '1em' }} <input className="searchField" style={{ height: '2em', width: '100%' }}
value={obj.searchTerm} value={obj.searchTerm}
onChange={(evt) => obj.setSearchTerm(evt.target.value)} onChange={(evt) => obj.setSearchTerm(evt.target.value)}
placeholder='Filter by Orchestrator address' placeholder='Filter by Orchestrator address'
@ -36,34 +36,35 @@ const Filter = (obj) => {
/> />
</div> </div>
</div> </div>
<div className="strokeSmollLeft" style={{ margin: 0, padding: 0, flex: 2 }}> <div className="verticalSeparator"/>
<div className="row" style={{ margin: 0, padding: 0 }}> <div className="strokeSmollLeft" style={{ flex: 2 }}>
<div className="row">
<h3>{parseFloat(obj.amountFilter) > 0 ? ("Only showing higher than " + obj.amountFilter) : "Filter by minimum value"}</h3> <h3>{parseFloat(obj.amountFilter) > 0 ? ("Only showing higher than " + obj.amountFilter) : "Filter by minimum value"}</h3>
</div> </div>
<div className="row" style={{ margin: 0, padding: 0 }}> <div className="row">
<div className="strokeSmollLeft" style={{ margin: 0, padding: 0 }}> <div className="strokeSmollLeft">
<button className={"nonHomeButton"} style={{ backgroundColor: greyColour, margin: 0, padding: '0', width: '5em' }} onClick={() => { <button className={"nonHomeButton buttonPadding"} style={{ backgroundColor: greyColour, width: '5em' }} onClick={() => {
obj.setAmountFilter(0); obj.setAmountFilter(0);
}}> }}>
<h3>0</h3> <h3>0</h3>
</button> </button>
</div> </div>
<input className="searchField" style={{ margin: 0, padding: 0, height: '2em', width: '80%', paddingLeft: '1em', paddingRight: '1em' }} <input className="searchField" style={{ height: '2em', width: '100%' }}
value={obj.amountFilter} value={obj.amountFilter}
onChange={(evt) => obj.setAmountFilter(evt.target.value)} onChange={(evt) => obj.setAmountFilter(evt.target.value)}
placeholder='Filter by minimum value' placeholder='Filter by minimum value'
type="number" type="number"
/> />
<div className="strokeSmollLeft" style={{ margin: 0, padding: 0 }}> <div className="strokeSmollLeft">
<button className={"nonHomeButton"} style={{ backgroundColor: greyColour, margin: 0, padding: '0', width: '4em' }} onClick={() => { <button className={"nonHomeButton buttonPadding"} style={{ backgroundColor: greyColour, width: '4em' }} onClick={() => {
const curVal = parseFloat(obj.amountFilter); const curVal = parseFloat(obj.amountFilter);
obj.setAmountFilter(curVal + 100); obj.setAmountFilter(curVal + 100);
}}> }}>
<h3>+100</h3> <h3>+100</h3>
</button> </button>
</div> </div>
<div className="strokeSmollLeft" style={{ margin: 0, padding: 0 }}> <div className="strokeSmollLeft">
<button className={"nonHomeButton"} style={{ backgroundColor: greyColour, margin: 0, padding: '0', width: '5em' }} onClick={() => { <button className={"nonHomeButton buttonPadding"} style={{ backgroundColor: greyColour, width: '5em' }} onClick={() => {
const curVal = parseFloat(obj.amountFilter); const curVal = parseFloat(obj.amountFilter);
obj.setAmountFilter(curVal + 1000); obj.setAmountFilter(curVal + 1000);
}}> }}>
@ -72,6 +73,7 @@ const Filter = (obj) => {
</div> </div>
</div> </div>
</div> </div>
<div className="verticalDivider" />
</div> </div>
) )
} }

12
src/components/orchestratorViewer.js
View File

@ -27,7 +27,7 @@ const Orchestrator = (obj) => {
if (obj.thisOrchestrator) { if (obj.thisOrchestrator) {
if (obj.forceVertical) { if (obj.forceVertical) {
return ( return (
<div className="hostInfo"> <div className="hostInfo sideMargin">
<div className="flexContainer" style={{ justifyContent: 'flex-start', alignItems: 'flex-start', flexDirection: 'column' }}> <div className="flexContainer" style={{ justifyContent: 'flex-start', alignItems: 'flex-start', flexDirection: 'column' }}>
<OrchInfoViewer <OrchInfoViewer
rewardCut={obj.thisOrchestrator.rewardCut} rewardCut={obj.thisOrchestrator.rewardCut}
@ -41,10 +41,10 @@ const Orchestrator = (obj) => {
</div> </div>
</div> </div>
) )
}else{ } else {
return ( return (
<div className="hostInfo"> <div className="hostInfo sideMargin">
<div className="flexContainer" style={{ justifyContent: 'flex-start', alignItems: 'flex-start' }}> <div className="flexContainer" style={{ justifyContent: 'flex-start', alignItems: 'flex-start', flexDirection: 'column' }}>
<OrchInfoViewer <OrchInfoViewer
rewardCut={obj.thisOrchestrator.rewardCut} rewardCut={obj.thisOrchestrator.rewardCut}
feeShare={obj.thisOrchestrator.feeShare} feeShare={obj.thisOrchestrator.feeShare}
@ -62,7 +62,7 @@ const Orchestrator = (obj) => {
if (obj.forceVertical) { if (obj.forceVertical) {
return ( return (
<div className="hostInfo"> <div className="hostInfo">
<div className="flexContainer" style={{ alignItems: 'center', flexDirection: 'column' }}> <div className="flexContainer fullMargin">
<div className="rowAlignLeft"> <div className="rowAlignLeft">
<img alt="" src="livepeer.png" width="30" height="30" /> <img alt="" src="livepeer.png" width="30" height="30" />
<h3>Orchestrator Info</h3> <h3>Orchestrator Info</h3>
@ -76,7 +76,7 @@ const Orchestrator = (obj) => {
} else { } else {
return ( return (
<div className="hostInfo"> <div className="hostInfo">
<div className="flexContainer" style={{ alignItems: 'center' }}> <div className="flexContainer fullMargin">
<div className="rowAlignLeft"> <div className="rowAlignLeft">
<img alt="" src="livepeer.png" width="30" height="30" /> <img alt="" src="livepeer.png" width="30" height="30" />
<h3>Orchestrator Info</h3> <h3>Orchestrator Info</h3>

24
src/components/statViewer.js
View File

@ -11,20 +11,24 @@ const Stat = (obj) => {
} }
return ( return (
<div className="strokeSmollLeft" style={{ margin: 0, padding: 0, width: '100%' }}> <div className="strokeSmollLeft">
<div className="rowAlignLeft" style={{ margin: 0, padding: 0 }}> <div className="rowAlignLeft" >
<h3 style={{ margin: 0, padding: 0 }}>{obj.header}</h3> <h3 >{obj.header}</h3>
</div> </div>
<div className="row" style={{ margin: 0 }}> <div className="row">
<div className="strokeSmollLeft" style={{ margin: 0, padding: 0 }}> <div className="strokeSmollLeft" >
<h4 style={{ margin: 0, padding: 0 }}>{obj.title1}</h4> <div className="rowAlignLeft" >
<div className="rowAlignLeft" style={{ margin: 0, padding: 0 }}> <h4 >{obj.title1}</h4>
</div>
<div className="rowAlignRight" >
<p className="darkText">{obj.content1}</p> <p className="darkText">{obj.content1}</p>
</div> </div>
</div> </div>
<div className="strokeSmollLeft" style={{ margin: 0, padding: 0 }}> <div className="strokeSmollLeft" >
<h4 style={{ margin: 0, padding: 0 }}>{obj.title2}</h4> <div className="rowAlignLeft" >
<div className="rowAlignLeft" style={{ margin: 0, padding: 0 }}> <h4 >{obj.title2}</h4>
</div>
<div className="rowAlignRight" >
<p className="darkText">{obj.content2}</p> <p className="darkText">{obj.content2}</p>
</div> </div>
</div> </div>

36
src/pages/grafana.js
View File

@ -31,26 +31,29 @@ const Grafana = (obj) => {
} }
return ( return (
<div className="stroke" style={{ margin: 0, padding: 0 }}> <div className="stroke" >
<div className="row" style={{ margin: 0, padding: 0 }}> <div className="verticalDivider"/>
<div className="row" >
<button className="homeButton" onClick={() => { <button className="homeButton" onClick={() => {
setRedirectToHome(true); setRedirectToHome(true);
}}> }}>
<img alt="" src="/livepeer.png" width="100em" height="100em" /> <img alt="" src="/livepeer.png" width="100em" height="100em" />
</button> </button>
</div> </div>
<div className="stroke" style={{ margin: 0, padding: 0 }}> <div className="verticalDivider"/>
<div className="stroke" >
<div className="flexContainer"> <div className="flexContainer">
<div className="stroke" style={{ marginTop: 0, marginBottom: 5, paddingBottom: 0 }}> <div className="stroke">
<div className="stroke roundedOpaque"> <div className="stroke roundedOpaque">
<div className="flexContainer" style={{ margin: 0, textAlign: 'center',alignItems: 'center', justifyContent:'center' }}> <div className="verticalDivider"/>
<div className="flexContainer">
<div className="row"> <div className="row">
<img alt="" src="livepeer.png" width="30" height="30" /> <img alt="" src="livepeer.png" width="30" height="30" />
<p>${lptPrice}</p> <p>${lptPrice}</p>
<p>({lptPriceChange24h}%)</p> <p>({lptPriceChange24h}%)</p>
</div> </div>
<div className="row selectOrch"> <div className="row">
<h2> <a href="https://explorer.livepeer.org/accounts/0x847791cbf03be716a7fe9dc8c9affe17bd49ae5e/">Livepeer Orchestrator</a></h2> <h2>Livepeer Orchestrator</h2>
</div> </div>
<div className="row"> <div className="row">
<img alt="" src="eth.png" width="30" height="30" /> <img alt="" src="eth.png" width="30" height="30" />
@ -58,22 +61,25 @@ const Grafana = (obj) => {
<p>({ethPriceChange24h}%)</p> <p>({ethPriceChange24h}%)</p>
</div> </div>
</div> </div>
<div className="stroke roundedOpaque" style={{ borderRadius: "1em", backgroundColor: "#111217" }}> <div className="verticalDivider"/>
<div className="flexContainer" style={{ justifyContent: "center" }}> <div className="stroke roundedOpaqueDark">
<div className="flexContainer fullMargin">
<Orchestrator thisOrchestrator={livepeer.thisOrchestrator} rootOnly={true} /> <Orchestrator thisOrchestrator={livepeer.thisOrchestrator} rootOnly={true} />
</div> </div>
<div className="flexContainer" style={{ justifyContent: "stretch", padding: '20px', width: '100%' }}> <div className="flexContainer stretchAndPad">
<iframe className="fullGrafana" src="https://grafana.stronk.tech/d-solo/71b6OZ0Gz/orchestrator-overview?orgId=1&refresh=5s&theme=dark&panelId=23763572056" height="200" frameBorder="0"></iframe> <iframe className="fullGrafana" src="https://grafana.stronk.tech/d-solo/71b6OZ0Gz/orchestrator-overview?orgId=1&refresh=5s&theme=dark&panelId=23763572056" height="200" frameBorder="0"></iframe>
</div> </div>
<div className="flexContainer" style={{ justifyContent: "stretch", padding: '20px', width: '100%' }}> <div className="flexContainer stretchAndPad">
<iframe className="fullGrafana" src="https://grafana.stronk.tech/d-solo/71b6OZ0Gz/orchestrator-overview?orgId=1&refresh=5s&theme=dark&panelId=23763572077" height="400" frameBorder="0"></iframe> <iframe className="fullGrafana" src="https://grafana.stronk.tech/d-solo/71b6OZ0Gz/orchestrator-overview?orgId=1&refresh=5s&theme=dark&panelId=23763572077" height="400" frameBorder="0"></iframe>
</div> </div>
<div className="flexContainer" style={{ justifyContent: "stretch", padding: '20px', width: '100%' }}> <div className="flexContainer stretchAndPad">
<iframe className="fullGrafana" src="https://grafana.stronk.tech/d-solo/71b6OZ0Gz/orchestrator-overview?orgId=1&refresh=5s&theme=dark&panelId=23763572032" height="200" frameBorder="0"></iframe> <iframe className="fullGrafana" src="https://grafana.stronk.tech/d-solo/71b6OZ0Gz/orchestrator-overview?orgId=1&refresh=5s&theme=dark&panelId=23763572032" height="200" frameBorder="0"></iframe>
</div> </div>
<div className="flexContainer" style={{ justifyContent: "stretch", padding: '20px', width: '100%' }}> <div className="flexContainer stretchAndPad">
<iframe className="fullGrafana" src="https://grafana.stronk.tech/d-solo/71b6OZ0Gz/orchestrator-overview?orgId=1&from=now-2d&to=now&refresh=5s&theme=dark&panelId=23763572040" height="400" frameBorder="0"></iframe> <iframe className="fullGrafana" src="https://grafana.stronk.tech/d-solo/71b6OZ0Gz/orchestrator-overview?orgId=1&from=now-2d&to=now&refresh=5s&theme=dark&panelId=23763572040" height="400" frameBorder="0"></iframe>
</div> </div>
</div>
<div className="verticalDivider"/>
<div className="row"> <div className="row">
<a href="https://grafana.stronk.tech/d/71b6OZ0Gz/orchestrator-overview?orgId=1&refresh=5s&theme=dark"> <a href="https://grafana.stronk.tech/d/71b6OZ0Gz/orchestrator-overview?orgId=1&refresh=5s&theme=dark">
<button className="waveButton"> <button className="waveButton">
@ -82,11 +88,13 @@ const Grafana = (obj) => {
</button> </button>
</a> </a>
</div> </div>
<div className="verticalDivider"/>
</div> </div>
</div> </div>
<div className="smallVerticalDivider" />
</div> </div>
</div> </div>
</div> <div className="verticalDivider" />
</div> </div>
); );
} }

14
src/pages/home.js
View File

@ -24,12 +24,15 @@ const Home = (obj) => {
} }
return ( return (
<div className="stroke" style={{ padding: 0 }}> <div className="stroke">
<div className="row" style={{ margin: 0, padding: 0 }}> <div className="verticalDivider"/>
<div className="row">
<img alt="" src="livepeer.png" width="100em" height="100em" style={{ zIndex: 10 }} /> <img alt="" src="livepeer.png" width="100em" height="100em" style={{ zIndex: 10 }} />
</div> </div>
<div className="verticalDivider" />
<div className="flexContainer"> <div className="flexContainer">
<div className="stroke roundedOpaque"> <div className="stroke roundedOpaque">
<div className="verticalDivider" />
<div className="row"> <div className="row">
<h3>Home</h3> <h3>Home</h3>
</div> </div>
@ -54,10 +57,11 @@ const Home = (obj) => {
<p>🔎 Blockchain 🕵️</p> <p>🔎 Blockchain 🕵️</p>
</button> </button>
</div> </div>
<div className="verticalDivider" />
</div> </div>
</div> </div>
<div className="alwaysOnBottom showNeverOnMobile" style={{ margin: 0, padding: 0 }}> <div className="alwaysOnBottom showNeverOnMobile">
<div className="row" style={{ margin: 0, padding: 0 }}> <div className="row">
<RetroHitCounter <RetroHitCounter
hits={totalVisitorCount} hits={totalVisitorCount}
withBorder={true} withBorder={true}
@ -75,7 +79,7 @@ const Home = (obj) => {
glowStrength={0.4} glowStrength={0.4}
/> />
</div> </div>
<h6 className="lightText" style={{ margin: 0, padding: 0 }}> <h6 className="lightText">
nframe.nl nframe.nl
</h6> </h6>
</div> </div>

12
src/pages/livepeer.js
View File

@ -55,10 +55,14 @@ const Livepeer = (obj) => {
let sidebar; let sidebar;
if (showSidebar) { if (showSidebar) {
sidebar = <div id='sideContent'> sidebar = <div id='sideContent'>
<div className="strokeSmollLeft" style={{ margin: 0, padding: 0, width: '100%', marginTop: '1em' }}> <div className="verticalDivider" />
<div className="row" style={{ alignItems: 'stretch', height: '100%', padding: '0.2em', width: "unset" }}> <div className="strokeSmollLeft sideMargin">
<div className="row">
<div className="row">
<Orchestrator thisOrchestrator={thisOrchObj} rootOnly={false} forceVertical={true} /> <Orchestrator thisOrchestrator={thisOrchObj} rootOnly={false} forceVertical={true} />
</div> </div>
</div>
<div className="verticalDivider" />
<div className="row"> <div className="row">
<ContractPrices quotes={livepeer.quotes} blockchains={livepeer.blockchains} /> <ContractPrices quotes={livepeer.quotes} blockchains={livepeer.blockchains} />
</div> </div>
@ -74,7 +78,7 @@ const Livepeer = (obj) => {
<button className="homeButton" onClick={() => { <button className="homeButton" onClick={() => {
setRedirectToHome(true); setRedirectToHome(true);
}}> }}>
<h1 style={{ margin: 0, padding: 0 }}>🏠</h1> <h1>🏠</h1>
</button> </button>
<h4 className="rowAlignLeft withWrap showNeverOnMobile">{headerString}</h4> <h4 className="rowAlignLeft withWrap showNeverOnMobile">{headerString}</h4>
</div> </div>
@ -85,7 +89,7 @@ const Livepeer = (obj) => {
setAmountFilter(0); setAmountFilter(0);
setMaxAmount(defaultMaxShown); setMaxAmount(defaultMaxShown);
}}> }}>
<h4 style={{margin: 0, padding: 0}}>✖️ Clear</h4> <h4>✖️ Clear</h4>
</button> </button>
<p>Sidebar</p> <p>Sidebar</p>
<div className="toggle-container" onClick={() => setShowSidebar(!showSidebar)}> <div className="toggle-container" onClick={() => setShowSidebar(!showSidebar)}>

6
src/pages/loadingScreen.js
View File

@ -66,15 +66,15 @@ const Startup = (obj) => {
console.log("Rendering Loading Screen"); console.log("Rendering Loading Screen");
return ( return (
<div className="stroke"> <div className="stroke">
<div className="verticalDivider" />
<div className="row"> <div className="row">
<img alt="" src="livepeer.png" width="200em" height="200em" style={{ zIndex: 10 }} /> <img alt="" src="livepeer.png" width="100em" height="100em" style={{ zIndex: 10 }} />
</div> </div>
<div className="verticalDivider" />
<div className="stroke roundedOpaque" style={{ width: 'unset', padding: '5em' }}> <div className="stroke roundedOpaque" style={{ width: 'unset', padding: '5em' }}>
<div className="stroke">
<h1>{texts[Math.floor(Math.random() * texts.length)]}</h1> <h1>{texts[Math.floor(Math.random() * texts.length)]}</h1>
</div> </div>
</div> </div>
</div>
) )
} }
} }

84
src/style.css
View File

@ -49,6 +49,8 @@ h2, h3, h1, h4, h5, h6 {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
display: flex; display: flex;
margin: 0;
padding: 0;
justify-content: space-evenly; justify-content: space-evenly;
} }
@ -160,7 +162,8 @@ svg {
backdrop-filter: blur(6px); backdrop-filter: blur(6px);
box-shadow: 9px 13px 8px 8px rgba(27, 23, 19, 0.692); box-shadow: 9px 13px 8px 8px rgba(27, 23, 19, 0.692);
border-bottom-right-radius: 1em; border-bottom-right-radius: 1em;
max-width: 400px; max-width: 500px;
width: 500px;
overflow-y: auto; overflow-y: auto;
overflow-x: hidden; overflow-x: hidden;
} }
@ -217,15 +220,31 @@ svg {
border-radius: 1em; border-radius: 1em;
} }
.smallTxt {
font-size: small;
}
.verticalSeparator { .verticalSeparator {
width: 0.2em; width: 0.2em;
border-left: dashed 2px rgba(122, 128, 127, 0.4); border-left: dashed 2px rgba(72, 80, 79, 0.4);
margin-left: 0.5em; margin-left: 0.5em;
margin-right: 0.5em; margin-right: 0.5em;
display: flex; display: flex;
align-items: stretch; align-items: stretch;
} }
.verticalDivider {
height: 20px;
display: flex;
align-items: stretch;
}
.smallVerticalDivider {
height: 5px;
display: flex;
align-items: stretch;
}
.flexContainer { .flexContainer {
box-sizing: border-box; box-sizing: border-box;
height: 100%; height: 100%;
@ -238,15 +257,30 @@ svg {
width: auto; width: auto;
} }
.forceVertical {
flex-direction: column;
}
.forceWrap{ .forceWrap{
flex-direction: column; flex-direction: column;
} }
.stretchAndPad {
justify-content: stretch;
padding: 20px;
width: 100%;
}
.stretchAndBetween {
align-items: stretch;
justify-content: space-between;
width: 100%;
}
.stroke { .stroke {
box-sizing: border-box; box-sizing: border-box;
padding-bottom: 20px; padding: 0;
padding-top: 20px; margin: 0;
margin: 10px;
width: 100%; width: 100%;
display: flex; display: flex;
align-items: center; align-items: center;
@ -288,8 +322,17 @@ svg {
display: flex; display: flex;
justify-content: space-evenly; justify-content: space-evenly;
vertical-align: middle; vertical-align: middle;
margin-left: 10px; margin: 0;
margin-right: 10px; padding: 0;
}
.sideMargin {
margin-left: 1em;
margin-right: 1em;
}
.fullMargin {
margin: 2em;
} }
.withWrap { .withWrap {
@ -401,6 +444,9 @@ svg {
.nonHomeButton:active { .nonHomeButton:active {
box-shadow: inset -4px -5px 6px 4px rgba(20, 20, 19, 0.692); box-shadow: inset -4px -5px 6px 4px rgba(20, 20, 19, 0.692);
} }
.buttonPadding {
padding: 1em;
}
.active { .active {
box-shadow: inset -4px -5px 6px 4px rgba(20, 20, 19, 0.692); box-shadow: inset -4px -5px 6px 4px rgba(20, 20, 19, 0.692);
} }
@ -450,7 +496,8 @@ svg {
} }
.overflow-content { .overflow-content {
color: black; color: black;
padding: 1em; padding-left: 1em;
padding-right: 1em;
} }
@ -461,9 +508,17 @@ svg {
.roundedOpaque { .roundedOpaque {
background-color: rgba(214, 214, 214, 0.80); background-color: rgba(214, 214, 214, 0.80);
box-shadow: 9px 13px 18px 8px rgba(20, 20, 19, 0.692); box-shadow: 9px 13px 18px 8px rgba(20, 20, 19, 0.692);
border-radius: 30px;
box-sizing: border-box; box-sizing: border-box;
backdrop-filter: blur(6px); backdrop-filter: blur(6px);
border-radius: 1em;
}
.roundedOpaqueDark {
background-color: rgba(17, 18, 23, 0.95);
box-shadow: 9px 13px 18px 8px rgba(20, 20, 19, 0.692);
box-sizing: border-box;
backdrop-filter: blur(6px);
border-radius: 1em;
} }
.header { .header {
@ -554,7 +609,7 @@ svg {
left: 2px; left: 2px;
} }
@media (max-aspect-ratio: 3/2) { @media (max-aspect-ratio: 4/3) {
.mobileSmallerFont{ .mobileSmallerFont{
font-size: xx-small; font-size: xx-small;
} }
@ -569,11 +624,12 @@ svg {
} }
.flexContainer { .flexContainer {
height: 100%; height: 100%;
width: 100%;
padding: 0; padding: 0;
margin: 0; margin: 0;
display: flex; display: flex;
align-items: flex-start; align-items: stretch;
justify-content: center; justify-content: space-between;
flex-direction: column; flex-direction: column;
} }
.roundedOpaque { .roundedOpaque {
@ -613,8 +669,4 @@ svg {
.main-container { .main-container {
height: calc(100vh - 60px); height: calc(100vh - 60px);
} }
#sideContent {
max-width: 100%;
width: 100%;
}
} }