Prettying stuff

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

@ -1,6 +1,6 @@
import constants from '../constants.json'
export default function Sleep (props) {
export default function Sleep(props) {
const hours = new Date().getHours()
if (hours < 4 || hours > 23) {
return (
@ -10,9 +10,10 @@ export default function Sleep (props) {
style={{
margin: '10px',
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>
</div>

View file

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

View file

@ -1,8 +1,15 @@
export default function Custom404 () {
export default function Custom404() {
return (
<center>
<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>
)
}

View file

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

View file

@ -1,9 +1,16 @@
function Error ({ statusCode }) {
function Error({ statusCode }) {
const render404 = () => {
return (
<center>
<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>
)
}

View file

@ -21,33 +21,38 @@ function renderMaual() {
Ha az oldalt vagy a scriptet használod: akármikor észrevehetik,
leállhat a szerver, és rossz lehet az összes válasz!
</h3>
<p id="manualWarn">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>
<p id="manualWarn">
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>
<Sleep />
<center>
</center>
<center></center>
<hr />
<center>
<h2 className={'subtitle'}>A userscript használata</h2>
</center>
<div className={'manualUsage manualBody'}>
<div>
<p>Ez a userscript Moodle/Elearnig/KMOOC tesztek megoldása során segítséget
jelenít meg.</p>
<p>
Ez a userscript Moodle/Elearnig/KMOOC tesztek megoldása során
segítséget jelenít meg.
</p>
<ul>
<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
href="https://www.tampermonkey.net/"
target="_blank"
rel="noreferrer"
>
Tampermonkey
</a>-t.
</a>
-t.
</li>
<li>
A <a
A{' '}
<a
href="http://qmining.frylabs.net/install?man"
target="_blank"
rel="noreferrer"
@ -64,8 +69,8 @@ function renderMaual() {
Ezután:
<ul>
<li>
A kitöltendő teszt oldalán a kérdésre a választ kell látnod felül egy
lebegő ablakban.
A kitöltendő teszt oldalán a kérdésre a választ kell látnod
felül egy lebegő ablakban.
</li>
<li>
Teszt ellenőrzés oldalon a script beküldi a szervernek a
@ -90,12 +95,12 @@ function renderMaual() {
(ha elszállna a szerver)
</li>
<li>
Az <a
href="/allQuestions"
rel="noreferrer"
>
Az{' '}
<a href="/allQuestions" rel="noreferrer">
ö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>
</ul>
</div>
@ -112,21 +117,24 @@ function renderMaual() {
<h2 className={'subtitle'}>Jelszavak</h2>
</center>
<div className={'manualBody'}>
<p>Ha ezt olvasod valszeg már neked is van. Azért lett bevezetve, hogy
nagyjából zárt legyen a felhasználók köre.</p>
<p>
Ha ezt olvasod valszeg már neked is van. Azért lett bevezetve, hogy
nagyjából zárt legyen a felhasználók köre.
</p>
<ul>
<li>Minden felhasználónak más jelszava van.</li>
<li>
Elvileg elég csak 1 szer beírnod, és többet nem kell, de{' '}
<b>mentsd le biztos helyre a jelszót, hogy később is meglegyen</b>! Ha
többször kell megadnod, akkor az bug lesz. Ilyenkor ezt {' '}
<b>mentsd le biztos helyre a jelszót, hogy később is meglegyen</b>!
Ha többször kell megadnod, akkor az bug lesz. Ilyenkor ezt{' '}
<a
href="http://qmining.frylabs.net/feedback?man"
target="_blank"
rel="noreferrer"
>
jelentsd
</a>.
</a>
.
</li>
<li>
<i>
@ -135,23 +143,25 @@ function renderMaual() {
</i>
</li>
<li>
Ha van jelszavad akkor {' '}
<b>bizonyos határok között</b>{' '}
te is <a
Ha van jelszavad akkor <b>bizonyos határok között</b> te is{' '}
<a
href="https://qmining.frylabs.net/pwRequest?man"
target="_blank"
rel="noreferrer"
>
tudsz generálni
</a> másoknak (ncore style).
</a>{' '}
másoknak (ncore style).
</li>
<li>
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)
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)
</li>
<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.
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>
@ -163,11 +173,14 @@ function renderMaual() {
<ul>
<li>
<b>
Olyan helyeken fut le a script, ahol nem kellene, vagy ideiglenesen
ki akarod kapcsolni;
Olyan helyeken fut le a script, ahol nem kellene, vagy
ideiglenesen ki akarod kapcsolni;
</b>
<br /><i>Tampermonkey bővitmény ikon -{'>'} click -{'>'} a scriptet
kapcsold ki. Csak ne felejtsd el visszakapcsolni ;)</i>
<br />
<i>
Tampermonkey bővitmény ikon -{'>'} click -{'>'} a scriptet
kapcsold ki. Csak ne felejtsd el visszakapcsolni ;)
</i>
</li>
<br />
<li>
@ -175,22 +188,32 @@ function renderMaual() {
Túl nagy a kérdést és a választ megjelenítő ablak, nem tudok a
válaszra kattintani;
</b>
<br /><i>Zoomolj ki egy kicsit az oldalon, kapcsold ki addig a scriptet,
vagy zárd be a script ablakát. Illetve a középső egérgombbal kattintva a
script abalkon el bírod tüntetni, amíg újra nem töltöd az oldalt, vagy görgetéssel
állíthatsz az átlátszóságán.</i>
<br />
<i>
Zoomolj ki egy kicsit az oldalon, kapcsold ki addig a scriptet,
vagy zárd be a script ablakát. Illetve a középső egérgombbal
kattintva a script abalkon el bírod tüntetni, amíg újra nem töltöd
az oldalt, vagy görgetéssel állíthatsz az átlátszóságán.
</i>
</li>
<br />
<li>
<b>Gombok, %-ok, számok;</b>
<br />
<img style={{ maxWidth: '100%' }} src="img/6.png" alt="img" className={'manual_img'} />
<img
style={{ maxWidth: '100%' }}
src="img/6.png"
alt="img"
className={'manual_img'}
/>
</li>
</ul>
</div>
<hr />
<center>
<h2 id="risk" className={'subtitle'}>Kockázatok</h2>
<h2 id="risk" className={'subtitle'}>
Kockázatok
</h2>
</center>
<ul>
<li>
@ -240,30 +263,42 @@ function renderMaual() {
</li>
</ul>
<hr />
<h2 id="sitesave" className={'subtitle'}>Weboldal lementése</h2>
<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>
<h2 id="sitesave" className={'subtitle'}>
Weboldal lementése
</h2>
<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>
<img style={{ maxWidth: '100%' }} src="img/websitesave.png" alt="img" className={'manual_img'} />
<img
style={{ maxWidth: '100%' }}
src="img/websitesave.png"
alt="img"
className={'manual_img'}
/>
<br />
<a
href="/feedback"
rel="noreferrer"
>
<a href="/feedback" rel="noreferrer">
Ide tudod feltölteni
</a>
</center>
<p>Mivel nincs hozzáférésem semmilyen egyetemi oldalhoz, így csak így tudom
hatékonyan tesztelni a scriptet. Ezért hatalmas segítség ha feltöltöd azt
az oldalt amin hibával találkozol.</p>
<p>
Mivel nincs hozzáférésem semmilyen egyetemi oldalhoz, így csak így tudom
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 />
<h2 id="scriptreinstall" className={'subtitle'}>Script újratelepítése</h2>
<p>Jelenleg két helyről lehet telepíteni a scriptet: greasyforkról és a
<h2 id="scriptreinstall" className={'subtitle'}>
Script újratelepítése
</h2>
<p>
Jelenleg két helyről lehet telepíteni a scriptet: greasyforkról és a
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>
végrehajtani, hogy minden zökkenőmentesen menjen:
</p>
<ul>
<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>
@ -281,7 +316,8 @@ function renderMaual() {
rel="noreferrer"
>
ide
</a> a script újratelepítéséhez a weboldalról.
</a>{' '}
a script újratelepítéséhez a weboldalról.
</li>
<li>
Kész! Lehet megkérdezi újra, hogy elérheti-e a szervert, de azt csak

View file

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

View file

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