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

Now with scrollable event viewer

Browse Source
This commit is contained in:
Marco van Dijk 2022-03-02 13:59:02 +01:00
parent fdc22d1d48
commit d462bdfdb8
5 changed files with 68 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@ -5,3 +5,4 @@ log.txt
build/ build/
TODO TODO
backend/src/config.js backend/src/config.js
notes.txt

6
src/eventButton.js
View File

@ -33,14 +33,10 @@ const EventButton = (obj) => {
} }
return ( return (
<div className="row"> <a href={obj.transactionUrl} className="row">
<a href={obj.transactionUrl}>
<button className="waveButton">
<img alt="" src="livepeer.png" width="30" height="30" /> <img alt="" src="livepeer.png" width="30" height="30" />
{eventSpecificInfo} {eventSpecificInfo}
</button>
</a> </a>
</div>
) )
} }

3
src/eventViewer.js
View File

@ -1,9 +1,10 @@
import React from "react"; import React from "react";
import EventButton from "./eventButton"; import EventButton from "./eventButton";
import ScrollContainer from 'react-indiana-drag-scroll';
const EventViewer = (obj) => { const EventViewer = (obj) => {
return ( return (
<div className="roundedOpaque flexContainer hostinfo scrollWindow" style={{ width: 'unset', justifyContent: 'center', alignContent: 'center', alignItems: 'center', marginBottom: '20px', marginTop: '20px', flexDirection: 'column' }}> <div className="stroke roundedOpaque" style={{ padding: 0, margin: 0, marginTop: '2em', position: 'absolute', bottom: 0, top: '200px', left: '0px', right: '0px', overflowY: 'auto', overflowX: 'hidden', width: '100%' }}>
{obj.events.map((eventObj, idx) => { {obj.events.map((eventObj, idx) => {
console.log(eventObj); console.log(eventObj);
// TODO: make something that groups shit as long as the eventObj.transactionUrl is the same // TODO: make something that groups shit as long as the eventObj.transactionUrl is the same

28
src/livepeer.js
View File

@ -120,9 +120,8 @@ class Livepeer extends React.Component {
} }
return ( return (
<div className="rowContainer"> <div style={{ width: '100%', height: '100%' }}>
<div className="row" style={{ margin: 0, padding: 0, backgroundColor: "rgba(180, 175, 252, 0.80)", boxSizing: "border-box", backdropDilter: "blur(6px)", boxSshadow: "9px 13px 18px 8px rgba(8, 7, 56, 0.692)" }}> <div className="row" style={{ margin: 0, padding: 0, backgroundColor: "rgba(180, 175, 252, 0.80)", boxSizing: "border-box", backdropDilter: "blur(6px)", boxSshadow: "9px 13px 18px 8px rgba(8, 7, 56, 0.692)", position: 'absolute', top: '0px', left: '0px', height: '200px', right: '0px', overflow: 'hidden' }}>
<div className="stroke" style={{ margin: 0, padding: 0 }}>
<div className="row" style={{ margin: 0, padding: 0 }}> <div className="row" style={{ margin: 0, padding: 0 }}>
<button className="homeButton" onClick={() => { <button className="homeButton" onClick={() => {
this.setState({ redirectToHome: true }); this.setState({ redirectToHome: true });
@ -130,12 +129,7 @@ class Livepeer extends React.Component {
<img alt="" src="livepeer.png" width="100em" height="100em" /> <img alt="" src="livepeer.png" width="100em" height="100em" />
</button> </button>
</div> </div>
</div > <div className="row metaSidebar" style={{ padding: 0 }}>
<div className="stroke" style={{ padding: 0 }}>
<div className="main-container">
<div className="content-wrapper">
<ScrollContainer className="overflow-container" hideScrollbars={false}>
<div className="overflow-content metaSidebar" style={{ cursor: 'grab' }}>
<div className="stroke" style={{ margin: 0, padding: 0 }}> <div className="stroke" style={{ margin: 0, padding: 0 }}>
<div className="row"> <div className="row">
<h3>Price Info</h3> <h3>Price Info</h3>
@ -182,23 +176,9 @@ class Livepeer extends React.Component {
</div> </div>
</div> </div>
</div> </div>
</ScrollContainer> </div >
</div>
</div>
</div>
</div>
<div className="stroke" style={{ margin: 0, padding: 0 }}>
<div className="stroke" style={{ margin: 0, padding: 0 }}>
</div>
<div className="stroke" style={{ margin: 0, padding: 0 }}>
<EventViewer events={eventsList} /> <EventViewer events={eventsList} />
</div > </div >
<div className="stroke" style={{ padding: 0 }}>
</div>
</div>
</div>
); );
} }
} }

7
src/style.css
View File

@ -80,7 +80,7 @@ p {
#dvdlogo { #dvdlogo {
display: block; display: block;
position: absolute; position: absolute;
z-index: 1; z-index: -1;
-webkit-animation: moveX 10s linear 0s infinite alternate, moveY 17s linear 0s infinite alternate, changeColour 30s, linear, 0s, infinite, normal, none, infinite; -webkit-animation: moveX 10s linear 0s infinite alternate, moveY 17s linear 0s infinite alternate, changeColour 30s, linear, 0s, infinite, normal, none, infinite;
-moz-animation: moveX 10s linear 0s infinite alternate, moveY 17s linear 0s infinite alternate, changeColour 30s, linear, 0s, infinite, normal, none, infinite; -moz-animation: moveX 10s linear 0s infinite alternate, moveY 17s linear 0s infinite alternate, changeColour 30s, linear, 0s, infinite, normal, none, infinite;
-o-animation: moveX 10s linear 0s infinite alternate, moveY 17s linear 0s infinite alternate, changeColour 30s, linear, 0s, infinite, normal, none, infinite; -o-animation: moveX 10s linear 0s infinite alternate, moveY 17s linear 0s infinite alternate, changeColour 30s, linear, 0s, infinite, normal, none, infinite;
@ -145,6 +145,11 @@ svg {
flex-direction: row; flex-direction: row;
} }
.rowContainer {
height: 100%;
display: block;
}
.serviceButton { .serviceButton {
width: 100%; width: 100%;
margin: 0.4em; margin: 0.4em;