diff --git a/help/gitlab-pages.html b/help/gitlab-pages.html
index c35b78d034de8818c247aec0a37006ab01521750..09343d4c19b8979a43c989fbba35b41e584b6286 100644
--- a/help/gitlab-pages.html
+++ b/help/gitlab-pages.html
@@ -55,7 +55,7 @@
<small>Gitlab-pages Projekt erstellen</small></a>
</h3>
</div>
- <div id="collapse1" class="card-body collapse" style="">
+ <div id="collapse1" class="card-body collapse">
<p>
Um ein eigenes Gitlab-pages Projekt zu erstellen und damit eine eigene Projektseite zu erstellen, führen Sie folgende Schritte aus:
</p>
@@ -73,8 +73,19 @@
<li> Nun können Sie ihr Projekt befüllen. Tragen Sie mindestens die Grundinformationen wie <em> Project name </em> und <em> Project description </em> ein.<img src="/img/help/createproject.png" width="95%"/> </li>
<li> Klicken Sie auf <em> Create project</em></li>
<li>
- Ihr Projekt wird nun erstellt und enthält automatisch die notwendigen Grundeinstellungen für das Publizieren einer Website über die Funktion Pages. Vor allem wird im Repositorium der Ordner <em> Public </em> angelegt. <img src="/img/help/folderpublic.png" width="95%"/> <br/>
- In diesem Ordner befinden sich die Dateien <em> index.html, aktuelles.html </em>, <em> style.css </em> und <em>settings.js</em>. Diese sorgen für Inhalt (aktuelles.html, index.html) und Aussehen (style.css) der statischen Webseite und enthalten allgemeine Projektinformationen (settings.js). Direkt nach Projekterstellung enthalten sie zunächst nur allgemeine, grundsätzliche Informationen aus dem Template. <img src="/img/help/content_public.png" width="95%"/>
+ Ihr Projekt wird nun erstellt und enthält automatisch die notwendigen Grundeinstellungen für das Publizieren einer Website über die Funktion Pages. Vor allem wird im Repositorium der Ordner <em> Public </em> angelegt.
+ <img src="/img/help/folderpublic.png" width="95%"/> <br/>
+ <p> This is the structure of a simple template.</p>
+ <p><em>assets</em> folder: You place in this folder files that should be common for all the subpages of your gitlab page. E.g. you should place any personal avatars or partner logos in the corresponding folders (images, logos).</p>
+ <p><em>home</em> folder: This is the default folder where you place your main template.</p>
+ <p><em>settings.js</em>: This is the file where you select the settings for your gitlab page.</p>
+ <img src="/img/help/content_public.jpg"/>
+ <p>You should not make changes to some of the files.</p>
+ <p>Red: Those files should not be changed.</p>
+ <p>Orange: Those files should be replaced by your own files. The filename should remain the same.</p>
+ <p>Green: Those files you can edit.</p>
+ <p>Blue: In those folders you can add your additional files. In case of assets, images, logos etc. In case of a template folder, your custom css, javascript or any other files.</p>
+ <img src="/img/help/content_public_colors.jpg"/>
</li>
<li>
Um Ihre eigenen Projektinhalte zu veröffentlichen, können Sie entweder eine komplett eigene HTML-Seite erzeugen oder sich an unseren Vorgaben aus dem Template orientieren. Eine Anleitung zur Verwendung unserer Vorlage finden Sie im Bereich <a href="#template_Text">Gitlab-pages Template benutzen</a>
@@ -98,7 +109,7 @@
<small>Gitlab-pages Projekt ändern</small></a>
</h3>
</div>
- <div id="collapse2" class="card-body collapse" style="">
+ <div id="collapse2" class="card-body collapse">
<p>
Nachdem Ihr Projekt das erste Mal veröffentlicht wurde, möchten Sie sicherlich Änderungen an der Seite vornehmen. Dafür gehen Sie wie folgt vor:
<ol>
@@ -139,7 +150,7 @@
<small>Gitlab-pages Seite entfernen</small></a>
</h3>
</div>
- <div id="collapsedel" class="card-body collapse" style="">
+ <div id="collapsedel" class="card-body collapse">
<p>
Um Ihre gitlab-pages Seite zu entfernen, gibt es zwei Möglichkeiten. Sie können entweder das gesamte Projekt löschen, oder aber nur die öffentliche Seite, das Projekt aber behalten, um daran Änderungen vorzunehmen. Um nur die Seite, nicht aber das Projekt an sich zu löschen, gehen Sie wie folgt vor:
<ol>
@@ -206,11 +217,11 @@
<div class="card">
<div class="card-header">
<h3 class="card-title">
- <a class="collapsed" data-toggle="collapse" href="#collapse7" aria-expanded="false" aria-controls="collapse7">
+ <a class="collapsed" data-toggle="collapse" href="#collapse3" aria-expanded="false" aria-controls="collapse3">
<small>Erste Schritte</small></a>
</h3>
</div>
- <div id="collapse7" class="card-body collapse" style="">
+ <div id="collapse3" class="card-body collapse">
<p>
Um unsere Vorlage zu benutzen, müssen Sie folgende Schritte ausführen:
</p>
@@ -223,27 +234,43 @@
</p>
<img src="/img/help/select_settings.png" width="95%"/>
<p>
- Passen Sie die Werte für projektname und projektseitenlink an, indem Sie die entsprechenden Werte in die Anführungszeichen schreiben.
+ Those are the default values for the social networks/personal website of a participant and the default avatar. It is recommended not to change them, but you can add another social network if you want.
</p>
- <img src="/img/help/edit_settings.png" width="95%"/>
- <p>
- Klicken Sie anschließend auf <em> commit changes </em>, um die Änderungen zu speichern.
+ <img src="/img/help/default_settings.png"/>
+ <p>The switches control which parts of you gitlab page should turn on or off. E.g. if you want a single page and not a menu then you change the menu value to OFF.</p>
+ <img src="/img/help/switches.png"/>
+ <p>Here you change the project name. If the switch for the project name is OFF then it will not be visible.</p>
+ <img src="/img/help/pr_name.png"/>
+ <p>Here you change the menu of your gitlab page. A menu can be linked with a folder/template or with an external link, e.g. a demo. You can add or remove menu entries. You hide the menu when the switch is OFF.
+ Don't forget to add the forward slash at the end of a menu link if it is pointing to a folder.
</p>
- </li>
- <li> Anpassen der Kontaktperson in <em> kontakt.html </em>
- <p><b> Wichtig: </b> Wird die Kontaktperson nicht angepasst, wird das Projekt nicht auf unseren Servern ausgerollt und die deployment-Pipeline wirft einen Fehler
+ <img src="/img/help/menu.png"/>
+ <p>Here you change the participants. You can use default values for a social network (They point to HFT's social networks) or you can use your own profiles.
+ You can also add your personal webpage. You can add or remove a social network. You can also use a personal avatar or the default one (DEFAULT.avatar).
</p>
- <p>
- Klicken Sie dazu im Ordner <em> public </em> auf die Datei <em> kontakt.html </em> und editieren Sie die Datei.
+ <img src="/img/help/partic.png"/>
+ <p>
+ Here is an example of two participants.
+ </p>
+ <img src="/img/help/partic2.png"/>
+ <p>
+ Here you change the footer logos of a project's partners. If you don't want a logo to link to an external website then use the href value EMPTY_LINK. The title will appear when you hover the mouse over a logo.
</p>
- <img src="/img/help/select_contact.png" width="95%"/>
+ <img src="/img/help/f_logos.png"/>
<p>
- Passen Sie die Kontaktperson und die Mailadresse an, indem Sie alle Vorkommen von Max Mustermann und die Mailadresse durch Ihre Werte ersetzen.
+ When you use the generic template there is an additional folder called templates. Inside this folder you will find all the available templates.
+ In order to use a template, you have to copy the folder from templates/<template name> and paste it (when you edit your pages locally) in the root folder.
+ Then it’s a good practice to rename this folder with the menu text you want to link it. Notice that the home page always points to the home folder.
+ That means if you want to use a template as home page then you have to rename the folder to home.
</p>
- <img src="/img/help/edit_contact.png" width="95%"/>
+ <img src="/img/help/generic.png"/>
+
<p>
Klicken Sie anschließend auf <em> commit changes </em>, um die Änderungen zu speichern.
</p>
+
+ <img src="/img/help/edit_settings.png" width="95%"/>
+
</li>
</ol>
</div>
@@ -252,11 +279,35 @@
<div class="card">
<div class="card-header">
<h3 class="card-title">
- <a class="collapsed" data-toggle="collapse" href="#collapse3" aria-expanded="false" aria-controls="collapse3">
+ <a class="collapsed" data-toggle="collapse" href="#collapse4" aria-expanded="false" aria-controls="collapse4">
+ <small>Avatar hinzufügen</small></a>
+ </h3>
+ </div>
+ <div id="collapse4" class="card-body collapse">
+ <p> To add a personal avatar:
+ <ol>
+ <li>
+ Öffnen Sie den Ordner <em> public/assets/images </em>
+ </li>
+ <li>
+ Klicken Sie auf das + im Oberen Bereich, und anschließend auf <em> Upload File </em>
+ </li>
+ <li>
+ It is recommended the avatar to be square or portrait oriented. Also, better do not upload large avatars (>500px).
+ </li>
+ </ol>
+ </p>
+ </div>
+ </div>
+ <br/>
+ <div class="card">
+ <div class="card-header">
+ <h3 class="card-title">
+ <a class="collapsed" data-toggle="collapse" href="#collapse5" aria-expanded="false" aria-controls="collapse5">
<small>Logo hinzufügen</small></a>
</h3>
</div>
- <div id="collapse3" class="card-body collapse" style="">
+ <div id="collapse5" class="card-body collapse">
<p> Um ein eigenes Projektlogo zum Projekt hinzuzufügen, müssen Sie folgende Schritte ausführen:
<ol>
<li>
@@ -288,14 +339,17 @@
<div class="card">
<div class="card-header">
<h3 class="card-title">
- <a class="collapsed" data-toggle="collapse" href="#collapse4" aria-expanded="false" aria-controls="collapse4">
+ <a class="collapsed" data-toggle="collapse" href="#collapse6" aria-expanded="false" aria-controls="collapse6">
<small>Neue Seite hinzufügen</small></a>
</h3>
</div>
- <div id="collapse4" class="card-body collapse" style="">
+ <div id="collapse6" class="card-body collapse">
<p>
Um Ihrem Projekt neue Seiten hinzuzufügen, führen Sie folgende Schritte aus:
<ol>
+ <li>
+ Visit the templates folder and edit the index.html file. Select all the text inside this file and copy it. Then click the button <em>cancel</em>.
+ </li>
<li>
Klicken Sie im Ordner <em> public </em> auf das +, das sich oben neben dem Pfad befindet
<img src="/img/help/publicplus.png" width="95%"/>
@@ -303,38 +357,10 @@
<li>
Klicken Sie dort auf <em> New File </em>
</li>
+ <li>Paste the text you copied from the template</li>
<li>
- Geben Sie einen Dateinamen (<b> wichtig: </b> Endung .html) an und fügen Sie folgenden Standardtext ein:
- <textarea rows="28" cols="64" disabled="true">
-<!DOCTYPE html>
-<html>
- <head>
- <meta charset="utf-8">
- <meta name="generator" content="GitLab Pages">
- <title>Neue Seite</title>
- <link rel="stylesheet" href="style.css">
- </head>
- <body>
- <div id="topbar">
- <div id="menu" class="navbar"></div>
- </div>
- <div class="content">
- <h1 id='projectname'></h1> <!--Projektname kommt aus settings.js, hier nichts einfügen-->
-
- <!-- ÄNDERUNGEN NUR NACH DIESER ZEILE -->
-
- <h2> Seitentitel: </h2>
+ Geben Sie die Dateinamen index.html (<b> wichtig: </b> Endung .html)
- <p>
- Content
- </p>
-
- <!-- KEINE ÄNDERUNGEN NACH DIESER ZEILE -->
- </div>
- <script src="settings.js"> </script>
- </body>
-</html>
- </textarea>
<img src="/img/help/editnewpage.png" width="95%"/>
</li>
<li>
@@ -348,50 +374,6 @@
</p>
</div>
</div>
- <br/>
- <div class="card">
- <div class="card-header">
- <h3 class="card-title">
- <a class="collapsed" data-toggle="collapse" href="#collapse5" aria-expanded="false" aria-controls="collapse5">
- <small>Menü bearbeiten</small></a>
- </h3>
- </div>
- <div id="collapse5" class="card-body collapse" style="">
- <p>
- Wenn Sie das Menü am oberen Seitenrand bearbeiten wollen, führen Sie folgende Schritte durch:
- <ol>
- <li>
- Öffnen Sie im Ordner <em> public </em> die Datei <em>settings.js</em> und editieren Sie diese.
- </li>
- <li>
- Im Menüblock kopieren Sie einen bereits bestehenden Teil und fügen diesen im Anschluss ein. Ein solcher Block besteht dabei aus folgenden Anweisungen:
- <img src="/img/help/settingmenublock.png" width="95%"/>
- <ul>
- <li>
- <em>//Link 4: Kontakt </em> Dies ist ein Kommentar, der der Ordnung und Verständlichkeit des Codes dient
- </li>
- <li>
- <em>let NAME = document.createElement("a") </em> Dies legt einen neuen Eintrag fest
- </li>
- <li>
- <em>NAME.href = "addresse" </em> Dies legt die Adresse fest, auf die der neue Menüeintrag verweist. Dies kann zum Beispiel eine neu angelegte Seite sein.
- </li>
- <li>
- <em>NAME.innerHTML="" </em> Dies legt den Text des Eintrags fest, also was später im Menü angezeigt wird
- </li>
- <li>
- <em> menu.appendChild(NAME); </em> Dies fügt letztlich den Eintrag dem Menü hinzu.
- </li>
- </ul>
- </li>
- <li>
- Nachdem Sie den Block entsprechend Ihrer Wünsche bearbeitet haben, klicken Sie auf <em> Commit changes </em>, um Ihre Änderungen zu speichern.
- <img src="/img/help/settingsnewmenublock.png" width="95%"/>
- </li>
- </ol>
- </p>
- </div>
- </div>
</div>
</div>
</div>
diff --git a/img/help/content_index_marked.png b/img/help/content_index_marked.png
index c54492a44508edb71cefdf6ad99d4cd3517cce61..316ea7d379cba0e3a3b8038c034a6c204d7bcb4a 100644
Binary files a/img/help/content_index_marked.png and b/img/help/content_index_marked.png differ
diff --git a/img/help/content_public.jpg b/img/help/content_public.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..1838b2dff9f221870bf3a9cea6a49050dda46df7
Binary files /dev/null and b/img/help/content_public.jpg differ
diff --git a/img/help/content_public.png b/img/help/content_public.png
deleted file mode 100644
index 1b1c9ab14457f56294b5c7985848db81173e64ff..0000000000000000000000000000000000000000
Binary files a/img/help/content_public.png and /dev/null differ
diff --git a/img/help/content_public_colors.jpg b/img/help/content_public_colors.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..6b3d9bbbd2b5c97a7b16061c3be1959bfa01a449
Binary files /dev/null and b/img/help/content_public_colors.jpg differ
diff --git a/img/help/default_settings.png b/img/help/default_settings.png
new file mode 100644
index 0000000000000000000000000000000000000000..b5e8e805822308b06773ab1d8cc37dfadc0f0570
Binary files /dev/null and b/img/help/default_settings.png differ
diff --git a/img/help/edit_contact.png b/img/help/edit_contact.png
deleted file mode 100644
index 5b4c4c9730b01043c2cbac2010f06d883edbd8b0..0000000000000000000000000000000000000000
Binary files a/img/help/edit_contact.png and /dev/null differ
diff --git a/img/help/edit_settings.png b/img/help/edit_settings.png
index 18ee119d079e08e62554de1a83fcaff734a8e8df..b7261e942f0ae2151324e7afe4e46c9f2ac4f81e 100644
Binary files a/img/help/edit_settings.png and b/img/help/edit_settings.png differ
diff --git a/img/help/editnewpage.png b/img/help/editnewpage.png
index eadd4b3632b0cac9325b7ec57e59942013b85488..e57f6e38f894269be8facf5ff9dfb5df3c8892f9 100644
Binary files a/img/help/editnewpage.png and b/img/help/editnewpage.png differ
diff --git a/img/help/f_logos.png b/img/help/f_logos.png
new file mode 100644
index 0000000000000000000000000000000000000000..620c58792b7d4362a93a322585038d94f93f96e2
Binary files /dev/null and b/img/help/f_logos.png differ
diff --git a/img/help/generic.png b/img/help/generic.png
new file mode 100644
index 0000000000000000000000000000000000000000..32497460abdfbbabe4f3f7538ab84d7c79e59dd7
Binary files /dev/null and b/img/help/generic.png differ
diff --git a/img/help/menu.png b/img/help/menu.png
new file mode 100644
index 0000000000000000000000000000000000000000..ada3a1dacaebd3bb64ab6900cd6be4ee214deeb1
Binary files /dev/null and b/img/help/menu.png differ
diff --git a/img/help/partic.png b/img/help/partic.png
new file mode 100644
index 0000000000000000000000000000000000000000..05041efcbf3b42e1f8986b8cb07fc203f9d286fb
Binary files /dev/null and b/img/help/partic.png differ
diff --git a/img/help/partic2.png b/img/help/partic2.png
new file mode 100644
index 0000000000000000000000000000000000000000..d4fccc4208f715a951d2116bd64da1301120eb8b
Binary files /dev/null and b/img/help/partic2.png differ
diff --git a/img/help/pr_name.png b/img/help/pr_name.png
new file mode 100644
index 0000000000000000000000000000000000000000..fe610d512c67cf464dea5762e3ce9e0d99dcd252
Binary files /dev/null and b/img/help/pr_name.png differ
diff --git a/img/help/publicplus.png b/img/help/publicplus.png
index ad42dbc56b96a2ab02f419b38398789a5a1da26f..23a7c042bf52ad74184a0f6194a4fe163055d6d2 100644
Binary files a/img/help/publicplus.png and b/img/help/publicplus.png differ
diff --git a/img/help/select_contact.png b/img/help/select_contact.png
deleted file mode 100644
index a6727c813d12323aea54048b0e061861077b3947..0000000000000000000000000000000000000000
Binary files a/img/help/select_contact.png and /dev/null differ
diff --git a/img/help/select_settings.png b/img/help/select_settings.png
index b2a165fe361c0f2861e5d08c012022ca53523037..2996ce8341133885329a0791502a33961bcb54d6 100644
Binary files a/img/help/select_settings.png and b/img/help/select_settings.png differ
diff --git a/img/help/switches.png b/img/help/switches.png
new file mode 100644
index 0000000000000000000000000000000000000000..fa54843436fad8958ce0df52b9aef88e6c2ec752
Binary files /dev/null and b/img/help/switches.png differ