albert/qmining-page
1
0
Fork 0
mirror of https://gitlab.com/MrFry/qmining-page synced 2025-04-01 20:23:44 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

Prettying stuff

Browse source
This commit is contained in:
mrfry 2021-03-06 14:59:09 +01:00
parent 843f0a7dad
commit 34cc962ab4
16 changed files with 247 additions and 218 deletions
Download patch file Download diff file Expand all files Collapse all files

6
src/components/Button.js
View file

@ -1,13 +1,11 @@
import styles from './button.module.css' import styles from './button.module.css'
export default function Button (props) { export default function Button(props) {
return ( return (
<div> <div>
<center> <center>
<a href={props.href}> <a href={props.href}>
<div className={styles.ircLink}> <div className={styles.ircLink}>{props.text}</div>
{props.text}
</div>
</a> </a>
</center> </center>
</div> </div>

16
src/components/Question.js
View file

@ -1,7 +1,7 @@
import React, { PureComponent } from 'react' import React, { PureComponent } from 'react'
class Question extends PureComponent { class Question extends PureComponent {
render () { render() {
const { question } = this.props const { question } = this.props
let qdata = question.data let qdata = question.data
@ -15,16 +15,10 @@ class Question extends PureComponent {
} }
return ( return (
<div className='questionContainer'> <div className="questionContainer">
<div className='question'> <div className="question">{question.Q}</div>
{question.Q} <div className="answer">{question.A}</div>
</div> <div className="data">{qdata || null}</div>
<div className='answer'>
{question.A}
</div>
<div className='data'>
{qdata || null}
</div>
</div> </div>
) )
} }

15
src/components/Questions.js
View file

@ -5,7 +5,7 @@ import Question from './Question.js'
import styles from './Questions.module.css' import styles from './Questions.module.css'
class Questions extends PureComponent { class Questions extends PureComponent {
render () { render() {
const { subjs } = this.props const { subjs } = this.props
return ( return (
@ -13,16 +13,9 @@ class Questions extends PureComponent {
{subjs.map((subj, i) => { {subjs.map((subj, i) => {
return ( return (
<div key={i}> <div key={i}>
<div className={styles.subjName}> <div className={styles.subjName}>{subj.Name}</div>
{subj.Name} {subj.Questions.map((question, i) => {
</div> return <Question key={i} question={question} />
{ subj.Questions.map((question, i) => {
return (
<Question
key={i}
question={question}
/>
)
})} })}
</div> </div>
) )

15
src/components/Subject.js
View file

@ -3,26 +3,19 @@ import React, { PureComponent } from 'react'
import Question from './Question.js' import Question from './Question.js'
class Subject extends PureComponent { class Subject extends PureComponent {
render () { render() {
const { subj } = this.props const { subj } = this.props
if (subj) { if (subj) {
return ( return (
<div > <div>
{subj.Questions.map((question, i) => { {subj.Questions.map((question, i) => {
return ( return <Question key={i} question={question} />
<Question
key={i}
question={question}
/>
)
})} })}
</div> </div>
) )
} else { } else {
return ( return <div />
<div />
)
} }
} }
} }

15
src/components/SubjectSelector.js
View file

@ -1,10 +1,10 @@
import styles from './SubjectSelector.module.css' import styles from './SubjectSelector.module.css'
export default function SubjectSelector (props) { export default function SubjectSelector(props) {
const { activeSubjName, searchTerm, data, onSubjSelect } = props const { activeSubjName, searchTerm, data, onSubjSelect } = props
return ( return (
<div className='subjectSelector'> <div className="subjectSelector">
{data.map((subj, i) => { {data.map((subj, i) => {
if (!subj.Name.toLowerCase().includes(searchTerm.toLowerCase())) { if (!subj.Name.toLowerCase().includes(searchTerm.toLowerCase())) {
return null return null
@ -12,16 +12,15 @@ export default function SubjectSelector (props) {
return ( return (
<div <div
className={activeSubjName === subj.Name className={
? 'subjItem activeSubjItem' activeSubjName === subj.Name
: 'subjItem' ? 'subjItem activeSubjItem'
: 'subjItem'
} }
key={i} key={i}
onClick={() => onSubjSelect(subj.Name)} onClick={() => onSubjSelect(subj.Name)}
> >
<span className={styles.subjName}> <span className={styles.subjName}>{subj.Name}</span>
{subj.Name}
</span>
<span className={styles.questionCount}> <span className={styles.questionCount}>
[ {subj.Questions.length} ] [ {subj.Questions.length} ]
</span> </span>

18
src/components/layout.js
View file

@ -80,11 +80,15 @@ export default function Layout({
<div /> <div />
</span> </span>
<div className="sidebarheader"> <div className="sidebarheader">
<Link href="/"><a><img <Link href="/">
style={{ maxWidth: '100%' }} <a>
src={`${constants.siteUrl}img/frylabs-logo_small_transparent.png`} <img
alt="Frylabs" style={{ maxWidth: '100%' }}
/></a></Link> src={`${constants.siteUrl}img/frylabs-logo_small_transparent.png`}
alt="Frylabs"
/>
</a>
</Link>
</div> </div>
</div> </div>
{sidebarOpen ? ( {sidebarOpen ? (
@ -123,9 +127,9 @@ export default function Layout({
rel="noreferrer" rel="noreferrer"
> >
Donate Donate
</a> </a>
</div> </div>
<div className="userStatus"> <div className="userStatus">
<div className="msgs"> <div className="msgs">
<div <div
onClick={() => { onClick={() => {

9
src/components/sleep.js
View file

@ -1,18 +1,19 @@
import constants from '../constants.json' import constants from '../constants.json'
export default function Sleep (props) { export default function Sleep(props) {
const hours = new Date().getHours() const hours = new Date().getHours()
if (hours < 4 || hours > 23) { if (hours < 4 || hours > 23) {
return ( return (
<div> <div>
<center> <center>
<img <img
style={{ style={{
margin: '10px', margin: '10px',
width: '300px', width: '300px',
border: '2px solid white' border: '2px solid white',
}} }}
src={constants.siteUrl + 'img/aludni.jpeg'} title="Ezt a kepet azert latod, mert ilyenkor mar igazan nem ezen az oldalon kellene jarnod" src={constants.siteUrl + 'img/aludni.jpeg'}
title="Ezt a kepet azert latod, mert ilyenkor mar igazan nem ezen az oldalon kellene jarnod"
/> />
</center> </center>
</div> </div>

5
src/data/helps.json
View file

@ -1,8 +1,5 @@
{ {
"header": [ "header": ["Miben", "Hogy"],
"Miben",
"Hogy"
],
"rows": { "rows": {
"feedbacker": { "feedbacker": {
"name": "Visszajelzésben", "name": "Visszajelzésben",

44
src/defaultStyles.css
View file

@ -15,7 +15,7 @@ body {
} }
li { li {
padding: 2px 0px; padding: 2px 0px;
} }
a { a {
@ -195,7 +195,7 @@ input {
} }
.endofpage { .endofpage {
padding-bottom: 20px; padding-bottom: 20px;
} }
.questionContainer { .questionContainer {
@ -267,40 +267,40 @@ input {
} }
.warning { .warning {
color: red; color: red;
font-weight: 100; font-weight: 100;
font-size: 17.5px; font-size: 17.5px;
} }
#manualWarn { #manualWarn {
font-size: 14px; font-size: 14px;
} }
.manual_img { .manual_img {
padding: 20px 2px; padding: 20px 2px;
} }
.subtitle { .subtitle {
color: var(--text-color); color: var(--text-color);
font-size: 23px; font-size: 23px;
text-align: center; text-align: center;
font-weight: 100; font-weight: 100;
margin: 0px; margin: 0px;
padding-top: 8px; padding-top: 8px;
} }
.pageHeader { .pageHeader {
background-color: var(--text-color); background-color: var(--text-color);
height: 45px; height: 45px;
max-width: 100%; max-width: 100%;
color: black; color: black;
margin: 5px 0px 0px 0px; margin: 5px 0px 0px 0px;
} }
.pageHeader h1 { .pageHeader h1 {
padding-top: 6px; padding-top: 6px;
letter-spacing: 7px; letter-spacing: 7px;
margin: 0px; margin: 0px;
} }
.manualUsage { .manualUsage {
@ -309,7 +309,7 @@ input {
} }
.manualBody { .manualBody {
text-align: justify; text-align: justify;
} }
select { select {

11
src/pages/404.js
View file

@ -1,8 +1,15 @@
export default function Custom404 () { export default function Custom404() {
return ( return (
<center> <center>
<h1>404</h1> <h1>404</h1>
<iframe width='660' height='465' src='https://www.youtube-nocookie.com/embed/GOzwOeONBhQ' frameBorder='0' allow='accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture' allowFullScreen /> <iframe
width="660"
height="465"
src="https://www.youtube-nocookie.com/embed/GOzwOeONBhQ"
frameBorder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowFullScreen
/>
</center> </center>
) )
} }

6
src/pages/_document.js
View file

@ -1,16 +1,16 @@
import Document, { Html, Head, Main, NextScript } from 'next/document' import Document, { Html, Head, Main, NextScript } from 'next/document'
class MyDocument extends Document { class MyDocument extends Document {
static async getInitialProps (ctx) { static async getInitialProps(ctx) {
const initialProps = await Document.getInitialProps(ctx) const initialProps = await Document.getInitialProps(ctx)
return { ...initialProps } return { ...initialProps }
} }
render () { render() {
return ( return (
<Html> <Html>
<Head /> <Head />
<body bgcolor='#222426'> <body bgcolor="#222426">
<Main /> <Main />
<NextScript /> <NextScript />
</body> </body>

11
src/pages/_error.js
View file

@ -1,9 +1,16 @@
function Error ({ statusCode }) { function Error({ statusCode }) {
const render404 = () => { const render404 = () => {
return ( return (
<center> <center>
<h1>404</h1> <h1>404</h1>
<iframe width='100%' height='465' src='https://www.youtube-nocookie.com/embed/GOzwOeONBhQ' frameBorder='0' allow='accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture' allowFullScreen /> <iframe
width="100%"
height="465"
src="https://www.youtube-nocookie.com/embed/GOzwOeONBhQ"
frameBorder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowFullScreen
/>
</center> </center>
) )
} }

32
src/pages/index.module.css
View file

@ -3,22 +3,22 @@
} }
.button { .button {
color: white; color: white;
background-color: #313131; background-color: #313131;
margin: 0px 4px; margin: 0px 4px;
padding: 15px 4px; padding: 15px 4px;
max-width: 100%; max-width: 100%;
text-align: center; text-align: center;
font-size: 16px; font-size: 16px;
cursor: pointer; cursor: pointer;
word-wrap: break-word; word-wrap: break-word;
text-decoration: none; text-decoration: none;
transition: width 0.5s, height 0.5s, ease-in 0.5s; transition: width 0.5s, height 0.5s, ease-in 0.5s;
flex: 1; flex: 1;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
user-select: none; user-select: none;
} }
.button:hover { .button:hover {

258
src/pages/manual.js
View file

@ -15,44 +15,49 @@ function renderMaual() {
</Head> </Head>
<center> <center>
<div className={'pageHeader'}> <div className={'pageHeader'}>
<h1>Manual</h1> <h1>Manual</h1>
</div> </div>
<h3 className={'warning'}> <h3 className={'warning'}>
Ha az oldalt vagy a scriptet használod: akármikor észrevehetik, Ha az oldalt vagy a scriptet használod: akármikor észrevehetik,
leállhat a szerver, és rossz lehet az összes válasz! leállhat a szerver, és rossz lehet az összes válasz!
</h3> </h3>
<p id="manualWarn">Valószínűleg semmi baj nem lesz, de én szóltam. Ha emiatt aggódsz, <p id="manualWarn">
olvasd el a <a href="#risk">kockázatok részt</a>.</p> Valószínűleg semmi baj nem lesz, de én szóltam. Ha emiatt aggódsz,
olvasd el a <a href="#risk">kockázatok részt</a>.
</p>
</center> </center>
<Sleep /> <Sleep />
<center> <center></center>
</center>
<hr /> <hr />
<center> <center>
<h2 className={'subtitle'}>A userscript használata</h2> <h2 className={'subtitle'}>A userscript használata</h2>
</center> </center>
<div className={'manualUsage manualBody'}> <div className={'manualUsage manualBody'}>
<div> <div>
<p>Ez a userscript Moodle/Elearnig/KMOOC tesztek megoldása során segítséget <p>
jelenít meg.</p> Ez a userscript Moodle/Elearnig/KMOOC tesztek megoldása során
segítséget jelenít meg.
</p>
<ul> <ul>
<li> <li>
Tölts le egy userscript futtató kiegészítőt a böngésződhöz: pl. a {' '} Tölts le egy userscript futtató kiegészítőt a böngésződhöz: pl. a{' '}
<a <a
href="https://www.tampermonkey.net/" href="https://www.tampermonkey.net/"
target="_blank" target="_blank"
rel="noreferrer" rel="noreferrer"
> >
Tampermonkey Tampermonkey
</a>-t. </a>
-t.
</li> </li>
<li> <li>
A <a A{' '}
<a
href="http://qmining.frylabs.net/install?man" href="http://qmining.frylabs.net/install?man"
target="_blank" target="_blank"
rel="noreferrer" rel="noreferrer"
> >
weboldalról weboldalról
</a>{' '} </a>{' '}
rakd fel a scriptet. rakd fel a scriptet.
</li> </li>
@ -64,8 +69,8 @@ function renderMaual() {
Ezután: Ezután:
<ul> <ul>
<li> <li>
A kitöltendő teszt oldalán a kérdésre a választ kell látnod felül egy A kitöltendő teszt oldalán a kérdésre a választ kell látnod
lebegő ablakban. felül egy lebegő ablakban.
</li> </li>
<li> <li>
Teszt ellenőrzés oldalon a script beküldi a szervernek a Teszt ellenőrzés oldalon a script beküldi a szervernek a
@ -90,12 +95,12 @@ function renderMaual() {
(ha elszállna a szerver) (ha elszállna a szerver)
</li> </li>
<li> <li>
Az <a Az{' '}
href="/allQuestions" <a href="/allQuestions" rel="noreferrer">
rel="noreferrer"
>
összes kérdés oldal összes kérdés oldal
</a> az oldal, ahol manuálisan tudsz keresni, ha valami gáz lenne a scripttel. </a>{' '}
az oldal, ahol manuálisan tudsz keresni, ha valami gáz lenne a
scripttel.
</li> </li>
</ul> </ul>
</div> </div>
@ -112,85 +117,103 @@ function renderMaual() {
<h2 className={'subtitle'}>Jelszavak</h2> <h2 className={'subtitle'}>Jelszavak</h2>
</center> </center>
<div className={'manualBody'}> <div className={'manualBody'}>
<p>Ha ezt olvasod valszeg már neked is van. Azért lett bevezetve, hogy <p>
nagyjából zárt legyen a felhasználók köre.</p> Ha ezt olvasod valszeg már neked is van. Azért lett bevezetve, hogy
<ul> nagyjából zárt legyen a felhasználók köre.
<li>Minden felhasználónak más jelszava van.</li> </p>
<li> <ul>
Elvileg elég csak 1 szer beírnod, és többet nem kell, de{' '} <li>Minden felhasználónak más jelszava van.</li>
<b>mentsd le biztos helyre a jelszót, hogy később is meglegyen</b>! Ha <li>
többször kell megadnod, akkor az bug lesz. Ilyenkor ezt {' '} Elvileg elég csak 1 szer beírnod, és többet nem kell, de{' '}
<a <b>mentsd le biztos helyre a jelszót, hogy később is meglegyen</b>!
href="http://qmining.frylabs.net/feedback?man" Ha többször kell megadnod, akkor az bug lesz. Ilyenkor ezt{' '}
target="_blank" <a
rel="noreferrer" href="http://qmining.frylabs.net/feedback?man"
> target="_blank"
jelentsd rel="noreferrer"
</a>. >
</li> jelentsd
<li> </a>
<i> .
Jelenleg nincs elfelejtett jelszó funkció, ha elfelejted, akkor az </li>
örökre eltűnik! <li>
</i> <i>
</li> Jelenleg nincs elfelejtett jelszó funkció, ha elfelejted, akkor az
<li> örökre eltűnik!
Ha van jelszavad akkor {' '} </i>
<b>bizonyos határok között</b>{' '} </li>
te is <a <li>
href="https://qmining.frylabs.net/pwRequest?man" Ha van jelszavad akkor <b>bizonyos határok között</b> te is{' '}
target="_blank" <a
rel="noreferrer" href="https://qmining.frylabs.net/pwRequest?man"
> target="_blank"
tudsz generálni rel="noreferrer"
</a> másoknak (ncore style). >
</li> tudsz generálni
<li> </a>{' '}
Saját jelszavadat ne oszd meg, mivel egyszerre egy helyen lehetsz belépve, máshol automatikusan ki leszel jelentkeztetve. (meg minek, ha tudsz adni másoknak az előző pont alapján) másoknak (ncore style).
</li> </li>
<li> <li>
Mivel senkinek sincs felhasználóneve, csak egy UserID (amit bal alul találsz), Saját jelszavadat ne oszd meg, mivel egyszerre egy helyen lehetsz
így az egész teljesen anonim. Emiatt a jelszavakat nem lehet megváltoztatni, belépve, máshol automatikusan ki leszel jelentkeztetve. (meg minek,
hogy a szükséges komplexitás megmaradjon. ha tudsz adni másoknak az előző pont alapján)
</li> </li>
</ul> <li>
Mivel senkinek sincs felhasználóneve, csak egy UserID (amit bal alul
találsz), így az egész teljesen anonim. Emiatt a jelszavakat nem
lehet megváltoztatni, hogy a szükséges komplexitás megmaradjon.
</li>
</ul>
</div> </div>
<hr /> <hr />
<center> <center>
<h2 className={'subtitle'}>Gyakran Ismételt Kérdések</h2> <h2 className={'subtitle'}>Gyakran Ismételt Kérdések</h2>
</center> </center>
<div className={'manualBody'}> <div className={'manualBody'}>
<ul> <ul>
<li> <li>
<b> <b>
Olyan helyeken fut le a script, ahol nem kellene, vagy ideiglenesen Olyan helyeken fut le a script, ahol nem kellene, vagy
ki akarod kapcsolni; ideiglenesen ki akarod kapcsolni;
</b> </b>
<br /><i>Tampermonkey bővitmény ikon -{'>'} click -{'>'} a scriptet <br />
kapcsold ki. Csak ne felejtsd el visszakapcsolni ;)</i> <i>
</li> Tampermonkey bővitmény ikon -{'>'} click -{'>'} a scriptet
<br /> kapcsold ki. Csak ne felejtsd el visszakapcsolni ;)
<li> </i>
<b> </li>
Túl nagy a kérdést és a választ megjelenítő ablak, nem tudok a <br />
válaszra kattintani; <li>
</b> <b>
<br /><i>Zoomolj ki egy kicsit az oldalon, kapcsold ki addig a scriptet, Túl nagy a kérdést és a választ megjelenítő ablak, nem tudok a
vagy zárd be a script ablakát. Illetve a középső egérgombbal kattintva a válaszra kattintani;
script abalkon el bírod tüntetni, amíg újra nem töltöd az oldalt, vagy görgetéssel </b>
állíthatsz az átlátszóságán.</i> <br />
</li> <i>
<br /> Zoomolj ki egy kicsit az oldalon, kapcsold ki addig a scriptet,
<li> vagy zárd be a script ablakát. Illetve a középső egérgombbal
<b>Gombok, %-ok, számok;</b> kattintva a script abalkon el bírod tüntetni, amíg újra nem töltöd
<br /> az oldalt, vagy görgetéssel állíthatsz az átlátszóságán.
<img style={{ maxWidth: '100%' }} src="img/6.png" alt="img" className={'manual_img'} /> </i>
</li> </li>
</ul> <br />
<li>
<b>Gombok, %-ok, számok;</b>
<br />
<img
style={{ maxWidth: '100%' }}
src="img/6.png"
alt="img"
className={'manual_img'}
/>
</li>
</ul>
</div> </div>
<hr /> <hr />
<center> <center>
<h2 id="risk" className={'subtitle'}>Kockázatok</h2> <h2 id="risk" className={'subtitle'}>
Kockázatok
</h2>
</center> </center>
<ul> <ul>
<li> <li>
@ -240,30 +263,42 @@ function renderMaual() {
</li> </li>
</ul> </ul>
<hr /> <hr />
<h2 id="sitesave" className={'subtitle'}>Weboldal lementése</h2> <h2 id="sitesave" className={'subtitle'}>
<p>Hogy a hibákat a saját gépemen reprodukálni tudjam, és könnyen ki bírjam Weboldal lementése
javítani, sokszor jól jön, ha egy lementett weboldalt megkapok. Így lehet </h2>
menteni egy oldalt:</p> <p>
Hogy a hibákat a saját gépemen reprodukálni tudjam, és könnyen ki bírjam
javítani, sokszor jól jön, ha egy lementett weboldalt megkapok. Így
lehet menteni egy oldalt:
</p>
<center> <center>
<img style={{ maxWidth: '100%' }} src="img/websitesave.png" alt="img" className={'manual_img'} /> <img
<br /> style={{ maxWidth: '100%' }}
<a src="img/websitesave.png"
href="/feedback" alt="img"
rel="noreferrer" className={'manual_img'}
> />
Ide tudod feltölteni <br />
</a> <a href="/feedback" rel="noreferrer">
Ide tudod feltölteni
</a>
</center> </center>
<p>Mivel nincs hozzáférésem semmilyen egyetemi oldalhoz, így csak így tudom <p>
hatékonyan tesztelni a scriptet. Ezért hatalmas segítség ha feltöltöd azt Mivel nincs hozzáférésem semmilyen egyetemi oldalhoz, így csak így tudom
az oldalt amin hibával találkozol.</p> hatékonyan tesztelni a scriptet. Ezért hatalmas segítség ha feltöltöd
azt az oldalt amin hibával találkozol.
</p>
<hr /> <hr />
<h2 id="scriptreinstall" className={'subtitle'}>Script újratelepítése</h2> <h2 id="scriptreinstall" className={'subtitle'}>
<p>Jelenleg két helyről lehet telepíteni a scriptet: greasyforkról és a Script újratelepítése
weboldalról. A greasyforkos telepítési lehetőség meg fog szűnni, így ha </h2>
onnan telepítetted, akkor nem lesznek frissítések elérhetők (amik nagyon <p>
fontosak (de tényleg)). Ezért a következő rövid manővert kellene Jelenleg két helyről lehet telepíteni a scriptet: greasyforkról és a
végrehajtani, hogy minden zökkenőmentesen menjen:</p> weboldalról. A greasyforkos telepítési lehetőség meg fog szűnni, így ha
onnan telepítetted, akkor nem lesznek frissítések elérhetők (amik nagyon
fontosak (de tényleg)). Ezért a következő rövid manővert kellene
végrehajtani, hogy minden zökkenőmentesen menjen:
</p>
<ul> <ul>
<li>Böngésző bővítményeidnél kattints a tampermonkey-ra</li> <li>Böngésző bővítményeidnél kattints a tampermonkey-ra</li>
<li>Válaszd ki alulról második opciót, ami dashboard néven fut</li> <li>Válaszd ki alulról második opciót, ami dashboard néven fut</li>
@ -281,7 +316,8 @@ function renderMaual() {
rel="noreferrer" rel="noreferrer"
> >
ide ide
</a> a script újratelepítéséhez a weboldalról. </a>{' '}
a script újratelepítéséhez a weboldalról.
</li> </li>
<li> <li>
Kész! Lehet megkérdezi újra, hogy elérheti-e a szervert, de azt csak Kész! Lehet megkérdezi újra, hogy elérheti-e a szervert, de azt csak

2
src/pages/pwRequest.module.css
View file

@ -27,7 +27,7 @@
} }
.pwContainer { .pwContainer {
font-family: "Courier New", Courier, monospace; font-family: 'Courier New', Courier, monospace;
text-align: center; text-align: center;
font-size: 24px; font-size: 24px;
color: white; color: white;

2
src/pages/thanks.js
View file

@ -2,7 +2,7 @@ import styles from './thanks.module.css'
import constants from '../constants.json' import constants from '../constants.json'
import Head from 'next/head' import Head from 'next/head'
export default function Thanks () { export default function Thanks() {
return ( return (
<div> <div>
<Head> <Head>