projectList.pug 7.85 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
updates    
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")
9
10
<<<<<<< HEAD
=======
Athanasios's avatar
Athanasios committed
11
    link(rel="stylesheet", type="text/css", href="/css/m4lab-mobile.css")
12
>>>>>>> testing
Rosanny Sihombing's avatar
Rosanny Sihombing committed
13
    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
14
15
16
17
    style.
        .title-container {
            position: relative;
            color: white;
18
            height: 12rem;
Athanasios's avatar
Athanasios committed
19
            overflow: hidden;
Rosanny Sihombing's avatar
Rosanny Sihombing committed
20
21
22
23
24
25
26
        }
        .card-title-bottom-left {
            position: absolute;
            bottom: 0px;
            width: 100%;
            color: black;
            font-weight: bold;
Athanasios's avatar
Athanasios committed
27
            background: rgb(255, 255, 255, 0.9);
Rosanny Sihombing's avatar
Rosanny Sihombing committed
28
29
30
31
            text-align: left;
            padding: 5px
        }
        .card-img-top {
Athanasios's avatar
Athanasios committed
32
            height: 100%;
Athanasios's avatar
Athanasios committed
33
            object-fit: contain;
Athanasios's avatar
Athanasios committed
34
35
36
37
38
39
40
41
42
43
44
45
            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
46
        }
47
48
49
50
51
        .clamp-lines {
            display: -webkit-box;
            -webkit-line-clamp: 6;
            -webkit-box-orient: vertical;
            overflow: hidden;
Rosanny Sihombing's avatar
Rosanny Sihombing committed
52
        }
Rosanny Sihombing's avatar
Rosanny Sihombing committed
53
  body
54
    div(class="container")
55
<<<<<<< HEAD
56
            div(class="row")
Rosanny Sihombing's avatar
updates    
Rosanny Sihombing committed
57
                div(class="col-md-12 margin_bottom_40")
58
                    img(class="mx-auto" src="/img/ProjektcodeDaten.png" width="100%")
59
=======
60
61
        div(class="row")
            div(class="col-md-12 margin_bottom_40")
62
                img(class="mx-auto" src="https://transfer.hft-stuttgart.de/img/ProjektcodeDaten.png" width="100%")
63
>>>>>>> testing
Rosanny Sihombing's avatar
Rosanny Sihombing committed
64
    div(class="container")
Wolfgang Knopki's avatar
Wolfgang Knopki committed
65
66
        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
67
        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>.
68
69

        div(class="container")
70
            p#projectCounter #{project.length} Projektdaten werden angezeigt
71
            div(class="pt-4 pb-4 form-row")
Rosanny Sihombing's avatar
Rosanny Sihombing committed
72
                div(class="form-group col-md-10")
73
                    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
74
75
76
                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
77
78
79
                        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
80
81
            | <div class="row">
            for item in project
82
                div(class="card-deck py-4 col-sm")
83
<<<<<<< HEAD
Rosanny Sihombing's avatar
updates    
Rosanny Sihombing committed
84
                    div(class="card width_18")
85
=======
Athanasios's avatar
Athanasios committed
86
                    div(class="card card-portrait" style="transform: rotate(0);")
87
>>>>>>> testing
Rosanny Sihombing's avatar
Rosanny Sihombing committed
88
                        div(class="title-container")
Athanasios's avatar
Athanasios committed
89
                            div(class="card-img-bg" style=`background-image: url(${item.logo});`)
Rosanny Sihombing's avatar
Rosanny Sihombing committed
90
                            img(class="card-img-top", src=item.logo)
Athanasios's avatar
Athanasios committed
91
                            h5(class="card-title-bottom-left") #{item.name}
92
                        div(class="card-body-fixed-height")
Rosanny Sihombing's avatar
Rosanny Sihombing committed
93
94
95
96
97
                            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
98
99
                            div(class="row")
                                div(class="col-9")
100
<<<<<<< HEAD
Rosanny Sihombing's avatar
Rosanny Sihombing committed
101
                                    p(class="card-text") #{item.desc}
Rosanny Sihombing's avatar
updates    
Rosanny Sihombing committed
102
                                a(href=item.weburl, class="no_text_decoration", target="_blank")
Rosanny Sihombing's avatar
fix 371    
Rosanny Sihombing committed
103
104
105
                                    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>
106
=======
107
                                    p(class="card-text clamp-lines") #{item.desc}
108
                                a(href=item.weburl, class="no_text_decoration stretched-link", target="_blank")
109
>>>>>>> testing
Rosanny Sihombing's avatar
Rosanny Sihombing committed
110
            | </div>
Rosanny Sihombing's avatar
Rosanny Sihombing committed
111

Rosanny Sihombing's avatar
Rosanny Sihombing committed
112
113
114
    button(onclick="topFunction()" id="topBtn")
        i(class="fa fa-chevron-up")

Rosanny Sihombing's avatar
Rosanny Sihombing committed
115
116
117
118
119
120
    // 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
121
    script(src="/js/headfoot.js")
Athanasios's avatar
Athanasios committed
122
    script(src="/js/mobile.js")
123
124
    // General functions
    script(src="/js/generalFunction.js")
Rosanny Sihombing's avatar
Rosanny Sihombing committed
125
126
    script.
        function searchFunction() {
Rosanny Sihombing's avatar
Rosanny Sihombing committed
127
128
            var input = document.getElementById("searchInput")
            var filter = input.value.toUpperCase()
Rosanny Sihombing's avatar
Rosanny Sihombing committed
129
            
Rosanny Sihombing's avatar
Rosanny Sihombing committed
130
            var cardsCol = document.getElementsByClassName("col-sm")
Athanasios's avatar
Athanasios committed
131
            var cardTitle, cardBadges, cardText, titleValue, badgesValue, textValue, allValues;
Rosanny Sihombing's avatar
Rosanny Sihombing committed
132
133
            
            var i
Rosanny Sihombing's avatar
Rosanny Sihombing committed
134
135
136
            var counterBlock = 0
            for (i = 0; i < cardsCol.length; i++) {
                cardTitle = cardsCol[i].getElementsByClassName("card-title-bottom-left");
Athanasios's avatar
Athanasios committed
137
138
                //cardBody = cardsCol[i].getElementsByClassName("card-body");
                cardBadges = [...cardsCol[i].getElementsByClassName("badge-pill")];
Rosanny Sihombing's avatar
Rosanny Sihombing committed
139
                cardText = cardsCol[i].getElementsByClassName("card-text");
Rosanny Sihombing's avatar
Rosanny Sihombing committed
140
141
                
                titleValue = cardTitle[0].textContent || cardTitle[0].innerText;
Athanasios's avatar
Athanasios committed
142
143
                badgesValue = cardBadges.map(b => b.textContent).join(" ");
                //bodyValue = cardBody[0].textContent || cardBody[0].innerText;
Rosanny Sihombing's avatar
Rosanny Sihombing committed
144
                textValue = cardText[0].textContent || cardText[0].innerText;
Athanasios's avatar
Athanasios committed
145
146
                allValues = [titleValue, badgesValue, textValue].map(v => v.toUpperCase()).join(" ");
                if (allValues.indexOf(filter)!= -1) {
Rosanny Sihombing's avatar
Rosanny Sihombing committed
147
148
                    cardsCol[i].style.display = "block"
                    counterBlock++
Rosanny Sihombing's avatar
Rosanny Sihombing committed
149
                } else {
Rosanny Sihombing's avatar
Rosanny Sihombing committed
150
                    cardsCol[i].style.display = "none"
Rosanny Sihombing's avatar
Rosanny Sihombing committed
151
152
                }
            }
Rosanny Sihombing's avatar
Rosanny Sihombing committed
153

154
            document.getElementById("projectCounter").innerHTML = counterBlock+" Projektdaten werden angezeigt"
Rosanny Sihombing's avatar
Rosanny Sihombing committed
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
        }

        $("#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()