mirror of
https://gitlab.com/MrFry/qmining-page
synced 2025-04-01 20:23:44 +02:00
Added: layout.module.css, donate modal, contribute feedback modal, contacts
This commit is contained in:
mrfry
parent
6fd9beb464
commit
47a2227f87
9 changed files with 204 additions and 93 deletions
|
|
@ -40,7 +40,7 @@ function MyApp({ Component, pageProps, router }) {
|
|||
|
||||
return (
|
||||
<Layout
|
||||
route={router.route}
|
||||
router={router}
|
||||
globalData={globalData}
|
||||
refetchGlobalData={getGlobalProps}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -1,28 +1,32 @@
|
|||
import React from 'react'
|
||||
import React, { useState, useEffect } from 'react'
|
||||
import Head from 'next/head'
|
||||
|
||||
import FeedbackArea from '../components/feedbackArea'
|
||||
import constants from '../constants.json'
|
||||
import LoadingIndicator from '../components/LoadingIndicator'
|
||||
|
||||
import styles from './contact.module.css'
|
||||
|
||||
const contactMethods = {
|
||||
irc: {
|
||||
title: 'IRC chat',
|
||||
description: 'irc real time chat',
|
||||
onClick: () => {
|
||||
console.log('IRC')
|
||||
},
|
||||
},
|
||||
email: {
|
||||
title: 'E-mail',
|
||||
description: 'email',
|
||||
onClick: () => {
|
||||
console.log('email')
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
export default function Contact() {
|
||||
const [contacts, setContacts] = useState()
|
||||
|
||||
useEffect(() => {
|
||||
fetch(constants.apiUrl + 'contacts.json', {
|
||||
method: 'GET',
|
||||
credentials: 'include',
|
||||
headers: {
|
||||
Accept: 'application/json',
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
})
|
||||
.then((res) => {
|
||||
return res.json()
|
||||
})
|
||||
.then((res) => {
|
||||
setContacts(res)
|
||||
})
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Head>
|
||||
|
|
@ -33,18 +37,40 @@ export default function Contact() {
|
|||
</div>
|
||||
<br />
|
||||
<br />
|
||||
<div className={styles.text}>
|
||||
<div>Üzenet küldése</div>
|
||||
<div>Weboldalon keresztül üzenet küldése adminnak</div>
|
||||
</div>
|
||||
<FeedbackArea from={'contact'} />
|
||||
<div className={styles.contactsContainer}>
|
||||
<div>Itt vannak hogy hogy lehet kontaktolni</div>
|
||||
{Object.keys(contactMethods).map((key) => {
|
||||
const { onClick, title, description } = contactMethods[key]
|
||||
return (
|
||||
<div key={key} onClick={onClick}>
|
||||
<div>{title}</div>
|
||||
<div>{description}</div>
|
||||
<div className={styles.container}>
|
||||
{contacts ? (
|
||||
<>
|
||||
<div className={styles.text}>
|
||||
<div>Alternatív módok</div>
|
||||
<div>Valami duma, hogy nem adom ki az adatokat</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
<div className={styles.contactsContainer}>
|
||||
{Object.keys(contacts).map((key) => {
|
||||
const { description, value, href } = contacts[key]
|
||||
return (
|
||||
<div key={key}>
|
||||
<div>{description}</div>
|
||||
{href ? (
|
||||
<a target="blank" rel="noreferrer" href={href}>
|
||||
{' '}
|
||||
{value}{' '}
|
||||
</a>
|
||||
) : (
|
||||
<div>{value}</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<LoadingIndicator />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -1,25 +1,42 @@
|
|||
.container {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.contactsContainer {
|
||||
margin: 5px;
|
||||
max-width: 900px;
|
||||
}
|
||||
|
||||
.contactsContainer > div:first-child {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 5px;
|
||||
/* ide az a menő stílus a headernek mint a ranklistnél van */
|
||||
}
|
||||
|
||||
.contactsContainer > div {
|
||||
.contactsContainer > * {
|
||||
text-decoration: none;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.contactsContainer > div > div {
|
||||
.contactsContainer > * > * {
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.contactsContainer > div > div:nth-child(1) {
|
||||
flex: 0 150px;
|
||||
.contactsContainer > *:hover {
|
||||
background-color: var(--hoover-color);
|
||||
}
|
||||
.contactsContainer > div > div:nth-child(2) {
|
||||
|
||||
.contactsContainer > * > *:nth-child(1) {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.contactsContainer > * > *:nth-child(2) {
|
||||
flex: 0 150px;
|
||||
}
|
||||
|
||||
.text {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.text > div:nth-child(1) {
|
||||
font-size: 20px;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,15 +1,18 @@
|
|||
import React from 'react'
|
||||
import React, { useState } from 'react'
|
||||
import Head from 'next/head'
|
||||
|
||||
import Sleep from '../components/sleep'
|
||||
import Todos from '../components/todoStuff/todos'
|
||||
import FeedbackArea from '../components/feedbackArea'
|
||||
import Modal from '../components/modal'
|
||||
|
||||
import constants from '../constants.json'
|
||||
import styles from './contribute.module.css'
|
||||
import repos from '../data/repos.json'
|
||||
|
||||
export default function contribute() {
|
||||
const [showFeedback, setShowFeedback] = useState(false)
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Head>
|
||||
|
|
@ -25,16 +28,18 @@ export default function contribute() {
|
|||
</p>
|
||||
<p>
|
||||
Emellet ha hozzáértő vagy, adott feladatok megvalósításában is
|
||||
segíthetsz. (lásd: lentebb)<br /> Ha egy kártyára kattintasz, a
|
||||
megjelenő abalkban láthatod annak részleteit, illetve{' '}
|
||||
segíthetsz. (lásd: lentebb)
|
||||
<br /> Ha egy kártyára kattintasz, a megjelenő abalkban láthatod annak
|
||||
részleteit, illetve{' '}
|
||||
<b>
|
||||
<i>szavazhatsz</i>
|
||||
</b>{' '}
|
||||
is a feladatra, annak érdekében, hogy minél hamarabb megvalósulhasson.
|
||||
Minél több szavazat érkezik egy kártyára, annál magasabb lesz a
|
||||
prioritása. (értsd: a legtöbb szavazatot kapó kártya teendője lesz
|
||||
legelőször megvalósítva)<br /> A kurzort az oszlopcímekre mozgatva,
|
||||
további információkat olvashatsz a kategóriák tulajdonságairól.
|
||||
legelőször megvalósítva)
|
||||
<br /> A kurzort az oszlopcímekre mozgatva, további információkat
|
||||
olvashatsz a kategóriák tulajdonságairól.
|
||||
</p>
|
||||
{
|
||||
'Ha olyan teendőt látsz, amiben tudnál és szeretnél is segíteni, akkor írj '
|
||||
|
|
@ -48,7 +53,17 @@ export default function contribute() {
|
|||
</a>
|
||||
-n és megbeszéljük.
|
||||
</div>
|
||||
<FeedbackArea from={'contribute'} />
|
||||
<center>
|
||||
<div className={`buttonContainer ${styles.newTaskButton}`}>
|
||||
<div
|
||||
onClick={() => {
|
||||
setShowFeedback(true)
|
||||
}}
|
||||
>
|
||||
Új feladat
|
||||
</div>
|
||||
</div>
|
||||
</center>
|
||||
<hr />
|
||||
<Todos />
|
||||
<Sleep />
|
||||
|
|
@ -73,6 +88,15 @@ export default function contribute() {
|
|||
src={`${constants.siteUrl}img/bug.png`}
|
||||
/>
|
||||
</div>
|
||||
{showFeedback && (
|
||||
<Modal
|
||||
closeClick={() => {
|
||||
setShowFeedback(false)
|
||||
}}
|
||||
>
|
||||
<FeedbackArea from={'contribute'} />
|
||||
</Modal>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -23,3 +23,7 @@
|
|||
.repos a {
|
||||
margin: 0px 5px;
|
||||
}
|
||||
|
||||
.newTaskButton {
|
||||
width: 40%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -252,7 +252,7 @@ export default function FAQ() {
|
|||
<title>GYIK - Qmining | Frylabs.net</title>
|
||||
</Head>
|
||||
<div className={'pageHeader'}>
|
||||
<h1>GYakran Ismételt Kérdések</h1>
|
||||
<h1>Gyakran Ismételt Kérdések</h1>
|
||||
</div>
|
||||
<br />
|
||||
<br />
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue