From 230d11ee816fc600441aa6606c4d378324ad2255 Mon Sep 17 00:00:00 2001
From: ndaniel1102 <ndani2276@gmail.com>
Date: Tue, 16 Mar 2021 16:11:45 +0100
Subject: [PATCH] Rework of page "ranklist" (part1), color changed on
"loadingindicator"
---
src/components/LoadingIndicator.module.css | 2 +-
src/defaultStyles.css | 4 +-
src/pages/ranklist.js | 60 ++++++----
src/pages/ranklist.module.css | 123 +++++++++++++--------
4 files changed, 114 insertions(+), 75 deletions(-)
diff --git a/src/components/LoadingIndicator.module.css b/src/components/LoadingIndicator.module.css
index 4638be8..59bba69 100644
--- a/src/components/LoadingIndicator.module.css
+++ b/src/components/LoadingIndicator.module.css
@@ -1,6 +1,6 @@
.load {
border: 4px solid #f3f3f3;
- border-top: 4px solid #99f;
+ border-top: 4px solid var(--text-color);
border-radius: 50%;
width: 20px;
height: 20px;
diff --git a/src/defaultStyles.css b/src/defaultStyles.css
index 7b4e480..3a42ee0 100644
--- a/src/defaultStyles.css
+++ b/src/defaultStyles.css
@@ -293,8 +293,8 @@ input {
.pageHeader {
background-color: var(--text-color);
height: 45px;
- max-width: 100%;
- color: black;
+ max-width: 98%;
+ color: black !important;
margin: 5px 0px 0px 0px;
}
diff --git a/src/pages/ranklist.js b/src/pages/ranklist.js
index 6068c63..f2d8898 100644
--- a/src/pages/ranklist.js
+++ b/src/pages/ranklist.js
@@ -127,35 +127,43 @@ export default function RankList() {
<Head>
<title>Ranklista - Qmining | Frylabs.net</title>
</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
className={styles.infoText}
>{`A felhasználó ID-d: #${selfUserId}`}</div>
<div className={styles.text}>
- Az adatok kb 2020. április eleje óta vannak gyűjtve, és azonnal
- frissülnek.
+ <p>Az adatok kb 2020. április eleje óta vannak gyűjtve, és azonnal
+ frissülnek.</p>
</div>
<Sleep />
- <div className={styles.sinceTable}>
- <div className={styles.sinceHeaderRow}>
+ <center>
+ <label>Megjelenítés:
+ <select className={styles.sinceHeaderRow} onChange={(e) => {
+ console.log(e.target.value)
+ updateSince(e.target.value)
+ }}
+ >
{Object.keys(sinceOptions).map((key) => {
const val = sinceOptions[key]
return (
- <div
- key={key}
- className={`${styles.clickable} ${key === since &&
- styles.selected}`}
- onClick={() => {
- updateSince(key)
- }}
- >
+ <option
+ key={key}
+ value={key}
+ >
{val.name}
- </div>
+ </option>
)
})}
- </div>
- </div>
- <div className={styles.table}>
+ </select>
+ </label>
+ </center>
<div className={styles.headerRow}>
<div>{'Rank'}</div>
<div>{'Felhasználó ID'}</div>
@@ -175,13 +183,16 @@ export default function RankList() {
)
})}
</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 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 (
@@ -203,6 +214,7 @@ export default function RankList() {
<LoadingIndicator />
)}
</div>
+ </div>
</div>
</div>
)
diff --git a/src/pages/ranklist.module.css b/src/pages/ranklist.module.css
index b440043..657a9c9 100644
--- a/src/pages/ranklist.module.css
+++ b/src/pages/ranklist.module.css
@@ -1,81 +1,108 @@
-.table,
-.sinceTable {
- display: flex;
- flex-direction: column;
- padding: 0px 10px;
+.wrapper {
+ position: relative;
+ margin-top: -9px;
}
-.table :nth-child(1),
-.sinceTable :nth-child(1) {
- color: white;
+.table {
+ margin-top: 278px;
+ 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,
-.headerRow,
-.sinceHeaderRow {
- display: flex;
- padding: 1px;
+.headerRow {
+ display: flex;
+ padding: 1px;
}
-.row:hover {
- background-color: #333333;
-}
+ .row:hover {
+ background-color: #191919;
+ cursor: default;
+ text-shadow: 1px 1px 6px gray;
+ color: var(--text-color);
+ }
-.row div,
-.headerRow div,
-.sinceHeaderRow div {
- flex: 1;
- padding: 0px 5px;
- text-align: center;
-}
+ .row div,
+ .headerRow div,
+ .sinceHeaderRow div {
+ flex: 1;
+ padding: 0px 5px;
+ text-align: center;
+ }
-.headerRow div,
-.sinceHeaderRow div {
- padding: 15px 5px;
-}
+ .headerRow div,
+ .sinceHeaderRow div {
+ padding: 15px 5px;
+ }
-.row :nth-child(1),
-.headerRow :nth-child(1) {
- flex: 0 30px;
-}
+ .row :nth-child(1),
+ .headerRow :nth-child(1) {
+ flex: 0 30px;
+ }
-.row :nth-child(2),
-.headerRow :nth-child(2) {
- flex: 0 100px;
- text-align: left;
-}
+ .row :nth-child(2),
+ .headerRow :nth-child(2) {
+ flex: 0 100px;
+ text-align: left;
+ }
.clickable:hover {
- background-color: var(--hoover-color);
+ background-color: var(--hoover-color);
}
.clickable {
- cursor: pointer;
+ cursor: pointer;
}
.selfRow {
- background-color: #9999ff;
- color: black;
+ background-color: #9999ff;
+ color: black;
}
-.selfRow:hover {
- background-color: #9999ee;
-}
+ .selfRow:hover {
+ background-color: #9999ee;
+ }
.text {
- text-align: center;
- font-size: 12px;
+ text-align: center;
+ font-size: 12px;
+ font-style: italic;
+ color: var(--text-color);
+ padding-bottom: 10px;
}
.infoText {
- text-align: center;
- font-size: 20px;
+ text-align: center;
+ font-size: 20px;
+ padding-top: 20px;
}
.selected {
- background-color: #9999ff;
+ background-color: #9999ff;
}
.sumrow {
- color: white;
+ color: white;
}