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

Sidebar scaling fix

Browse Source
This commit is contained in:
Marco van Dijk 2022-03-08 17:21:33 +01:00
parent fcdc274014
commit 02173f15f0
2 changed files with 26 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
src/livepeer.js
View File

@ -12,7 +12,7 @@ import Stat from "./statViewer";
const Livepeer = (obj) => { const Livepeer = (obj) => {
const [prefill, setPrefill] = useSearchParams(); const [prefill, setPrefill] = useSearchParams();
const [searchTerm, setSearchTerm] = useState(""); const [searchTerm, setSearchTerm] = useState("");
const dispatch = useDispatch(); const dispatch = useDispatch();
const livepeer = useSelector((state) => state.livepeerstate); const livepeer = useSelector((state) => state.livepeerstate);
const [redirectToHome, setRedirectToHome] = useState(false); const [redirectToHome, setRedirectToHome] = useState(false);
const [showFilter, setShowFilter] = useState(false); const [showFilter, setShowFilter] = useState(false);
@ -136,26 +136,29 @@ 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="strokeSmollLeft" style={{ margin: 0, padding: 0, width: '100%', marginTop: '1em' }}>
<div className="row" style={{ alignItems: 'stretch', height: '100%', padding: '0.2em', width: "unset" }}> <div className="row" style={{ alignItems: 'stretch', height: '100%', padding: '0.2em', width: "unset" }}>
<Orchestrator thisOrchestrator={thisOrchObj} rootOnly={false} forceVertical={true} /> <Orchestrator thisOrchestrator={thisOrchObj} rootOnly={false} forceVertical={true} />
</div>
<div className="stroke metaSidebar" style={{ padding: 0, maxWidth: "300px" }}>
<div className="row" style={{ margin: 0, padding: 0 }}>
<h3 style={{ margin: 0, padding: 0 }}>Smart contract prices</h3>
</div> </div>
<div className="stroke" style={{ margin: 0, padding: 0 }}> <div className="stroke metaSidebar" style={{ padding: 0, maxWidth: "300px" }}>
<Stat header={"Reward Call"} content1={"$" + redeemRewardCostL2USD + " (vs " + redeemRewardCostL1USD + " on L1)"} /> <div className="row" style={{ margin: 0, padding: 0 }}>
<Stat header={"Claim Ticket"} content1={"$" + claimTicketCostL2USD + " (vs " + claimTicketCostL1USD + " on L1)"} /> <h3 style={{ margin: 0, padding: 0 }}>Smart contract prices</h3>
<Stat header={"Staking Fees"} content1={"$" + stakeFeeCostL2USD + " (vs " + stakeFeeCostL1USD + " on L1)"} /> </div>
<Stat header={"Change Commission"} content1={"$" + commissionFeeCostL2USD + " (vs " + commissionFeeCostL1USD + " on L1)"} /> <div className="stroke" style={{ margin: 0, padding: 0 }}>
<Stat header={"Change URI"} content1={"$" + serviceUriFeeCostL2USD + " (vs " + serviceUriFeeCostL1USD + " on L1)"} /> <div className='rowAlignRight'>
<Stat header={"Reward Call"} content1={"$" + redeemRewardCostL2USD + " (vs " + redeemRewardCostL1USD + " on L1)"} />
<Stat header={"Claim Ticket"} content1={"$" + claimTicketCostL2USD + " (vs " + claimTicketCostL1USD + " on L1)"} />
</div>
<div className='rowAlignRight'>
<Stat header={"Staking Fees"} content1={"$" + stakeFeeCostL2USD + " (vs " + stakeFeeCostL1USD + " on L1)"} />
<Stat header={"Set Config"} content1={"$" + commissionFeeCostL2USD + " (vs " + commissionFeeCostL1USD + " on L1)"} />
</div>
</div>
</div> </div>
</div> </div>
</div> </div >
</div >
} }
return ( return (
@ -165,23 +168,23 @@ const Livepeer = (obj) => {
<button className="homeButton" onClick={() => { <button className="homeButton" onClick={() => {
setRedirectToHome(true); setRedirectToHome(true);
}}> }}>
<h1 style={{margin: 0, padding: 0}}>🏠</h1> <h1 style={{ margin: 0, padding: 0 }}>🏠</h1>
</button> </button>
<h4>{headerString}</h4> <h4>{headerString}</h4>
</div> </div>
<div className='rowAlignRight'> <div className='rowAlignRight'>
<button className="homeButton" style={{padding: 0, paddingRight: '1em', paddingLeft: '1em'}} onClick={() => { <button className="homeButton" style={{ padding: 0, paddingRight: '1em', paddingLeft: '1em' }} onClick={() => {
dispatch(clearOrchestrator()); dispatch(clearOrchestrator());
setSearchTerm(""); setSearchTerm("");
}}> }}>
<h4>✖️ Clear</h4> <h4>✖️ Clear</h4>
</button> </button>
<button className="homeButton" style={{padding: 0, paddingRight: '1em', paddingLeft: '1em'}} onClick={() => { <button className="homeButton" style={{ padding: 0, paddingRight: '1em', paddingLeft: '1em' }} onClick={() => {
setShowSidebar(!showSidebar); setShowSidebar(!showSidebar);
}}> }}>
<h4>🔎 Sidebar</h4> <h4>🔎 Sidebar</h4>
</button> </button>
<button className="homeButton" style={{padding: 0, paddingRight: '1em', paddingLeft: '1em'}} onClick={() => { <button className="homeButton" style={{ padding: 0, paddingRight: '1em', paddingLeft: '1em' }} onClick={() => {
setShowFilter(!showFilter); setShowFilter(!showFilter);
}}> }}>
<h4>🛠️ Filter</h4> <h4>🛠️ Filter</h4>

2
src/style.css
View File

@ -160,6 +160,8 @@ svg {
box-shadow: 9px 13px 8px 8px rgba(8, 7, 56, 0.692); box-shadow: 9px 13px 8px 8px rgba(8, 7, 56, 0.692);
border-bottom-right-radius: 1em; border-bottom-right-radius: 1em;
width: 400px; width: 400px;
overflow-y: auto;
overflow-x: hidden;
} }
.mainContent { .mainContent {
overflow: hidden; overflow: hidden;