webui: pretty help page

cloud/templates/sites/help.html

@@ -2,8 +2,6 @@
 {% load i18n %}
 {% load i18n %}
 {% load staticfiles %}
 {% load staticfiles %}
 {% get_current_language as LANGUAGE_CODE %}
 {% get_current_language as LANGUAGE_CODE %}
-
-
 {% block content %}
 {% block content %}
 <div class="irasmu">
 <div class="irasmu">
     <h2>Bevezető</h2>
     <h2>Bevezető</h2>
@@ -40,6 +38,7 @@
         <p>
         <p>
             Amennyiben kérdése maradt, örömmel segítünk a <a href="/sites/support/">támogatás</a> oldalon leírt elérhetőségeinken.
             Amennyiben kérdése maradt, örömmel segítünk a <a href="/sites/support/">támogatás</a> oldalon leírt elérhetőségeinken.
         </p>
         </p>
+        <div class="clear"></div>
     </section>
     </section>
     <section id="s-1-1">
     <section id="s-1-1">
         <h3>A webes felület elérése</h3>
         <h3>A webes felület elérése</h3>
@@ -133,51 +132,51 @@
         </p>
         </p>
     </section>
     </section>
     <h2 id="s-3">Sablonok</h2>
     <h2 id="s-3">Sablonok</h2>
-    <section>
-        <p class="teacher">
+    <section class="teacher">
+        <p>
             A megfelelő jogosultsággal rendelkező felhasználóknak lehetősége van sablonok létrehozására.
             A megfelelő jogosultsággal rendelkező felhasználóknak lehetősége van sablonok létrehozására.
             Így csoportjaival olyan előkészített rendszert oszthat meg, amelyen már minden szükséges szoftver telepítve és konfigurálva van.
             Így csoportjaival olyan előkészített rendszert oszthat meg, amelyen már minden szükséges szoftver telepítve és konfigurálva van.
             Ezzel időt és fáradságot takaríthat meg a projektmunka vagy a laborfoglalkozás, házi feladat készítése során.
             Ezzel időt és fáradságot takaríthat meg a projektmunka vagy a laborfoglalkozás, házi feladat készítése során.
         </p>
         </p>
     </section>
     </section>
-    <section id="s-3-1">
+    <section id="s-3-1" class="teacher">
         <h3>Sablonok létrehozása</h3>
         <h3>Sablonok létrehozása</h3>
-        <p class="teacher">
+        <p>
             Sablon létrehozásához az összefoglaló oldalon lévő <em>sablonok</em> doboz <em>
             Sablon létrehozásához az összefoglaló oldalon lévő <em>sablonok</em> doboz <em>
                 <img src="{% static "icons/document--plus.png" %}" alt="{% trans "New template" %}" />
                 <img src="{% static "icons/document--plus.png" %}" alt="{% trans "New template" %}" />
                 új sablon</em> gombjára kattintva megnyílik egy varázsló.
                 új sablon</em> gombjára kattintva megnyílik egy varázsló.
         </p>
         </p>
-        <p class="teacher figure figure-small">
+        <p class="figure figure-small">
             <img src="{% static "help/template-wizard-1.png" %}" alt="Az új sablon varázsló 1." />
             <img src="{% static "help/template-wizard-1.png" %}" alt="Az új sablon varázsló 1." />
             <img src="{% static "help/template-wizard-2.png" %}" alt="Az új sablon varázsló 2." />
             <img src="{% static "help/template-wizard-2.png" %}" alt="Az új sablon varázsló 2." />
         </p>
         </p>
-        <p class="teacher">
+        <p>
             A varázsló első lépéseként válassza ki a kiindulási sablont, amelyet személyre kíván szabni, majd kattintson a <em>tovább</em> gombra.
             A varázsló első lépéseként válassza ki a kiindulási sablont, amelyet személyre kíván szabni, majd kattintson a <em>tovább</em> gombra.
             Ezután válassszon nevet, méretet és leírást az új sablonnak.
             Ezután válassszon nevet, méretet és leírást az új sablonnak.
             Végül a <em>mesterpéldány indítása</em> gombra kattintva elindul egy példánya a kiválasztott kiindulási rendszernek, amelyen elvégezheti a beállításokat.
             Végül a <em>mesterpéldány indítása</em> gombra kattintva elindul egy példánya a kiválasztott kiindulási rendszernek, amelyen elvégezheti a beállításokat.
         </p>
         </p>
-        <p class="teacher figure figure-small">
+        <p class="figure figure-small">
             <img src="{% static "help/template-wizard-3.png" %}" alt="Az új sablon varázsló 3." />
             <img src="{% static "help/template-wizard-3.png" %}" alt="Az új sablon varázsló 3." />
         </p>
         </p>
-        <p class="teacher">
+        <p>
             Az elindult géphez a <a href="#s-2-2">többi géphez hasonló módon</a> lehet kapcsolódni.
             Az elindult géphez a <a href="#s-2-2">többi géphez hasonló módon</a> lehet kapcsolódni.
             Végezze el a szükséges módosításokat, majd kattintson a <em>mentés</em> gombra.
             Végezze el a szükséges módosításokat, majd kattintson a <em>mentés</em> gombra.
             A rendszer leállítja a gépet, majd elmenti a lemezképet.
             A rendszer leállítja a gépet, majd elmenti a lemezképet.
         </p>
         </p>
     </section>
     </section>
-    <section id="s-3-2">
+    <section id="s-3-2" class="teacher">
         <p class="figure figure-small" style="float: right">
         <p class="figure figure-small" style="float: right">
             <img src="{% static "help/share-wizard.png" %}" alt="Az új megosztás varázsló" />
             <img src="{% static "help/share-wizard.png" %}" alt="Az új megosztás varázsló" />
         </p>
         </p>
         <h3>Sablonok megosztása</h3>
         <h3>Sablonok megosztása</h3>
-        <p class="teacher">
+        <p>
             A sablonokat csoportok tagjaival lehet megosztani.
             A sablonokat csoportok tagjaival lehet megosztani.
         </p>
         </p>
-        <p class="teacher">
+        <p>
             A megosztás megszabja a sablon példányainak <a href="#TODO">lejárati idejét</a>, valamint a <a href="#TODO">futtatható példányok számát</a> is.
             A megosztás megszabja a sablon példányainak <a href="#TODO">lejárati idejét</a>, valamint a <a href="#TODO">futtatható példányok számát</a> is.
         </p>
         </p>
-        <p class="teacher">Egy sablon megosztásához:
-        <div class="teacher"><ol>
+        <p>Egy sablon megosztásához:
+        <div><ol>
             <li>Navigáljon egy csoport részletező oldalára a <em>saját csoportok</em> dobozról.</li>
             <li>Navigáljon egy csoport részletező oldalára a <em>saját csoportok</em> dobozról.</li>
             <li>A részletező oldalon válasszon egy sablont.</li>
             <li>A részletező oldalon válasszon egy sablont.</li>
             <li>Kattintson a <em>
             <li>Kattintson a <em>
@@ -188,25 +187,25 @@
     </section>
     </section>
 
 
     <h2 id="s-4">Csoportok</h2>
     <h2 id="s-4">Csoportok</h2>
-    <section>
-        <p class="teacher">
+    <section class="teacher">
+        <p>
             A csoportok hallgatók halmazai, melyek segítségével együtt lehet kezelni a sablonok megosztását és a kvóták kezelését.
             A csoportok hallgatók halmazai, melyek segítségével együtt lehet kezelni a sablonok megosztását és a kvóták kezelését.
         </p>
         </p>
-        <p class="teacher">
+        <p>
             Sablonokat hozhat létre kézzel, tetszés szerint (például önállólabor-csoportok vagy kutatási munkák számára), vagy használhatja a Neptun tanulmányi rendszerben rögzített tárgyfelvételek és oktatók alapján automatikusan alakuló csoportokat.
             Sablonokat hozhat létre kézzel, tetszés szerint (például önállólabor-csoportok vagy kutatási munkák számára), vagy használhatja a Neptun tanulmányi rendszerben rögzített tárgyfelvételek és oktatók alapján automatikusan alakuló csoportokat.
         </p>
         </p>
     </section>
     </section>
-    <section id="s-4-1">
+    <section id="s-4-1" class="teacher">
         <h3>Csoportok létrehozása</h3>
         <h3>Csoportok létrehozása</h3>
-        <p class="teacher">
+        <p>
             Új csoport létrehozásához kattintson az összefoglaló oldal <em>saját csoportok</em> dobozában az <em>
             Új csoport létrehozásához kattintson az összefoglaló oldal <em>saját csoportok</em> dobozában az <em>
                 <img src="{% static "icons/user--plus.png" %}" alt="{% trans "Create new group" %}" />
                 <img src="{% static "icons/user--plus.png" %}" alt="{% trans "Create new group" %}" />
             új csoport létrehozása</em> gombra.
             új csoport létrehozása</em> gombra.
         </p>
         </p>
-        <p class="teacher">
+        <p>
             A megjelenő varázsló értelemszerű kitöltésével a csoport létrejön, és a részletező oldalára kerül.
             A megjelenő varázsló értelemszerű kitöltésével a csoport létrejön, és a részletező oldalára kerül.
         </p>
         </p>
-        <p class="teacher">
+        <p>
             A csoport részletező oldalán lehetősége van tagok és tulajdonosok fölvételére, tagok törlésére, valamint <a href="#s-3-2">sablonok megosztására</a>.
             A csoport részletező oldalán lehetősége van tagok és tulajdonosok fölvételére, tagok törlésére, valamint <a href="#s-3-2">sablonok megosztására</a>.
         </p>
         </p>
     </section>
     </section>
@@ -232,7 +231,7 @@
         <h4>SFTP-n</h4>
         <h4>SFTP-n</h4>
         <p>
         <p>
             Az adattár távolról is elérhető SFTP protokollon.
             Az adattár távolról is elérhető SFTP protokollon.
-            Ezt számos kliensprogram támogatja, ilyen a 
+            Ezt számos kliensprogram támogatja, ilyen a
             <a href="http://winscp.net/eng/index.php">WinSCP</a> és a
             <a href="http://winscp.net/eng/index.php">WinSCP</a> és a
             <a href="http://code.google.com/p/win-sshfs/">win-sshfs</a>.
             <a href="http://code.google.com/p/win-sshfs/">win-sshfs</a>.
             Az SFTP kapcsolódáshoz privát kulcs használata szükséges.
             Az SFTP kapcsolódáshoz privát kulcs használata szükséges.

one/static/style/base.less

@@ -312,11 +312,14 @@ body > footer {
         box-shadow: 0 0 20px rgba(0,0,0,0.2);
         box-shadow: 0 0 20px rgba(0,0,0,0.2);
         padding: 20px;
         padding: 20px;
         margin: 10px;
         margin: 10px;
+        &.teacher {
+            border-left: 3px solid #0b4599;
+        }
     }
     }
     p {
     p {
         margin-top: 20px;
         margin-top: 20px;
     }
     }
-    .teacher {
+    p.teacher {
         background: #ddd;
         background: #ddd;
         padding: 20px;
         padding: 20px;
         border-left-width: 3px;
         border-left-width: 3px;