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

details restyling + style refinement

Browse Source
This commit is contained in:
Christoph
2020-04-11 11:53:52 +02:00
parent dec95fa91d
commit 583b5de635
7 changed files with 102 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,3 +1,25 @@
/*Content*/
.content-heading { .content-heading {
margin-bottom: 15px; margin-bottom: 15px;
} }
/*Buttons*/
.edit {
font-size: 20px;
}
.btn-bar {
align-self: start;
margin-left: 10px;
}
/*Badges*/
.badge-pill {
align-self: start;
}
/*Member List*/
.members {
overflow-y: auto;
max-height: calc(100vh - 250px);
}

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

@ -27,5 +27,5 @@
/*Badges*/ /*Badges*/
.badge-pill { .badge-pill {
margin-left: 10px; margin-left: 10px;
align-self: flex-end; align-self: start;
} }

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

@ -21,7 +21,7 @@
/*Badges*/ /*Badges*/
.badge-pill { .badge-pill {
align-self: flex-start; align-self: start;
margin-top: 2px; margin-top: 2px;
margin-right: 5px; margin-right: 5px;
} }

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

@ -13,7 +13,7 @@
border-radius: 5px; border-radius: 5px;
background: #d4ecff; background: #d4ecff;
padding: 10px 10px; padding: 10px 10px;
margin-top: 15px; margin-bottom: 15px;
box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .25); box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .25);
transition: 100ms; transition: 100ms;
} }

176
src/main/resources/templates/details_member.html
View File

@ -1,127 +1,98 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en" <html lang="de" xmlns:th="http://www.thymeleaf.org" th:replace="~{mopslayout :: html(
th:replace="~{mopslayout :: html(name='Gruppenbildung', headcontent=~{:: headcontent}, navigation=~{:: navigation}, bodycontent=~{:: bodycontent})}" name='Gruppenbildung',
xmlns:th="http://www.thymeleaf.org"> title='Details',
<head> headcontent=~{fragments/general :: headcontent(style='/details.css')},
<meta charset="utf-8"> navigation=~{fragments/general :: nav(current='none')},
<title>Gruppendetails</title> bodycontent=~{:: bodycontent})}">
<th:block th:fragment="headcontent">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
rel="stylesheet">
</th:block>
</head>
<body> <body>
<header>
<nav class="navigation navigation-secondary" is="mops-navigation" th:fragment="navigation">
<ul>
<li class="active">
<a th:href="@{/gruppen2}">Gruppen</a>
</li>
<li>
<a th:href="@{/gruppen2/create}">Erstellen</a>
</li>
<li>
<a th:href="@{/gruppen2/search}">Suche</a>
</li>
</ul>
</nav>
</header>
<main th:fragment="bodycontent"> <main th:fragment="bodycontent">
<div class="container-fluid"> <div class="container-fluid">
<div>
<div class="shadow-sm p-4 col-8" <h1 class="def-cursor" th:text="${group.getTitle()}"></h1>
style="border: 10px solid aliceblue; display: inline-block; border-radius: 5px; background: aliceblue;">
<div class="row"> <div class="row">
<div class="col-11"> <!--Gruppendetails-->
<h1 style="color: black; font-weight: bold; font-optical-sizing: auto; overflow-wrap: break-word; width: 95%;" <div class="col-9 px-0">
th:text="${group.getTitle()}"></h1>
</div> <div class="content">
<div class="col-1"> <div class="content-heading row">
<a class="fa fa-pencil" <!--Badges-->
style="font-size:30px; width: 5%;" <span th:replace="~{fragments/gruppen :: badges}"></span>
<!--Spacer-->
<span class="col"></span>
<!--Edit-Pen-Button-->
<a class="fas fa-edit edit"
th:href="@{/gruppen2/details/{id}/meta(id=${group.getId()})}" th:href="@{/gruppen2/details/{id}/meta(id=${group.getId()})}"
th:if="${group.getRoles().get(user.getId()) == admin}"></a> th:if="${group.getRoles().get(user.getId()) == admin}"></a>
</div> </div>
</div>
<h3>
<span class="badge badge-pill badge-dark" style="background: darkslategray;"
th:if='${group.getVisibility() == group.getVisibility().PRIVATE }'>Private Gruppe</span>
<span class="badge badge-pill badge-primary" style="background: #52a1eb;"
th:if="${group.getVisibility() == group.getVisibility().PUBLIC}">Öffentliche Gruppe</span>
<span class="badge badge-pill badge-success" style="background: lightseagreen;"
th:if='${group.getType() == group.getType().LECTURE}'>Veranstaltung</span>
<span class="badge badge-pill badge-info" style="background: mediumorchid;"
th:text="${parent?.getTitle()}">Parent</span>
<div class="input-group mb-3" style="margin-top: 10px;" <!--Invite Link-->
<div class="content-text input-group"
th:if="${group.getRoles().get(user.getId()) == admin}"> th:if="${group.getRoles().get(user.getId()) == admin}">
<div class="input-group-prepend"> <div class="input-group-prepend">
<span class="input-group-text" id="inputGroup-sizing-default" <span class="input-group-text">Einladungslink:</span>
style="background: #52a1eb;">Einladungslink:</span>
</div> </div>
<input aria-describedby="basic-addon2" aria-label="Recipient's username" <input class="form-control" readonly th:value="${link}" type="text">
class="form-control"
id="groupLink" readonly style="background: white;" th:value="${link}"
type="text">
<div class="input-group-append"> <div class="input-group-append">
<button class="btn btn-outline-secondary" onclick="copyLink()" <button type="button" class="btn btn-outline-secondary"
type="button">Link kopieren onclick="copyLink()">Link kopieren
</button> </button>
</div> </div>
</div> </div>
</h3>
<br> <!--Description-->
<div class="shadow-sm p-4" style="background: white;"> <div class="content-text-in">
<p style="overflow-wrap: break-word; font-optical-sizing: auto;" th:text="${group.getDescription()}"></p> <span th:text="${group.getDescription()}"></span>
</div> </div>
<br>
<div class="text-right btn-toolbar" role="toolbar" style="float: right;"> <!--Button-Bar-->
<button class="btn btn-primary" <div class="row">
style="background: #52a1eb; border: none; margin: 5px;">
<a style="color: white;" th:href="@{/gruppen2}">Zurück</a> <!--Spacer-->
</button> <span class="col"></span>
<form method="post" th:action="@{/gruppen2/details/{id}/leave(id=${group.getId()})}">
<button class="btn btn-danger" style="border-style: none; margin: 5px;" <form method="post" th:action="@{/gruppen2/details/{id}/leave(id=${group.getId()})}">
th:name="group_id" <button class="btn btn-warning btn-bar" type="submit">Gruppe verlassen
type="submit">Gruppe verlassen </button>
</button> </form>
</form> <form method="post" th:if="${group.getRoles().get(user.getId()) == admin}"
<form method="post" th:action="@{/gruppen2/details/{id}/destroy(id=${group.getId()})}"> th:action="@{/gruppen2/details/{id}/destroy(id=${group.getId()})}">
<button class="btn btn-danger" style="border-style: none; margin: 5px;" th:name="group_id" <button class="btn btn-danger btn-bar" type="submit">Gruppe löschen
th:if="${group.getRoles().get(user.getId()) == admin}" </button>
type="submit">Gruppe löschen </form>
</button> </div>
</form>
</div> </div>
</div> </div>
<div class="col-4" style="white-space: nowrap; float: right; background: white; display: inline-block; margin-bottom: 100px; margin-top: -8px;">
<h2>Mitglieder</h2> <!--Teilnehmerliste-->
<div th:switch="${group.getUserLimit() != 100000}"> <div class="col-3 def-cursor">
<h4 th:case="${true}"> <!--Anzahl Text-->
<a th:text="${group.getMembers().size()}"></a> <div class="mb-2">
<a>von maximal</a> <span>Teilnehmer: </span>
<a th:text="${group.getUserLimit()}"></a> <span th:if="${group.getUserLimit() <= 10000}"
<a>Benutzern.</a> th:text="${group.getMembers().size() + ' von ' + group.getUserLimit()}"></span>
</h4> <span th:unless="${group.getUserLimit() <= 100000}"
<h4 th:case="${false}"> unbegrenzte Teilnehmeranzahl</h4> th:text="${group.getMembers().size()}"></span>
</div> </div>
<div th:if="${group.getRoles().get(user.getId()) == admin}">
<!--Bearbeiten-Button-->
<div class="mb-2" th:if="${group.getRoles().get(user.getId()) == admin}">
<form method="get" <form method="get"
th:action="@{/gruppen2/details/{id}/members(id=${group.getId()})}"> th:action="@{/gruppen2/details/{id}/members(id=${group.getId()})}">
<button class="btn btn-secondary" style="background: slategrey; float: left;"> <button class="btn btn-secondary btn-block">Teilnehmer verwalten</button>
Mitglieder bearbeiten
</button>
</form> </form>
<br>
<br>
</div> </div>
<div style="overflow-y: scroll;
height:60vh;"> <div class="members">
<ul class="list-group-flush" style="background: slategrey;" <ul class="list-group">
th:each="member : ${group.getMembers()}"> <li class="list-group-item" th:each="member : ${group.getMembers()}"
<li class="list-group-item" style="background: aliceblue;"> th:text="${#strings.abbreviate(member.getGivenname(), 15) + ' ' + member.getFamilyname().substring(0, 1) + '.'}">
<span th:if='${group.getVisibility() == public}' th:text="${member.getId()}"></span>
<span th:if='${group.getVisibility() == private}' th:text="${#strings.abbreviate(member.getGivenname(), 15) + ' ' + member.getFamilyname().substring(0, 1) + '.'}"></span>
<span class="badge badge-success" <span class="badge badge-success"
th:if='${group.getRoles().get(member.getId()) == admin}'>admin</span> th:if='${group.getRoles().get(member.getId()) == admin}'>admin</span>
</li> </li>
@ -130,6 +101,7 @@
</div> </div>
</div> </div>
</div> </div>
<script> <script>
function copyLink() { function copyLink() {
const copyText = document.getElementById("groupLink"); const copyText = document.getElementById("groupLink");

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

@ -7,6 +7,7 @@
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <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://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://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src="https://kit.fontawesome.com/22c0caaa8a.js" crossorigin="anonymous"></script>
<link th:href="@{/style.css}" rel="stylesheet"/> <link th:href="@{/style.css}" rel="stylesheet"/>
<link th:unless="${style == 'none'}" th:href="@{${style}}" rel="stylesheet"/> <link th:unless="${style == 'none'}" th:href="@{${style}}" rel="stylesheet"/>
</th:block> </th:block>

3
src/main/resources/templates/fragments/gruppen.html
View File

@ -12,7 +12,8 @@
th:if='${group.getType() == lecture}'>Veranstaltung</span> th:if='${group.getType() == lecture}'>Veranstaltung</span>
<span class="badge badge-pill parent" <span class="badge badge-pill parent"
th:if="${parent != null}" th:text="${parent.getTitle()}">Parent</span> th:unless="${parent == null || parent.getTitle() == null|| parent.getTitle() == ''}"
th:text="${parent.getTitle()}">Parent</span>
<!--Needs completly projected (cached) groups--> <!--Needs completly projected (cached) groups-->
<!--<span class="badge badge-success float-right" <!--<span class="badge badge-success float-right"