added new mailinglists page

routes/routes-project.js

@@ -28,7 +28,8 @@ module.exports = function (app) {
                     name: mailinglistOverview[i].name,
                     src: mailinglistOverview[i].src,
                     projectstatus: mailinglistOverview[i].projectstatus,
-                    project_title: mailinglistOverview[i].project_title
+                    project_title: mailinglistOverview[i].project_title,
+                    keywords: mailinglistOverview[i].keywords
                 });
             }
 

views/DE/project/mailinglists.pug

@@ -2,9 +2,11 @@ html(lang="de")
   head
     title= "Mailinglisten"
     meta(charset="UTF-8")
-    meta(name="viewport", content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no")
+    meta(name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no")
     link(rel="stylesheet", type="text/css", href="https://transfer.hft-stuttgart.de/css/bootstrap/bootstrap.css")
     link(rel="stylesheet", href="https://use.fontawesome.com/releases/v5.8.2/css/all.css", integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay", crossorigin="anonymous")
+    link(rel="stylesheet" href="/fonts/ionicons.min.css")
+    link(rel="stylesheet" href="assets/css/Testimonials.css")
     style.
         .collapse {
             display: none;
@@ -27,35 +29,68 @@ html(lang="de")
             transition-property: height,visibility;
         }
   body
-    <hr />
-    div()
-        h5(align="left") Aktive Mailinglisten
-        div(class="flex-container" style="align-items:flex-start")
-            div(class="table")
-                table(border="0" id="listtable" class="table table-striped")
-                    thead
-                        tr
-                            th Name
-                            th Link
-                            th zugeh. Projekt
-                    tbody
-                        for item in mailinglists
-                            if item.projectstatus == '1'
-                                tr
-                                    td #{item.name}
-                                    td <a href="#{item.src}">#{item.src}</a>
-                                    td <a href='projectoverview?projectID=#{item.id}'>#{item.project_title}</a>
-    <hr />
-    div()
-        h5(align="left") Eintragung in Mailingliste
-        p() Wenn Sie sich in eine Mailingliste eintragen wollen, folgen Sie folgender Anleitung:
+    div(class="container")
+        div(class="row")
+            div(class="col-md-12" style="margin-bottom: 40px;")
+                img(class="mx-auto" src="/img/Mailinglisten.jpg" width="100%")
+    div(class="container")
+        div(class="row")
+            div(class="col-md-12" style="margin-bottom: 30px;")
+                h4(class="text-center") Durch Mailinglisten können Sie interessierten Personen<br/> <strong>regelmäßig Informationen</strong> zu Ihrem Projekt oder Thema zukommen lassen.<br/> Ebenso können Sie über ein Abonnement in einer Mailingliste Mitglied des Verteilers<br/>werden und so <strong>im Austausch</strong> bleiben. <br/>
+            div(class="col-md-12" style="margin-bottom: 30px;")
+                h2(class="text-center" style="color: #8a348b;") <strong>Aktive Mailinglisten</strong>
+                div(class="table-responsive table-borderless")
+                    table(class="table table-striped table-bordered table-hover")
+                        thead()
+                            tr()
+                                th Name
+                                th Link
+                                th Projekte
+                                th Keywords
+                        tbody()
+                            for item in mailinglists
+                                if item.projectstatus == '1'
+                                    tr
+                                        td #{item.name}
+                                        td <a href="#{item.src}">#{item.src}</a>
+                                        td <a href='projectoverview?projectID=#{item.id}'>#{item.project_title}</a>
+                                        td #{item.keywords}
+    div(id="aboText" style="background-color: #dadada;margin-top: 40px;")
+        div(class="container")
+            div(class="row" style="margin-bottom: 0;padding-top: 20px;padding-bottom: 20px;")
+                div(class="col-lg-12" style="background-color: #ffffff;")
+                    h2(class="text-center" style="color: #8a348b;margin-top: 15px;") <strong> Mailingliste abonnieren </strong>
+                div(class="col-md-4 col-lg-6" style="background-color: #ffffff;")
+                    p() Das Deutsche Forschungsnetz (DFN) bietet Mailinglisten für Wissenschaft und Forschung an. Mailinglisten sind E-Mail-Verteilerlisten, d.h. Personen, die sich für Ihr Forschungsthema interessieren, können sich über das DFN registrieren und erhalten im Anschluss daran regelmäßig die über die Mailinglisten geteilten Informationen.
+                    p() Sie als Verteiler senden die zu versendende Mail folglich nur noch an die festgelegte Mailinglistenadresse und das Programm leitet die Nachricht an alle registrierten Personen weiter.
+                div(class="col-md-4 col-lg-6 justify-content-between flex-wrap" style="background-color: #ffffff;")
+                    div(class="justify-content-between order-2" style="background-color: rgba(255,255,255,0);")
+                        p(class="text-left d-flex d-md-flex flex-row flex-grow-1 flex-shrink-1 flex-fill justify-content-between align-items-start align-content-start align-self-start flex-wrap order-1 justify-content-md-center align-items-md-start justify-content-lg-start") Oben finden Sie eine Übersicht über die aktiven Mailinglisten. Wenn Sie sich in eine Mailingliste eintragen wollen, dann klicken Sie auf den entsprechend hinterlegten Link.
+                        p() Es öffnet sich daraufhin die Hauptseite der Liste. Nach der Auswahl des Buttons „Abonnieren“, können Sie Ihre Mailadresse hinterlegen und sich in die Liste eintragen.
+                    a(class="btn btn-primary text-center d-inline-flex d-lg-flex flex-column flex-grow-1 flex-shrink-1 flex-fill justify-content-between align-items-baseline align-content-center align-self-baseline flex-wrap order-3 mb-auto justify-content-md-center align-items-md-end align-items-lg-center justify-content-xl-center mx-auto" role="button" style="background-color: #8a348b;" href="https://www.listserv.dfn.de/sympa/help") <strong>Dokumentation bei DFN</strong>
+                    a(class="btn btn-primary text-center d-inline-flex d-lg-flex flex-column flex-grow-1 flex-shrink-1 flex-fill justify-content-between align-items-baseline align-content-center align-self-baseline flex-wrap order-3 justify-content-md-center align-items-md-end align-items-lg-center justify-content-xl-center mx-auto" role="button" style="background-color: #8a348b; margin-top:10px; margin-bottom:10px;" href="/downloads/Handout_Mailinglisten_Abonnieren.pdf") <strong>Erste Schritte</strong>
+    div(id="newListText" style="background-color: #dadada;margin-top: 0px;")
+        div(class="container")
+            div(class="row" style="margin-bottom: 0;padding-top: 20px;padding-bottom: 20px;")
+                div(class="col-lg-12" style="background-color: #ffffff;")
+                    h2(class="text-center" style="color: #8a348b;margin-top: 15px;") <strong>Neue Mailingliste erstellen</strong>
+                div(class="col-md-4 col-lg-6" style="background-color: #ffffff;")
+                    p() Über das Transferportal können Sie selbst eine Liste zu Ihrem Projekt anlegen, um mit Ihren Partnern in Verbindung zu bleiben.
+                    p() Folgen Sie hierzu der Anleitung des DFN.
+                div(class="col-md-4 col-lg-6" style="background-color: #ffffff;")
+                    a(class="btn btn-primary text-center d-lg-flex justify-content-center align-items-center align-content-center align-self-center align-items-lg-end mx-auto" role="button" style="background-color: #8a348b;" href="https://www.listserv.dfn.de/sympa/help/admin") <strong>Tutorial bei DFN</strong>
+                    a(class="btn btn-primary text-center d-inline-flex d-lg-flex flex-column flex-grow-1 flex-shrink-1 flex-fill justify-content-between align-items-baseline align-content-center align-self-baseline flex-wrap order-3 justify-content-md-center align-items-md-end align-items-lg-center justify-content-xl-center mx-auto" role="button" style="background-color: #8a348b; margin-top:10px; margin-top:10px;" href="/downloads/Handout_Mailinglisten_Erstellen.pdf") <strong>Erste Schritte</strong>
+    div(id="addListText" style="background-color: #dadada;margin-top: 0px;")
+        div(class="container")
+            div(class="row" style="margin-bottom: 0;padding-top: 20px;padding-bottom: 20px;")
+                div(class="col-lg-12" style="background-color: #ffffff;")
+                    h2(class="text-center" style="color: #8a348b;margin-top: 15px;") <strong>Neue Mailingliste eintragen</strong>
+                div(class="col-xl" style="background-color: #ffffff;")
+                    p() Um Ihre beim DFN angelegte Mailingliste hier aufzunehmen, schicken Sie uns bitte eine Email an <a href="mailto:support-transfer@hft-stuttgart.de">support-transfer@hft-stuttgart.de</a>
     // jQuery
     script(src="https://code.jquery.com/jquery-3.3.1.min.js")
     script(src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js", integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1", crossorigin="anonymous")
     // Bootstrap
     script(src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous")
     // Header
-    if isUserAuthenticated
-        script(src="/js/headfootLogout.js")
-    else
-        script(src="/js/headfoot.js")
+    script(src="/js/headfootLogout.js")
\ No newline at end of file