diff --git a/.gitignore b/.gitignore
index 55c1218005cf228c4e2a8393b62cf583ca615c06..30bc1627986aa5d1e6aebc1718de71eaee6021c5 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,3 +1 @@
-/node_modules
-sp-project-metadata.xml
-sp-project-metadata-m4lab.xml
+/node_modules
\ No newline at end of file
diff --git a/views/DE/project/projectList_backup.pug b/views/DE/project/projectList_backup.pug
new file mode 100644
index 0000000000000000000000000000000000000000..6a6047bdcea4b9ea6bcda905f04ae17c697a2f03
--- /dev/null
+++ b/views/DE/project/projectList_backup.pug
@@ -0,0 +1,90 @@
+doctype html
+html(lang="de")
+ head
+ title= "Project List"
+ meta(charset="UTF-8")
+ meta(name="viewport", content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no")
+ 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
+
+ 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")
+ each key in item.keywords
+ h6
+ span(class="badge badge-pill badge-primary px-2") #{key}
+ |
+ 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")
+ 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
+ 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 = document.getElementById("searchInput")
+ var filter = input.value.toUpperCase()
+
+ 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");
+ cardBody = cards[i].getElementsByClassName("card-body");
+ cardText = cards[i].getElementsByClassName("card-text");
+
+ titleValue = cardTitle[0].textContent || cardTitle[0].innerText;
+ bodyValue = cardBody[0].textContent || cardBody[0].innerText;
+ textValue = cardText[0].textContent || cardText[0].innerText;
+
+ if (titleValue.toUpperCase().indexOf(filter) > -1 || bodyValue.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
diff --git a/views/DE/project/projectList_card.pug b/views/DE/project/projectList_card-row.pug
similarity index 85%
rename from views/DE/project/projectList_card.pug
rename to views/DE/project/projectList_card-row.pug
index 44994fd43c5fa9cd6d833bb313c6ee1843296c2e..c0fd1c8303369942cc02efb7c6d2b7d3ec57bddb 100644
--- a/views/DE/project/projectList_card.pug
+++ b/views/DE/project/projectList_card-row.pug
@@ -25,7 +25,8 @@ html(lang="de")
}
body
div(class="container")
- input(id="searchInput", class="form-control form-control-dark w-100", type="text", placeholder="Suchen Sie hier nach Themen und Projekten", onkeyup="searchFunction()")
+ 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
div(class="container")
@@ -56,18 +57,6 @@ html(lang="de")
| </div>
- colCounter = 0
- //h3(class="mb-3 font-weight-bold") Websites
- if website.length > 0
- div(class="container")
- 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}
-
// 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")
@@ -82,7 +71,8 @@ html(lang="de")
var input = document.getElementById("searchInput")
var filter = input.value.toUpperCase()
- var cards = document.getElementsByClassName("card")
+ //var cards = document.getElementsByClassName("card")
+ var cards = document.getElementsByClassName("col-sm")
var cardTitle, cardText, titleValue, textValue
var i
diff --git a/views/DE/project/projectList_table.pug b/views/DE/project/projectList_table.pug
new file mode 100644
index 0000000000000000000000000000000000000000..1e2d62c47d0b94d52775e893ae3711f11d942fc9
--- /dev/null
+++ b/views/DE/project/projectList_table.pug
@@ -0,0 +1,59 @@
+doctype html
+html(lang="de")
+ head
+ title= "Project List"
+ meta(charset="UTF-8")
+ meta(name="viewport", content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no")
+ 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")
+
+ 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}
+
+ // 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
+ script(src="https://transfer.hft-stuttgart.de/js/headfoot.js")
+ script.
+ function searchFunction() {
+ var input, filter, rows, col, txtValue;
+ var isFound = true;
+ input = document.getElementById("searchInput");
+ 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";
+ }
+ }
+ }
\ No newline at end of file
diff --git a/views/cards.html b/views/cards.html
new file mode 100644
index 0000000000000000000000000000000000000000..5c9f9f104cdfbf6e20fc2368a694057573c67d55
--- /dev/null
+++ b/views/cards.html
@@ -0,0 +1,110 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <title>Bootstrap Example</title>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
+ <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
+</head>
+<body>
+
+ <button type="button" class="btn btn-primary" onclick="hideCardsRow()">hide</button>
+
+ <div class="row">
+ <div class="col-sm-4">
+ <div class="card">
+ <div class="card-body">
+ <h5 class="card-title">Special title treatment 1</h5>
+ <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
+ <a href="#" class="btn btn-primary">Go somewhere</a>
+ </div>
+ </div>
+ </div>
+ <div class="col-sm-4">
+ <div class="card">
+ <div class="card-body">
+ <h5 class="card-title">Special title treatment 2</h5>
+ <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
+ <a href="#" class="btn btn-primary">Go somewhere</a>
+ </div>
+ </div>
+ </div>
+ <div class="col-sm-4">
+ <div class="card">
+ <div class="card-body">
+ <h5 class="card-title">Special title treatment 3</h5>
+ <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
+ <a href="#" class="btn btn-primary">Go somewhere</a>
+ </div>
+ </div>
+ </div>
+ <div class="col-sm-4">
+ <div class="card">
+ <div class="card-body">
+ <h5 class="card-title">Special title treatment 4a</h5>
+ <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
+ <a href="#" class="btn btn-primary">Go somewhere</a>
+ </div>
+ </div>
+ </div>
+ <div class="col-sm-4">
+ <div class="card">
+ <div class="card-body">
+ <h5 class="card-title">Special title treatment 4b</h5>
+ <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
+ <a href="#" class="btn btn-primary">Go somewhere</a>
+ </div>
+ </div>
+ </div>
+ <div class="col-sm-4">
+ <div class="card">
+ <div class="card-body">
+ <h5 class="card-title">Special title treatment 5</h5>
+ <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
+ <a href="#" class="btn btn-primary">Go somewhere</a>
+ </div>
+ </div>
+ </div>
+ <div class="col-sm-4">
+ <div class="card">
+ <div class="card-body">
+ <h5 class="card-title">Special title treatment 6</h5>
+ <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
+ <a href="#" class="btn btn-primary">Go somewhere</a>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <div class="container">
+ <div class="card" style="width:400px">
+ <img class="card-img-top" src="/public/test.png" alt="Card image" style="width:100%">
+ <div class="card-body">
+ <h4 class="card-title">John Doe</h4>
+ <p class="card-text">Some example text some example text. John Doe is an architect and engineer</p>
+ <a href="#" class="btn btn-primary">See Profile</a>
+ </div>
+ </div>
+ <div class="card" style="width:400px">
+ <div class="card-body">
+ <h4 class="card-title">Jane Doe</h4>
+ <p class="card-text">Some example text some example text. Jane Doe is an architect and engineer</p>
+ <a href="#" class="btn btn-primary">See Profile</a>
+ </div>
+ <img class="card-img-bottom" src="img_avatar6.png" alt="Card image" style="width:100%">
+ </div>
+ </div>
+
+ <script>
+ function hideCardsRow() {
+ var cardsRow = document.getElementsByClassName("row")
+ var cardCols = cardsRow[0].getElementsByClassName("col-sm-4")
+ cardCols[1].style.display = "none"
+ }
+ </script>
+
+</body>
+</html>