diff --git a/templates/common/layout.twig b/templates/common/layout.twig
index ebecb55be878fc6c7ee5dc8c8c3042c48f51ee32..31caba74917d92a2799f198802e5b63b734aa8b0 100644
--- a/templates/common/layout.twig
+++ b/templates/common/layout.twig
@@ -5,6 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/assets/semantic-ui/semantic.min.css">
<link rel="stylesheet" href="/assets/css/general.css">
+ <link rel="stylesheet" href="/assets/css/grid.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.4.3/css/ol.css" type="text/css">
<title>{% block title %}{% endblock %}</title>
@@ -12,7 +13,7 @@
</head>
<body>
<div class="main-wrapper">
- <div class="container-wrapper">
+ <div class="container-wrapper ">
{% block navbar %}
<div class="ui inverted menu header" id="header-content">
<img src="/assets/img/covid-logo.png" class="ui huge spaced icon">
@@ -26,12 +27,12 @@
<a href="/logout">Log out</a>
</div>
{% else %}
- <div class="item">
- <a href="/login">Log in</a>
- </div>
- <div class="item">
- <a href="/signup">Sign up</a>
- </div>
+ <div class="item">
+ <a href="/login">Log in</a>
+ </div>
+ <div class="item">
+ <a href="/signup">Sign up</a>
+ </div>
{% endif %}
<div class="ui dropdown item">
Categories <i class="dropdown icon"></i>
@@ -51,17 +52,16 @@
</div>
</div>
{% endblock %}
-
+
<div class="content" id="content">
{% if message %}
<div class="ui message">
{{message}}
</div>
{% endif %}
-
+
{% block content %} {% endblock %}
</div>
-
{% block footer %}
<!-- Footer -->
<div class="ui center aligned inverted vertical footer-content segment" id='footer-content'>
diff --git a/templates/group/group_view.twig b/templates/group/group_view.twig
index 36166e34178b09e5770e4d5b05240ac6ed4193cf..95918e552f4ea229e637a13d639d87c1ab05d27d 100644
--- a/templates/group/group_view.twig
+++ b/templates/group/group_view.twig
@@ -1,6 +1,7 @@
{% extends 'common/layout.twig' %}
{% block content %}
- <div class="ui card" id="groupcard">
+<div class="row">
+ <div class="ui card col s2 m2 l2 xl2" id="groupcard">
<div class="content">
<img class="ui left floated circular image small" src="/assets/img/default-avatar.png">
<a class="header">{{group.name}}</a>
@@ -37,9 +38,10 @@
</div>
</div>
</div>
- <div id="map" style="max-height:100%; max-width:90%">
+ <div id="map" class="col s10 m10 l10 xl10" style="max-width:90%">
</div>
- <div id="members">
+ </div>
+ <div class="list">
<h2> Members </h2>
<div class="ui relaxed divided list" id="members_list" style="overflow:scroll">
{% for user in group.getUsers %}
@@ -58,7 +60,7 @@
</div>
</div>
{% if group.checkAdmin(session.userId) %}
- <div class="ui modal" id="modal_add_user">
+ <div class="ui modal col s12 m12 l12 xl12" id="modal_add_user">
<div class="header">
Add a member
</div>
diff --git a/templates/home/search.twig b/templates/home/search.twig
index e602f0da77519a91f2ce1abe2dc3a33eba89f57a..e0113550bb479b2fafd76267d6617fc3473d4981 100644
--- a/templates/home/search.twig
+++ b/templates/home/search.twig
@@ -1,8 +1,8 @@
{% extends 'common/layout.twig' %}
{% block content %}
<h2> Search Results </h2>
-<div class="ui relaxed divided list">
- <h3> Users </h3>
+<h3> Users </h3>
+<div class="ui relaxed divided list" style="max-height:200px">
{% for user in users %}
<div class="item">
<img class="ui avatar image" src="/assets/img/default-avatar.png"></i>
@@ -13,8 +13,8 @@
{% endfor %}
</div>
-<div class="ui relaxed divided list">
<h3> Groups </h3>
+<div class="ui relaxed divided list" style="max-height:200px">
{% for group in groups %}
<div class="item">
<div class="content">
diff --git a/templates/message/messenger.twig b/templates/message/messenger.twig
index 36c0fd0cddb9e38acb6b764608b7325943a30283..51eeeea443e216d525fd333927d788ccc439bfcd 100644
--- a/templates/message/messenger.twig
+++ b/templates/message/messenger.twig
@@ -1,9 +1,12 @@
{% extends 'common/layout.twig' %}
{% block content %}
+<div class="row">
<div class="return_link">
<a href="/groups/{{group.getId}}">Retour</a>
</div>
- <div class="current_tchat">
+</div>
+<div class="row">
+ <div class="current_tchat col s12 m12 l12 xl12">
<h2> {{group.name}}</h2>
<div class="list_members">
{% for user in group.users %}
@@ -11,7 +14,9 @@
{% endfor %}
</div>
</div>
- <div class="ui comments" id="current_messages">
+</div>
+<div class="row">
+ <div class="ui comments col s12 m12 l12" id="list" style="max-height:400px;">
{% for message in messages %}
<div class="comment">
<a class="avatar">
@@ -29,15 +34,16 @@
</div>
{% endfor %}
</div>
- <div class="reply">
- <form class="ui reply form" action="/groups/{{group.getId}}/messages" method="post">
- <div class="field">
- <textarea name="body" rows="3"></textarea>
- </div>
- <button class="ui blue labeled submit icon button" type="submit">
- <i class="icon edit"></i> Add Reply
- </button>
- </form>
+</div>
+<div class="row">
+<form class="ui reply form col s12 m12 l12 xl12" action="/groups/{{group.getId}}/messages" method="post">
+ <div class="field">
+ <textarea name="body" rows="3"></textarea>
</div>
+ <button class="ui blue labeled submit icon button" type="submit">
+ <i class="icon edit"></i> Add Reply
+ </button>
+</form>
+</div>
{% endblock %}
\ No newline at end of file
diff --git a/templates/user/create_user.twig b/templates/user/create_user.twig
index be9ec9adacba7f063180f7c778622ac742d09373..e4b04dc70a279e8f9f497d79fd8926dc4b8492cd 100644
--- a/templates/user/create_user.twig
+++ b/templates/user/create_user.twig
@@ -1,52 +1,54 @@
{% extends 'common/layout.twig' %}
{% block content %}
<div class="form_format">
-<form class="ui form {% if formstatus %} {{formstatus}} {% endif %} " action="/users" method="post">
-<h4 class="ui dividing header">Sign Up</h4>
- <div class="field">
- <input type="text" name="firstname" id="firstname" placeholder="Firstname" value="{{firstname}}" required>
- </div>
- <div class="field">
- <input type="text" name="lastname" id="lastname" placeholder="Lastname" value="{{lastname}}" required>
- </div>
- <div class="field">
- <input type="text" name="username" id="username" placeholder="Username" value="{{username}}" required>
- {% if username_formstatus %}
- <div class="ui {{formstatus}} message">
- <div class="header">Action Forbidden</div>
- <p>Username already used.</p>
- </div>
- {% endif %}
- </div>
- <div class="field">
- <input type="password" name="password" id="password" placeholder="Password" required>
- </div>
- <div class="field">
- <input type="password" name="confirmpassword" id="confirmpassword" placeholder="Confirm your password" required>
- {% if password_formstatus %}
- <div class="ui {{formstatus}} message">
- <ul class="list">
- <li>{{password_message}}</li>
- </ul>
- </div>
- {% endif %}
- </div>
- <div class="field">
- <input type="email" name="mail" id="mail" placeholder="Email" value="{{mail}}" required>
- {% if email_formstatus %}
- <div class="ui {{formstatus}} message">
- <ul class="list">
- <li>{{email_message}}</li>
- </ul>
- </div>
- {% endif %}
- <div class="field">
- <input type="checkbox" name="contaminated">
- <label for="contaminated">Contaminated</label>
- </input>
- </div>
- </div>
- <input type="submit" class="ui submit button">
-</form>
+ <form class="ui form {% if formstatus %} {{formstatus}} {% endif %} " action="/users" method="post">
+ <h4 class="ui dividing header">Sign Up</h4>
+ <div class="field">
+ <input type="text" name="firstname" id="firstname" placeholder="Firstname" value="{{firstname}}" required>
+ </div>
+ <div class="field">
+ <input type="text" name="lastname" id="lastname" placeholder="Lastname" value="{{lastname}}" required>
+ </div>
+ <div class="field">
+ <input type="text" name="username" id="username" placeholder="Username" value="{{username}}" required>
+ {% if username_formstatus %}
+ <div class="ui {{formstatus}} message">
+ <div class="header">Action Forbidden</div>
+ <p>Username already used.</p>
+ </div>
+ {% endif %}
+ </div>
+ <div class="field">
+ <input type="password" name="password" id="password" placeholder="Password" required>
+ </div>
+ <div class="field">
+ <input type="password" name="confirmpassword" id="confirmpassword" placeholder="Confirm your password" required>
+ {% if password_formstatus %}
+ <div class="ui {{formstatus}} message">
+ <ul class="list">
+ <li>{{password_message}}</li>
+ </ul>
+ </div>
+ {% endif %}
+ </div>
+ <div class="field">
+ <input type="email" name="mail" id="mail" placeholder="Email" value="{{mail}}" required>
+ {% if email_formstatus %}
+ <div class="ui {{formstatus}} message">
+ <ul class="list">
+ <li>{{email_message}}</li>
+ </ul>
+ </div>
+ {% endif %}
+ <div class="ui checkbox">
+ <input type="checkbox" name="contaminated" id="contaminated" >
+ <label for="contaminated">Contaminated</label>
+ </input>
+ </div>
+ </div>
+ <div class="field col o6">
+ <input type="submit" class="ui submit button">
+ </div>
+ </form>
</div>
{% endblock %}
\ No newline at end of file
diff --git a/templates/user/list_users.twig b/templates/user/list_users.twig
index c9ecc49d3aae6f7194bac702b6a9b3cf55ce0701..df03c6dd0636990db8911ee2967348243e07353f 100644
--- a/templates/user/list_users.twig
+++ b/templates/user/list_users.twig
@@ -3,8 +3,8 @@
Liste des utilisateurs
{% endblock %}
{% block content %}
- <h1 class="display-4 text-center" style="grid-row:1/2; grid-column:1/5"> List Users </h1>
- <div class="ui relaxed divided list" id="list">
+ <h1 class="display-4 text-center"> List Users </h1>
+ <div class="ui relaxed divided list col s12 m12 l12 xl12 list" style="max-height:500px">
{% for user in users %}
<div class="item">
<img class="ui avatar image" src="/assets/img/default-avatar.png"></i>
diff --git a/templates/user/log_in.twig b/templates/user/log_in.twig
index 4b65e5858e7f967aa5551d81c720e41888a8f4e0..0891a1dbe1b4badb293957d210c3d38d0bbe0e0b 100644
--- a/templates/user/log_in.twig
+++ b/templates/user/log_in.twig
@@ -14,7 +14,9 @@
<p>{{ session.message }}</p>
</div>
{% endif %}
- <input type="submit" class="ui submit button">
+ <div class="field col o6">
+ <input type="submit" class="ui submit button">
+ </div>
</form>
</div>
{% endblock %}
\ No newline at end of file
diff --git a/templates/user/modify_user.twig b/templates/user/modify_user.twig
index f6b3ac6271f1b9a2a8c220a45931fb74a6a3f8be..5e192b17f75cf41c77db05d159dc60120d6575d9 100644
--- a/templates/user/modify_user.twig
+++ b/templates/user/modify_user.twig
@@ -41,12 +41,14 @@
</div>
{% endif %}
</div>
- <div class="field">
- <input type="checkbox" name="contaminated" id="contaminated">
- <label for="contaminated">Contaminated</label>
- </input>
+ <div class="ui checkbox">
+ <input type="checkbox" name="contaminated" id="contaminated" >
+ <label for="contaminated">Contaminated</label>
+ </input>
+ </div>
+ <div class="field col o6">
+ <input type="submit" class="ui submit button">
</div>
- <input type="submit" class="ui submit button">
</form>
</div>
{% endblock %}
\ No newline at end of file
diff --git a/templates/user/user_profile.twig b/templates/user/user_profile.twig
index c405ba65e9c9657f6e73c5fd4d53e4994796eda6..7da5f56744369eed7468e7e67d347116f0faf4c3 100644
--- a/templates/user/user_profile.twig
+++ b/templates/user/user_profile.twig
@@ -1,67 +1,70 @@
{% extends 'common/layout.twig' %}
{% block content %}
- <div class="ui card" id="usercard">
+<div class="row">
+ <div class="ui card" class="col s2 m2 l2 xl2" style="max-height:200px">
<div class="content">
- <img class="ui left floated tiny circular image" src="/assets/img/default-avatar.png">
+ <img class="ui left floated tiny circular image" src="/assets/img/default-avatar.png">
<a class="header">{{user.lastName}} {{user.firstName}}</a>
<div class="meta">
<span class="date">Joined the {{user.joinDateString}}</span>
</div>
<span>Is {% if user.contaminated %} contaminated {% else %} not contaminated {% endif %}</span>
<div class="extra content" id="icons_users">
- <div class="ui small basic icon buttons">
- {% if session.userId == user.getId %}
- <form action="/account/modify" method="get">
- <button type="submit" class="ui button"><i class="edit icon"></i></button>
- </form>
- <button class="ui button" id="delete_user_button"><i class="trash icon"></i></button>
- {% endif %}
- </div>
+ <div class="ui small basic icon buttons">
+ {% if session.userId == user.getId %}
+ <form action="/account/modify" method="get">
+ <button type="submit" class="ui button"><i class="edit icon"></i></button>
+ </form>
+ <button class="ui button" id="delete_user_button"><i class="trash icon"></i></button>
+ {% endif %}
+ </div>
</div>
</div>
</div>
- <div id="map">
- </div>
- <div id="groups">
- <h2> Groups </h2>
- <div class="ui relaxed divided list" id="groups_list" style="overflow:scroll">
- {% for group in user.getGroups %}
- {% if not group.isPrivate %}
- <div class="item">
- <img class="ui avatar image" src="/assets/img/default-avatar.png"></i>
- <div class="content">
- <a href="/groups/{{group.id}}" class="header">{{group.name}}</a>
- </div>
- <form action="/users/{{user.id}}/groups/{{group.getId}}/delete" method="post" class="right floated content">
- <button class="ui button tiny" id="" style="margin-right:10px; padding-right:5px; padding-left:10px"><i class="user times icon"></i></button>
- </form>
- </div>
- {% elseif user.isCurrentUser %}
- <div class="item">
- <img class="ui avatar image" src="/assets/img/default-avatar.png"></i>
- <div class="content">
- <a href="/groups/{{group.id}}" class="header">{{group.name}}</a>
- </div>
- <form action="/users/{{user.id}}/groups/{{group.getId}}/delete" method="post" class="right floated content">
- <button class="ui button tiny" id="" style="margin-right:10px; padding-right:5px; padding-left:10px">Yes</button>
- </form>
- </div>
- {% endif %}
- {% endfor %}
+ <div id="map" class="col s10 m10 l10 xl10"></div>
+</div>
+
+<div class="col s12 m12 l12 xl12 ">
+ <h2> Groups </h2>
+ <div class="ui relaxed divided list" style="overflow:scroll">
+ {% for group in user.getGroups %}
+ {% if not group.isPrivate %}
+ <div class="item">
+ <img class="ui avatar image" src="/assets/img/default-avatar.png"></i>
+ <div class="content">
+ <a href="/groups/{{group.id}}" class="header">{{group.name}}</a>
</div>
- </div>
- <div class="ui modal" id="modal_delete_user">
- <div class="header">
- Confirm you wanna delete your account
+ <form action="/users/{{user.id}}/groups/{{group.getId}}/delete" method="post" class="right floated content">
+ <button class="ui button tiny" id="" style="margin-right:10px; padding-right:5px; padding-left:10px"><i class="user times icon"></i></button>
+ </form>
+ </div>
+ {% elseif user.isCurrentUser %}
+ <div class="item">
+ <img class="ui avatar image" src="/assets/img/default-avatar.png"></i>
+ <div class="content">
+ <a href="/groups/{{group.id}}" class="header">{{group.name}}</a>
+ </div>
+ <form action="/users/{{user.id}}/groups/{{group.getId}}/delete" method="post" class="right floated content">
+ <button class="ui button tiny" id="" style="margin-right:10px; padding-right:5px; padding-left:10px">Yes</button>
+ </form>
</div>
- <div class="actions">
+ {% endif %}
+ {% endfor %}
+ </div>
+</div>
+
+<div class="ui modal" id="modal_delete_user">
+ <div class="header">
+ Confirm you wanna delete your account
+ </div>
+ <div class="actions">
<form action="/account/delete" method="post" class="right floated content">
<button class="ui button tiny" id="" style="margin-right:10px; padding-right:5px; padding-left:10px">Yes</button>
</form>
<div class="ui black deny button">Cancel</div>
- </div>
- </div>
</div>
+</div>
+
<script type="text/javascript" src="/assets/js/users-search.js"></script>
{% endblock %}
\ No newline at end of file