style updates to many forms

4 files changed, 49 insertions, 41 deletions

diff --git a/fietsboek/routes.py b/fietsboek/routes.py
index fb8536e..e19b47a 100644
--- a/fietsboek/routes.py
+++ b/fietsboek/routes.py
@@ -17,7 +17,7 @@ def includeme(config):
     config.add_route('cancel-upload', '/cancel/{id}')
 
     config.add_route('details', '/track/{id}')
-    config.add_route('edit', '/edit/{id}')
+    config.add_route('edit', '/track/{id}/edit')
     config.add_route('gpx', '/gpx/{id}.gpx')
     config.add_route('invalidate-share', '/track/{id}/invalidate-link')
     config.add_route('badge', '/badge/{id}')
diff --git a/fietsboek/templates/edit_form.jinja2 b/fietsboek/templates/edit_form.jinja2
index e3aaba5..5851673 100644
--- a/fietsboek/templates/edit_form.jinja2
+++ b/fietsboek/templates/edit_form.jinja2
@@ -21,7 +21,7 @@
 </div>
 <div class="mb-3">
   <div>{{ _("page.track.form.tags") }}</div>
-  <div id="formTags">
+  <div id="formTags" class="mb-1">
     {% for tag in tags %}
     <span class="tag-badge badge rounded-pill bg-info text-dark">{{ tag }} <i class="bi bi-x"></i><input type="hidden" value="{{ tag }}" name="tag[]"></span>
     {% endfor %}
@@ -83,6 +83,6 @@
 </div>
 <div class="mb-3">
   <label for="formDesc" class="form-label">{{ _("page.track.form.description") }}</label>
-  <textarea class="form-control" id="formDesc" name="description">{{ description | default("", true) }}</textarea>
+  <textarea class="form-control" id="formDesc" name="description" rows="5">{{ description | default("", true) }}</textarea>
 </div>
 {% endmacro %}
diff --git a/fietsboek/templates/login.jinja2 b/fietsboek/templates/login.jinja2
index 8d1e2c2..18b12e7 100644
--- a/fietsboek/templates/login.jinja2
+++ b/fietsboek/templates/login.jinja2
@@ -4,20 +4,32 @@
 <div class="container">
   <h1>{{ _("page.login.title") }}</h1>
   <form method="POST" action="{{ request.route_path('login') }}">
-    <label for="loginEmail" class="form-label">{{ _("page.login.email") }}</label>
-    <div class="row mb-3">
-      <div class="col-lg-5">
-        <input type="email" class="form-control" id="loginEmail" name="email">
+    <div class="row justify-content-center">
+      <div class="col-lg-5 mb-3">
+        <div class="form-floating">
+          <input type="email" class="form-control" id="loginEmail" name="email" placeholder="x">
+          <label for="loginEmail" class="form-label">{{ _("page.login.email") }}</label>
+        </div>
       </div>
     </div>
-    <label for="loginPassword" class="form-label">{{ _("page.login.password") }}</label>
-    <div class="row mb-3">
-      <div class="col-lg-5">
-        <input type="password" class="form-control" id="loginPassword" name="password">
+    <div class="row justify-content-center">
+      <div class="col-lg-5 mb-3">
+        <div class="form-floating">
+          <input type="password" class="form-control" id="loginPassword" name="password" placeholder="x">
+          <label for="loginPassword" class="form-label">{{ _("page.login.password") }}</label>
+        </div>
+      </div>
+    </div>
+    <div class="row justify-content-center">
+      <div class="col-auto mb-3">
+        <button type="submit" class="btn btn-primary"><i class="bi bi-door-open"></i> {{ _("page.login.submit") }}</button>
+      </div>
+    </div>
+    <div class="row justify-content-center">
+      <div class="col-auto mb-3">
+        <a href="{{ request.route_url("password-reset") }}">{{ _("page.login.forgot_password") }}</a>
       </div>
     </div>
-    <button type="submit" class="btn btn-primary"><i class="bi bi-door-open"></i> {{ _("page.login.submit") }}</button>
-    <a href="{{ request.route_url("password-reset") }}">{{ _("page.login.forgot_password") }}</a>
   </form>
 </div>
 {% endblock content %}
diff --git a/fietsboek/templates/profile.jinja2 b/fietsboek/templates/profile.jinja2
index 65978ac..75d087c 100644
--- a/fietsboek/templates/profile.jinja2
+++ b/fietsboek/templates/profile.jinja2
@@ -9,29 +9,23 @@
   <h2>{{ _("page.my_profile.personal_data") }}</h2>
 
   <form method="POST" action="{{ request.route_path('change-profile') }}" class="needs-validation" novalidate>
-    <div class="row mb-3">
-      <label for="inputName" class="col-sm-3 col-form-label">{{ _("page.my_profile.personal_data.name") }}</label>
-      <div class="col-sm-9">
-        <input type="text" class="form-control" id="inputName" name="name" value="{{ user.name }}">
-      </div>
+    <div class="form-floating mb-3 col-lg-5">
+      <input type="text" class="form-control" id="inputName" name="name" value="{{ user.name }}" placeholder="x">
+      <label for="inputName">{{ _("page.my_profile.personal_data.name") }}</label>
     </div>
-    <div class="row mb-3">
-      <label for="inputPassword" class="col-sm-3 col-form-label">{{ _("page.my_profile.personal_data.password") }}</label>
-      <div class="col-sm-9">
-        <input type="password" class="form-control" id="inputPassword" name="password" onchange="checkPasswordValidity('#inputPassword', '#repeatPassword')">
-        <div class="invalid-feedback">
-            {{ _("page.my_profile.personal_data.password_invalid") }}
-        </div>
+    <div class="form-floating mb-3 col-lg-5">
+      <input type="password" class="form-control" id="inputPassword" name="password" onchange="checkPasswordValidity('#inputPassword', '#repeatPassword')" placeholder="x">
+      <div class="invalid-feedback">
+          {{ _("page.my_profile.personal_data.password_invalid") }}
       </div>
+      <label for="inputPassword">{{ _("page.my_profile.personal_data.password") }}</label>
     </div>
-    <div class="row mb-3">
-      <label for="repeatPassword" class="col-sm-3 col-form-label">{{ _("page.my_profile.personal_data.repeat_password") }}</label>
-      <div class="col-sm-9">
-        <input type="password" class="form-control" id="repeatPassword" name="repeat-password" onchange="checkPasswordValidity('#inputPassword', '#repeatPassword')">
-        <div class="invalid-feedback">
-            {{ _("page.my_profile.personal_data.password_must_match") }}
-        </div>
+    <div class="form-floating mb-3 col-lg-5">
+      <input type="password" class="form-control" id="repeatPassword" name="repeat-password" onchange="checkPasswordValidity('#inputPassword', '#repeatPassword')" placeholder="x">
+      <div class="invalid-feedback">
+          {{ _("page.my_profile.personal_data.password_must_match") }}
       </div>
+      <label for="repeatPassword">{{ _("page.my_profile.personal_data.repeat_password") }}</label>
     </div>
     <button type="submit" class="btn btn-primary"><i class="bi bi-save"></i> {{ _("page.my_profile.personal_data.save") }}</button>
   </form>
@@ -65,15 +59,17 @@
   </ul>
 
   <div class="m-3">
-    <form action="{{ request.route_url('add-friend') }}" method="POST" class="row">
-      <div class="col-lg-3 d-flex align-items-center">
-        <label for="friendRequestEmail">{{ _("page.my_profile.friend_request_email") }}</label>
-      </div>
-      <div class="col-lg-6">
-        <input type="email" id="friendRequestEmail" name="friend-email" class="form-control">
-      </div>
-      <div class="col-lg-3">
-        <button class="btn btn-primary"><i class="bi bi-send"></i> {{ _("page.my_profile.send_friend_request") }}</button>
+    <form action="{{ request.route_url('add-friend') }}" method="POST">
+      <div class="row justify-content-center align-items-center">
+        <div class="col-lg-5">
+          <div class="form-floating">
+            <input type="email" id="friendRequestEmail" name="friend-email" class="form-control" placeholder="x">
+            <label for="friendRequestEmail">{{ _("page.my_profile.friend_request_email") }}</label>
+          </div>
+        </div>
+        <div class="col-lg-3">
+          <button class="btn btn-primary"><i class="bi bi-send"></i> {{ _("page.my_profile.send_friend_request") }}</button>
+        </div>
       </div>
     </form>
   </div>