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

Merge branch 'new_style' of gitlab.com:MrFry/qmining-page into new_style

Browse source
This commit is contained in:
mrfry 2021-03-16 16:43:28 +01:00
commit f4301d3f9e
4 changed files with 117 additions and 78 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/components/LoadingIndicator.module.css
View file

@ -1,6 +1,6 @@
.load { .load {
border: 4px solid #f3f3f3; border: 4px solid #f3f3f3;
border-top: 4px solid #99f; border-top: 4px solid var(--text-color);
border-radius: 50%; border-radius: 50%;
width: 20px; width: 20px;
height: 20px; height: 20px;

4
src/defaultStyles.css
View file

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

42
src/pages/ranklist.js
View file

@ -127,35 +127,43 @@ export default function RankList() {
<Head> <Head>
<title>Ranklista - Qmining | Frylabs.net</title> <title>Ranklista - Qmining | Frylabs.net</title>
</Head> </Head>
<div> <div className={'endofpage'}>
<div className={styles.wrapper}>
<div className={styles.sinceTable}>
<center>
<div id="rankHeader" className={'pageHeader'}>
<h1>Ranklista</h1>
</div>
</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}>
Az adatok kb 2020. április eleje óta vannak gyűjtve, és azonnal <p>Az adatok kb 2020. április eleje óta vannak gyűjtve, és azonnal
frissülnek. frissülnek.</p>
</div> </div>
<Sleep /> <Sleep />
<div className={styles.sinceTable}> <center>
<div className={styles.sinceHeaderRow}> <label>Megjelenítés:
<select className={styles.sinceHeaderRow} onChange={(e) => {
console.log(e.target.value)
updateSince(e.target.value)
}}
>
{Object.keys(sinceOptions).map((key) => { {Object.keys(sinceOptions).map((key) => {
const val = sinceOptions[key] const val = sinceOptions[key]
return ( return (
<div <option
key={key} key={key}
className={`${styles.clickable} ${key === since && value={key}
styles.selected}`}
onClick={() => {
updateSince(key)
}}
> >
{val.name} {val.name}
</div> </option>
) )
})} })}
</div> </select>
</div> </label>
<div className={styles.table}> </center>
<div className={styles.headerRow}> <div className={styles.headerRow}>
<div>{'Rank'}</div> <div>{'Rank'}</div>
<div>{'Felhasználó ID'}</div> <div>{'Felhasználó ID'}</div>
@ -182,6 +190,9 @@ export default function RankList() {
<div>{sum.allQuestions}</div> <div>{sum.allQuestions}</div>
<div>{sum.count}</div> <div>{sum.count}</div>
</div> </div>
</div>
<div className={styles.table}>
{list ? ( {list ? (
list.map((listItem, i) => { list.map((listItem, i) => {
return ( return (
@ -205,5 +216,6 @@ export default function RankList() {
</div> </div>
</div> </div>
</div> </div>
</div>
) )
} }

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

@ -1,24 +1,47 @@
.table, .wrapper {
.sinceTable { position: relative;
display: flex; margin-top: -9px;
flex-direction: column;
padding: 0px 10px;
} }
.table :nth-child(1), .table {
.sinceTable :nth-child(1) { margin-top: 278px;
color: white; 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;
}
.sinceHeaderRow:hover {
border: 1.5px solid var(--text-color);
} }
.row, .row,
.headerRow, .headerRow {
.sinceHeaderRow {
display: flex; display: flex;
padding: 1px; padding: 1px;
} }
.row:hover { .row:hover {
background-color: #333333; background-color: #191919;
cursor: default;
text-shadow: 1px 1px 6px gray;
color: var(--text-color);
} }
.row div, .row div,
@ -65,11 +88,15 @@
.text { .text {
text-align: center; text-align: center;
font-size: 12px; font-size: 12px;
font-style: italic;
color: var(--text-color);
padding-bottom: 10px;
} }
.infoText { .infoText {
text-align: center; text-align: center;
font-size: 20px; font-size: 20px;
padding-top: 20px;
} }
.selected { .selected {