Rework of page "ranklist" (part2), /style fixed delete, show comments buttons on index.js/

src/components/comments.js

@@ -45,8 +45,8 @@ function Comment({ comment, index, onComment, onDelete, onReact, uid }) {
   const commentStyle = admin
     ? styles.adminComment
     : own
-    ? styles.ownComment
-    : ''
+      ? styles.ownComment
+      : ''
 
   return (
     <div className={styles.comment}>
@@ -222,9 +222,7 @@ export default function Comments({
         <span className={styles.comment_bttn}>
           {commentCount === 0
             ? 'Új komment'
-            : `További ${commentCount} komment${
-                commentCount > 1 ? ' mutatása' : ''
-              }`}
+            : `Kommentek mutatása (${commentCount})`}
         </span>
       </div>
     </div>

src/components/newsEntry.js

@@ -38,6 +38,7 @@ export default function NewsEntry({
       <div className={'actions'}>
         {uid === user ? (
           <span
+            className={styles.delete_bttn}
             onClick={() => {
               onPostDelete()
             }}

src/components/newsEntry.module.css

@@ -21,6 +21,16 @@
   margin: 5px 5px;
 }
 
+.delete_bttn {
+  font-size: 15px;
+  margin-top: 12px !important;
+  margin-left: 2px !important;
+  margin-right: 5px !important;
+  padding-top: 4px !important;
+  transition: width 0.5s, height 0.5s, ease-in 0.5s;
+}
+
+
 .adminPost {
   border-left: 4px solid var(--text-color);
 }

src/pages/_app.js

@@ -22,9 +22,7 @@ function MyApp({ Component, pageProps, router }) {
         return resp.json()
       })
       .then((data) => {
-        // setUserId(data.uid)
-        // TODO:uncomment, and delete
-        setUserId(1)
+        setUserId(data.uid)
         setMotd(data.motd)
         setUserSpecificMotd(data.userSpecificMotd)
       })

src/pages/ranklist.js

@@ -112,9 +112,12 @@ export default function RankList() {
     getList()
   }, [])
 
-  useEffect(() => {
-    getList()
-  }, [since])
+  useEffect(
+    () => {
+      getList()
+    },
+    [since]
+  )
 
   const list = ranklist && sortDataBy(ranklist, key)
 
@@ -145,7 +148,7 @@ export default function RankList() {
           </div>
           <Sleep />
           <div className={styles.selectContainer}>
-            <div>Megjelenítés:</div>
+            <div>Megjelenítés: </div>
             <select
               onChange={(e) => {
                 updateSince(e.target.value)
@@ -162,7 +165,7 @@ export default function RankList() {
             </select>
           </div>
           <div className={styles.selectContainer}>
-            <div>Rendezés:</div>
+            <div>Rendezés: </div>
             <select
               value={key}
               onChange={(e) => {
@@ -179,8 +182,19 @@ export default function RankList() {
               })}
             </select>
           </div>
+          <div className={`${styles.sumRow}`}>
+            <div />
+            <div>
+              <b>{'Összesen: '}</b>
+            </div>
+            <div>{sum.newQuestions}</div>
+            <div>{sum.allQuestions}</div>
+            <div>{sum.count}</div>
+          </div>
           <div className={styles.headerRow}>
-            <div>{'Rank'}</div>
+            <div>
+              <b>{'Rank'}</b>
+            </div>
             <div>{'Felhasználó ID'}</div>
             {Object.keys(selectOptions).map((listKey) => {
               const val = selectOptions[listKey]
@@ -194,13 +208,6 @@ 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>
         <div className={styles.table}>
           {list ? (

src/pages/ranklist.module.css

@@ -2,6 +2,7 @@
   display: flex;
   flex-flow: column;
   height: calc(98vh);
+  cursor: default;
 }
 
 .container:first-child {
@@ -12,40 +13,59 @@
   flex: 1 1 auto;
   overflow-y: scroll;
   overflow-x: hidden;
-  background-color: #1f2021;
+  background-color: #1b1b1c;
+  padding-top: 5px;
+  padding-bottom: 10px;
+}
+
+.sumRow {
+  font-size: 16px;
+  font-weight: 500;
+  display: flex;
+  padding-top: 5px;
+  padding-right: 16px;
+  margin-top: 30px;
+  background-color: var(--hoover-color);
 }
 
-.row,
 .headerRow {
+  font-size: 15px;
   display: flex;
   padding: 1px;
+  padding-right: 15px;
+  background-color: var(--hoover-color);
+}
+
+.row {
+  display: flex;
+  padding: 1.5px;
 }
 
 .row:hover {
-  background-color: #191919;
+  background-color: #242323;
   cursor: default;
-  text-shadow: 1px 1px 6px gray;
+  text-shadow: 1px 1px 6px #969696;
   color: var(--text-color);
 }
 
 .row div,
-.headerRow div {
+.headerRow div, .sumRow div {
   flex: 1;
   padding: 0px 5px;
   text-align: center;
 }
 
-.headerRow > div {
+.headerRow > div, .sumRow > div {
   padding: 5px;
 }
 
 .row :nth-child(1),
-.headerRow :nth-child(1) {
-  flex: 0 30px;
+.headerRow :nth-child(1), .sumRow :nth-child(1) {
+  flex: 0 50px;
 }
 
 .row :nth-child(2),
-.headerRow :nth-child(2) {
+.headerRow :nth-child(2), .sumRow :nth-child(2) {
   flex: 0 130px;
   text-align: left;
 }
@@ -64,7 +84,8 @@
 }
 
 .selfRow:hover {
-  background-color: #9999ee;
+  background-color: #96810b;
+  color: gainsboro;
 }
 
 .text {
@@ -81,10 +102,6 @@
   padding-top: 20px;
 }
 
-.selected {
-  background-color: #222;
-}
-
 .sumrow {
   color: white;
 }
@@ -96,9 +113,20 @@
 }
 
 .selectContainer > select {
-  width: 30%;
+  width: 16.5%;
+  border-radius: 5px;
+  border: 1.5px solid white;
+  background-color: #9c9c98;
+  color: azure;
+  font-family: inherit;
+  margin: 6px 0px;
+}
+
+.selectContainer > select:hover, .selectContainer > select:active {
+  border: 2px solid var(--text-color);
 }
 
 .selectContainer > div {
   padding: 0px 5px;
+  margin-right: 8px;
 }