projectList.pug 6.34 KB
Newer Older
Rosanny Sihombing's avatar
Rosanny Sihombing committed
1
2
3
doctype html
html(lang="de")
  head
4
    title= "Projektdaten"
Rosanny Sihombing's avatar
Rosanny Sihombing committed
5
6
    meta(charset="UTF-8")
    meta(name="viewport", content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no")
Rosanny Sihombing's avatar
Rosanny Sihombing committed
7
8
    link(rel="stylesheet", type="text/css", href="/css/bootstrap.min.css")
    link(rel="stylesheet", type="text/css", href="/css/m4lab.css")
Rosanny Sihombing's avatar
Rosanny Sihombing committed
9
    link(rel="stylesheet", href="https://use.fontawesome.com/releases/v5.8.2/css/all.css", integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay", crossorigin="anonymous")
Rosanny Sihombing's avatar
Rosanny Sihombing committed
10
11
12
13
    style.
        .title-container {
            position: relative;
            color: white;
Athanasios's avatar
Athanasios committed
14
15
            height: 60%;
            overflow: hidden;
Rosanny Sihombing's avatar
Rosanny Sihombing committed
16
17
18
19
20
21
22
        }
        .card-title-bottom-left {
            position: absolute;
            bottom: 0px;
            width: 100%;
            color: black;
            font-weight: bold;
Athanasios's avatar
Athanasios committed
23
            background: rgb(255, 255, 255, 0.9);
Rosanny Sihombing's avatar
Rosanny Sihombing committed
24
25
26
27
            text-align: left;
            padding: 5px
        }
        .card-img-top {
Athanasios's avatar
Athanasios committed
28
            height: 100%;
Athanasios's avatar
Athanasios committed
29
            object-fit: contain;
Athanasios's avatar
Athanasios committed
30
31
32
33
34
35
36
37
38
39
40
41
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            margin-left: 0;
            margin-right: 0;
        }
        .card-img-bg {
            background-size: cover;
            filter: blur(30px);
            width: 100%;
            height: 100%;
Rosanny Sihombing's avatar
Rosanny Sihombing committed
42
        }
Rosanny Sihombing's avatar
Rosanny Sihombing committed
43
  body
44
    div(class="container")
45
46
47
        div(class="row")
            div(class="col-md-12 margin_bottom_40")
                img(class="mx-auto" src="/img/ProjektcodeDaten.png" width="100%")
Rosanny Sihombing's avatar
Rosanny Sihombing committed
48
    div(class="container")
Wolfgang Knopki's avatar
Wolfgang Knopki committed
49
50
        p Hier finden Sie den direkten Zugang zu den Inhalten der bei uns gehosteten Projekte.
        p Weitere Informationen zu den bei uns gehosteten Projekten finden Sie <a href="/projektinformationen">hier</a>.
Athanasios's avatar
Athanasios committed
51
        p Wenn Sie zu einem Projekt beitragen möchten, oder eines erstellen möchten, finden Sie weitere Informationen <a href="/help/gitlab.html">hier</a>.
52
53

        div(class="container")
54
            p#projectCounter #{project.length} Projektdaten werden angezeigt
55
            div(class="pt-4 pb-4 form-row")
Rosanny Sihombing's avatar
Rosanny Sihombing committed
56
                div(class="form-group col-md-10")
57
                    input(id="searchInput", class="form-control form-control-lg", type="text", placeholder="Suchen Sie hier nach Themen und Projekten", onkeyup="searchFunction()")
Rosanny Sihombing's avatar
Rosanny Sihombing committed
58
59
60
                div(class="form-group col-md-2")
                    select#sortingSelect(class="form-control form-control-lg")
                        option(value="" disabled) Sort by
Rosanny Sihombing's avatar
Rosanny Sihombing committed
61
62
63
                        option(value="name") &nbsp; Name
                        option(value="created_at") &nbsp; Last created
                        option(value="updated_at") &nbsp; Last updated
Rosanny Sihombing's avatar
Rosanny Sihombing committed
64
65
            | <div class="row">
            for item in project
66
                div(class="card-deck py-4 col-sm")
Athanasios's avatar
Athanasios committed
67
                    div(class="card card-portrait" style="transform: rotate(0);")
Rosanny Sihombing's avatar
Rosanny Sihombing committed
68
                        div(class="title-container")
Athanasios's avatar
Athanasios committed
69
                            div(class="card-img-bg" style=`background-image: url(${item.logo});`)
Rosanny Sihombing's avatar
Rosanny Sihombing committed
70
                            img(class="card-img-top", src=item.logo)
Athanasios's avatar
Athanasios committed
71
                            h5(class="card-title-bottom-left") #{item.name}
Rosanny Sihombing's avatar
Rosanny Sihombing committed
72
                        div(class="card-body")
Rosanny Sihombing's avatar
Rosanny Sihombing committed
73
74
75
76
77
                            div(class="row")
                                each key in item.keywords
                                    h6
                                        span(class="badge badge-pill badge-primary px-2") #{key}
                                        | &nbsp;
Rosanny Sihombing's avatar
Rosanny Sihombing committed
78
79
80
                            div(class="row")
                                div(class="col-9")
                                    p(class="card-text") #{item.desc}
81
                                a(href=item.weburl, class="no_text_decoration stretched-link", target="_blank")
Rosanny Sihombing's avatar
Rosanny Sihombing committed
82
            | </div>
Rosanny Sihombing's avatar
Rosanny Sihombing committed
83
84
85
86
87
88
89

    // 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
90
    script(src="/js/headfoot.js")
91
92
    // General functions
    script(src="/js/generalFunction.js")
Rosanny Sihombing's avatar
Rosanny Sihombing committed
93
94
    script.
        function searchFunction() {
Rosanny Sihombing's avatar
Rosanny Sihombing committed
95
96
            var input = document.getElementById("searchInput")
            var filter = input.value.toUpperCase()
Rosanny Sihombing's avatar
Rosanny Sihombing committed
97
            
Rosanny Sihombing's avatar
Rosanny Sihombing committed
98
            var cardsCol = document.getElementsByClassName("col-sm")
Rosanny Sihombing's avatar
Rosanny Sihombing committed
99
100
101
            var cardTitle, cardText, titleValue, textValue
            
            var i
Rosanny Sihombing's avatar
Rosanny Sihombing committed
102
103
104
105
106
            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");
Rosanny Sihombing's avatar
Rosanny Sihombing committed
107
108
                
                titleValue = cardTitle[0].textContent || cardTitle[0].innerText;
Rosanny Sihombing's avatar
Rosanny Sihombing committed
109
                bodyValue = cardBody[0].textContent || cardBody[0].innerText;
Rosanny Sihombing's avatar
Rosanny Sihombing committed
110
111
                textValue = cardText[0].textContent || cardText[0].innerText;
                
Rosanny Sihombing's avatar
Rosanny Sihombing committed
112
                if (titleValue.toUpperCase().indexOf(filter) > -1 || bodyValue.toUpperCase().indexOf(filter) > -1 || textValue.toUpperCase().indexOf(filter) > -1) {
Rosanny Sihombing's avatar
Rosanny Sihombing committed
113
114
                    cardsCol[i].style.display = "block"
                    counterBlock++
Rosanny Sihombing's avatar
Rosanny Sihombing committed
115
                } else {
Rosanny Sihombing's avatar
Rosanny Sihombing committed
116
                    cardsCol[i].style.display = "none"
Rosanny Sihombing's avatar
Rosanny Sihombing committed
117
118
                }
            }
Rosanny Sihombing's avatar
Rosanny Sihombing committed
119

120
            document.getElementById("projectCounter").innerHTML = counterBlock+" Projektdaten werden angezeigt"
Rosanny Sihombing's avatar
Rosanny Sihombing committed
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
        }

        $("#sortingSelect").change(function() {
            window.location.replace('/projektdaten?sort='+$("#sortingSelect").val())
        });
        function setSortSelect() {
            let sortKeyword = getQueryStringParams('sort', window.location.href)
            if (sortKeyword == "created_at") {
                $("#sortingSelect").val("created_at")
            } else if(sortKeyword == "updated_at") {
                $("#sortingSelect").val("updated_at")
            } else {
                $("#sortingSelect").val("name")
            }
        }
        setSortSelect()