diff --git a/routes/routes-project.js b/routes/routes-project.js index bcbe71fdc3436d6c9d7c1b0461f71a2a070c7db5..2c4e25a843151b0507288865a14378671d73ab82 100644 --- a/routes/routes-project.js +++ b/routes/routes-project.js @@ -383,7 +383,6 @@ module.exports = function (app) { app.get('/projectlist', async function(req, res){ let projectArr = [] - let websiteArr = [] let isProject = true let firstId = 0 let webname = ""; @@ -405,45 +404,38 @@ module.exports = function (app) { if (projectData[i].name == "template_gitlab_page") { continue } - // M4_LAB logo for all projects that do not have logo if (projectData[i].avatar_url == null) { projectData[i].avatar_url = "https://m4lab.hft-stuttgart.de/img/footer/M4_LAB_LOGO_Graustufen.png" } - + // for all projects that have no description + if (projectData[i].description == "") { + projectData[i].description = "- no description -" + } // websites if (projectData[i].tag_list.includes('website')) { // customize website name if (projectData[i].name == "Visualization") { - webname = "https://transfer.hft-stuttgart.de/pages/visualization" + projectData[i].web_url = "https://transfer.hft-stuttgart.de/pages/visualization" } else if (projectData[i].name == "IN-Source") { - webname = "https://transfer.hft-stuttgart.de/pages/INsource" + projectData[i].web_url = "https://transfer.hft-stuttgart.de/pages/INsource" } else if (projectData[i].name == "3DS_Visualization_Cesium") { - webname = "https://transfer.hft-stuttgart.de/pages/3ds_visualization_cesium" + projectData[i].web_url = "https://transfer.hft-stuttgart.de/pages/3ds_visualization_cesium" } else { - webname = "https://transfer.hft-stuttgart.de/pages/"+projectData[i].name + projectData[i].web_url = "https://transfer.hft-stuttgart.de/pages/"+projectData[i].name } - let website = { - logo: projectData[i].avatar_url, - name: projectData[i].name, - weburl: webname, - desc: projectData[i].description - } - websiteArr.push(website) + } - // project repo - else { - let project = { - logo: projectData[i].avatar_url, - name: projectData[i].name, - weburl: projectData[i].web_url, - desc: projectData[i].description - } - projectArr.push(project) + let project = { + logo: projectData[i].avatar_url, + name: projectData[i].name, + weburl: projectData[i].web_url, + desc: projectData[i].description } + projectArr.push(project) } firstId = projectData[projectData.length-1].id @@ -451,8 +443,7 @@ module.exports = function (app) { } res.render(lang+'/project/projectList', { - project: projectArr, - website: websiteArr + project: projectArr // http://pagination.js.org }) }) diff --git a/views/DE/project/projectList.pug b/views/DE/project/projectList.pug index b21a0b0b4bc30a3aa0fd6b896b91d43f012b7038..b89bc77eea6969fa36e25fd8d2ca81333795010f 100644 --- a/views/DE/project/projectList.pug +++ b/views/DE/project/projectList.pug @@ -7,30 +7,49 @@ html(lang="de") link(rel="stylesheet", type="text/css", href="https://transfer.hft-stuttgart.de/css/bootstrap.min.css") link(rel="stylesheet", type="text/css", href="https://transfer.hft-stuttgart.de/css/m4lab.css") link(rel="stylesheet", href="https://use.fontawesome.com/releases/v5.8.2/css/all.css", integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay", crossorigin="anonymous") + style. + .title-container { + position: relative; + color: white; + } + .card-title-bottom-left { + position: absolute; + bottom: 0px; + width: 100%; + color: black; + font-weight: bold; + background: rgb(255, 255, 255, 0.5); + text-align: left; + padding: 5px + } + + .card-img-top { + height: 15vw; + object-fit: cover; + } body div(class="container") div(class="pt-4 pb-4") input(id="searchInput", class="form-control form-control-dark w-100", type="text", placeholder="Suchen Sie hier nach Themen und Projekten", onkeyup="searchFunction()") h3(class="mb-3 font-weight-bold") Projekte - table(class="table table-striped") - tbody - for item in project - tr - td - img(src=item.logo, width="40", height="40") - td <a href="#{item.weburl}" target="_blank">#{item.name}</a> - td #{item.desc} - if website.length > 0 - h3(class="mb-3 font-weight-bold") Websites - table(class="table table-striped") - for item in website - tr - td - img(src=item.logo, width="40", height="40") - td <a href="#{item.weburl}" target="_blank">#{item.name}</a> - td #{item.desc} + div(class="container") + | <div class="row"> + for item in project + div(class="py-4 col-sm") + div(class="card", style="width: 18rem;") + div(class="title-container") + h5(class="card-title-bottom-left") #{item.name} + img(class="card-img-top", src=item.logo) + div(class="card-body") + 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> + | </div> // jQuery script(src="https://code.jquery.com/jquery-3.3.1.min.js") @@ -39,31 +58,28 @@ html(lang="de") script(src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous") // Header script(src="https://transfer.hft-stuttgart.de/js/headfoot.js") + + // search: https://www.w3schools.com/howto/howto_js_filter_lists.asp script. function searchFunction() { - var input, filter, rows, col, txtValue; - var isFound = true; - input = document.getElementById("searchInput"); - filter = input.value.toUpperCase(); + var input = document.getElementById("searchInput") + var filter = input.value.toUpperCase() - rows = document.getElementsByTagName("tr"); - for (i = 0; i < rows.length; i++) { - cols = rows[i].getElementsByTagName("td"); - // check all cos - for (j = 0; j < cols.length; j++) { - txtValue = cols[j].textContent || cols[j].innerText; - if (txtValue.toUpperCase().indexOf(filter) > -1) { - isFound = true; - break; - } else { - isFound = false; - } - } - if (isFound) { - rows[i].style.display = "block"; - } - else { - rows[i].style.display = "none"; + var cards = document.getElementsByClassName("col-sm") + var cardTitle, cardText, titleValue, textValue + + var i + for (i = 0; i < cards.length; i++) { + cardTitle = cards[i].getElementsByClassName("card-title-bottom-left"); + cardText = cards[i].getElementsByClassName("card-text"); + + titleValue = cardTitle[0].textContent || cardTitle[0].innerText; + textValue = cardText[0].textContent || cardText[0].innerText; + + if (titleValue.toUpperCase().indexOf(filter) > -1 || textValue.toUpperCase().indexOf(filter) > -1) { + cards[i].style.display = "block"; + } else { + cards[i].style.display = "none"; } } } \ No newline at end of file