Skip to content
GitLab
Commit ef69c4e4 authored by Rosanny Sihombing's avatar Rosanny Sihombing
Browse files

updates

parent 1b4ac1a3
testing devel
1 merge request!87refactor
Hide whitespace changes
Inline Side-by-side
Showing
with 264 additions and 17 deletions
+264 -17
.gitignore
+ 1
- 3
View file @ ef69c4e4
/node_modules
sp-project-metadata.xml
sp-project-metadata-m4lab.xml
/node_modules
\ No newline at end of file
views/DE/project/projectList_backup.pug 0 → 100644
+ 90
- 0
View file @ ef69c4e4
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}
| &nbsp;
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
views/DE/project/projectList_card.pug → views/DE/project/projectList_card-row.pug
+ 4
- 14
View file @ ef69c4e4
......@@ -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
......
views/DE/project/projectList_table.pug 0 → 100644
+ 59
- 0
View file @ ef69c4e4
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
views/cards.html 0 → 100644
+ 110
- 0
View file @ ef69c4e4
<!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>
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

Dies ist die Gitlab-Instanz des Transferportals der Hochschule für Technik Stuttgart. Hier geht es zurück zum Portal