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

Prettying stuff

Browse source
This commit is contained in:
mrfry 2021-03-16 17:51:50 +01:00
parent 4281b5c5d2
commit 1a27d0b881
3 changed files with 155 additions and 154 deletions
Download patch file Download diff file Expand all files Collapse all files

10
src/defaultStyles.css
View file

@ -291,11 +291,11 @@ input {
} }
.pageHeader { .pageHeader {
background-color: var(--text-color); background-color: var(--text-color);
height: 45px; height: 45px;
max-width: 98%; max-width: 98%;
color: black !important; color: black !important;
margin: 5px 0px 0px 0px; margin: 5px 0px 0px 0px;
} }
.pageHeader h1 { .pageHeader h1 {

169
src/pages/ranklist.js
View file

@ -127,93 +127,94 @@ 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={'endofpage'}>
<div className={styles.wrapper}> <div className={styles.wrapper}>
<div className={styles.sinceTable}> <div className={styles.sinceTable}>
<center> <center>
<div id="rankHeader" className={'pageHeader'}> <div id="rankHeader" className={'pageHeader'}>
<h1>Ranklista</h1> <h1>Ranklista</h1>
</div> </div>
</center> </center>
<div <div
className={styles.infoText} className={styles.infoText}
>{`A felhasználó ID-d: #${selfUserId}`}</div> >{`A felhasználó ID-d: #${selfUserId}`}</div>
<div className={styles.text}> <div className={styles.text}>
<p>Az adatok kb 2020. április eleje óta vannak gyűjtve, és azonnal <p>
frissülnek.</p> Az adatok kb 2020. április eleje óta vannak gyűjtve, és azonnal
</div> frissülnek.
<Sleep /> </p>
<center> </div>
<label>Megjelenítés: <Sleep />
<select className={styles.sinceHeaderRow} onChange={(e) => { <center>
console.log(e.target.value) <label>
updateSince(e.target.value) Megjelenítés:
}} <select
> className={styles.sinceHeaderRow}
{Object.keys(sinceOptions).map((key) => { onChange={(e) => {
const val = sinceOptions[key] console.log(e.target.value)
return ( updateSince(e.target.value)
<option
key={key}
value={key}
>
{val.name}
</option>
)
})}
</select>
</label>
</center>
<div className={styles.headerRow}>
<div>{'Rank'}</div>
<div>{'Felhasználó ID'}</div>
{Object.keys(selectOptions).map((listKey) => {
const val = selectOptions[listKey]
return (
<div
className={`${styles.clickable} ${listKey === key &&
styles.selected}`}
key={listKey}
onClick={() => {
setKey(listKey)
}} }}
> >
{val.name} {Object.keys(sinceOptions).map((key) => {
</div> const val = sinceOptions[key]
) return (
})} <option key={key} value={key}>
</div> {val.name}
<div className={`${styles.row} ${styles.sumrow}`}> </option>
<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> </select>
) </label>
}) </center>
) : ( <div className={styles.headerRow}>
<LoadingIndicator /> <div>{'Rank'}</div>
)} <div>{'Felhasználó ID'}</div>
</div> {Object.keys(selectOptions).map((listKey) => {
const val = selectOptions[listKey]
return (
<div
className={`${styles.clickable} ${listKey === key &&
styles.selected}`}
key={listKey}
onClick={() => {
setKey(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> </div>

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

@ -1,108 +1,108 @@
.wrapper { .wrapper {
position: relative; position: relative;
margin-top: -9px; margin-top: -9px;
} }
.table { .table {
margin-top: 278px; margin-top: 278px;
background-color: #1f2021; background-color: #1f2021;
} }
.sinceTable { .sinceTable {
position: fixed; position: fixed;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding-top: 10px; padding-top: 10px;
padding-left: 5px; padding-left: 5px;
background-color: var(--background-color); background-color: var(--background-color);
width: 87%; width: 87%;
top: 0; top: 0;
} }
.sinceHeaderRow { .sinceHeaderRow {
display: flex; display: flex;
width: 10%; width: 10%;
border-radius: 5px; border-radius: 5px;
border: 1.5px solid white; border: 1.5px solid white;
background-color: #999999; background-color: #999999;
} }
.sinceHeaderRow:hover { .sinceHeaderRow:hover {
border: 1.5px solid var(--text-color); border: 1.5px solid var(--text-color);
} }
.row, .row,
.headerRow { .headerRow {
display: flex; display: flex;
padding: 1px; padding: 1px;
} }
.row:hover { .row:hover {
background-color: #191919; background-color: #191919;
cursor: default; cursor: default;
text-shadow: 1px 1px 6px gray; text-shadow: 1px 1px 6px gray;
color: var(--text-color); color: var(--text-color);
} }
.row div, .row div,
.headerRow div, .headerRow div,
.sinceHeaderRow 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 { .sinceHeaderRow div {
padding: 15px 5px; padding: 15px 5px;
} }
.row :nth-child(1), .row :nth-child(1),
.headerRow :nth-child(1) { .headerRow :nth-child(1) {
flex: 0 30px; flex: 0 30px;
} }
.row :nth-child(2), .row :nth-child(2),
.headerRow :nth-child(2) { .headerRow :nth-child(2) {
flex: 0 100px; flex: 0 100px;
text-align: left; text-align: left;
} }
.clickable:hover { .clickable:hover {
background-color: var(--hoover-color); background-color: var(--hoover-color);
} }
.clickable { .clickable {
cursor: pointer; cursor: pointer;
} }
.selfRow { .selfRow {
background-color: #9999ff; background-color: #9999ff;
color: black; color: black;
} }
.selfRow:hover { .selfRow:hover {
background-color: #9999ee; background-color: #9999ee;
} }
.text { .text {
text-align: center; text-align: center;
font-size: 12px; font-size: 12px;
font-style: italic; font-style: italic;
color: var(--text-color); color: var(--text-color);
padding-bottom: 10px; padding-bottom: 10px;
} }
.infoText { .infoText {
text-align: center; text-align: center;
font-size: 20px; font-size: 20px;
padding-top: 20px; padding-top: 20px;
} }
.selected { .selected {
background-color: #9999ff; background-color: #9999ff;
} }
.sumrow { .sumrow {
color: white; color: white;
} }