albert/qmining-page
1
0
Fork 0
mirror of https://gitlab.com/MrFry/qmining-page synced 2025-04-01 20:23:44 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

Ranklist table fixes

Browse source
This commit is contained in:
mrfry 2021-03-16 19:34:21 +01:00
parent 2456794387
commit 7f4163736c
2 changed files with 110 additions and 129 deletions
Download patch file Download diff file Expand all files Collapse all files

164
src/pages/ranklist.js
View file

@ -127,92 +127,102 @@ export default function RankList() {
<Head> <Head>
<title>Ranklista - Qmining | Frylabs.net</title> <title>Ranklista - Qmining | Frylabs.net</title>
</Head> </Head>
<div className={'endofpage'}> <div className={styles.container}>
<div className={styles.wrapper}> <div>
<div className={styles.sinceTable}> <center>
<center> <div id="rankHeader" className={'pageHeader'}>
<div id="rankHeader" className={'pageHeader'}> <h1>Ranklista</h1>
<h1>Ranklista</h1>
</div>
</center>
<div
className={styles.infoText}
>{`A felhasználó ID-d: #${selfUserId}`}</div>
<div className={styles.text}>
<p>
Az adatok kb 2020. április eleje óta vannak gyűjtve, és azonnal
frissülnek.
</p>
</div> </div>
<Sleep /> </center>
<div className={styles.timeRangeSelect}> <div
<div>Megjelenítés:</div> className={styles.infoText}
<select >{`A felhasználó ID-d: #${selfUserId}`}</div>
className={styles.sinceHeaderRow} <div className={styles.text}>
onChange={(e) => { <p>
console.log(e.target.value) Az adatok kb 2020. április eleje óta vannak gyűjtve, és azonnal
updateSince(e.target.value) frissülnek.
}} </p>
> </div>
{Object.keys(sinceOptions).map((key) => { <Sleep />
const val = sinceOptions[key] <div className={styles.selectContainer}>
return ( <div>Megjelenítés:</div>
<option key={key} value={key}> <select
{val.name} onChange={(e) => {
</option> updateSince(e.target.value)
) }}
})} >
</select> {Object.keys(sinceOptions).map((key) => {
</div> const val = sinceOptions[key]
<div className={styles.headerRow}>
<div>{'Rank'}</div>
<div>{'Felhasználó ID'}</div>
{Object.keys(selectOptions).map((listKey) => {
const val = selectOptions[listKey]
return ( return (
<div <option key={key} value={key}>
className={`${styles.clickable} ${listKey === key &&
styles.selected}`}
key={listKey}
onClick={() => {
setKey(listKey)
}}
>
{val.name} {val.name}
</div> </option>
) )
})} })}
</div> </select>
<div className={`${styles.row} ${styles.sumrow}`}>
<div />
<div>{'Összesen'}</div>
<div>{sum.newQuestions}</div>
<div>{sum.allQuestions}</div>
<div>{sum.count}</div>
</div>
</div> </div>
<div className={styles.table}> <div className={styles.selectContainer}>
{list ? ( <div>Rendezés:</div>
list.map((listItem, i) => { <select
value={key}
onChange={(e) => {
setKey(e.target.value)
}}
>
{Object.keys(selectOptions).map((key) => {
const val = selectOptions[key]
return ( return (
<div <option key={key} value={key}>
className={`${styles.row} ${listItem.userId === {val.name}
selfUserId && styles.selfRow}`} </option>
key={i}
>
<div>{i + 1}</div>
<div>{'#' + listItem.userId}</div>
{Object.keys(selectOptions).map((listKey) => {
const val = listItem[listKey]
return <div key={listKey}>{val}</div>
})}
</div>
) )
}) })}
) : ( </select>
<LoadingIndicator />
)}
</div> </div>
<div className={styles.headerRow}>
<div>{'Rank'}</div>
<div>{'Felhasználó ID'}</div>
{Object.keys(selectOptions).map((listKey) => {
const val = selectOptions[listKey]
return (
<div
className={`${listKey === key && styles.selected}`}
key={listKey}
>
{val.name}
</div>
)
})}
</div>
<div className={`${styles.row} ${styles.sumrow}`}>
<div />
<div>{'Összesen'}</div>
<div>{sum.newQuestions}</div>
<div>{sum.allQuestions}</div>
<div>{sum.count}</div>
</div>
</div>
<div className={styles.table}>
{list ? (
list.map((listItem, i) => {
return (
<div
className={`${styles.row} ${listItem.userId === selfUserId &&
styles.selfRow}`}
key={i}
>
<div>{i + 1}</div>
<div>{'#' + listItem.userId}</div>
{Object.keys(selectOptions).map((listKey) => {
const val = listItem[listKey]
return <div key={listKey}>{val}</div>
})}
</div>
)
})
) : (
<LoadingIndicator />
)}
</div> </div>
</div> </div>
</div> </div>

75
src/pages/ranklist.module.css
View file

@ -1,51 +1,20 @@
.wrapper { .container {
position: relative; display: flex;
margin-top: -9px; flex-flow: column;
height: calc(98vh);
}
.container:first-child {
flex: 0 1 auto;
} }
.table { .table {
margin-top: 278px; flex: 1 1 auto;
overflow-y: scroll;
overflow-x: hidden;
background-color: #1f2021; background-color: #1f2021;
} }
.sinceTable {
position: fixed;
display: flex;
flex-direction: column;
padding-top: 10px;
padding-left: 5px;
background-color: var(--background-color);
width: 87%;
top: 0;
}
.sinceHeaderRow {
display: flex;
width: 10%;
border-radius: 5px;
border: 1.5px solid white;
background-color: #999999;
}
select.sinceHeaderRow {
display: flex;
width: 10%;
border-radius: 5px;
border: 1.5px solid white;
background-color: #999999;
font-family: inherit;
font-weight: 500;
padding-left: 4px;
padding-top: 2px;
}
.sinceHeaderRow:hover {
border: 1.5px solid var(--text-color);
}
select.sinceHeaderRow:hover {
border: 1.5px solid var(--text-color);
}
.row, .row,
.headerRow { .headerRow {
display: flex; display: flex;
@ -60,16 +29,14 @@ select.sinceHeaderRow:hover {
} }
.row div, .row div,
.headerRow div, .headerRow div {
.sinceHeaderRow div {
flex: 1; flex: 1;
padding: 0px 5px; padding: 0px 5px;
text-align: center; text-align: center;
} }
.headerRow div, .headerRow > div {
.sinceHeaderRow div { padding: 5px;
padding: 15px 5px;
} }
.row :nth-child(1), .row :nth-child(1),
@ -79,7 +46,7 @@ select.sinceHeaderRow:hover {
.row :nth-child(2), .row :nth-child(2),
.headerRow :nth-child(2) { .headerRow :nth-child(2) {
flex: 0 100px; flex: 0 130px;
text-align: left; text-align: left;
} }
@ -92,7 +59,7 @@ select.sinceHeaderRow:hover {
} }
.selfRow { .selfRow {
background-color: #9999ff; background-color: var(--text-color);
color: black; color: black;
} }
@ -115,19 +82,23 @@ select.sinceHeaderRow:hover {
} }
.selected { .selected {
background-color: #9999ff; background-color: #222;
} }
.sumrow { .sumrow {
color: white; color: white;
} }
.timeRangeSelect { .selectContainer {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.timeRangeSelect > div { .selectContainer > select {
width: 30%;
}
.selectContainer > div {
padding: 0px 5px; padding: 0px 5px;
} }