Merge pull request #499 from gnarlex/fix-style-issues

Fix "No data available" display issues
This commit is contained in:
Mike Cao 2021-02-23 00:40:55 -08:00 committed by GitHub
commit 5d9357748e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 22 additions and 11 deletions

View File

@ -1,8 +1,11 @@
.container { .container {
color: var(--gray500); color: var(--gray500);
font-size: var(--font-size-normal); font-size: var(--font-size-normal);
position: absolute; position: relative;
top: 50%; display: flex;
left: 50%; align-items: center;
transform: translate(-50%, -50%); justify-content: center;
text-align: center;
width: 100%;
height: 100%;
} }

View File

@ -35,6 +35,6 @@
.row > .col { .row > .col {
border-top: 1px solid var(--gray300); border-top: 1px solid var(--gray300);
border-left: 0; border-left: 0;
padding: 0; padding: 20px 0;
} }
} }

View File

@ -1,14 +1,15 @@
.table { .table {
position: relative; position: relative;
height: 100%;
font-size: var(--font-size-small); font-size: var(--font-size-small);
display: flex; display: grid;
flex-direction: column; grid-template-rows: fit-content(100%) auto;
flex: 1;
overflow: hidden; overflow: hidden;
} }
.body { .body {
position: relative; position: relative;
height: 100%;
overflow: auto; overflow: auto;
} }

View File

@ -1,6 +1,7 @@
.container { .container {
position: relative; position: relative;
min-height: 430px; min-height: 430px;
height: 100%;
font-size: var(--font-size-small); font-size: var(--font-size-small);
display: flex; display: flex;
flex-direction: column; flex-direction: column;

View File

@ -176,9 +176,11 @@ export default function RealtimeLog({ data, websites, websiteId }) {
</div> </div>
<div className={styles.body}> <div className={styles.body}>
{logs?.length === 0 && <NoData />} {logs?.length === 0 && <NoData />}
<FixedSizeList height={400} itemCount={logs.length} itemSize={40}> {logs?.length > 0 && (
{Row} <FixedSizeList height={400} itemCount={logs.length} itemSize={40}>
</FixedSizeList> {Row}
</FixedSizeList>
)}
</div> </div>
</div> </div>
); );

View File

@ -1,6 +1,9 @@
.table { .table {
font-size: var(--font-size-xsmall); font-size: var(--font-size-xsmall);
overflow: hidden; overflow: hidden;
height: 100%;
display: grid;
grid-template-rows: fit-content(100%) fit-content(100%) auto;
} }
.header { .header {
@ -21,6 +24,7 @@
.body { .body {
overflow: auto; overflow: auto;
height: 100%;
} }
.icon { .icon {