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

23
src/pages/ranklist.js
View file

@ -139,13 +139,18 @@ export default function RankList() {
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
frissülnek.
</p>
</div> </div>
<Sleep /> <Sleep />
<center> <center>
<label>Megjelenítés: <label>
<select className={styles.sinceHeaderRow} onChange={(e) => { Megjelenítés:
<select
className={styles.sinceHeaderRow}
onChange={(e) => {
console.log(e.target.value) console.log(e.target.value)
updateSince(e.target.value) updateSince(e.target.value)
}} }}
@ -153,10 +158,7 @@ export default function RankList() {
{Object.keys(sinceOptions).map((key) => { {Object.keys(sinceOptions).map((key) => {
const val = sinceOptions[key] const val = sinceOptions[key]
return ( return (
<option <option key={key} value={key}>
key={key}
value={key}
>
{val.name} {val.name}
</option> </option>
) )
@ -192,13 +194,12 @@ export default function RankList() {
</div> </div>
</div> </div>
<div className={styles.table}> <div className={styles.table}>
{list ? ( {list ? (
list.map((listItem, i) => { list.map((listItem, i) => {
return ( return (
<div <div
className={`${styles.row} ${listItem.userId === selfUserId && className={`${styles.row} ${listItem.userId ===
styles.selfRow}`} selfUserId && styles.selfRow}`}
key={i} key={i}
> >
<div>{i + 1}</div> <div>{i + 1}</div>

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

@ -27,9 +27,9 @@
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 {
@ -37,36 +37,36 @@
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);
@ -81,9 +81,9 @@
color: black; color: black;
} }
.selfRow:hover { .selfRow:hover {
background-color: #9999ee; background-color: #9999ee;
} }
.text { .text {
text-align: center; text-align: center;