244 WebApplication/src/main/webapp/main.html
View file
@@ -1,54 +1,61 @@
<!DOCTYPE html>
<html>
<head>
<title>Welcome - Do it later</title>
<meta charset="utf-8"/>
<link href="https://fonts.googleapis.com/css?family=Roboto+Slab" rel="stylesheet">
<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/bootstrap.min.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container-fluid col-lg-12">
<html>
<head>
<title>Welcome - Do it later</title>
<meta charset="utf-8" />
<link href="https://fonts.googleapis.com/css?family=Roboto+Slab"
rel="stylesheet">
<link rel="stylesheet"
href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css">
<script
src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script>
<script
src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/bootstrap.min.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container-fluid col-lg-12">

<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="main.html">Do It Later</a>
</div>
<ul class="nav navbar-nav">
<li class="navbar-text">Selected Group</li>
<li class="pointer"><a data-toggle="modal" data-target="#addMemberModal">Add User</a></li>
<li class="dropdown">
<a class="dropdown-toggle pointer" data-toggle="dropdown">Groups
<span class="caret"></span></a>
<ul id="Group_List" class="dropdown-menu"></ul>
</li>
<li><a data-toggle="modal" data-target="#newGroupModal" href="">Add Group</a></li>
<li><a href="chat.html" target="_blank">Group Chat</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="navbar-text"><span class="glyphicon glyphicon-user"></span> Max Mustermann</li>
<li><a href="index.html"><span class="glyphicon glyphicon-log-out"></span> Logout</a></li>
</ul>
</div>
</nav>

<div id="Task_List">
<div id="open_tasks"></div>
<div id="working_tasks"></div>
<div id="done_tasks"></div>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="main.html">Do It Later</a>
</div>

<script src="script.js"></script>
<script>
<ul class="nav navbar-nav">
<li class="navbar-text">Selected Group</li>
<li class="pointer"><a data-toggle="modal"
data-target="#addMemberModal">Add User</a></li>
<li class="dropdown"><a class="dropdown-toggle pointer"
data-toggle="dropdown">Groups <span class="caret"></span></a>
<ul id="Group_List" class="dropdown-menu"></ul></li>
<li><a data-toggle="modal" data-target="#newGroupModal"
href="">Add Group</a></li>
<li><a href="chat.html" target="_blank">Group Chat</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="navbar-text"><span class="glyphicon glyphicon-user"></span>
Max Mustermann</li>
<li><a href="index.html"><span
class="glyphicon glyphicon-log-out"></span> Logout</a></li>
</ul>
</div>
</nav>

<div id="Task_List">
<div id="open_tasks"></div>
<div id="working_tasks"></div>
<div id="done_tasks"></div>
</div>

<script src="script.js"></script>
<script>
multipleCards(cards);
multipleGroups(groups);
</script>

<button id="fixedButton" data-toggle="modal" data-target="#newCardModal">+</button>
<script>
<button id="fixedButton" data-toggle="modal"
data-target="#newCardModal">+</button>
<script>
$("#fixedButton").click(() => {
$("input#title").val("");
$("input#content").val("");
@@ -58,90 +65,91 @@
});
</script>

<!-- MODAL: Hinzufügen einer neuen Karte -->
<div id="newCardModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title">Neue Karte hinzufügen</h4>
<!-- MODAL: Hinzufügen einer neuen Karte -->
<div id="newCardModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title">Neue Karte hinzufügen</h4>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="recipient-name" class="form-control-label">Titel:</label>
<input type="text" class="form-control" id="title">
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="recipient-name" class="form-control-label">Titel:</label>
<input type="text" class="form-control" id="title">
</div>
<div class="form-group">
<label for="message-text" class="form-control-label">Inhalt:</label>
<input type="text" class="form-control" id="content">
</div>
<div class="form-group">
<label for="recipient-name" class="form-control-label">Status:</label>
<input type="text" class="form-control" id="status">
</div>
<div class="form-group">
<label for="recipient-name" class="form-control-label">Bearbeiter:</label>
<input type="text" class="form-control" id="assignment">
</div>
</form>
<div class="form-group">
<label for="message-text" class="form-control-label">Inhalt:</label>
<input type="text" class="form-control" id="content">
</div>
<div class="modal-footer">
<button id="newCardModalConfirm" type="button" data-dismiss="modal">Create</button>
<button id="newCardModalClose" type="button" data-dismiss="modal">Close</button>
<div class="form-group">
<label for="recipient-name" class="form-control-label">Status:</label>
<input type="text" class="form-control" id="status">
</div>
</div>
<div class="form-group">
<label for="recipient-name" class="form-control-label">Bearbeiter:</label>
<input type="text" class="form-control" id="assignment">
</div>
</form>
</div>
<div class="modal-footer">
<button id="newCardModalConfirm" type="button"
data-dismiss="modal">Create</button>
<button id="newCardModalClose" type="button" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

<!-- MODAL: Erstellen einer neuen Gruppe -->
<div id="newGroupModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title">Neue Gruppe hinzufügen</h4>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="recipient-name" class="form-control-label">Name:</label>
<input type="text" class="form-control" id="name">
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal">Create</button>
<button type="button" data-dismiss="modal">Close</button>
<!-- MODAL: Erstellen einer neuen Gruppe -->
<div id="newGroupModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title">Neue Gruppe hinzufügen</h4>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="recipient-name" class="form-control-label">Name:</label>
<input type="text" class="form-control" id="name">
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal">Create</button>
<button type="button" data-dismiss="modal">Close</button>
</div>
</div>

<!-- MODAL: Hinzufügen eines neuen Users zum Board -->
<div id="addMemberModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title">F&uuml;ge Mitglieder hinzu</h4>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="recipient-name" class="form-control-label">Name:</label>
<input type="text" class="form-control" id="name">
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal">Confirm</button>
<button type="button" data-dismiss="modal">Close</button>
</div>
</div>

<!-- MODAL: Hinzufügen eines neuen Users zum Board -->
<div id="addMemberModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title">F&uuml;ge Mitglieder hinzu</h4>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="recipient-name" class="form-control-label">Name:</label>
<input type="text" class="form-control" id="name">
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal">Confirm</button>
<button type="button" data-dismiss="modal">Close</button>
</div>
</div>

</div>
</body>
</html>
</div>

</div>
</body>
</html>
44 WebApplication/src/main/webapp/style.css
View file
@@ -5,7 +5,7 @@ html {
padding: 0;
}

body{
body {
-moz-user-select: none;
font-family: 'Roboto Slab', serif;
width: 100%;
@@ -16,22 +16,24 @@ body{
cursor: default;
}

.center{
.center {
text-align: center;
}

#Login_img{
#Login_img {
width: 40%;
height: auto;
padding: 0;
margin: 15px 0 15px 30%;
}

.pointer:hover{
.pointer:hover {
cursor: pointer;
}s
}

s

.Nav_elem_picked{
.Nav_elem_picked {
float: none;
list-style-type: none;
margin: 5px 0 5px 0;
@@ -47,13 +49,13 @@ body{
flex-direction: column;
}

#Task_List > div {
#Task_List>div {
display: flex;
flex-wrap: wrap;
flex-direction: row;
flex-direction: row;
}

#Task_List > div > svg {
#Task_List>div>svg {
height: 300px;
width: 435px;
margin: 20px;
@@ -62,9 +64,9 @@ body{
}

#fixedButton {
position: fixed;
bottom: 30px;
right: 30px;
position: fixed;
bottom: 30px;
right: 30px;
height: 60px;
width: 60px;
color: #ffffff;
@@ -74,23 +76,23 @@ body{
border-style: solid;
}

.message-bubble{
padding: 10px 0px 10px 0px;
.message-bubble {
padding: 10px 0px 10px 0px;
margin: 2px 0 2px 0;
border-radius: 5px;
}

.message-bubble:nth-child(even){
.message-bubble:nth-child(even) {
background-color: #EEEEEE;
}

.message-bubble:nth-child(odd){
.message-bubble:nth-child(odd) {
background-color: #32a840;
color: white;
}

.message-bubble > *{
padding-left: 15px;
.message-bubble>* {
padding-left: 15px;
}

.panel-body {
@@ -102,10 +104,10 @@ body{
color: white !important;
}

.chat_user:nth-child(odd){
.chat_user:nth-child(odd) {
color: lightgrey;
}

.chat_user:nth-child(even){
.chat_user:nth-child(even) {
color: black;
}
}