pagesList.pug 7.86 KB
Newer Older
1
2
3
4
5
6
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")
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
13
14
15
16
17
    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;
Athanasios's avatar
Athanasios committed
18
19
            height: 12rem;
            overflow: hidden;
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);
28
29
30
31
            text-align: left;
            padding: 5px
        }
        .card-img-top {
Athanasios's avatar
Athanasios committed
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
            height: 100%;
            object-fit: contain;
            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%;
        }
        .clamp-lines {
            display: -webkit-box;
            -webkit-line-clamp: 6;
            -webkit-box-orient: vertical;
            overflow: hidden;
52
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/Projektinformationen.png" width="100%")
59
=======
60
61
62
        div(class="row")
            div(class="col-md-12 margin_bottom_40")
                img(class="mx-auto" src="/img/Projektinformationen.png" width="100%")
63
>>>>>>> testing
64
    div(class="container")
Wolfgang Knopki's avatar
Wolfgang Knopki committed
65
66
        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>.
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
70

        div(class="container")
            p#pagesCounter #{pages.length} Projektinformationen 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
80
81
            | <div class="row">
            for item in pages
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
88
                        div(class="title-container")
Athanasios's avatar
Athanasios committed
89
                            div(class="card-img-bg" style=`background-image: url(${item.logo});`)
90
                            img(class="card-img-top", src=item.logo)
Athanasios's avatar
Athanasios committed
91
92
                            h5(class="card-title-bottom-left") #{item.name}
                        div(class="card-body-fixed-height")
93
94
95
96
97
98
99
                            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")
100
<<<<<<< HEAD
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
=======
Athanasios's avatar
Athanasios committed
107
                                    p(class="card-text clamp-lines") #{item.desc}
108
                                a(href=item.weburl, class="no_text_decoration stretched-link", target="_blank")
109
>>>>>>> testing
110
111
112
113
114
115
116
117
            | </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
118
    script(src="/js/headfoot.js")
Athanasios's avatar
Athanasios committed
119
    script(src="/js/mobile.js")
120
121
    // General functions
    script(src="/js/generalFunction.js")
122
123
124
125
126
127
    script.
        function searchFunction() {
            var input = document.getElementById("searchInput")
            var filter = input.value.toUpperCase()
            
            var cardsCol = document.getElementsByClassName("col-sm")
Athanasios's avatar
Athanasios committed
128
            var cardTitle, cardBadges, cardText, titleValue, badgesValue, textValue, allValues;
129
130
131
132
133
            
            var i
            var counterBlock = 0
            for (i = 0; i < cardsCol.length; i++) {
                cardTitle = cardsCol[i].getElementsByClassName("card-title-bottom-left");
Athanasios's avatar
Athanasios committed
134
135
                //cardBody = cardsCol[i].getElementsByClassName("card-body");
                cardBadges = [...cardsCol[i].getElementsByClassName("badge-pill")];
136
137
138
                cardText = cardsCol[i].getElementsByClassName("card-text");
                
                titleValue = cardTitle[0].textContent || cardTitle[0].innerText;
Athanasios's avatar
Athanasios committed
139
140
                badgesValue = cardBadges.map(b => b.textContent).join(" ");
                //bodyValue = cardBody[0].textContent || cardBody[0].innerText;
141
                textValue = cardText[0].textContent || cardText[0].innerText;
Athanasios's avatar
Athanasios committed
142
143
                allValues = [titleValue, badgesValue, textValue].map(v => v.toUpperCase()).join(" ");
                if (allValues.indexOf(filter)!= -1) {
144
145
146
147
148
149
150
151
                    cardsCol[i].style.display = "block"
                    counterBlock++
                } else {
                    cardsCol[i].style.display = "none"
                }
            }

            document.getElementById("pagesCounter").innerHTML = counterBlock+" Projektinformationen werden angezeigt"
Rosanny Sihombing's avatar
Rosanny Sihombing committed
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
        }

        $("#sortingSelect").change(function() {
            window.location.replace('/projektinformationen?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()