From 10fa5a63623e9fc95312a103a38b83f81263e428 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Michael=20G=C3=B6tz?=
 <michael-guenther.goetz@stud.uni-bamberg.de>
Date: Tue, 9 Apr 2019 21:15:56 +0200
Subject: [PATCH] Update templates

---
 account_manager/views/user_views.py           |  2 +-
 static/css/floating_labels.css                | 71 +++++++++++++++++++
 templates/base.jinja2                         |  4 +-
 templates/group/group_detail.jinja2           |  2 +-
 ...{forms_macro.jinja2 => form_macros.jinja2} | 61 +++++++++++++---
 templates/macros/item_form_macros.jinja2      | 26 ++++++-
 templates/user/user_detail.jinja2             | 48 +++++++------
 7 files changed, 179 insertions(+), 35 deletions(-)
 create mode 100644 static/css/floating_labels.css
 rename templates/macros/{forms_macro.jinja2 => form_macros.jinja2} (78%)

diff --git a/account_manager/views/user_views.py b/account_manager/views/user_views.py
index 7df64f7..c7aaa11 100644
--- a/account_manager/views/user_views.py
+++ b/account_manager/views/user_views.py
@@ -147,7 +147,7 @@ def user_update_controller(ldap_user, realm_id, realm_obj, request, user_dn, red
         form_data = {'username': ldap_user.username, 'first_name': ldap_user.first_name,
                      'last_name': ldap_user.last_name, 'email': ldap_user.email}
         form = UpdateLDAPUserForm(initial=form_data)
-    return render(request, detail_page, {'form': form, 'realm': realm_obj})
+    return render(request, detail_page, {'form': form, 'realm': realm_obj, 'user': ldap_user})
 
 
 def user_delete_controller(ldap_user):
diff --git a/static/css/floating_labels.css b/static/css/floating_labels.css
new file mode 100644
index 0000000..154526f
--- /dev/null
+++ b/static/css/floating_labels.css
@@ -0,0 +1,71 @@
+:root {
+    --input-padding-x: .75rem;
+    --input-padding-y: .75rem;
+}
+
+.form-control {
+    height: calc(1.5em + 0.75rem + 0.75rem + 2px);
+}
+
+.floating-label-form {
+    width: 100%;
+    max-width: 420px;
+    padding: 15px;
+    margin: 0 auto;
+}
+
+.form-group {
+    position: relative;
+    margin-bottom: 1rem;
+}
+
+.form-group > input,
+.form-group > label {
+    padding: var(--input-padding-y) var(--input-padding-x);
+}
+
+.form-group > label {
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: block;
+    width: 100%;
+    margin-bottom: 0; /* Override default `<label>` margin */
+    line-height: 1.5;
+    color: #495057;
+    border: 1px solid transparent;
+    border-radius: .25rem;
+    transition: all .1s ease-in-out;
+}
+
+.form-group input::-webkit-input-placeholder {
+    color: transparent;
+}
+
+.form-group input:-ms-input-placeholder {
+    color: transparent;
+}
+
+.form-group input::-ms-input-placeholder {
+    color: transparent;
+}
+
+.form-group input::-moz-placeholder {
+    color: transparent;
+}
+
+.form-group input::placeholder {
+    color: transparent;
+}
+
+.form-group input:not(:placeholder-shown) {
+    padding-top: calc(var(--input-padding-y) + var(--input-padding-y) * (2 / 3));
+    padding-bottom: calc(var(--input-padding-y) / 3);
+}
+
+.form-group input:not(:placeholder-shown) ~ label {
+    padding-top: calc(var(--input-padding-y) / 3);
+    padding-bottom: calc(var(--input-padding-y) / 3);
+    font-size: 12px;
+    color: #777;
+}
diff --git a/templates/base.jinja2 b/templates/base.jinja2
index 5bbbf5b..0f2ec1e 100644
--- a/templates/base.jinja2
+++ b/templates/base.jinja2
@@ -16,7 +16,7 @@
     <!-- Bootstrap CSS -->
     {#    <link rel="stylesheet" href="{{ static('libs/font-awesome-4.7.0/css/font-awesome.css') }}">#}
     <link rel="stylesheet" href="{{ static('libs/bootstrap-4.3.1-dist/css/bootstrap.css') }}">
-    {#    <link rel="stylesheet" href="{{ static('home/form.css') }}">#}
+    <link rel="stylesheet" href="{{ static('css/floating_labels.css') }}">
     {#    <link rel="stylesheet" href="{{ static('home/main.css') }}">#}
     {#    <script src="{{ static('libs/jquery-3.3.1.min.js') }}"></script>#}
     {#    <script src="{{ static('libs/handlebars-379172e.js') }}"></script>#}
@@ -51,7 +51,7 @@
 {% block body %}
     <div class="container-fluid">
         <div class="row">{% block bottom_nav %}{% endblock %}</div>
-        <div class="row bg-dark text-white">
+        <div class="row">
             {% block content %}{% endblock %}
         </div>
     </div>
diff --git a/templates/group/group_detail.jinja2 b/templates/group/group_detail.jinja2
index 053ed11..338a584 100644
--- a/templates/group/group_detail.jinja2
+++ b/templates/group/group_detail.jinja2
@@ -1,5 +1,5 @@
 {% extends 'realm/realm_detailed.jinja2' %}
-{% import 'macros/forms_macro.jinja2' as forms %}
+{% import 'macros/form_macros.jinja2' as forms %}
 {% block extra_content %}
     {% if not form %}
         <h1>{{ group.name }}</h1>
diff --git a/templates/macros/forms_macro.jinja2 b/templates/macros/form_macros.jinja2
similarity index 78%
rename from templates/macros/forms_macro.jinja2
rename to templates/macros/form_macros.jinja2
index d0f10c3..74278ea 100644
--- a/templates/macros/forms_macro.jinja2
+++ b/templates/macros/form_macros.jinja2
@@ -20,6 +20,7 @@
             <datalist id="{{ list }}">
             </datalist>
         {% endif %}
+        <label for="{{ field.id_for_label }}">{{ field.label }}</label>
         <small id="{{ field.id_for_label }}_help" class="form-text text-muted">
             {% if field.errors %}
                 <ul>
@@ -111,17 +112,17 @@
 
 {% macro image_deletion_input(existing_images) -%}
     <div class="card-group">
-    {% for image in existing_images %}
-        <div class="col-12 col-xs-12 col-md-6 col-lg-6 col-xl-3 p-1">
-            <div class="card w-100" style="width: 18rem;" >
-                <input type="checkbox" id="image{{ image.id }}" name="deleteImages"
-                    value="{{ image.id }}">
-                 <label for="image{{ image.id }}">
-                    <img class="img-fluid" src="{{ image.file.url }}" alt="Item default image">
-                </label>
+        {% for image in existing_images %}
+            <div class="col-12 col-xs-12 col-md-6 col-lg-6 col-xl-3 p-1">
+                <div class="card w-100" style="width: 18rem;">
+                    <input type="checkbox" id="image{{ image.id }}" name="deleteImages"
+                           value="{{ image.id }}">
+                    <label for="image{{ image.id }}">
+                        <img class="img-fluid" src="{{ image.file.url }}" alt="Item default image">
+                    </label>
+                </div>
             </div>
-        </div>
-    {% endfor %}
+        {% endfor %}
     </div>
 {% endmacro %}
 
@@ -179,6 +180,7 @@
             <datalist id="{{ list }}">
             </datalist>
         {% endif %}
+        <label for="{{ field.id_for_label }}">{{ field.label }}</label>
         <small id="{{ field.id_for_label }}_help" class="form-text text-muted">
             {% if field.errors %}
                 <ul>
@@ -207,6 +209,7 @@
                id="{{ field.id_for_label }}"
                {% if field.value() != None %}value="{{ field.value() }}"{% endif %}
                {% if field.field.required %}required{% endif %}>
+        <label for="{{ field.id_for_label }}">{{ field.label }}</label>
         <small id="{{ field.id_for_label }}_help" class="form-text text-muted">
             {% if type %}
                 {{ field.label }} in {{ type }}
@@ -223,4 +226,42 @@
             {% endif %}
         </small>
     </div>
+{% endmacro %}
+
+{% macro email_input(field, list='', css_classes='') -%}
+    <div class="form-group">
+        <input type="email"
+                {% if css_classes %}
+               class="{{ css_classes }}"
+                {% else %}
+               class="form-control"
+                {% endif %}
+               placeholder="{{ field.label }}"
+                {% if list %}
+               list="{{ list }}"
+                {% endif %}
+               aria-describedby="{{ field.id_for_label }}_help"
+               name="{{ field.html_name }}"
+               id="{{ field.id_for_label }}"
+               {% if field.value() != None %}value="{{ field.value() }}"{% endif %}
+               maxlength="{{ field.field.max_length }}"
+               {% if field.field.required %}required{% endif %}>
+        {% if list %}
+            <datalist id="{{ list }}">
+            </datalist>
+        {% endif %}
+        <label for="{{ field.id_for_label }}">{{ field.label }}</label>
+        <small id="{{ field.id_for_label }}_help" class="form-text text-muted">
+            {% if field.errors %}
+                <ul>
+                    {% for error in field.errors %}
+                        <li>{{ error }}</li>
+                    {% endfor %}
+                </ul>
+            {% endif %}
+            {% if field.help_text %}
+                <br/>
+            {% endif %}
+        </small>
+    </div>
 {% endmacro %}
\ No newline at end of file
diff --git a/templates/macros/item_form_macros.jinja2 b/templates/macros/item_form_macros.jinja2
index 5b6c3c9..9f0722b 100644
--- a/templates/macros/item_form_macros.jinja2
+++ b/templates/macros/item_form_macros.jinja2
@@ -17,7 +17,31 @@
             Bestehende Bilder (Zum Löschen selektieren)
         </label>
         {{ forms.image_deletion_input(existing_images=item.images.all()) }}
-         <a class="btn btn-primary" href="{{ url('accounts:order-images', args=[item.id]) }}">Bilder manuell sortieren</a>
+        <a class="btn btn-primary" href="{{ url('accounts:order-images', args=[item.id]) }}">Bilder manuell
+            sortieren</a>
+    {% endif %}
+{% endmacro %}
+
+
+{% macro user_update_form(form, form_utils, item) %}
+    <input type="hidden" name="type" value="{{ form.type.value() }}">
+    {% for error in  item_base_form.non_field_errors() %}
+        <p class="alert alert-danger" role="alert">
+            {{ error }}
+        </p>
+    {% endfor %}
+    {{ form_utils.text_input(form.title) }}
+    {{ form_utils.textarea_input(form.description) }}
+    {{ form_utils.select_input(form.categories, multiple=True) }}
+    {{ form_utils.file_input(form.loan_agreement_file) }}
+    {{ form_utils.file_input(form.images, multiple=True) }}
+    {% if item and item.images.count() > 0 %}
+        <label>
+            Bestehende Bilder (Zum Löschen selektieren)
+        </label>
+        {{ forms.image_deletion_input(existing_images=item.images.all()) }}
+        <a class="btn btn-primary" href="{{ url('accounts:order-images', args=[item.id]) }}">Bilder manuell
+            sortieren</a>
     {% endif %}
 {% endmacro %}
 
diff --git a/templates/user/user_detail.jinja2 b/templates/user/user_detail.jinja2
index cdd990b..02c894f 100644
--- a/templates/user/user_detail.jinja2
+++ b/templates/user/user_detail.jinja2
@@ -1,9 +1,11 @@
 {% extends 'base.jinja2' %}
+{% import 'macros/form_macros.jinja2' as mform %}
 {% block content %}
     <div class="col-12 ">
         <div class="row justify-content-center justify-content-sm-center">
-            <div class="col-12 col-sm-6 col-md-5 col-lg-4 col-xl-3 bg-white text-dark p-3 mt-5">
-                {% if not form %}
+
+            {% if not form %}
+                <div class="col-12 col-sm-8 col-md-7 col-lg-5 col-xl-4 bg-white text-dark p-3 mt-5">
                     <div class="card">
                         <div class="card-body">
                             <h5 class="card-title">{{ user.username }}</h5>
@@ -27,29 +29,35 @@
                                 <li class="list-group-item"><span
                                         class="font-weight-bold">Mobiltelefon:</span> {{ user.mobile_phone }}</li>
                             </ul>
-                            <div class="card-footer row">
-                                <div class="col-6 text-left">
-                                    <a href="{{ url('user-update', args = [user.dn, realm.id]) }}"
-                                       class="btn btn-primary">Update
-                                        User</a>
-                                </div>
-                                <div class="col-6 text-right">
-                                    <a href="{{ url('user-delete', args = [user.dn, realm.id]) }}"
-                                       class="btn btn-danger">Delete
-                                        User</a>
-                                </div>
+                            <div class="card-footer d-flex">
+                                <a href="{{ url('user-update', args = [user.dn, realm.id]) }}"
+                                   class="btn btn-primary mr-auto p-2">Update
+                                    User</a>
+                                <a href="{{ url('user-delete', args = [user.dn, realm.id]) }}"
+                                   class="btn btn-danger p-2">Delete
+                                    User</a>
                             </div>
                         </div>
                     </div>
-                    {#                    <p>DN: {{ user.dn }}</p>#}
-                {% else %}
-                    <form method="post">
+                </div>
+            {% else %}
+                <div class="col-12 col-sm-8 col-md-7 col-lg-5 col-xl-4 bg-white text-dark p-3 mt-5 border">
+                    <h1 class="mb-4">Nutzerdetails anpassen</h1>
+                    <form method="post" class="floating-label-form">
                         <input type="hidden" name="csrfmiddlewaretoken" value="{{ csrf_token }}">
-                        {{ form.as_p()|safe }}
-                        <button type="submit">Speichern</button>
+                        {{ mform.email_input(form.email) }}
+                        {{ mform.password_input(form.password) }}
+                        {{ mform.text_input(form.first_name) }}
+                        {{ mform.text_input(form.last_name) }}
+                        <div class="d-flex mt-4">
+                            <button type="submit" class="btn btn-primary mr-auto p-2">Speichern</button>
+                            <a href="{{ url('realm-user-detail', args = [realm.id, user.dn]) }}"
+                               class="btn btn-secondary p-2">Abbrechen</a>
+                        </div>
                     </form>
-                {% endif %}
-            </div>
+                </div>
+            {% endif %}
         </div>
     </div>
+    </div>
 {% endblock %}
\ No newline at end of file