christoph/lecture-professional-software-development
1
Fork 0
Code Activity

better responsive design for search

Browse Source
This commit is contained in:
Christoph
2020-04-17 21:28:21 +02:00
parent 83671a0d26
commit 59e9b34324
3 changed files with 22 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/main/resources/templates/fragments/groups.html
View File

@ -49,14 +49,14 @@
</th:block> </th:block>
<th:block th:fragment="groupcontentlink"> <th:block th:fragment="groupcontentlink">
<div class="content-heading row"> <div class="content-heading row overflow-hidden">
<a class="link col" th:href="@{/gruppen2/details/{id}(id=${group.getId()})}" <a class="link col" th:href="@{/gruppen2/details/{id}(id=${group.getId()})}"
th:text="${group.getTitle()}"></a> th:text="${group.getTitle()}"></a>
<span th:replace="~{fragments/groups :: badges}"></span> <span th:replace="~{fragments/groups :: badges}"></span>
</div> </div>
<div class="content-text-in"> <div class="content-text-in overflow-hidden" style="text-overflow: ellipsis;">
<span th:text="${group.getDescription()}"></span> <span th:text="${group.getDescription()}"></span>
</div> </div>
</th:block> </th:block>

11
src/main/resources/templates/index.html
View File

@ -11,23 +11,26 @@
<main th:fragment="bodycontent"> <main th:fragment="bodycontent">
<div class="container-fluid"> <div class="container-fluid">
<h1 class="def-cursor">Meine Gruppen</h1> <h1 class="def-cursor overflow-hidden" style="text-overflow: ellipsis;">Meine Gruppen</h1>
<!--Gruppenliste belegte Gruppen--> <!--Gruppenliste belegte Gruppen-->
<div th:unless="${lectures.isEmpty()}"> <div th:unless="${lectures.isEmpty()}">
<h3 class="def-cursor">Veranstaltungen</h3> <h3 class="def-cursor overflow-hidden" style="text-overflow: ellipsis;">
Veranstaltungen</h3>
<div class="content" th:each="group: ${lectures}" <div class="content" th:each="group: ${lectures}"
th:insert="fragments/groups :: groupcontentlink"></div> th:insert="fragments/groups :: groupcontentlink"></div>
</div> </div>
<div th:unless="${publics.isEmpty()}"> <div th:unless="${publics.isEmpty()}">
<h3 class="def-cursor">Öffentliche Gruppen</h3> <h3 class="def-cursor overflow-hidden" style="text-overflow: ellipsis;">Öffentliche
Gruppen</h3>
<div class="content" th:each="group: ${publics}" <div class="content" th:each="group: ${publics}"
th:insert="fragments/groups :: groupcontentlink"></div> th:insert="fragments/groups :: groupcontentlink"></div>
</div> </div>
<div th:unless="${privates.isEmpty()}"> <div th:unless="${privates.isEmpty()}">
<h3 class="def-cursor">Private Gruppen</h3> <h3 class="def-cursor overflow-hidden" style="text-overflow: ellipsis;">Private
Gruppen</h3>
<div class="content" th:each="group: ${privates}" <div class="content" th:each="group: ${privates}"
th:insert="fragments/groups :: groupcontentlink"></div> th:insert="fragments/groups :: groupcontentlink"></div>
</div> </div>

26
src/main/resources/templates/search.html
View File

@ -17,29 +17,29 @@
<h1>Suchen</h1> <h1>Suchen</h1>
<!--Suchfilter--> <!--Suchfilter-->
<div class="content top"> <div class="content top overflow-hidden">
<form method="post" th:action="@{/gruppen2/search/string}"> <form method="post" th:action="@{/gruppen2/search/string}">
<div class="row mb-3"> <div class="d-flex flex-row flex-wrap mr-n2 mt-n2">
<div class="input-group col mr-2"> <div class="input-group mr-2 mt-2 flex-grow-1" style="flex-basis: 75%;">
<div class="input-group-prepend"> <div class="input-group-prepend" style="max-width: 50%;">
<span class="input-group-text text-monospace">Suchbegriff:</span> <span class="input-group-text text-monospace overflow-hidden"
style="text-overflow: ellipsis">Suchbegriff:</span>
</div> </div>
<input class="form-control" required minlength="1" name="string" type="text"> <input class="form-control" required minlength="1" name="string" type="text">
</div> </div>
<button class="btn btn-primary" type="submit">Suchen</button> <button class="btn btn-primary mr-2 mt-2 flex-grow-1" type="submit">Suchen
</button>
</div> </div>
</form> </form>
<div class="row"> <div class="d-flex flex-row flex-wrap mt-1 mr-n2">
<a class="btn btn-info" th:href="@{/gruppen2/search/all}">Alle Anzeigen</a> <a class="btn btn-info mt-2 mr-2 flex-grow-1" th:href="@{/gruppen2/search/all}">
Alle Anzeigen</a>
<!--spacer--> <a class="btn btn-info mt-2 mr-2 flex-grow-1"
<span class="col"></span>
<a class="btn btn-info mr-2"
th:href="@{/gruppen2/search/type/{type}(type=${LECTURE})}">Vorlesungen</a> th:href="@{/gruppen2/search/type/{type}(type=${LECTURE})}">Vorlesungen</a>
<a class="btn btn-info" type="submit" <a class="btn btn-info mt-2 mr-2 flex-grow-1"
th:href="@{/gruppen2/search/type/{type}(type=${PUBLIC})}">Öffentliche Gruppen</a> th:href="@{/gruppen2/search/type/{type}(type=${PUBLIC})}">Öffentliche Gruppen</a>
</div> </div>
</div> </div>