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

smaller padding on small screens

Browse Source
This commit is contained in:
Christoph
2020-04-18 13:33:44 +02:00
parent baafa806ad
commit 83ba5480d5
11 changed files with 411 additions and 429 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/main/java/mops/gruppen2/infrastructure/controller/GroupDetailsController.java
View File

@ -108,7 +108,7 @@ public class GroupDetailsController {
model.addAttribute("events",
eventStoreService.findGroupEvents(UUID.fromString(groupId)));
return "history";
return "log";
}
@RolesAllowed({"ROLE_orga", "ROLE_studentin"})

3
src/main/resources/static/css/index.css
View File

@ -1,19 +1,16 @@
/*Grouplist Hover Effect*/
.content {
padding-right: 20px;
background: #e6f4ff;
box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075);
}
.content:hover {
padding-right: 10px;
background: #d4ecff;
box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .25);
}
.content:hover .content-heading {
padding-bottom: 10px;
padding-left: 10px;
}
.content-text-in {

6
src/main/resources/static/css/style.css
View File

@ -76,11 +76,9 @@ h1, h3 {
/*Button*/
.btn {
max-width: 250px;
}
.btn-spacer {
max-width: 250px;
}
/*Badges*/
@ -107,6 +105,10 @@ h1, h3 {
}
/*Input*/
.input-group {
width: auto;
}
.input-group-append {
max-width: 50%;
overflow: hidden;

7
src/main/resources/templates/create.html
View File

@ -9,12 +9,10 @@
<body>
<main th:fragment="bodycontent">
<div class="container">
<h1>Neue Gruppe</h1>
<form enctype="multipart/form-data" method="post" th:action="@{/gruppen2/create}">
<div class="content">
<div class="content px-1 px-sm-3 mx-n2 mx-sm-0">
<h3>Eigenschaften:</h3>
<!--Titel + Beschreibung-->
@ -34,13 +32,12 @@
<div class="content-text mb-0" th:insert="~{fragments/forms :: csvimport}"></div>
</div>
<div class="content d-flex flex-row flex-wrap">
<div class="content d-flex flex-row flex-wrap px-1 px-sm-3">
<!--Submit-->
<button class="btn btn-primary btn-block ml-auto" type="submit">Gruppe Erstellen
</button>
</div>
</form>
</div>
</main>
</body>

20
src/main/resources/templates/details.html
View File

@ -9,21 +9,20 @@
<body>
<main th:fragment="bodycontent">
<div class="container-fluid">
<h1 th:text="${group.getTitle()}"></h1>
<div class="d-flex flex-row flex-wrap mr-n4 mt-n2">
<!--Gruppendetails-->
<div class="flex-grow-1 mr-4 mt-2" style="flex-basis: 65%;">
<div class="content" th:insert="~{fragments/groups :: groupcontent}"></div>
<div class="content py-2 px-1 px-sm-3 mx-n2 mx-sm-0"
th:insert="~{fragments/groups :: groupcontent}"></div>
<!--Dummy Integrationen, der Inhalt kommt natürlich aus der Gruppe bzw. von anderen Systemen-->
<div class="d-flex flex-row flex-wrap mr-n2 mt-n2">
<!--Materialsammlung-->
<div th:if="${group.hasMaterial()}" class="content flex-grow-1 mr-2 mt-2">
<div th:if="${group.hasMaterial()}" class="content flex-grow-1 mr-2 mt-2 py-2 px-1 px-sm-3">
<div class="content-heading">
<span>Gruppenmaterialien</span>
</div>
@ -50,7 +49,7 @@
</div>
<!--Foren-->
<div th:if="${group.hasForums()}" class="content flex-grow-1 mr-2 mt-2">
<div th:if="${group.hasForums()}" class="content flex-grow-1 mr-2 mt-2 py-2 px-1 px-sm-3">
<div class="content-heading">
<span>Forum</span>
</div>
@ -73,7 +72,7 @@
</div>
<!--Termine-->
<div th:if="${group.hasCalendar()}" class="content flex-grow-1 mr-2 mt-2">
<div th:if="${group.hasCalendar()}" class="content flex-grow-1 mr-2 mt-2 py-2 px-1 px-sm-3">
<div class="content-heading">
<span>Gruppentermine</span>
</div>
@ -96,7 +95,7 @@
</div>
<!--Portfolios-->
<div th:if="${group.hasPortfolios()}" class="content flex-grow-1 mr-2 mt-2">
<div th:if="${group.hasPortfolios()}" class="content flex-grow-1 mr-2 mt-2 py-2 px-1 px-sm-3">
<div class="content-heading">
<span>Gruppenportfolio</span>
</div>
@ -119,7 +118,7 @@
</div>
<!--Modulhandbuch-->
<div th:if="${group.hasModules()}" class="content flex-grow-1 mr-2 mt-2">
<div th:if="${group.hasModules()}" class="content flex-grow-1 mr-2 mt-2 py-2 px-1 px-sm-3">
<div class="content-heading">
<span>Modulhandbuch</span>
</div>
@ -160,7 +159,7 @@
</div>
</div>
<div class="content overflow-hidden">
<div class="content py-2 px-1 px-sm-3">
<!--Button-Bar-->
<div class="d-flex flex-row flex-wrap mr-n2 mt-n2">
<a class="btn btn-primary flex-grow-1 mr-2 mt-2" href="/gruppen2">Fertig</a>
@ -177,7 +176,7 @@
</div>
<!--Teilnehmerliste-->
<div class="def-cursor flex-grow-1 mr-4 mt-2 mw-100 overflow-hidden">
<div class="def-cursor flex-grow-1 mr-4 mt-2 mw-100 overflow-hidden py-2 px-1 px-sm-3">
<!--Anzahl Text-->
<div class="mb-2">
<span>Teilnehmer: </span>
@ -204,7 +203,6 @@
</div>
</div>
</div>
</div>
</main>
</body>
</html>

14
src/main/resources/templates/edit.html
View File

@ -9,11 +9,10 @@
<body>
<main th:fragment="bodycontent">
<div class="container-fluid">
<h1 th:text="${group.getTitle()}"></h1>
<!--Fertig oder löschen-->
<div class="content">
<div class="content py-2 px-1 px-sm-3 mx-n2 mx-sm-0">
<div class="d-flex flex-row flex-wrap mt-n2 mr-n2">
<a class="btn btn-primary flex-grow-1 mt-2 mr-2" style="max-width: 250px;"
th:href="@{/gruppen2/details/{id}(id=${group.getId()})}">Fertig</a>
@ -28,7 +27,7 @@
</div>
<!--Invite Link-->
<div class="content input-group">
<div class="content input-group py-2 px-1 px-sm-3 mx-n2 mx-sm-0">
<div class="input-group-prepend">
<span class="input-group-text">Einladungslink:</span>
</div>
@ -40,7 +39,7 @@
</div>
<!--Meta-->
<div class="content">
<div class="content py-2 px-1 px-sm-3 mx-n2 mx-sm-0">
<div class="content-heading">
<span>Eigenschaften</span>
</div>
@ -60,7 +59,7 @@
</div>
<!--Userlimit-->
<div class="content-text-in">
<div class="content-text-in px-1 px-sm-3">
<form th:action="@{/gruppen2/details/{id}/edit/userlimit(id=${group.getId()})}"
method="post">
@ -90,7 +89,7 @@
</div>
<!--Export + Log-->
<div class="content">
<div class="content py-2 px-1 px-sm-3 mx-n2 mx-sm-0">
<div class="content-heading">
<span>Event-Historie</span>
</div>
@ -119,7 +118,7 @@
</div>
<!--Teilnehmerliste-->
<div class="content members">
<div class="content members py-2 px-1 px-sm-3 mx-n2 mx-sm-0">
<div class="content-heading">
<span>Teilnehmer</span>
</div>
@ -154,5 +153,4 @@
</li>
</ul>
</div>
</div>
</main>

2
src/main/resources/templates/fragments/forms.html
View File

@ -66,7 +66,7 @@
<!--Userlimit-->
<th:block th:fragment="userlimit">
<label for="userlimit">Teilnehmeranzahl:</label>
<div class="btn-toolbar mt-n2 mr-n2 d-flex flex-row flex-wrap" id="userlimit">
<div class="btn-toolbar mt-n2 mr-n2 d-flex flex-row flex-wrap flex-grow-1" id="userlimit">
<input type="hidden" name="limit" id="limit" value="999999"
th:disabled="${group != null && group.getLimit() < 999999} ? 'disabled' : 'false'">
<div class="btn-group btn-group-toggle flex-grow-1 mt-2 mr-2" style="flex-basis: 10%;" data-toggle="buttons">

35
src/main/resources/templates/history.html
View File

@ -1,35 +0,0 @@
<!DOCTYPE html>
<html lang="de" xmlns:th="http://www.thymeleaf.org" th:replace="~{mopslayout :: html(
name='Gruppenfindung',
title='Event-Log',
headcontent=~{fragments/general :: headcontent('none')},
navigation=~{fragments/general :: nav('none')},
bodycontent=~{:: bodycontent})}">
<body>
<main th:fragment="bodycontent">
<div class="container-fluid">
<h1 class="def-cursor">Event-Log</h1>
<div class="content" th:each="event : ${events}">
<div class="content-heading d-flex flex-row flex-wrap">
<span th:text="${event.type()}"></span>
<span class="ml-auto">Datum: </span>
<span th:text="${event.getDate()}"></span>
</div>
<div class="content-text-in">
<span th:text="${'User:' + event.getExec()}"></span>
<span th:text="${'>>>' + event.format()}"></span>
</div>
</div>
</div>
</main>
</body>
</html>

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

@ -9,30 +9,27 @@
<body>
<main th:fragment="bodycontent">
<div class="container-fluid">
<h1>Meine Gruppen</h1>
<!--Gruppenliste belegte Gruppen-->
<div th:unless="${lectures.isEmpty()}">
<div class="mx-n2 mx-sm-0" th:unless="${lectures.isEmpty()}">
<h3>Veranstaltungen</h3>
<div class="content" th:each="group: ${lectures}"
<div class="content px-1 px-sm-3" th:each="group: ${lectures}"
th:insert="fragments/groups :: groupcontentlink"></div>
</div>
<div th:unless="${publics.isEmpty()}">
<div class="mx-n2 mx-sm-0" th:unless="${publics.isEmpty()}">
<h3>Öffentliche Gruppen</h3>
<div class="content" th:each="group: ${publics}"
<div class="content px-1 px-sm-3" th:each="group: ${publics}"
th:insert="fragments/groups :: groupcontentlink"></div>
</div>
<div th:unless="${privates.isEmpty()}">
<div class="mx-n2 mx-sm-0" th:unless="${privates.isEmpty()}">
<h3>Private Gruppen</h3>
<div class="content" th:each="group: ${privates}"
<div class="content px-1 px-sm-3" th:each="group: ${privates}"
th:insert="fragments/groups :: groupcontentlink"></div>
</div>
</div>
</main>
</body>

31
src/main/resources/templates/log.html Normal file
View File

@ -0,0 +1,31 @@
<!DOCTYPE html>
<html lang="de" xmlns:th="http://www.thymeleaf.org" th:replace="~{mopslayout :: html(
name='Gruppenfindung',
title='Event-Log',
headcontent=~{fragments/general :: headcontent('none')},
navigation=~{fragments/general :: nav('none')},
bodycontent=~{:: bodycontent})}">
<body>
<main th:fragment="bodycontent">
<h1>Event-Log</h1>
<div class="content py-2 px-1 px-sm-3 mx-n2 mx-sm-0" th:each="event : ${events}">
<div class="content-heading d-flex flex-row flex-wrap">
<span th:text="${event.type()}"></span>
<span class="ml-auto">Datum: </span>
<span th:text="${event.getDate()}"></span>
</div>
<div class="content-text-in px-1 px-sm-3">
<span th:text="${'User:' + event.getExec()}"></span>
<span th:text="${'>>>' + event.format()}"></span>
</div>
</div>
</main>
</body>
</html>

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

@ -12,12 +12,10 @@
<!--/*@thymesVar id="PUBLIC" type="mops.gruppen2.domain.model.group.Type"*/-->
<main th:fragment="bodycontent">
<div class="container-fluid">
<h1 class="def-cursor overflow-hidden" style="text-overflow: ellipsis;">Suchen</h1>
<h1>Suchen</h1>
<!--Suchfilter-->
<div class="content top overflow-hidden">
<div class="content py-2 px-1 px-sm-3 mx-n2 mx-sm-0">
<form method="post" th:action="@{/gruppen2/search/string}">
<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%;">
@ -46,9 +44,8 @@
</div>
<!--Ergebnisliste-->
<div class="content" th:each="group: ${groups}"
<div class="content py-2 px-1 px-sm-3 mx-n2 mx-sm-0" th:each="group: ${groups}"
th:insert="fragments/groups :: groupcontentlink"></div>
</div>
</main>
</body>