Hot fix integration bugs in templates and styles

src/acanban/project.py

@@ -20,7 +20,7 @@
 from rethinkdb import r
 
 __all__ = ['blueprint']
-BASIC_FIELDS = 'name', 'supervisor', 'participants', 'description'
+BASIC_FIELDS = 'id', 'name', 'supervisors', 'students', 'description'
 
 blueprint = Blueprint('project', __name__, url_prefix='/p')
 

src/acanban/static/style.css

@@ -2,19 +2,19 @@
  * Global stylesheet
  * Copyright (C) 2020  Đào Dương Hoàng Long
  * Copyright (C) 2020  Nguyễn Gia Phong
-
+ *
  * This file is part of Acanban.
-
+ *
  * Acanban is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published
  * by the Free Software Foundation, either version 3 of the License, or
  * (at your option) any later version.
-
+ *
  * Acanban is distributed in the hope that it will be useful,
  * but WITHOUT ANY WARRANTY; without even the implied warranty of
  * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  * GNU Affero General Public License for more details.
-
+ *
  * You should have received a copy of the GNU Affero General Public License
  * along with Acanban.  If not, see <https://www.gnu.org/licenses/>.
  */
@@ -52,68 +52,51 @@ body {
     padding: 0;
 }
 
-.container {
-    margin: auto;
-    max-width: 36rem;
-    padding: 1rem;
-    min-height: 80vh;
-}
-
-h1 { 
+/* common elements */
+h1 {
+    margin: 1rem;
     text-align: center;
-    font-size: 2rem;
 }
-
 p {
     hyphens: auto;
-    font-size: 1.5rem;
-    text-align:center;
+    text-align: justify;
 }
 
-main{
-    min-height: 80vh;
-    padding: 1rem;
-}
 a { text-decoration: none }
 a:link { color: var(--color-link) }
 a:visited { color: var(--color-visited) }
 a:hover {
     color: var(--color-hover);
     cursor: pointer;
 }
-
 img {
-    max-width: 40%;
-    max-height: 40%;
-    margin: 2rem;
+    width: 100%;
     display: block;
-    margin-left: auto;
-    margin-right: auto;
 }
 
-
-/* form */
-form {
+/* columns */
+.col-narrow, .col-wide {
+    padding: 0 1rem;
     margin: auto;
-    max-width: 27rem;
 }
+.col-narrow { max-width: 25rem }
+.col-wide { max-width: 36rem }
+
+/* form */
 button, input, select, textarea {
     font-family: inherit;
     font-size: 100%;
 }
-button, input[type=text], input[type=password], input[type=email], input[type=submit],
-select, textarea {
+button, select, textarea,
+input[type=text], input[type=password], input[type=email] {
     background-color: var(--color-bg);
     border: 0.1rem solid var(--color-fg);
+    border-radius: 0.3rem;
     box-sizing: border-box;
     color: var(--color-fg);
     margin: 0.5rem 0;
     padding: 0.5rem;
     width: 100%;
-    border-radius: 30px;
-    height: 3rem;
-    outline: none;
-    letter-spacing: 1px;
 }
 textarea {
     height: 11rem;
@@ -129,12 +112,18 @@ input:focus, select:focus, textarea:focus {
     border-color: var(--color-primary-dark);
     box-shadow: 0 0 0.5rem var(--color-primary-bright);
 }
-button, input[type=submit] {
+button {
     background-color: var(--color-primary-dark);
     color: var(--color-bg);
     cursor: pointer;
 }
-button, input[type=submit]:hover { background-color: var(--color-primary-medium) }
+button:hover { background-color: var(--color-primary-medium) }
+textarea {
+    height: 11rem;
+    overflow-y: scroll;
+    resize: vertical;
+    scrollbar-color: var(--color-bg-alt) transparent;
+}
 
 /* messages */
 .error, .info, .success, .warning {

src/acanban/templates/base.html

@@ -54,6 +54,7 @@
         {% endif %}
       </div>
     </nav>
-    <main>{% block content %}{% endblock %}</main>
+    <h1>{{ self.title() }}</h1>
+    {% block content %}{% endblock %}
   </body>
 </html>

src/acanban/templates/index.html

@@ -22,16 +22,13 @@
 {% block title %}Acanban{% endblock %}
 {% block content %}
 {% if current_user.is_authenticated %}
-<p>
-  Logged in 
-</p>
+<div class=col-wide>Welcome, {{ current_user.name }}!</div>
 {% else %}
-<h1>Acanban is an academic Kanban board</h1>
-<p> 
-  Aims to provide a collaboration platform 
-  for students and mentors, with first-class 
-  support for academic evaluation.
-</p>
-<img src="/static/collaboration.svg" alt="landing">
+<div class=col-wide>
+  <p>Acanban is an academic Kanban board.  It aims to provide
+     a collaboration platform for students and mentors,
+     with first-class support for academic evaluation.</p>
+  <img src="/static/collaboration.svg" alt="Drawing of people collaborating">
+</div>
 {% endif %}
 {% endblock %}

src/acanban/templates/login.html

@@ -21,19 +21,16 @@
 {% extends "base.html" %}
 {% block title %}Login{% endblock %}
 {% block content %}
-<div class="container">
-  <h1>Log in</h1>
-  <form action=login method=POST id=login>
-    {% if error %}
-    <div class=error>{{ error }}</div>
-    {% endif %}
-    <label for="username">Username</label>
-    <input type=text name=username id=username required>
-    <label for="password">Password</label>
-    <input type=password name=password id=password required>
-    <input type=checkbox name=remember id=remember>
-    <label for=remember>Remember me</label>
-    <input type=submit name=submit value=Login>
-  </form>
-</div>
+<form action=login method=POST class=col-narrow>
+  {% if error %}
+  <div class=error>{{ error }}</div>
+  {% endif %}
+  <label for="username">Username</label>
+  <input type=text name=username id=username required>
+  <label for="password">Password</label>
+  <input type=password name=password id=password required>
+  <input type=checkbox name=remember id=remember>
+  <label for=remember>Remember me</label>
+  <button>Login</button>
+</form>
 {% endblock %}

src/acanban/templates/projects.html

@@ -1,14 +1,16 @@
 {% extends "base.html" %}
 {% block title %}Projects{% endblock %}
 {% block content %}
-<h1>Projects</h1>
-{% for project in projects %}
-<div class=block>
-  <h2><a href=/p/{{ project.id }}>{{ project.name }}</a></h2>
-  <p><b>Supervisors:</b> {{ project.supervisor | userlink | safe }}</p>
-  <p><b>Students:</b> {{ project.participants | map('userlink')
-                         | join(', ') | safe }}</p>
-  <p>{{ project.description }}</p>
+<div class=col-wide>
+  {% for project in projects %}
+  <div class=block>
+    <h2><a href=/p/{{ project.id }}>{{ project.name }}</a></h2>
+    <p><b>Supervisors:</b> {{ project.supervisors | map('userlink')
+                              | join(', ') | safe }}</p>
+    <p><b>Students:</b> {{ project.students | map('userlink')
+                           | join(', ') | safe }}</p>
+    <p>{{ project.description }}</p>
+  </div>
+  {% endfor %}
 </div>
-{% endfor %}
 {% endblock %}

src/acanban/templates/register.html

@@ -20,27 +20,24 @@
 {% extends "base.html" %}
 {% block title %}Registration{% endblock %}
 {% block content %}
-<div class="container">
-  <h1>Register</h1>
-  <form action=register method=POST>
-    {% if error %}
-    <div class=error>{{ error }}</div>
-    {% endif %}
-    <label for="username">Username</label>
-    <input type=text name=username id=username required>
-    <label for="password">Password</label>
-    <input type=password name=password id=password required>
-    <label for="name">Name</label>
-    <input type=text name=name id=name required>
-    <label for="email">Email</label>
-    <input type=email name=email id=email required>
-    <label for="role">Role</label>
-    <select name=role id=role>
-      <option value=student>student</option>
-      <option value=supervisor>supervisor</option>
-      <option value=staff>staff</option>
-    </select>
-    <input type=submit name=submit value=Register>
-  </form>
-</div>
+<form action=register method=POST class=col-narrow>
+  {% if error %}
+  <div class=error>{{ error }}</div>
+  {% endif %}
+  <label for=username>Username</label>
+  <input type=text name=username id=username required>
+  <label for=password>Password</label>
+  <input type=password name=password id=password required>
+  <label for=name>Name</label>
+  <input type=text name=name id=name required>
+  <label for=email>Email</label>
+  <input type=email name=email id=email required>
+  <label for=role>Role</label>
+  <select name=role id=role>
+    <option value=student>student</option>
+    <option value=supervisor>supervisor</option>
+    <option value=staff>staff</option>
+  </select>
+  <button>Register</button>
+</form>
 {% endblock %}

src/acanban/templates/user_profile_edit.html → src/acanban/templates/user-edit.html

@@ -18,22 +18,26 @@
 
 {% extends 'base.html' %}
 
-{% block title %}
-Edit profile
-{% endblock %}
+{% block title %}Edit profile{% endblock %}
 
 {% block content %}
-
-<h1>Edit profile</h1>
-
-<form action="edit" method="POST">
-  <label for="name">Full name</label>
-  <input type="text" name="name" id="name"
-    value="{{ name }}" required/>
-  <label for="email">Email</label>
-  <input type="email" name="email" id="email"
-    value="{{ email }}" required/>
-  <input type="submit" id="submit" value="Save">
-</form>
-
+<div class=col-wide>
+  <form action="edit" method="POST">
+    <label for="name">Full name</label>
+    <input type="text" name="name" id="name"
+           value="{{ user.name }}" required/>
+    <label for="email">Email</label>
+    <input type="email" name="email" id="email"
+           value="{{ user.email }}" required/>
+    {% if user.role == 'student' %}
+    <label for="student-id">Student ID</label>
+    <input type="text" name="student-id" id="student-id"
+           value="{{ user['student-id'] }}">
+    {% endif %}
+    <label for="department">Department</label>
+    <input type="text" name="department" id="department"
+           value="{{ user.department }}">
+    <button>Save</button>
+  </form>
+</div>
 {% endblock%}

src/acanban/templates/user_profile.html → src/acanban/templates/user.html

@@ -18,21 +18,24 @@
 
 {% extends 'base.html' %}
 
-{% block title %}
-{{name}}'s profile
-{% endblock %}
+{% block title %}{{ user.name }}{% endblock %}
 
 {% block content %}
-
-<h1>{{ name }}</h1>
-<div>{{ role }}</div>
-<div>u/{{ username }}</div>
-<div>{{ email }}</div>
-
-{% if username == current_user.key %}
-<a href="{{url_for('user.edit_user_profile', username=username) }}">
-  <button>Edit profile</button>
-</a>
-{% endif %}
-
+<div class=col-wide>
+  <div><b>Role:</b> {{ user.role }}</div>
+  <div><b>Username:</b> {{ user.username }}</div>
+  <div><b>Email:</b> {{ user.email }}</div>
+  {% if user['student-id'] %}
+  <div><b>Student ID:</b> {{ user['student-id'] }}</div>
+  {% endif %}
+  {% if user.department %}
+  <div><b>Department:</b> {{ user.department }}</div>
+  {% endif %}
+
+  {% if user.username == current_user.key %}
+  <a href=/u/{{ user.username }}/edit>
+    <button>Edit profile</button>
+  </a>
+  {% endif %}
+</div>
 {% endblock%}