Merge branch 'new_style' of gitlab.com:MrFry/qmining-page into new_style

src/components/sleep.js

@@ -9,9 +9,10 @@ export default function Sleep (props) {
           <img
             style={{
               margin: '10px',
-              width: '300px'
+              width: '300px',
+              border: '2px solid white'
             }}
-            src={constants.siteUrl + 'img/aludni.jpeg'}
+            src={constants.siteUrl + 'img/aludni.jpeg'} title="Ezt a kepet azert latod, mert ilyenkor mar igazan nem ezen az oldalon kellene jarnod"
           />
         </center>
       </div>

src/defaultStyles.css

@@ -14,6 +14,10 @@ body {
   color: #999999;
 }
 
+li {
+    padding: 2px 0px;
+}
+
 a {
   color: white;
 }
@@ -64,7 +68,7 @@ input {
 
 .content {
   margin-left: 200px;
-  padding: 1px 16px;
+  padding: 1px 15px;
 }
 
 .sidebarLinks a {
@@ -190,6 +194,10 @@ input {
   }
 }
 
+.endofpage {
+    padding-bottom: 20px;
+}
+
 .questionContainer {
   margin: 10px;
 }
@@ -258,10 +266,52 @@ input {
   margin: 0px 10px;
 }
 
+.warning {
+    color: red;
+    font-weight: 100;
+    font-size: 17.5px;
+}
+
+#manualWarn {
+    font-size: 14px;
+}
+
+.manual_img {
+    padding: 20px 2px;
+}
+
+.subtitle {
+    color: var(--text-color);
+    font-size: 23px;
+    text-align: center;
+    font-weight: 100;
+    margin: 0px;
+    padding-top: 8px;
+}
+
+.pageHeader {
+    background-color: var(--text-color);
+    height: 45px;
+    max-width: 100%;
+    color: black;
+    margin: 5px 0px 0px 0px;
+}
+
+.pageHeader h1 {
+    padding-top: 6px;
+    letter-spacing: 7px;
+    margin: 0px;
+}
+
 .manualUsage {
+  margin-top: 5px;
   display: flex;
 }
 
+.manualBody {
+    text-align: justify;
+}
+
 select {
   cursor: pointer;
   width: 100%;

src/pages/manual.js

@@ -14,61 +14,58 @@ function renderMaual() {
         <title>Manual - Qmining | Frylabs.net</title>
       </Head>
       <center>
+        <div className={'pageHeader'}>
             <h1>Manual</h1>
+        </div>     
+        <h3 className={'warning'}>
+          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>
       </center>
-      <hr />
-      <hr />
       <Sleep />
       <center>
-        Ez a userscript Moodle/Elearnig/KMOOC tesztek megoldása során segítséget
-        jelenít meg.
-        <h2>
-          Ha az oldalt vagy a scriptet használod: akármikor észrevehetik,
-          leállhat a szerver, és rossz lehet az összes válasz
-        </h2>
-        Valószínűleg semmi baj nem lesz, de én szóltam. Ha ez iránt aggódsz,
-        olvasd el a kockázatok részt
       </center>
       <hr />
-      <hr />
       <center>
-        <h1>Userscript használata</h1>
+        <h2 className={'subtitle'}>A userscript használata</h2>
       </center>
-      <hr />
-      <hr />
-      <div className={'manualUsage'}>
+      <div className={'manualUsage manualBody'}>
         <div>
+          <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:{' '}
+              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>
+              </a>-t.
             </li>
             <li>
-              <a
+              A <a
                 href="http://qmining.frylabs.net/install?man"
                 target="_blank"
                 rel="noreferrer"
               >
-                Weboldalról
+               weboldalról
               </a>{' '}
-              rakd fel a scriptet
+              rakd fel a scriptet.
             </li>
             <li>
-              Script majd udvariasan megkéri, hogy hagy beszélgessen a
-              szerverrel, mert mással nem tud, ezt engedélyezd.
+              A script ezt követően udvariasan megkér, hogy hadd beszélgessen a
+              szerverrel, mert mással nem tud, ezért ezt engedélyezd neki.
             </li>
             <li>
               Ezután:
               <ul>
                 <li>
-                  Teszt oldalon a kérdésre a választ kell látnod felül egy
-                  felugró ablakszerűben
+                  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
@@ -93,21 +90,12 @@ function renderMaual() {
               (ha elszállna a szerver)
             </li>
             <li>
-              <a
-                href="https://qmining.frylabs.net/allQuestions.html"
-                target="_blank"
+              Az <a
+                href="/allQuestions"
                 rel="noreferrer"
               >
-                Összes kérdés oldal
-              </a>
-              , ahol manuál tudsz keresni ha valami gáz lenne a scriptel
-            </li>
-          </ul>
-          <p /> Egyéb funkciók:
-          <ul>
-            <li>
-              Ha esetleg videókat nézel, akkor spaceval lehet play/pausolni, és
-              jobbra/balra gombbal ugrani a videóban.
+                összes kérdés oldal
+              </a> az oldal, ahol manuálisan tudsz keresni, ha valami gáz lenne a scripttel.
             </li>
           </ul>
         </div>
@@ -120,96 +108,90 @@ function renderMaual() {
         </div>
       </div>
       <hr />
-      <hr />
       <center>
-        <h1>Jelszavak</h1>
+        <h2 className={'subtitle'}>Jelszavak</h2>
       </center>
-      <hr />
-      <hr />
-      Ha ezt olvasod valszeg már van neked egy. Azért lett bevezetve, hogy
-      nagyjából zárt legyen a felhasználók köre
+      <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>
       <ul>
-        <li>Minden felhasználónak más jelszava van</li>
+        <li>Minden felhasználónak más jelszava van.</li>
         <li>
-          Elvileg elég csak 1 szer beírnod, és nem kell többet, de{' '}
-          <b>mentsd le biztos helyre a jelszót, hogy később is meglegyen!</b> Ha
-          többször kell akkor az bug,{' '}
+          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 {' '}
           <a
             href="http://qmining.frylabs.net/feedback?man"
             target="_blank"
             rel="noreferrer"
           >
-            és szólj
-          </a>
+            jelentsd
+          </a>.
         </li>
         <li>
-          <b>
-            Jelenleg nincs elfelejtett jelszó funkció, ha elfelejted akkor az
+          <i>
+            Jelenleg nincs elfelejtett jelszó funkció, ha elfelejted, akkor az
             örökre eltűnik!
-          </b>
+          </i>
         </li>
         <li>
-          Ha van jelszavad akkor bizonyos határok között{' '}
-          <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"
           >
-            te is tudsz generálni másoknak
-          </a>
-          (ncore style).
+            tudsz generálni
+          </a> másoknak (ncore style).
         </li>
         <li>
-          Saját jelszavad ne oszd meg, belépésnél máshonnan azonnal ki leszel
-          jelentkeztetve, és minek ha tudsz adni amúgy is
+          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 felhasználóneved nincs, így teljesen anoním az egész. Ez miatt
-          jelszót 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>
-      <hr />
+      </div>
       <hr />
       <center>
-        <h1>Gyakran előforduló kérdések</h1>
+        <h2 className={'subtitle'}>Gyakran Ismételt Kérdések</h2>
       </center>
-      <hr />
-      <hr />
+      <div className={'manualBody'}>
       <ul>
         <li>
           <b>
             Olyan helyeken fut le a script, ahol nem kellene, vagy ideiglenesen
-            ki akarod kapcsolni
+            ki akarod kapcsolni;
           </b>
-          <br /> Tampermonkey bővitmény ikon -{'>'} click -{'>'} scriptet
-          kapcsold ki. Csak ne felejtsd visszakapcsolni ;)
+          <br /><i>Tampermonkey bővitmény ikon -{'>'} click -{'>'} a scriptet
+          kapcsold ki. Csak ne felejtsd el visszakapcsolni ;)</i>
         </li>
-        <p />
+        <br />
         <li>
           <b>
             Túl nagy a kérdést és a választ megjelenítő ablak, nem tudok a
-            válaszra kattintani
+            válaszra kattintani;
           </b>
-          <br /> Zommolj ki egy kicsit, vagy kapcsold ki addig a scriptet.
-          Továbbá középső egérgombra kattintva rá el bírod tüntetni az ablakot,
-          amíg újra nem töltöd az oldalt, vagy másikra ugrasz.
+          <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>
-        <p />
-        <li>
-          <b>Gombok, %-ok, számok</b>
         <br />
-          <img style={{ maxWidth: '100%' }} src="img/6.png" alt="img" />
+        <li>
+        <b>Gombok, %-ok, számok;</b>
+        <br />
+        <img style={{ maxWidth: '100%' }} src="img/6.png" alt="img" className={'manual_img'} />
         </li>
-        <p />
       </ul>
-      <hr />
+      </div>
       <hr />
       <center>
-        <h1>Kockázatok</h1>
+        <h2 id="risk" className={'subtitle'}>Kockázatok</h2>
       </center>
-      <hr />
-      <hr />
       <ul>
         <li>
           <b>Bármikor észrevehetik hogy használod a scriptet</b>
@@ -258,36 +240,30 @@ function renderMaual() {
         </li>
       </ul>
       <hr />
-      <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>
       <center>
-        <h1>Egyéb</h1>
-      </center>
-      <hr />
-      <hr />
-      <h2 id="sitesave">Weboldal lementése</h2>
-      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
-      letölteni egy oldalt:
-      <img style={{ maxWidth: '100%' }} src="img/websitesave.png" alt="img" />
+      <img style={{ maxWidth: '100%' }} src="img/websitesave.png" alt="img" className={'manual_img'} />
       <br />
       <a
-        href="http://qmining.frylabs.net/feedback?man"
-        target="_blank"
+        href="/feedback"
         rel="noreferrer"
       >
         Ide tudod feltölteni
       </a>
-      <br />
-      Mivel nincs hozzáférésem semmilyen egyetemi oldalhoz, így csak így tudom
+      </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.
+      az oldalt amin hibával találkozol.</p>
       <hr />
-      <h2 id="scriptreinstall">Script újratelepítése</h2>
-      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:
+      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>
@@ -304,8 +280,8 @@ function renderMaual() {
             target="_blank"
             rel="noreferrer"
           >
-            ide a script újratelepítéséhez a weboldalról.
-          </a>
+            ide
+          </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
@@ -315,6 +291,7 @@ function renderMaual() {
       </ul>
       Ezzel semmi adat nem vész el, régi jelszó ugyanolyan jó marad (csak ne
       felejtsd azt el)
+      <p className={'endofpage'} />
     </div>
   )
 }