mirror of
https://gitlab.com/MrFry/qmining-page
synced 2025-04-01 20:23:44 +02:00
Multiple style fixes, added top bar to layout
This commit is contained in:
mrfry
parent
53d955808a
commit
3a67f2a1aa
11 changed files with 314 additions and 351 deletions
|
|
@ -55,65 +55,62 @@ function Donate() {
|
|||
)
|
||||
}
|
||||
|
||||
function MessageButton({
|
||||
userSpecificMotd,
|
||||
setShowMotdModal,
|
||||
refetchGlobalData,
|
||||
}) {
|
||||
function UserStatus({ userId, unreads }) {
|
||||
return (
|
||||
<div className="msgs">
|
||||
<div className={styles.userStatus}>
|
||||
<div className={'uid'} title="User ID">
|
||||
UID: {userId || '...'}
|
||||
</div>
|
||||
<Link href="/chat">
|
||||
<a className={styles.unreadNotification}>
|
||||
<span>💬</span>
|
||||
{unreads && unreads.length > 0 ? <div>{unreads.length}</div> : null}
|
||||
</a>
|
||||
</Link>
|
||||
|
||||
<div
|
||||
className={styles.logout}
|
||||
title="Kijelentkezés"
|
||||
onClick={() => {
|
||||
if (!userSpecificMotd) {
|
||||
return
|
||||
}
|
||||
setShowMotdModal(true)
|
||||
if (userSpecificMotd.seen) {
|
||||
return
|
||||
}
|
||||
fetch(constants.apiUrl + 'infos', {
|
||||
method: 'POST',
|
||||
fetch(constants.apiUrl + 'logout', {
|
||||
method: 'GET',
|
||||
credentials: 'include',
|
||||
headers: {
|
||||
Accept: 'application/json',
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
userSpecificMotdSeen: true,
|
||||
}),
|
||||
})
|
||||
.then((resp) => {
|
||||
return resp.json()
|
||||
})
|
||||
.then(() => {
|
||||
refetchGlobalData()
|
||||
})
|
||||
location.reload()
|
||||
}}
|
||||
style={{ cursor: userSpecificMotd ? 'pointer' : 'default' }}
|
||||
title={
|
||||
userSpecificMotd && !userSpecificMotd.seen ? 'Új üzeneted van!' : ''
|
||||
}
|
||||
>
|
||||
{userSpecificMotd && !userSpecificMotd.seen ? '📬' : '📭'}
|
||||
Logout
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default function Layout({
|
||||
children,
|
||||
router,
|
||||
globalData,
|
||||
refetchGlobalData,
|
||||
}) {
|
||||
function MenuIcon({ setSidebarOpen, sidebarOpen }) {
|
||||
return (
|
||||
<div
|
||||
onClick={() => {
|
||||
setSidebarOpen(!sidebarOpen)
|
||||
}}
|
||||
className={styles.menuicon}
|
||||
>
|
||||
<div />
|
||||
<div />
|
||||
<div />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default function Layout({ children, router, globalData }) {
|
||||
const [sidebarOpen, setSidebarOpen] = useState(true)
|
||||
const [windowSize, setWindowSize] = useState([100, 200])
|
||||
const [showMotdModal, setShowMotdModal] = useState(false)
|
||||
const [donateShowing, setDonateShowing] = useState(false)
|
||||
const [showNewMsgModal, setShowNewMsgModal] = useState(true)
|
||||
|
||||
const userId = globalData.userId
|
||||
const userSpecificMotd = globalData.userSpecificMotd
|
||||
const unreads = globalData.unreads
|
||||
|
||||
useEffect(() => {
|
||||
setDonateShowing(!!router.query.donate)
|
||||
|
|
@ -143,7 +140,7 @@ export default function Layout({
|
|||
const snowflakeCount = (windowSize[0] + windowSize[1]) / 26
|
||||
|
||||
return (
|
||||
<div>
|
||||
<>
|
||||
{renderSnow() && (
|
||||
<div
|
||||
style={{
|
||||
|
|
@ -157,34 +154,31 @@ export default function Layout({
|
|||
<Snowfall snowflakeCount={snowflakeCount} />
|
||||
</div>
|
||||
)}
|
||||
<div className="sidebar">
|
||||
<div className="headercontainer">
|
||||
<span
|
||||
onClick={() => {
|
||||
setSidebarOpen(!sidebarOpen)
|
||||
}}
|
||||
className="menuicon"
|
||||
>
|
||||
<div />
|
||||
<div />
|
||||
<div />
|
||||
</span>
|
||||
<div className="sidebarheader">
|
||||
<div className={styles.topBar}>
|
||||
<MenuIcon setSidebarOpen={setSidebarOpen} sidebarOpen={sidebarOpen} />
|
||||
<Link href="/">
|
||||
<a>
|
||||
<img
|
||||
style={{
|
||||
maxWidth: '100%',
|
||||
border: 'none',
|
||||
margin: '1px',
|
||||
}}
|
||||
src={`${constants.siteUrl}img/frylabs-logo_small_transparent.png`}
|
||||
alt="FryLabs"
|
||||
/>
|
||||
</a>
|
||||
</Link>
|
||||
<div className={styles.topBarLinks}>
|
||||
<Link href="/contribute">
|
||||
<a>Teendők</a>
|
||||
</Link>
|
||||
<Link href="/pwRequest">
|
||||
<a>Jelszó kérés</a>
|
||||
</Link>
|
||||
<Link href="/ranklist">
|
||||
<a>Ranklista</a>
|
||||
</Link>
|
||||
</div>
|
||||
<div className={'seperator'} />
|
||||
<UserStatus unreads={unreads} userId={userId} />
|
||||
</div>
|
||||
<div className={styles.sidebar}>
|
||||
{sidebarOpen ? (
|
||||
<>
|
||||
<div id="sideBarLinks" className={styles.sidebarLinks}>
|
||||
|
|
@ -215,33 +209,6 @@ export default function Layout({
|
|||
Donate
|
||||
</a>
|
||||
</div>
|
||||
<div className={'userStatus'}>
|
||||
<MessageButton
|
||||
userSpecificMotd={userSpecificMotd}
|
||||
setShowMotdModal={setShowMotdModal}
|
||||
refetchGlobalData={refetchGlobalData}
|
||||
/>
|
||||
<div className={'uid'} title="User ID">
|
||||
UID: {userId || '...'}
|
||||
</div>
|
||||
<div
|
||||
className={'logout'}
|
||||
title="Kijelentkezés"
|
||||
onClick={() => {
|
||||
fetch(constants.apiUrl + 'logout', {
|
||||
method: 'GET',
|
||||
credentials: 'include',
|
||||
headers: {
|
||||
Accept: 'application/json',
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
})
|
||||
location.reload()
|
||||
}}
|
||||
>
|
||||
Logout
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
) : null}
|
||||
</div>
|
||||
|
|
@ -254,27 +221,8 @@ export default function Layout({
|
|||
<Donate />
|
||||
</Modal>
|
||||
) : null}
|
||||
{showMotdModal ? (
|
||||
<Modal
|
||||
closeClick={() => {
|
||||
setShowMotdModal(false)
|
||||
}}
|
||||
>
|
||||
<div style={{ textAlign: 'center' }}>Üzenet admintól:</div>
|
||||
<div dangerouslySetInnerHTML={{ __html: userSpecificMotd.msg }} />
|
||||
</Modal>
|
||||
) : null}
|
||||
{userSpecificMotd && !userSpecificMotd.seen && showNewMsgModal ? (
|
||||
<Modal
|
||||
closeClick={() => {
|
||||
setShowNewMsgModal(false)
|
||||
}}
|
||||
>
|
||||
Új üzeneted van, kattints a 📬-ra bal alul a megtekintéséhez!
|
||||
</Modal>
|
||||
) : null}
|
||||
<div className="content">{children}</div>
|
||||
<div className={styles.content}>{children}</div>
|
||||
<BB />
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,24 +1,83 @@
|
|||
.modalHead {
|
||||
text-align: center;
|
||||
font-size: 22px;
|
||||
font-weight: 700;
|
||||
padding-top: 0px;
|
||||
margin-top: 0px;
|
||||
padding-bottom: 20px;
|
||||
letter-spacing: 3px;
|
||||
}
|
||||
|
||||
.donateLogoContainer {
|
||||
.topBar {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: fixed;
|
||||
background-color: var(--background-color);
|
||||
z-index: 2;
|
||||
width: 100%;
|
||||
max-width: 1200px;
|
||||
border-bottom: 1px solid var(--primary-color);
|
||||
|
||||
height: 45px;
|
||||
}
|
||||
|
||||
.donateLogoContainer img {
|
||||
max-width: 100px;
|
||||
margin: 5px;
|
||||
.topBar img {
|
||||
display: block;
|
||||
max-height: 45px;
|
||||
width: auto;
|
||||
height: auto;
|
||||
border: none;
|
||||
margin: 0px 15px;
|
||||
}
|
||||
|
||||
.topBarLinks {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.topBarLinks > * {
|
||||
text-align: center;
|
||||
padding: 0px 10px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.topBarLinks > *:hover {
|
||||
background-color: var(--hoover-color);
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
top: 45px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
width: 150px;
|
||||
background-color: #222426;
|
||||
position: fixed;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 700px) {
|
||||
.sidebar {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.sidebar a {
|
||||
text-align: center;
|
||||
float: none;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
height: 100%;
|
||||
margin-left: 150px;
|
||||
margin-top: 45px;
|
||||
padding: 1px 7px;
|
||||
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 700px) {
|
||||
div.content {
|
||||
padding: 1px 0px;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebarLinks > a {
|
||||
border: 0.5px solid transparent;
|
||||
display: block;
|
||||
|
|
@ -48,3 +107,116 @@
|
|||
text-shadow: 2px 2px 8px black;
|
||||
transition: width 0.5s, height 0.5s, ease-out 0.5s;
|
||||
}
|
||||
|
||||
.userStatus {
|
||||
display: flex;
|
||||
|
||||
height: 40px;
|
||||
margin: 3px;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.modalHead {
|
||||
text-align: center;
|
||||
font-size: 22px;
|
||||
font-weight: 700;
|
||||
padding-top: 0px;
|
||||
margin-top: 0px;
|
||||
padding-bottom: 20px;
|
||||
letter-spacing: 3px;
|
||||
}
|
||||
|
||||
.donateLogoContainer {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.donateLogoContainer img {
|
||||
max-width: 100px;
|
||||
margin: 5px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.menuicon div {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 700px) {
|
||||
.menuicon div {
|
||||
display: block;
|
||||
margin: 6px 0;
|
||||
width: 30px;
|
||||
height: 5px;
|
||||
background-color: var(--bright-color);
|
||||
}
|
||||
|
||||
.menuicon:hover {
|
||||
background-color: var(--hoover-color);
|
||||
}
|
||||
|
||||
.menuicon {
|
||||
cursor: pointer;
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
|
||||
.logout {
|
||||
margin: 0px 5px;
|
||||
padding: 3px;
|
||||
cursor: pointer;
|
||||
font-size: 15.5px;
|
||||
}
|
||||
|
||||
.logout:hover {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.userStatus > a {
|
||||
text-decoration: none;
|
||||
font-size: 27px;
|
||||
}
|
||||
|
||||
.msgs {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.msgs :first-child {
|
||||
font-size: 27px;
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
.msgs > div {
|
||||
padding: 2px 6px;
|
||||
font-size: 13.5px;
|
||||
}
|
||||
|
||||
.unreadNotification {
|
||||
height: 45px;
|
||||
}
|
||||
|
||||
.unreadNotification > span {
|
||||
top: 8px;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.unreadNotification > div {
|
||||
display: inline-block;
|
||||
right: 10px;
|
||||
top: 10px;
|
||||
position: relative;
|
||||
|
||||
background-color: red;
|
||||
font-size: 14px;
|
||||
border-radius: 5px;
|
||||
padding: 0px 3px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 700px) {
|
||||
.unreadNotification > div {
|
||||
right: -10px;
|
||||
top: -23px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
.searchContainer {
|
||||
width: 100%;
|
||||
width: 97%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-left: 10px;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"siteUrl": "https://qmining.frylabs.net/",
|
||||
"apiUrl": "https://api.frylabs.net/",
|
||||
"apiUrl": "http://localhost:8080/",
|
||||
"mobileWindowWidth": 700,
|
||||
"maxQuestionsToRender": 250
|
||||
}
|
||||
|
|
|
|||
|
|
@ -15,18 +15,6 @@
|
|||
"href": "/userfiles",
|
||||
"text": "Tanulás segédanyagok"
|
||||
},
|
||||
"pwRequest": {
|
||||
"href": "/pwRequest",
|
||||
"text": "Jelszó generálás"
|
||||
},
|
||||
"contribute": {
|
||||
"href": "/contribute",
|
||||
"text": "Teendők"
|
||||
},
|
||||
"ranklist": {
|
||||
"href": "/ranklist",
|
||||
"text": "Ranklista"
|
||||
},
|
||||
"faq": {
|
||||
"href": "/faq",
|
||||
"text": "GYIK"
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
:root {
|
||||
--text-color: #f2cb05;
|
||||
--primary-color: #f2cb05;
|
||||
--primary-color-fade: #3f3503;
|
||||
--bright-color: #f2f2f2;
|
||||
--background-color: #222426;
|
||||
--hoover-color: #393939;
|
||||
|
|
@ -9,13 +10,27 @@
|
|||
|
||||
@import url('https://fonts.googleapis.com/css2?family=Kameron&family=Overpass+Mono:wght@300;400&display=swap');
|
||||
|
||||
html {
|
||||
height: calc(100vh - 50px);
|
||||
}
|
||||
|
||||
body {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
margin: 0px;
|
||||
height: 100%;
|
||||
font-family: 'Kameron', serif;
|
||||
font-family: 'Overpass Mono', monospace;
|
||||
color: #999999;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
#__next {
|
||||
height: 100%;
|
||||
width: 1200px;
|
||||
}
|
||||
|
||||
img {
|
||||
margin: 5px;
|
||||
max-width: 90%;
|
||||
|
|
@ -64,132 +79,10 @@ input:focus {
|
|||
}
|
||||
|
||||
.link {
|
||||
margin: 20px;
|
||||
margin: 10px;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.sidebarLink {
|
||||
color: var(--text-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 200px;
|
||||
background-color: #222426;
|
||||
position: fixed;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.content {
|
||||
margin-left: 200px;
|
||||
padding: 1px 15px;
|
||||
}
|
||||
|
||||
.menuicon div {
|
||||
height: 5px;
|
||||
background-color: var(--bright-color);
|
||||
margin: 0px 0;
|
||||
display: none;
|
||||
width: 30px;
|
||||
}
|
||||
|
||||
.sidebarheader {
|
||||
font-size: 40px;
|
||||
color: var(--bright-color);
|
||||
display: flex;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.headercontainer {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
flex-wrap: nowrap;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
padding-top: 15px;
|
||||
padding-bottom: 17px;
|
||||
padding-right: 2px;
|
||||
padding-left: 2px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 700px) {
|
||||
.sidebar {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.sidebar a {
|
||||
float: left;
|
||||
}
|
||||
|
||||
div.content {
|
||||
padding: 0px;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 700px) {
|
||||
.menuicon div {
|
||||
display: block;
|
||||
margin: 6px 0;
|
||||
}
|
||||
|
||||
.sidebar a {
|
||||
text-align: center;
|
||||
float: none;
|
||||
}
|
||||
|
||||
.menuicon {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.sidebaritemsconainer {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.sidebarheader {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
padding-top: 20px;
|
||||
transform: translateX(-50%) translateY(-50%);
|
||||
}
|
||||
|
||||
.codecontainer {
|
||||
margin-left: 0px;
|
||||
margin-right: 0px;
|
||||
}
|
||||
|
||||
.sitedescription {
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.rtfmImage {
|
||||
text-align: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
border: 2px solid white;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.manualUsage {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
.endofpage {
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
.questionContainer {
|
||||
margin: 6px;
|
||||
padding: 10px;
|
||||
|
|
@ -225,10 +118,6 @@ input:focus {
|
|||
font-size: 30px;
|
||||
}
|
||||
|
||||
.link {
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.subjectSelector {
|
||||
overflow: auto;
|
||||
height: auto;
|
||||
|
|
@ -260,12 +149,6 @@ input:focus {
|
|||
color: white;
|
||||
}
|
||||
|
||||
.rtfmImage {
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
margin: 0px 10px;
|
||||
}
|
||||
|
||||
.warning {
|
||||
color: red;
|
||||
font-weight: 100;
|
||||
|
|
@ -299,55 +182,15 @@ input:focus {
|
|||
margin: 0px;
|
||||
}
|
||||
|
||||
.manualUsage {
|
||||
margin-top: 5px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.manualBody {
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
.userStatus {
|
||||
display: flex;
|
||||
margin-top: auto;
|
||||
margin-bottom: 20px;
|
||||
background-color: #373737;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.msgs {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.uid {
|
||||
font-size: 14px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.logout {
|
||||
padding: 6px;
|
||||
margin-right: 7px;
|
||||
cursor: pointer;
|
||||
font-size: 15.5px;
|
||||
}
|
||||
|
||||
.logout:hover {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.msgs :first-child {
|
||||
font-size: 27px;
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
.msgs > div {
|
||||
padding: 2px 6px;
|
||||
font-size: 13.5px;
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -372,7 +215,7 @@ input:focus {
|
|||
display: flex;
|
||||
align-items: stretch;
|
||||
justify-content: center;
|
||||
margin: 10px 0px;
|
||||
margin: 5px 0px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
|
|
@ -387,13 +230,13 @@ input:focus {
|
|||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
width: 200px;
|
||||
height: 30px;
|
||||
padding: 5px 15px;
|
||||
margin: 2px 5px;
|
||||
|
||||
font-size: 15px;
|
||||
padding: 5px 15px;
|
||||
margin: 8px 5px 2px 5px;
|
||||
|
||||
color: var(--text-color);
|
||||
border: none;
|
||||
background-color: var(--hoover-color);
|
||||
|
|
@ -494,3 +337,7 @@ select:hover {
|
|||
justify-content: center;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.seperator {
|
||||
flex: 1 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,3 @@
|
|||
// import App from 'next/app'
|
||||
|
||||
import React, { useState, useEffect } from 'react'
|
||||
|
||||
import Layout from '../components/layout'
|
||||
|
|
@ -10,7 +8,7 @@ import constants from '../constants.json'
|
|||
function MyApp({ Component, pageProps, router }) {
|
||||
const [userId, setUserId] = useState()
|
||||
const [motd, setMotd] = useState()
|
||||
const [userSpecificMotd, setUserSpecificMotd] = useState()
|
||||
const [unreads, setUnreads] = useState()
|
||||
|
||||
const getGlobalProps = () => {
|
||||
fetch(`${constants.apiUrl}infos?motd=true`, {
|
||||
|
|
@ -22,9 +20,21 @@ function MyApp({ Component, pageProps, router }) {
|
|||
return resp.json()
|
||||
})
|
||||
.then((data) => {
|
||||
setUserId(data.uid)
|
||||
setMotd(data.motd)
|
||||
setUserSpecificMotd(data.userSpecificMotd)
|
||||
fetch(`${constants.apiUrl}hasNewMsg?userid=${data.uid}`, {
|
||||
credentials: 'include',
|
||||
Accept: 'application/json',
|
||||
'Content-Type': 'application/json',
|
||||
})
|
||||
.then((resp) => {
|
||||
return resp.json()
|
||||
})
|
||||
.then((hasNewMsg) => {
|
||||
const res = { ...data, ...hasNewMsg }
|
||||
|
||||
setUserId(res.uid)
|
||||
setMotd(res.motd)
|
||||
setUnreads(res.unreads)
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
|
|
@ -33,9 +43,9 @@ function MyApp({ Component, pageProps, router }) {
|
|||
}, [])
|
||||
|
||||
const globalData = {
|
||||
userId,
|
||||
motd,
|
||||
userSpecificMotd,
|
||||
userId: userId,
|
||||
motd: motd,
|
||||
unreads: unreads,
|
||||
}
|
||||
|
||||
return (
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
import Document, { Html, Head, Main, NextScript } from 'next/document'
|
||||
import React from 'react'
|
||||
|
||||
class MyDocument extends Document {
|
||||
static async getInitialProps(ctx) {
|
||||
|
|
@ -9,7 +10,12 @@ class MyDocument extends Document {
|
|||
render() {
|
||||
return (
|
||||
<Html>
|
||||
<Head />
|
||||
<Head>
|
||||
<meta
|
||||
name="viewport"
|
||||
content="initial-scale=0.6, width=device-width"
|
||||
/>
|
||||
</Head>
|
||||
<body bgcolor="#222426">
|
||||
<Main />
|
||||
<NextScript />
|
||||
|
|
|
|||
|
|
@ -301,13 +301,10 @@ export default function Index({ globalData }) {
|
|||
const renderMotd = () => {
|
||||
if (motd) {
|
||||
return (
|
||||
<div className={styles.motd_body}>
|
||||
<div className={styles.motd}>
|
||||
<div className={styles.title}>MOTD</div>
|
||||
{motd ? (
|
||||
<div
|
||||
className={styles.motd}
|
||||
dangerouslySetInnerHTML={{ __html: motd }}
|
||||
/>
|
||||
<div dangerouslySetInnerHTML={{ __html: motd }} />
|
||||
) : (
|
||||
<div>...</div>
|
||||
)}
|
||||
|
|
@ -324,7 +321,6 @@ export default function Index({ globalData }) {
|
|||
<title>Qmining | Frylabs.net</title>
|
||||
</Head>
|
||||
{renderMotd()}
|
||||
{/*{userSpecificMotd && renderUserSpecificMotd()} */}
|
||||
<Sleep />
|
||||
{renderNews()}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -5,7 +5,16 @@
|
|||
.motd {
|
||||
text-align: center;
|
||||
font-size: 20px;
|
||||
margin: 5px;
|
||||
|
||||
border: 2px dashed var(--text-color);
|
||||
padding-top: 13px;
|
||||
padding-bottom: 15px;
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
margin-top: 18px;
|
||||
margin-bottom: 30px;
|
||||
margin-left: 5px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.itemContainer {
|
||||
|
|
@ -22,19 +31,6 @@
|
|||
text-align: justify;
|
||||
}
|
||||
|
||||
.motd_body {
|
||||
border: 2px dashed var(--text-color);
|
||||
padding-top: 13px;
|
||||
padding-bottom: 15px;
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
margin-top: 18px;
|
||||
margin-bottom: 30px;
|
||||
margin-left: 5px;
|
||||
margin-right: 5px;
|
||||
font-size: 8px;
|
||||
}
|
||||
|
||||
.title {
|
||||
color: var(--text-color);
|
||||
font-size: 32px;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue