pagesList.pug 5.4 KB
Newer Older
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
doctype html
html(lang="de")
  head
    title= "Projektinformationen"
    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
30
31
32
33
    div(class="container")
            div(class="row")
                div(class="col-md-12" style="margin-bottom: 40px;")
                    img(class="mx-auto" src="/img/Projektinformationen.png" width="100%")
34
35
36
37
38
39
40
    div(class="container")
        div(class="pt-4 pb-4 form-row")
            div(class="form-group col-md-10")
                input(id="searchInput", class="form-control", type="text", placeholder="Suchen Sie hier nach Themen und Projekten", onkeyup="searchFunction()")
            div(class="form-group col-md-2")
                select(class="form-control")
                    option uncategorized
Wolfgang Knopki's avatar
Wolfgang Knopki committed
41
42
        p Hier finden Sie Informationen zu den bei uns gehosteten Projekten, wie z.B. Projektbeschreibungen, Projektwebseiten, Visualisierungen, Demonstrationen.
        p Für eine Übersicht über den bei uns gehosteten Projektcode und andere Projektdaten klicken Sie <a href="/projektdaten"> hier </a>.
43
44
45
46
47

        div(class="container")
            p#pagesCounter #{pages.length} Projektinformationen werden angezeigt
            | <div class="row">
            for item in pages
48
                div(class="card-deck py-4 col-sm")
49
50
51
52
53
54
55
56
57
58
59
60
61
                    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}
Rosanny Sihombing's avatar
fix 371    
Rosanny Sihombing committed
62
63
64
65
                                a(href=item.weburl, style="text-decoration: none;", target="_blank")
                                    div(class="col-3")
                                        svg(class="bi bi-chevron-right", width="32", height="32", viewBox="0 0 20 20", fill="black", xmlns="http://www.w3.org/2000/svg")
                                            | <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>
66
67
68
69
70
71
72
73
            | </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
74
    script(src="/js/headfoot.js")
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
    script.
        function searchFunction() {
            var input = document.getElementById("searchInput")
            var filter = input.value.toUpperCase()
            
            var cardsCol = document.getElementsByClassName("col-sm")
            var cardTitle, cardText, titleValue, textValue
            
            var i
            var counterBlock = 0
            for (i = 0; i < cardsCol.length; i++) {
                cardTitle = cardsCol[i].getElementsByClassName("card-title-bottom-left");
                cardBody = cardsCol[i].getElementsByClassName("card-body");
                cardText = cardsCol[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) {
                    cardsCol[i].style.display = "block"
                    counterBlock++
                } else {
                    cardsCol[i].style.display = "none"
                }
            }

            document.getElementById("pagesCounter").innerHTML = counterBlock+" Projektinformationen werden angezeigt"
        }