1

better responsive design for search

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

View File

@ -49,14 +49,14 @@
</th:block>
<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()})}"
th:text="${group.getTitle()}"></a>
<span th:replace="~{fragments/groups :: badges}"></span>
</div>
<div class="content-text-in">
<div class="content-text-in overflow-hidden" style="text-overflow: ellipsis;">
<span th:text="${group.getDescription()}"></span>
</div>
</th:block>

View File

@ -11,23 +11,26 @@
<main th:fragment="bodycontent">
<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-->
<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}"
th:insert="fragments/groups :: groupcontentlink"></div>
</div>
<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}"
th:insert="fragments/groups :: groupcontentlink"></div>
</div>
<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}"
th:insert="fragments/groups :: groupcontentlink"></div>
</div>

View File

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