projectList using Bootstrap cards

routes/routes-project.js

@@ -357,7 +357,8 @@ module.exports = function (app) {
   })
 
   async function getProjectsFromGitlab(perPage, idAfter) {
-    return await axios.get('https://transfer.hft-stuttgart.de/gitlab/api/v4/projects?pagination=keyset&per_page='+perPage+'&order_by=id&sort=asc&id_after='+idAfter)
+    // public projects
+    return await axios.get('https://transfer.hft-stuttgart.de/gitlab/api/v4/projects?visibility=public&pagination=keyset&per_page='+perPage+'&order_by=id&sort=asc&id_after='+idAfter)
   }
 
   app.get('/projectlist', async function(req, res){
@@ -374,7 +375,7 @@ module.exports = function (app) {
       }
       else {
         for(let i = 0; i < projectData.length; i++){
-          console.log(projectData[i].id)
+          //console.log(projectData[i].id)
           if (projectData[i].avatar_url == null) {
             projectData[i].avatar_url = "https://m4lab.hft-stuttgart.de/img/footer/M4_LAB_LOGO_Graustufen.png"
           }
@@ -388,12 +389,13 @@ module.exports = function (app) {
         }
 
         firstId = projectData[projectData.length-1].id
-        console.log('firstId: '+firstId)
+        //console.log('firstId: '+firstId)
       }
       
     }
     res.render(lang+'/project/projectList', {
       project: projectArr
+      // http://pagination.js.org
     })
 /*
     let projects = await getProjectsFromGitlab(10, 0)

views/DE/project/projectList.pug

@@ -10,22 +10,32 @@ html(lang="de")
 
   body
     div(class="container")
-        // Non-active projects
         h3(class="mb-3 font-weight-bold") Projekte
-        table(class="table table-striped")
-            thead
-                tr
-                    th Logo
-                    th Name
-                    th Description
-            tbody
+
+        - var colCounter = 0
+        div(class="container")
         for item in project
-                    tr
-                        //td #{item.status}
-                        td
-                            img(src=item.logo, width="40", height="40")
-                        td <a href="#{item.weburl}" target="_blank">#{item.name}</a>
-                        td #{item.desc}
+            if colCounter == 0
+                - colCounter = 1
+                | <div class="py-4 row">
+            if colCounter <= 3
+                div(class="col-sm")
+                    div(class="card", style="width: 18rem;")
+                        img(class="card-img-top", src=item.logo, alt="Project logo")
+                        div(class="card-body")
+                            h5(class="card-title") #{item.name}
+                            div(class="row")
+                                div(class="col-9")
+                                    p(class="card-text") #{item.desc}
+                                div(class="col-3")
+                                    svg(class="bi bi-chevron-right", width="32", height="32", viewBox="0 0 20 20", fill="currentColor", xmlns="http://www.w3.org/2000/svg")
+                                        | <a xlink:href="#{item.weburl}" target="_blank"><path fill-rule="evenodd" d="M6.646 3.646a.5.5 0 01.708 0l6 6a.5.5 0 010 .708l-6 6a.5.5 0 01-.708-.708L12.293 10 6.646 4.354a.5.5 0 010-.708z"></path></a>
+                - colCounter++
+            if colCounter == 4
+                | </div>
+                - colCounter = 0
+        
+        //h3(class="mb-3 font-weight-bold") Websites
 
     // jQuery
     script(src="https://code.jquery.com/jquery-3.3.1.min.js")