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

better styling

Browse Source
This commit is contained in:
Christoph
2020-04-17 23:07:09 +02:00
parent f8ba522dd9
commit 059714a657
16 changed files with 113 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
src/main/resources/static/css/details.css
View File

@ -3,34 +3,15 @@
margin-bottom: 15px;
}
/*Buttons*/
.edit {
font-size: 20px;
}
.btn-bar {
align-self: start;
}
/*Badges*/
.badge-pill {
align-self: start;
margin-right: 10px;
}
.members .badge {
align-self: start;
margin-top: 2px;
}
/*Member List*/
.members {
overflow-y: auto;
overflow-x: hidden;
max-height: calc(100vh - 250px);
max-width: 100%;
}
.members li span {
li span {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}

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

@ -26,6 +26,5 @@
/*Badges*/
.badge-pill {
margin-left: 10px;
align-self: start;
margin-right: 15px;
}

2
src/main/resources/static/css/search.css
View File

@ -23,5 +23,5 @@
.badge-pill {
align-self: start;
margin-top: 2px;
margin-right: 5px;
margin-right: 15px;
}

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

@ -16,6 +16,9 @@
margin-bottom: 15px;
box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .25);
transition: 100ms;
overflow: hidden;
text-overflow: ellipsis;
cursor: default;
}
/*Content Heading*/
@ -33,6 +36,12 @@
white-space: nowrap;
}
h1, h3 {
cursor: default;
overflow: hidden;
text-overflow: ellipsis;
}
/*Content Paragraph*/
.content-text {
margin-bottom: 15px;
@ -65,10 +74,20 @@
color: #4fa4ff;
}
/*Button*/
.btn {
max-width: 250px;
}
.btn-spacer {
max-width: 250px;
}
/*Badges*/
.badge-pill {
cursor: default;
color: whitesmoke;
align-self: start;
}
.lecture {
@ -87,18 +106,27 @@
background: var(--warning);
}
/*Grid System*/
.row {
margin-left: 0;
margin-right: 0;
/*Input*/
.input-group-append {
max-width: 50%;
overflow: hidden;
text-overflow: ellipsis;
}
.col {
padding-left: 0;
padding-right: 0;
.input-group-append {
max-width: 50%;
overflow: hidden;
text-overflow: ellipsis;
}
/*Miscellanous*/
.def-cursor {
cursor: default;
.input-group-append span {
overflow: hidden;
text-overflow: ellipsis;
font-family: monospace;
}
.input-group-append span {
overflow: hidden;
text-overflow: ellipsis;
font-family: monospace;
}

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

@ -11,12 +11,11 @@
<main th:fragment="bodycontent">
<div class="container">
<h1 class="def-cursor overflow-hidden" style="text-overflow: ellipsis;">Neue Gruppe</h1>
<h1>Neue Gruppe</h1>
<div class="content overflow-hidden">
<form enctype="multipart/form-data" method="post" th:action="@{/gruppen2/create}">
<h3 class="def-cursor overflow-hidden" style="text-overflow: ellipsis;">
Eigenschaften:</h3>
<div class="content">
<h3>Eigenschaften:</h3>
<!--Titel + Beschreibung-->
<div class="content-text" th:insert="~{fragments/forms :: meta}"></div>
@ -35,11 +34,12 @@
<div class="content-text mb-0" th:insert="~{fragments/forms :: csvimport}"></div>
</div>
<div class="content">
<div class="content d-flex flex-row flex-wrap">
<!--Submit-->
<button class="btn btn-primary btn-block" type="submit">Gruppe Erstellen</button>
</form>
<button class="btn btn-primary btn-block ml-auto" type="submit">Gruppe Erstellen
</button>
</div>
</form>
</div>
</main>

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

@ -11,13 +11,13 @@
<main th:fragment="bodycontent">
<div class="container-fluid">
<h1 class="def-cursor overflow-hidden" style="text-overflow: ellipsis;" th:text="${group.getTitle()}"></h1>
<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 overflow-hidden" th:insert="~{fragments/groups :: groupcontent}"></div>
<div class="content" th:insert="~{fragments/groups :: groupcontent}"></div>
<!--Integrationen-->
@ -46,9 +46,9 @@
<div class="content overflow-hidden">
<!--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" style="max-width: 250px;" href="/gruppen2">Fertig</a>
<a class="btn btn-primary flex-grow-1 mr-2 mt-2" href="/gruppen2">Fertig</a>
<div class="ml-auto mr-2 mt-2 flex-grow-1" style="max-width: 250px;">
<div class="ml-auto mr-2 mt-2 flex-grow-1 btn-spacer ml-auto">
<form method="post" th:action="@{/gruppen2/details/{id}/leave(id=${group.getId()})}">
<button class="btn btn-danger w-100" type="submit">
Gruppe verlassen
@ -80,8 +80,8 @@
<ul class="list-group">
<li class="list-group-item d-flex justify-content-between"
th:each="member : ${group.getMembers()}">
<span class="overflow-hidden" th:text="${member.format()}"></span>
<span class="overflow-hidden" th:replace="~{fragments/groups :: userbadges}"></span>
<span th:text="${member.format()}"></span>
<span th:replace="~{fragments/groups :: userbadges}"></span>
</li>
</ul>
</div>

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

@ -10,7 +10,7 @@
<main th:fragment="bodycontent">
<div class="container-fluid">
<h1 class="def-cursor overflow-hidden" style="text-overflow: ellipsis;" th:text="${group.getTitle()}"></h1>
<h1 th:text="${group.getTitle()}"></h1>
<!--Fertig oder löschen-->
<div class="content">
@ -18,7 +18,7 @@
<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>
<div class="mt-2 mr-2 flex-grow-1 ml-auto" style="max-width: 250px;">
<div class="mt-2 mr-2 flex-grow-1 ml-auto btn-spacer">
<form method="post" th:action="@{/gruppen2/details/{id}/edit/destroy(id=${group.getId()})}">
<button class="btn btn-danger w-100" type="submit">Gruppe löschen
</button>
@ -51,9 +51,10 @@
method="post">
<div th:replace="~{fragments/forms :: meta}"></div>
<div class="row">
<span class="col"></span>
<button type="submit" class="btn btn-secondary mt-2">Speichern</button>
<div class="d-flex flex-row flex-wrap">
<button type="submit" class="btn btn-secondary mt-2 ml-auto">Speichern
</button>
</div>
</form>
</div>
@ -64,9 +65,10 @@
method="post">
<div th:replace="~{fragments/forms :: userlimit}"></div>
<div class="row">
<span class="col"></span>
<button type="submit" class="btn btn-secondary mt-2">Speichern</button>
<div class="d-flex flex-row flex-wrap">
<button type="submit" class="btn btn-secondary mt-2 ml-auto">Speichern
</button>
</div>
</form>
</div>
@ -78,9 +80,10 @@
enctype="multipart/form-data" method="post">
<div th:replace="~{fragments/forms :: csvimport}"></div>
<div class="row">
<span class="col"></span>
<button type="submit" class="btn btn-secondary mt-2">Speichern</button>
<div class="d-flex flex-row flex-wrap">
<button type="submit" class="btn btn-secondary mt-2 ml-auto">Speichern
</button>
</div>
</form>
</div>
@ -92,22 +95,22 @@
<span>Event-Historie</span>
</div>
<div class="d-flex flex-row flex-wrap mt-n2 mr-n2">
<a class="btn btn-primary mt-2 mr-2 flex-grow-1" style="max-width: 250px;"
<a class="btn btn-primary mt-2 mr-2 flex-grow-1"
th:href="@{/gruppen2/details/{id}/history(id=${group.getId()})}">Event-Log</a>
<a class="btn btn-info flex-grow-1 mt-2 mr-2 ml-auto" style="max-width: 250px;"
<a class="btn btn-info flex-grow-1 mt-2 mr-2 ml-auto"
th:href="@{/gruppen2/details/{id}/export/history/plain(id=${group.getId()})}"
title="Exportiert die gesamte Event-Historie dieser Gruppe. Kann beim erstellen importiert werden.">
Event-Log exportieren (TXT)
</a>
<a class="btn btn-info flex-grow-1 mt-2 mr-2" style="max-width: 250px;"
<a class="btn btn-info flex-grow-1 mt-2 mr-2"
th:href="@{/gruppen2/details/{id}/export/history/sql(id=${group.getId()})}"
title="Exportiert die gesamte Event-Historie dieser Gruppe. Kann als data.sql verwendet werden.">
Event-Log exportieren (SQL)
</a>
<a class="btn btn-info flex-grow-1 mt-2 mr-2" style="max-width: 250px;"
<a class="btn btn-info flex-grow-1 mt-2 mr-2"
th:href="@{/gruppen2/details/{id}/export/members(id=${group.getId()})}"
title="Exportiert die Teilnehmerliste. Kann beim erstellen (oder nachträglich) importiert werden.">
Teilnehmer exportieren
@ -116,7 +119,7 @@
</div>
<!--Teilnehmerliste-->
<div class="content members overflow-hidden" style="max-width: 100%;">
<div class="content members">
<div class="content-heading">
<span>Teilnehmer</span>
</div>

2
src/main/resources/templates/error.html
View File

@ -12,7 +12,7 @@
<main th:fragment="bodycontent">
<div class="container">
<h1 class="display-3 def-cursor">UPSI</h1>
<h1 class="display-3">UPSI</h1>
<div class="content">
<p class="lead def-cursor">Da ist wohl etwas schiefgelaufen :(</p>

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

@ -12,8 +12,8 @@
<!--Gruppentitel-->
<div class="input-group mb-2"
title="Ein Gruppentitel zwischen 4 und 128 Zeichen. Der Titel ist öffentlich.">
<div class="input-group-prepend overflow-hidden" style="max-width: 50%;">
<span class="input-group-text text-monospace">Gruppentitel:</span>
<div class="input-group-prepend">
<span class="input-group-text">Gruppentitel:</span>
</div>
<input type="text" class="form-control" name="title" minlength="4" maxlength="128"
th:value="${group?.getTitle()}" required>
@ -23,8 +23,8 @@
<!--Gruppenbeschreibung-->
<div class="input-group"
title="Eine kurze Gruppenbeschreibung zwischen 4 und 512 Zeichen. Die Beschreibung ist öffentlich.">
<div class="input-group-prepend overflow-hidden" style="max-width: 50%;">
<span class="input-group-text text-monospace">Beschreibung:</span>
<div class="input-group-prepend">
<span class="input-group-text">Beschreibung:</span>
</div>
<textarea class="form-control" name="description" minlength="4" maxlength="512"
th:text="${group?.getDescription()}" required></textarea>
@ -50,8 +50,8 @@
<div class="input-group flex-grow-1 mt-2 mr-2"
title="Optional kann eine Veranstaltungszugehörigkeit festgelegt werden.">
<div class="input-group-prepend overflow-hidden" style="max-width: 50%;">
<span class="input-group-text text-monospace">Gehört zu:</span>
<div class="input-group-prepend">
<span class="input-group-text">Gehört zu:</span>
</div>
<input type="hidden" id="parentdummy" name="parent" value="00000000-0000-0000-0000-000000000000" disabled>
<select class="custom-select" id="parentselect" name="parent">
@ -84,15 +84,15 @@
<div class="input-group flex-grow-1 mt-2 mr-2"
title="999999 ist die maximal zulässige Teilnehmerzahl. Ist diese Obergrenze erreicht, gilt die Gruppe als unbegrenzt.">
<div class="input-group-prepend overflow-hidden" style="max-width: 25%">
<span class="input-group-text text-monospace overflow-hidden">Limit:</span>
<div class="input-group-prepend" style="max-width: 25%">
<span class="input-group-text">Limit:</span>
</div>
<input type="number" class="form-control" name="limit"
th:value="${group != null} ? ${group.getLimit()} : '999999'"
min="1" max="999999" id="limitselect" required
th:disabled="${group != null && group.getLimit() < 999999} ? 'false' : 'disabled'">
<div class="input-group-append overflow-hidden" style="max-width: 25%">
<span class="input-group-text text-monospace overflow-hidden">Teilnehmer</span>
<div class="input-group-append" style="max-width: 25%">
<span class="input-group-text">Teilnehmer</span>
</div>
</div>
</div>
@ -102,7 +102,7 @@
<div th:fragment="csvimport" class="input-group" th:if="${account.getRoles().contains('orga')}"
title="Das CSV folgt dem Format id,givenname,familyname,email.">
<div class="input-group-prepend">
<span class="input-group-text text-monospace">CSV:</span>
<span class="input-group-text">CSV:</span>
</div>
<div class="custom-file">
<input type="file" class="custom-file-input" id="file" name="file">

1
src/main/resources/templates/fragments/general.html
View File

@ -7,7 +7,6 @@
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<!--<script src="https://kit.fontawesome.com/22c0caaa8a.js" crossorigin="anonymous"></script>-->
<script type="text/javascript" th:src="@{/js/script.js}"></script>

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

@ -7,17 +7,17 @@
<!--Grouptype Badges-->
<th:block th:fragment="badges">
<span class="badge badge-pill private"
<span class="badge badge-pill private align-self-start"
title="Kann nicht über die Suche gefunden werden, beitritt ist per Einladungslink möglich."
th:if='${group.isPrivate()}'>Privat</span>
<span class="badge badge-pill public"
<span class="badge badge-pill public align-self-start"
title="Kann über die Suche gefunden werden, jeder kann beitreten."
th:if="${group.isPublic()}">Öffentlich</span>
<span class="badge badge-pill lecture"
<span class="badge badge-pill lecture align-self-start"
title="Offizielle Veranstaltung"
th:if='${group.isLecture()}'>Veranstaltung</span>
<span class="badge badge-pill parent"
<span class="badge badge-pill parent align-self-start"
th:if="${parent?.exists()}"
th:title="${'Die Gruppe gehört zur Veranstaltung ' + parent.getTitle() + '.'}"
th:text="${parent.getTitle()}">Parent</span>
@ -72,15 +72,13 @@
</span>
</div>
<div class="row">
<div class="d-flex flex-row flex-wrap">
<form method="post" th:action="@{/gruppen2/details/{id}/join(id = ${group.getId()})}"
th:unless="${group.isFull()}">
<button class="btn btn-success" type="submit">Gruppe beitreten.</button>
</form>
<div class="col" th:unless="${group.isFull()}"></div>
<a class="btn btn-primary" href="/gruppen2"
<a class="btn btn-primary ml-auto" href="/gruppen2"
type="submit">Startseite.</a>
</div>
</th:block>

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

@ -14,12 +14,10 @@
<h1 class="def-cursor">Event-Log</h1>
<div class="content" th:each="event : ${events}">
<div class="content-heading row">
<div class="content-heading d-flex flex-row flex-wrap">
<span th:text="${event.type()}"></span>
<span class="col"></span>
<span>Datum: </span>
<span class="ml-auto">Datum: </span>
<span th:text="${event.getDate()}"></span>
</div>

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

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

2
src/main/resources/templates/link.html
View File

@ -10,7 +10,7 @@
<main th:fragment="bodycontent">
<div class="container-fluid">
<h1 class="def-cursor" th:text="${group.getTitle()}"></h1>
<h1 th:text="${group.getTitle()}"></h1>
<div class="content" th:insert="~{fragments/groups :: groupcontent}"></div>

8
src/main/resources/templates/preview.html
View File

@ -10,17 +10,15 @@
<main th:fragment="bodycontent">
<div class="container-fluid">
<h1 class="def-cursor" th:text="${group.getTitle()}"></h1>
<h1 th:text="${group.getTitle()}"></h1>
<div class="content" th:insert="~{fragments/groups :: groupcontent}"></div>
<div class="content" th:unless="${group.isPrivate()}"
th:insert="~{fragments/groups :: joingroup}"></div>
<div class="content row" th:if="${group.isPrivate()}">
<span class="col"></span>
<a class="btn btn-primary" href="/gruppen2">Startseite.</a>
<div class="content d-flex flex-row flex-wrap" th:if="${group.isPrivate()}">
<a class="btn btn-primary ml-auto" href="/gruppen2">Startseite.</a>
</div>
</div>
</main>

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

@ -28,18 +28,19 @@
<input class="form-control" required minlength="1" name="string" type="text">
</div>
<button class="btn btn-primary mr-2 mt-2 flex-grow-1" type="submit">Suchen
<button class="btn btn-primary btn-block mr-2 mt-2 flex-grow-1" type="submit">
Suchen
</button>
</div>
</form>
<div class="d-flex flex-row flex-wrap mt-1 mr-n2">
<a class="btn btn-info mt-2 mr-2 flex-grow-1" style="max-width: 250px;"
<a class="btn btn-info mt-2 mr-2 flex-grow-1"
th:href="@{/gruppen2/search/all}">Alle Anzeigen</a>
<a class="btn btn-info mt-2 mr-2 flex-grow-1 ml-auto" style="max-width: 250px;"
<a class="btn btn-info mt-2 mr-2 flex-grow-1 ml-auto"
th:href="@{/gruppen2/search/type/{type}(type=${LECTURE})}">Vorlesungen</a>
<a class="btn btn-info mt-2 mr-2 flex-grow-1" style="max-width: 250px;"
<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>