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", model.addAttribute("events",
eventStoreService.findGroupEvents(UUID.fromString(groupId))); eventStoreService.findGroupEvents(UUID.fromString(groupId)));
return "history"; return "log";
} }
@RolesAllowed({"ROLE_orga", "ROLE_studentin"}) @RolesAllowed({"ROLE_orga", "ROLE_studentin"})

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

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

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

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

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

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

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

@ -9,21 +9,20 @@
<body> <body>
<main th:fragment="bodycontent"> <main th:fragment="bodycontent">
<div class="container-fluid">
<h1 th:text="${group.getTitle()}"></h1> <h1 th:text="${group.getTitle()}"></h1>
<div class="d-flex flex-row flex-wrap mr-n4 mt-n2"> <div class="d-flex flex-row flex-wrap mr-n4 mt-n2">
<!--Gruppendetails--> <!--Gruppendetails-->
<div class="flex-grow-1 mr-4 mt-2" style="flex-basis: 65%;"> <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--> <!--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"> <div class="d-flex flex-row flex-wrap mr-n2 mt-n2">
<!--Materialsammlung--> <!--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"> <div class="content-heading">
<span>Gruppenmaterialien</span> <span>Gruppenmaterialien</span>
</div> </div>
@ -50,7 +49,7 @@
</div> </div>
<!--Foren--> <!--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"> <div class="content-heading">
<span>Forum</span> <span>Forum</span>
</div> </div>
@ -73,7 +72,7 @@
</div> </div>
<!--Termine--> <!--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"> <div class="content-heading">
<span>Gruppentermine</span> <span>Gruppentermine</span>
</div> </div>
@ -96,7 +95,7 @@
</div> </div>
<!--Portfolios--> <!--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"> <div class="content-heading">
<span>Gruppenportfolio</span> <span>Gruppenportfolio</span>
</div> </div>
@ -119,7 +118,7 @@
</div> </div>
<!--Modulhandbuch--> <!--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"> <div class="content-heading">
<span>Modulhandbuch</span> <span>Modulhandbuch</span>
</div> </div>
@ -160,7 +159,7 @@
</div> </div>
</div> </div>
<div class="content overflow-hidden"> <div class="content py-2 px-1 px-sm-3">
<!--Button-Bar--> <!--Button-Bar-->
<div class="d-flex flex-row flex-wrap mr-n2 mt-n2"> <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> <a class="btn btn-primary flex-grow-1 mr-2 mt-2" href="/gruppen2">Fertig</a>
@ -177,7 +176,7 @@
</div> </div>
<!--Teilnehmerliste--> <!--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--> <!--Anzahl Text-->
<div class="mb-2"> <div class="mb-2">
<span>Teilnehmer: </span> <span>Teilnehmer: </span>
@ -204,7 +203,6 @@
</div> </div>
</div> </div>
</div> </div>
</div>
</main> </main>
</body> </body>
</html> </html>

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

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

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

@ -66,7 +66,7 @@
<!--Userlimit--> <!--Userlimit-->
<th:block th:fragment="userlimit"> <th:block th:fragment="userlimit">
<label for="userlimit">Teilnehmeranzahl:</label> <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" <input type="hidden" name="limit" id="limit" value="999999"
th:disabled="${group != null && group.getLimit() < 999999} ? 'disabled' : 'false'"> 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"> <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> <body>
<main th:fragment="bodycontent"> <main th:fragment="bodycontent">
<div class="container-fluid">
<h1>Meine Gruppen</h1> <h1>Meine Gruppen</h1>
<!--Gruppenliste belegte Gruppen--> <!--Gruppenliste belegte Gruppen-->
<div th:unless="${lectures.isEmpty()}"> <div class="mx-n2 mx-sm-0" th:unless="${lectures.isEmpty()}">
<h3>Veranstaltungen</h3> <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> th:insert="fragments/groups :: groupcontentlink"></div>
</div> </div>
<div th:unless="${publics.isEmpty()}"> <div class="mx-n2 mx-sm-0" th:unless="${publics.isEmpty()}">
<h3>Öffentliche Gruppen</h3> <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> th:insert="fragments/groups :: groupcontentlink"></div>
</div> </div>
<div th:unless="${privates.isEmpty()}"> <div class="mx-n2 mx-sm-0" th:unless="${privates.isEmpty()}">
<h3>Private Gruppen</h3> <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> th:insert="fragments/groups :: groupcontentlink"></div>
</div> </div>
</div>
</main> </main>
</body> </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"*/--> <!--/*@thymesVar id="PUBLIC" type="mops.gruppen2.domain.model.group.Type"*/-->
<main th:fragment="bodycontent"> <main th:fragment="bodycontent">
<div class="container-fluid"> <h1>Suchen</h1>
<h1 class="def-cursor overflow-hidden" style="text-overflow: ellipsis;">Suchen</h1>
<!--Suchfilter--> <!--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}"> <form method="post" th:action="@{/gruppen2/search/string}">
<div class="d-flex flex-row flex-wrap mr-n2 mt-n2"> <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 mr-2 mt-2 flex-grow-1" style="flex-basis: 75%;">
@ -46,9 +44,8 @@
</div> </div>
<!--Ergebnisliste--> <!--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> th:insert="fragments/groups :: groupcontentlink"></div>
</div>
</main> </main>
</body> </body>