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
|
|
@ -11,4 +11,4 @@
|
|||
.questionBg {
|
||||
background-color: #1b1b1c;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
<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>
|
||||
<div className={styles.topBar}>
|
||||
<MenuIcon setSidebarOpen={setSidebarOpen} sidebarOpen={sidebarOpen} />
|
||||
<Link href="/">
|
||||
<a>
|
||||
<img
|
||||
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;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue