layout tweaks

2025-07-05 10:45:10 +02:00 · 2022-04-22 18:12:24 +02:00 · 2022-04-22 18:12:24 +02:00 · 55999bbdd6
commit 55999bbdd6
parent 64c25dc43f
8 changed files with 113 additions and 111 deletions
--- a/src/components/MonthlyFactoids.js
+++ b/src/components/MonthlyFactoids.js
@ -28,11 +28,11 @@ const MonthlyFactoids = (obj) => {

  return (
    <div className="stroke insetEffect" key={obj.seed + "factoids"} style={{ height: '70vh' }}>
-      <div className="content-wrapper">
-        <ScrollContainer className="overflow-container" hideScrollbars={false} style={{}}>
-          <div className="overflow-content" style={{ cursor: 'grab', maxHeight: '70vh' }}>
+      <div className="content-wrapper" style={{width: "unset"}}>
+        <ScrollContainer className="overflow-container" hideScrollbars={false} style={{width: "unset"}}>
+          <div className="overflow-content" style={{ cursor: 'grab', maxHeight: '70vh', width: "unset" }}>
            {obj.data.reactivationCount ?
-              <div className="stroke">
+              <div className="stroke" style={{width: 'unset'}}>
                <div className="halfVerticalDivider" />
                <div className="row" style={{ justifyContent: 'space-between', alignItems: 'stretch', maxWidth: '61.8%', textAlign: 'justify', padding: '0.5em', backgroundColor: activationColour, border: '0.1em solid rgba(54, 46, 46, 0.1)' }}>
                  <Ticket seed={obj.seed + "-reactivationCount-"} icon={"🔌"} subtext={obj.data.reactivationCount + " reactivations"} descriptions={[
@ -43,7 +43,7 @@ const MonthlyFactoids = (obj) => {
            }

            {obj.data.activationCount ?
-              <div className="stroke">
+              <div className="stroke" style={{width: 'unset'}}>
                <div className="halfVerticalDivider" />
                <div className="row" style={{ justifyContent: 'space-between', alignItems: 'stretch', maxWidth: '61.8%', textAlign: 'justify', padding: '0.5em', backgroundColor: activationColour, border: '0.1em solid rgba(54, 46, 46, 0.1)' }}>
                  <Ticket seed={obj.seed + "-neworchs-"} icon={"🔧"} subtext={obj.data.activationCount + " new orchestrators"} descriptions={[
@ -53,7 +53,7 @@ const MonthlyFactoids = (obj) => {
              </div> : null
            }
            {(obj.data.latestCommission && obj.data.latestCommission.length) ?
-              <div className="stroke">
+              <div className="stroke" style={{width: 'unset'}}>
                <div className="halfVerticalDivider" />
                <div className="row" style={{ justifyContent: 'space-between', alignItems: 'stretch', maxWidth: '61.8%', textAlign: 'justify', padding: '0.5em', backgroundColor: updateColour, border: '0.1em solid rgba(54, 46, 46, 0.1)' }}>
                  <Ticket seed={obj.seed + "-neworchs-"} icon={"🔗"} subtext={obj.data.latestCommission.length + " orchestrators found"} descriptions={[
@ -62,7 +62,7 @@ const MonthlyFactoids = (obj) => {
                </div>
              </div> : null}
            {obj.data.bondCount ?
-              <div className="stroke">
+              <div className="stroke" style={{width: "unset"}}>
                <div className="halfVerticalDivider" />
                <div className="row" style={{ justifyContent: 'space-between', alignItems: 'stretch', maxWidth: '61.8%', textAlign: 'justify', padding: '0.5em', backgroundColor: stakeColour, border: '0.1em solid rgba(54, 46, 46, 0.1)' }}>
                  <Ticket seed={obj.seed + "-neworchs-"} icon={"📈"} subtext={obj.data.bondCount + " new delegators"} descriptions={[
@ -72,7 +72,7 @@ const MonthlyFactoids = (obj) => {
              </div> : null
            }
            {obj.data.unbondCount ?
-              <div className="stroke">
+              <div className="stroke" style={{width: 'unset'}}>
                <div className="halfVerticalDivider" />
                <div className="row" style={{ justifyContent: 'space-between', alignItems: 'stretch', maxWidth: '61.8%', textAlign: 'justify', padding: '0.5em', backgroundColor: unbondColour, border: '0.1em solid rgba(54, 46, 46, 0.1)' }}>
                  <Ticket seed={obj.seed + "-neworchs-"} icon={"📉"} subtext={obj.data.unbondCount + " leaving delegators"} descriptions={[
@ -82,7 +82,7 @@ const MonthlyFactoids = (obj) => {
              </div> : null
            }
            {obj.data.rewardCount ?
-              <div className="stroke">
+              <div className="stroke" style={{width: 'unset'}}>
                <div className="halfVerticalDivider" />
                <div className="row" style={{ justifyContent: 'space-between', alignItems: 'stretch', maxWidth: '61.8%', textAlign: 'justify', padding: '0.5em', backgroundColor: rewardColour, border: '0.1em solid rgba(54, 46, 46, 0.1)' }}>
                  <Ticket seed={obj.seed + "-neworchs-"} icon={"⌛"} subtext={obj.data.rewardCount + " reward calls"} descriptions={[
@ -92,7 +92,7 @@ const MonthlyFactoids = (obj) => {
              </div> : null
            }
            {obj.data.claimCount ?
-              <div className="stroke">
+              <div className="stroke" style={{width: 'unset'}}>
                <div className="halfVerticalDivider" />
                <div className="row" style={{ justifyContent: 'space-between', alignItems: 'stretch', maxWidth: '61.8%', textAlign: 'justify', padding: '0.5em', backgroundColor: claimColour, border: '0.1em solid rgba(54, 46, 46, 0.1)' }}>
                  <Ticket seed={obj.seed + "-neworchs-"} icon={"🏦"} subtext={obj.data.claimCount + " reward claims"} descriptions={[
@ -102,7 +102,7 @@ const MonthlyFactoids = (obj) => {
              </div> : null
            }
            {obj.data.withdrawStakeCount ?
-              <div className="stroke">
+              <div className="stroke" style={{width: 'unset'}}>
                <div className="halfVerticalDivider" />
                <div className="row" style={{ justifyContent: 'space-between', alignItems: 'stretch', maxWidth: '61.8%', textAlign: 'justify', padding: '0.5em', backgroundColor: withdrawStakeColour, border: '0.1em solid rgba(54, 46, 46, 0.1)' }}>
                  <Ticket seed={obj.seed + "-neworchs-"} icon={"💸"} subtext={obj.data.withdrawStakeCount + " withdraw reward calls"} descriptions={[
@ -112,7 +112,7 @@ const MonthlyFactoids = (obj) => {
              </div> : null
            }
            {obj.data.withdrawFeesCount ?
-              <div className="stroke">
+              <div className="stroke" style={{width: 'unset'}}>
                <div className="halfVerticalDivider" />
                <div className="row" style={{ justifyContent: 'space-between', alignItems: 'stretch', maxWidth: '61.8%', textAlign: 'justify', padding: '0.5em', backgroundColor: withdrawStakeColour, border: '0.1em solid rgba(54, 46, 46, 0.1)' }}>
                  <Ticket seed={obj.seed + "-neworchs-"} icon={"💸"} subtext={obj.data.withdrawFeesCount + " withdraw fee calls"} descriptions={[
@ -122,7 +122,7 @@ const MonthlyFactoids = (obj) => {
              </div> : null
            }
            {obj.data.moveStakeCount ?
-              <div className="stroke">
+              <div className="stroke" style={{width: 'unset'}}>
                <div className="halfVerticalDivider" />
                <div className="row" style={{ justifyContent: 'space-between', alignItems: 'stretch', maxWidth: '61.8%', textAlign: 'justify', padding: '0.5em', backgroundColor: stakeColour, border: '0.1em solid rgba(54, 46, 46, 0.1)' }}>
                  <Ticket seed={obj.seed + "-neworchs-"} icon={"🔄"} subtext={obj.data.moveStakeCount + " stake movements"} descriptions={[
@ -132,7 +132,7 @@ const MonthlyFactoids = (obj) => {
              </div> : null
            }
            {obj.data.winningTicketsReceivedCount ?
-              <div className="stroke">
+              <div className="stroke" style={{width: 'unset'}}>
                <div className="halfVerticalDivider" />
                <div className="row" style={{ justifyContent: 'space-between', alignItems: 'stretch', maxWidth: '61.8%', textAlign: 'justify', padding: '0.5em', backgroundColor: ticketTransferColour, border: '0.1em solid rgba(54, 46, 46, 0.1)' }}>
                  <Ticket seed={obj.seed + "-neworchs-"} icon={"🎫"} subtext={obj.data.winningTicketsReceivedCount + " winning tickets"} descriptions={[
@ -142,7 +142,7 @@ const MonthlyFactoids = (obj) => {
              </div> : null
            }
            {obj.data.winningTicketsRedeemedCount ?
-              <div className="stroke">
+              <div className="stroke" style={{width: 'unset'}}>
                <div className="halfVerticalDivider" />
                <div className="row" style={{ justifyContent: 'space-between', alignItems: 'stretch', maxWidth: '61.8%', textAlign: 'justify', padding: '0.5em', backgroundColor: ticketRedeemColour, border: '0.1em solid rgba(54, 46, 46, 0.1)' }}>
                  <Ticket seed={obj.seed + "-neworchs-"} icon={"🎟️"} subtext={obj.data.winningTicketsRedeemedCount + " redeemed tickets"} descriptions={[
--- a/src/components/MonthlyGraphs.js
+++ b/src/components/MonthlyGraphs.js
@ -93,7 +93,7 @@ const MonthlyGraphs = (obj) => {

    totalGraphs++;

-    stakeObj = <div className="stroke" style={{width: 'unset'}}>
+    stakeObj = <div className="stroke" style={{ width: 'unset' }}>
      <h4>Stake Distribution</h4>
      <VictoryPie padding={0} data={pieList} x="address" y="sum"
        sortOrder="descending"
@ -175,7 +175,7 @@ const MonthlyGraphs = (obj) => {

    totalGraphs++;

-    earningsObj = <div className="stroke" style={{width: 'unset'}}>
+    earningsObj = <div className="stroke" style={{ width: 'unset' }}>
      <h4>Earnings Distribution</h4>
      <VictoryPie padding={{ top: 20, bottom: 20, left: 120, right: 120 }} data={pieList} x="address" y="sum"
        sortOrder="descending"
@ -260,7 +260,7 @@ const MonthlyGraphs = (obj) => {

    totalGraphs++;

-    broadcasterObj = <div className="stroke" style={{width: 'unset'}}>
+    broadcasterObj = <div className="stroke" style={{ width: 'unset' }}>
      <h4>Broadcaster Payments</h4>
      <VictoryPie padding={{ top: 20, bottom: 20, left: 120, right: 120 }} data={pieList} x="address" y="sum"
        sortOrder="descending"
@ -403,15 +403,17 @@ const MonthlyGraphs = (obj) => {
  }

  return (
-    <div className="stroke insetEffect" key={obj.seed + "graphs"} style={{ minHeight: '70vh' }}>
-      {renderStake ? stakeObj : null}
-      {renderEarnings ? earningsObj : null}
-      {renderBread ? broadcasterObj : null}
+    <div className="stroke fullMargin insetEffect" style={{ padding: 0, margin: 0, height: '70vh' }}>
      <div className="row" style={{ marginTop: '1em', marginBottom: '1em' }}>
        {totalGraphs > 1 ?
          <Pagination page={activeGraph} onChange={setGraph} total={totalGraphs} siblings={1} initialPage={1} />
          : null}
      </div>
+      <div className="row" style={{ marginTop: '1em', marginBottom: '1em', height: '100%' }}>
+        {renderStake ? stakeObj : null}
+        {renderEarnings ? earningsObj : null}
+        {renderBread ? broadcasterObj : null}
+      </div>
    </div>
  )
 }
--- a/src/components/MonthlyOrchestrators.js
+++ b/src/components/MonthlyOrchestrators.js
@ -114,6 +114,11 @@ const MonthlyOrchestrators = (obj) => {

  return (
    <div className="stroke fullMargin insetEffect" style={{ padding: 0, margin: 0, height: '70vh' }}>
+      <div className="row" style={{ marginTop: '1em', marginBottom: '1em' }}>
+        {totalPages > 1 ?
+          <Pagination page={activePage} onChange={setPage} total={totalPages} siblings={1} initialPage={1} />
+          : null}
+      </div>
      <div className="content-wrapper">
        <ScrollContainer className="overflow-container" hideScrollbars={false} style={{}}>
          <div className="overflow-content" style={{ cursor: 'grab', maxHeight: '300px' }}>
@ -167,11 +172,6 @@ const MonthlyOrchestrators = (obj) => {
          </div>
        </ScrollContainer>
      </div>
-        <div className="row" style={{ marginTop: '1em', marginBottom: '1em' }}>
-          {totalPages > 1 ?
-            <Pagination page={activePage} onChange={setPage} total={totalPages} siblings={1} initialPage={1} />
-            : null}
-        </div>
    </div>
  )
 }
--- a/src/components/OrchAddressViewer.js
+++ b/src/components/OrchAddressViewer.js
@ -111,7 +111,7 @@ const Address = (obj) => {
        <img alt="" src="livepeer.png" width="20em" height="20em" />
      </a>
      {thisIcon}
-      <span className="elipsText elipsOnMobileExtra" style={{ width: '100%' }}>{thisName}</span>
+      <span className="elipsText elipsOnMobileExtra">{thisName}</span>
    </div>
  )
 }
--- a/src/components/WinnerStat.js
+++ b/src/components/WinnerStat.js
@ -55,7 +55,7 @@ const Winner = (obj) => {
        opened={opened}
        onClose={() => setOpened(false)}
        target={
-          <div className="strokeSmollLeft" style={{ width: '4em', height: '4em', marginLeft: '2em' }} onClick={() => setOpened((o) => !o)} >
+          <div className="strokeSmollLeft" style={{ width: '3em', height: '3em', marginLeft: '2em' }} onClick={() => setOpened((o) => !o)} >
            <CircularProgressbar value={thisScore} maxValue={1} text={`${((thisScore * 10).toFixed(1))}`}
              styles={{
                root: {},
@ -89,7 +89,7 @@ const Winner = (obj) => {
  }

  return (
-    <div className="stroke hostInfo" style={{ padding: '1em', cursor: 'grab' }} >
+    <div className="stroke hostInfo" style={{ padding: '1em', cursor: 'grab', width: '100%' }} >
      <div className="row">
        <div className="strokeSmollLeft" style={{ marginLeft: '0.2em', whiteSpace: 'nowrap' }} >
          <h3>{obj.thisIndex}</h3>
@ -100,7 +100,7 @@ const Winner = (obj) => {
        {scoreObj}
      </div>
      <div className="row">
-        {obj.thisEarnings ? <div className="strokeSmollLeft" style={{ minWidth: '100px' }} >
+        {obj.thisEarnings ? <div className="strokeSmollLeft" style={{ minWidth: '50px' }} >
          <div className="rowAlignLeft" >
            <h3>Fees</h3>
          </div>
@ -110,10 +110,10 @@ const Winner = (obj) => {
          <div className="rowAlignRight" >
            <span>({((obj.thisEarnings.sum / obj.totalEarnings) * 100).toFixed(2)} %)</span>
          </div>
-        </div> : <div className="strokeSmollLeft" style={{ minWidth: '100px' }} />
+        </div> : <div className="strokeSmollLeft" style={{ minWidth: '50px' }} />
        }
        {obj.thisStake ?
-          <div className="strokeSmollLeft" style={{ minWidth: '100px' }} >
+          <div className="strokeSmollLeft" style={{ minWidth: '50px' }} >
            <div className="rowAlignLeft" >
              <h3>Stake</h3>
            </div>
@ -123,10 +123,10 @@ const Winner = (obj) => {
            <div className="rowAlignRight" >
              <span>({((obj.thisStake.totalStake / obj.totalStake) * 100).toFixed(2)} %)</span>
            </div>
-          </div> : <div className="strokeSmollLeft" style={{ minWidth: '100px' }} />
+          </div> : <div className="strokeSmollLeft" style={{ minWidth: '50px' }} />
        }
        {obj.thisCommission ?
-          <div className="strokeSmollLeft" style={{ minWidth: '100px' }} >
+          <div className="strokeSmollLeft" style={{ minWidth: '50px' }} >
            <div className="rowAlignLeft" >
              <h3>Commission</h3>
            </div>
@ -136,7 +136,7 @@ const Winner = (obj) => {
            <div className="rowAlignRight" >
              <span>{obj.thisCommission.feeCommission.toFixed(2)}% Fee</span>
            </div>
-          </div> : <div className="strokeSmollLeft" style={{ minWidth: '100px' }} />
+          </div> : <div className="strokeSmollLeft" style={{ minWidth: '50px' }} />
        }
      </div>
    </div>
--- a/src/components/eventButtonAddress.js
+++ b/src/components/eventButtonAddress.js
@ -175,7 +175,7 @@ const EventButtonAddress = (obj) => {
        }
        dispatch(getOrchestratorInfo(obj.address));
      }} >
-        {thisName}
+        <span className="elipsText elipsOnMobileExtra">{thisName}</span>
      </button>
    </div>
  )
--- a/src/pages/MonthlyStats.js
+++ b/src/pages/MonthlyStats.js
@ -5,19 +5,34 @@ import MonthlyOrchestrators from '../components/MonthlyOrchestrators';
 import { RadioGroup, Radio } from "@mantine/core";

 const MonthlyStats = (obj) => {
-  const [activePage, setPage] = useState(1);
+  const [activePage, setPage] = useState(0);

  let thisColour;
-  if (activePage == 1){
+  if (activePage == 1) {
    thisColour = "teal";
-  } else if (activePage == 2){
+  } else if (activePage == 2) {
    thisColour = "indigo";
-  } else if (activePage == 3){
+  } else if (activePage == 3) {
    thisColour = "red";
  }

  return (
    <div className="stroke" key={obj.seed + "menu"}>
+      <div className="verticalDivider" />
+      <div className="row" style={{ marginTop: '0.3em', marginBottom: '0.3em' }}>
+        <RadioGroup
+          value={activePage}
+          onChange={setPage}
+          spacing="lg"
+          size="lg"
+          color={thisColour}
+          required
+        >
+          <Radio value="1" label="Summary" />
+          <Radio value="2" label="Graphs" />
+          <Radio value="3" label="Orchestrators" />
+        </RadioGroup>
+      </div>
      <div className="verticalDivider" />
      <div className="row">
        {
@ -50,21 +65,6 @@ const MonthlyStats = (obj) => {
        /> : null
      }
      <div className="verticalDivider" />
-      <div className="row" style={{ marginTop: '0.3em', marginBottom: '0.3em' }}>
-        <RadioGroup
-          value={activePage}
-          onChange={setPage}
-          spacing="lg"
-          size="lg"
-          color={thisColour}
-          required
-        >
-          <Radio value="1" label="Summary" />
-          <Radio value="2" label="Graphs" />
-          <Radio value="3" label="Orchestrators" />
-        </RadioGroup>
-      </div>
-      <div className="verticalDivider" />
    </div>
  )
 }
--- a/src/pages/stats.js
+++ b/src/pages/stats.js
@ -31,7 +31,7 @@ const Stats = (obj) => {
        <div className="mainContent">
          <div className="strokeSmollLeft" style={{ height: 'calc( 100vh - 50px)' }}>
            <div className="row" style={{ width: '100%', height: '100%' }}>
-              <div className="stroke roundedOpaque onlyVerticalScroll" style={{ width: '40vw', minWidth: '400px', height: 'calc( 100vh - 50px - 2em)', marginTop: '2em' }}>
+              <div className="stroke roundedOpaque onlyVerticalScroll" style={{ width: '40vw', minWidth: '300px', height: 'calc( 100vh - 50px - 2em)', marginTop: '2em' }}>
                <div className="content-wrapper" style={{ width: '100%' }}>
                  <div className="overflow-container">
                    <div className="overflow-content" style={{ padding: 0 }}>