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

made ui look more consistent

Browse Source
This commit is contained in:
AndiBuls
2020-03-16 13:31:51 +01:00
parent f4ad729efd
commit eecfc0351f
3 changed files with 67 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -26,37 +26,41 @@
</nav>
</header>
<main th:fragment="bodycontent">
<h1>Gruppenerstellung</h1>
<div class="container-fluid">
<form method="post" action="/gruppen2/createGroup">
<div class="shadow p-2" style=" border: 10px solid aliceblue; background: aliceblue">
<div class="form-group">
<label for="titel">Titel</label>
<input type="text" class="form-control" id="titel" th:name="title" required>
</div>
<div class="form-group">
<label for="beschreibung">Beschreibung</label>
<textarea th:name="beschreibung" class="form-control" id="beschreibung" rows="3" required></textarea>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" id="visibility" class="custom-control-input" th:name="visibility">
<label class="custom-control-label" for="visibility">Private Gruppe</label>
</div>
<div class="form-group">
<label for="sel1"></label>
<select class="form-control" id="sel1">
<option selected="true" disabled>--Bitte Veranstaltung auswählen--</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</div>
<div class="form-group pt-4">
<button class="btn btn-primary" type="submit" style="background: #52a1eb; border-style: none">Erstellen</button>
</div>
<div class="row">
<div class="col-10">
<h1>Gruppenerstellung</h1>
<form method="post" action="/gruppen2/createGroup">
<div class="shadow p-2" style=" border: 10px solid aliceblue; background: aliceblue">
<div class="form-group">
<label for="titel">Titel</label>
<input type="text" class="form-control" id="titel" th:name="title" required>
</div>
<div class="form-group">
<label for="beschreibung">Beschreibung</label>
<textarea th:name="beschreibung" class="form-control" id="beschreibung" rows="3" required></textarea>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" id="visibility" class="custom-control-input" th:name="visibility">
<label class="custom-control-label" for="visibility">Private Gruppe</label>
</div>
<div class="form-group">
<label for="sel1"></label>
<select class="form-control" id="sel1">
<option selected="true" disabled>--Bitte Veranstaltung auswählen--</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</div>
<div class="form-group pt-4">
<button class="btn btn-primary" type="submit" style="background: #52a1eb; border-style: none">Erstellen</button>
</div>
</div>
</form>
</div>
</form>
</div>
</div>
</main>
</body>

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

@ -26,12 +26,12 @@
</header>
<main th:fragment="bodycontent">
<div class="container-fluid">
<div class="row" >
<div class="row">
<div class="col-10">
<h1>Meine Gruppen</h1>
<form action="/" method="get">
<div th:each="gruppe: ${gruppen}">
<div style="border: 10px solid aliceblue; background: aliceblue">
<div class="shadow" style="border: 10px solid aliceblue; background: aliceblue">
<h3>
<a th:href="@{/gruppen2/details(id=${gruppe.getId()})}" style="color: dodgerblue; font-weight: bold" th:text="${gruppe.getTitle()}"></a>
</h3>
@ -41,7 +41,7 @@
</div>
</form>
</div>
<div class="col-2" >
<div class="col-2">
<div class="card" style="background: lightgrey">
<div class="card-body">
<h2 class="card-title" th:text="${user.getUser_id()}" style="text-align: center">user_id</h2>

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

@ -27,38 +27,38 @@
<main th:fragment="bodycontent">
<div class="container-fluid">
<div class="row">
<h1>Gruppensuche</h1>
<div class="container-fluid">
<form action="/gruppen2/findGroup" method="get">
<div style="border: 10px solid aliceblue; background: aliceblue">
<div class="form-group">
<label for="suchleiste">Suchbegriff:</label>
<input id="suchleiste" class="form-control" placeholder="z.B. Programmieren, Lerngruppe, ..." th:name="suchbegriff" type="text">
</div>
<button type="submit" class="btn btn-primary" style="background: #52a1eb; border-style: none">Suchen</button>
<div class="col-10">
<h1>Gruppensuche</h1>
<form action="/gruppen2/findGroup" method="get">
<div class="shadow" style="border: 10px solid aliceblue; background: aliceblue">
<div class="form-group">
<label for="suchleiste">Suchbegriff:</label>
<input id="suchleiste" class="form-control" placeholder="z.B. Programmieren, Lerngruppe, ..." th:name="suchbegriff" type="text">
</div>
</form>
<br>
<table class="table">
<!-- Erscheint dann, wenn man "Suchen" Button klickt und Ergebnisse angezeigt werden, aber so solls aussehen -->
<thead th:if="${!gruppen.isEmpty()}">
<tr>
<th scope="col">Gruppenname</th>
<th scope="col">Beschreibung</th>
<th scope="col">Öffentlich/Privat</th>
<th scope="col">Mitgliederanzahl</th>
</tr>
</thead>
<tbody th:each="gruppe : ${gruppen}">
<tr>
<th scope="row" th:text="${gruppe.title}">Gruppenname</th>
<td th:text="${gruppe.getDescription()}">Beschreibung</td>
<td th:text="${gruppe.getVisibility()}">Öffentlich</td>
<td th:text="${gruppe.getMembers().size()}">Mitgliederanzahl</td>
</tr>
</tbody>
</table>
</div>
<button type="submit" class="btn btn-primary" style="background: #52a1eb; border-style: none">Suchen</button>
</div>
</form>
<br>
<table class="table">
<!-- Erscheint dann, wenn man "Suchen" Button klickt und Ergebnisse angezeigt werden, aber so solls aussehen -->
<thead th:if="${!gruppen.isEmpty()}">
<tr>
<th scope="col">Gruppenname</th>
<th scope="col">Beschreibung</th>
<th scope="col">Öffentlich/Privat</th>
<th scope="col">Mitgliederanzahl</th>
</tr>
</thead>
<tbody th:each="gruppe : ${gruppen}">
<tr>
<th scope="row" th:text="${gruppe.title}">Gruppenname</th>
<td th:text="${gruppe.getDescription()}">Beschreibung</td>
<td th:text="${gruppe.getVisibility()}">Öffentlich</td>
<td th:text="${gruppe.getMembers().size()}">Mitgliederanzahl</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</main>