diff --git a/routing/routes/routes.yml b/routing/routes/routes.yml
index 138cde0773523be99175e3bc371a80168237d921..79241fb266c79420e0d6706d41dbd1db422206df 100644
--- a/routing/routes/routes.yml
+++ b/routing/routes/routes.yml
@@ -23,5 +23,6 @@ accounting-user-activity:
accounting-user-logout:
path: /user/logout
methods:
+ - GET
- POST
defaults: { _controller: 'SimpleSAML\Module\accounting\Http\Controllers\User\Profile::logout' }
diff --git a/src/Http/Controllers/User/Profile.php b/src/Http/Controllers/User/Profile.php
index 52f392c33d632b26e319a53a5be2dd4e41ddf3cc..aba52d9356602ed28a3ed1e095557abb0f3c138d 100644
--- a/src/Http/Controllers/User/Profile.php
+++ b/src/Http/Controllers/User/Profile.php
@@ -152,7 +152,6 @@ class Profile
public function logout(): Response
{
- // TODO mivanci make logout button available using HTTP POST
return new RunnableResponse([$this->authSimple, 'logout'], [$this->getLogoutUrl()]);
}
diff --git a/templates/base.twig b/templates/base.twig
index 4188e89210d503ea07f7f7d09c59bd567a33ed6b..7465451f1977531904be1dba6867d691b53c2e09 100644
--- a/templates/base.twig
+++ b/templates/base.twig
@@ -1,44 +1,33 @@
+<!DOCTYPE html>
+<html lang="{{ currentLanguage }}">
+<head>
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+{# <meta name="viewport" content="initial-scale=1.0">#}
+{# <meta http-equiv="X-UA-Compatible" content="IE=Edge">#}
+ <title>{{ pagetitle }}</title>
+ <link rel="stylesheet" href="{{ asset('css/src/default.css', 'accounting') }}">
+ <link rel="icon" href="{{ asset("icons/favicon.ico") }}">
+ <meta name="robots" content="noindex, nofollow">
+</head>
+<body id="{{ templateId }}">
-{% extends "base.twig" %}
+{% include '@accounting/includes/_header.twig' %}
-{% block preload %}
-{# TODO mivanci apply new CSS from Mihaly#}
-{# <link rel="stylesheet" href="{{ asset('css/src/default.css', 'accounting') }}">#}
- <link rel="stylesheet" href="{{ asset('css/src/custom.css', 'accounting') }}">
-{% endblock %}
+{% include '@accounting/includes/_navigation.twig' %}
-{% block contentwrapper %}
- <div class="pure-g">
- <div class="pure-u-1">
- {% include '@accounting/includes/_header.twig' %}
- </div>
- </div>
-
- <div class="pure-g">
- <div class="pure-u-1-5">
- {% include '@accounting/includes/_navigation.twig' %}
- </div>
- <div class="pure-u-4-5">
- {{ block('content') }}
- </div>
- </div>
-{% endblock %}
+{% block banner %}{% endblock %}
-{% block footer %}
- <footer style="text-align: center;">
- <div>
- {% trans %}
- As part of the GÉANT 2020 Framework Partnership Agreement (FPA), the project receives funding
- from the European Union’s Horizon 2020 research and innovation programme under Grant
- Agreement No. 856726 (GN4-3).
- {% endtrans %}
- </div>
- </footer>
+<section id="main">
+ {% block content %}{% endblock %}
+</section>
- {{ parent() }}
-{% endblock %}
-
-{% block postload %}
-{# TODO mivanci add JS#}
-{# <script src="{{ asset('js/src/default.js', 'accounting') }}"></script>#}
-{% endblock %}
+<footer>
+ <div>
+ {% trans %}
+ As part of the GÉANT 2020 Framework Partnership Agreement (FPA), the project receives funding from the European
+ Union’s Horizon 2020 research and innovation programme under Grant Agreement No. 856726 (GN4-3).
+ {% endtrans %}
+ </div>
+</footer>
+</body>
+</html>
\ No newline at end of file
diff --git a/templates/includes/_header.twig b/templates/includes/_header.twig
index 37867ddf5c12084eadb47633af4bdb889340d359..5ba07d95bf4d71b3f885c9a5f09083d56ea41033 100644
--- a/templates/includes/_header.twig
+++ b/templates/includes/_header.twig
@@ -1,7 +1,5 @@
<header>
- <div id="logo">
- <img src="{{ asset('css/src/icons/fppp-logo.svg', 'accounting') }}" alt="Profile Page Logo">
- </div>
+ <div id="logo"><img src="{{ asset('css/src/icons/fppp-logo.svg', 'accounting') }}" alt="Profile Page Logo"/></div>
<label for="nav-toggle" class="nav-toggle-label">
<span></span>
</label>
diff --git a/templates/includes/_js-accordion.twig b/templates/includes/_js-accordion.twig
deleted file mode 100644
index 6f27acee812e27151daeaa19669471a1d8e60181..0000000000000000000000000000000000000000
--- a/templates/includes/_js-accordion.twig
+++ /dev/null
@@ -1,23 +0,0 @@
-<script>
- (function () {
- var acc = document.getElementsByClassName("accordion");
- var i;
-
- for (i = 0; i < acc.length; i++) {
- acc[i].addEventListener("click", function () {
- /* Toggle between adding and removing the "active" class,
- to highlight the button that controls the panel */
- this.classList.toggle("active");
-
- /* Toggle between hiding and showing the active panel */
- var panel = this.nextElementSibling;
-
- if (panel.style.display === "table-row") {
- panel.style.display = "none";
- } else {
- panel.style.display = "table-row";
- }
- });
- }
- })();
-</script>
\ No newline at end of file
diff --git a/templates/includes/_navigation.twig b/templates/includes/_navigation.twig
index 1f34eb9093410b7defcdf86746529e9d2c24ce34..a272262c7ea3d6e8dc21f5d112086842d836a250 100644
--- a/templates/includes/_navigation.twig
+++ b/templates/includes/_navigation.twig
@@ -1,28 +1,40 @@
-<div class="pure-menu">
- <span class="pure-menu-heading"></span>
- <ul class="pure-menu-list">
-{# asset icon example #}
-{# <li class="pure-menu-item">#}
-{# <a href="personal-data">#}
-{# <span class="navicon">#}
-{# <img src="{{ asset('css/src/icons/prof-page.svg', 'accounting') }}"#}
-{# alt="Personal Data Icon">#}
-{# </span>#}
-{# <span>Personal Data</span>#}
-{# </a>#}
-{# </li>#}
-
- <li class="pure-menu-item {% if pageMenuItem is defined and pageMenuItem == 'personal-data' %}pure-menu-selected{% endif %}">
- <a href="personal-data" class="pure-menu-link">Personal Data</a>
- </li>
- <li class="pure-menu-item {% if pageMenuItem is defined and pageMenuItem == 'connected-organizations' %}pure-menu-selected{% endif %}">
- <a href="connected-organizations" class="pure-menu-link">Connected Organizations</a>
- </li>
- <li class="pure-menu-item {% if pageMenuItem is defined and pageMenuItem == 'activity' %} pure-menu-selected{% endif %}">
- <a href="activity" class="pure-menu-link">Activity</a>
- </li>
- <li class="pure-menu-item">
- <a href="#" class="pure-menu-link">Log Out</a>
- </li>
- </ul>
+<div id="nav">
+ <input type="checkbox" id="nav-toggle" class="nav-toggle">
+ <nav role="navigation" aria-label="XXX-pagedesc-XXX">
+ <ul>
+ <li>
+ <a href="personal-data">
+ <span class="navicon">
+ <img src="{{ asset('css/src/icons/prof-page.svg', 'accounting') }}" alt="Profile Page Icon"/>
+ </span>
+ <span>{{ 'Personal Data'|trans }}</span>
+ </a>
+ </li>
+ <li>
+ <a href="connected-organizations">
+ <span class="navicon">
+ <img src="{{ asset('css/src/icons/conn-orgs.svg', 'accounting') }}"
+ alt="Connected Organizations Icon"/>
+ </span>
+ <span>{{ 'Connected Organizations'|trans }}</span>
+ </a>
+ </li>
+ <li>
+ <a href="activity">
+ <span class="navicon">
+ <img src="{{ asset('css/src/icons/activity.svg', 'accounting') }}" alt="Activity Icon"/>
+ </span>
+ <span>{{ 'Activity'|trans }}</span>
+ </a>
+ </li>
+ <li>
+ <a href="logout">
+ <span class="navicon">
+ <img src="{{ asset('css/src/icons/logout.svg', 'accounting') }}" alt="Logout Icon"/>
+ </span>
+ <span>{{ 'Log out'|trans }}</span>
+ </a>
+ </li>
+ </ul>
+ </nav>
</div>
\ No newline at end of file
diff --git a/templates/test.twig b/templates/test.twig
deleted file mode 100644
index 59615eefefbd7da302031730e709102b3c79b9e3..0000000000000000000000000000000000000000
--- a/templates/test.twig
+++ /dev/null
@@ -1,25 +0,0 @@
-{% set pagetitle = 'Setup'|trans %}
-{% set frontpage_section = 'main' %}
-
-{% extends "base.twig" %}
-
-{% block preload %}
- <link rel="stylesheet" href="{{ asset('css/accounting.css', 'accounting') }}">
-{% endblock %}
-
-{% block content %}
-
- <h2>{{ pagetitle }} </h2>
-
- <p>
- Jobs Store class: {{ jobs_store }}, <br>
- Jobs Store needs setup: {{ jobs_store_needs_setup }}, <br>
- Jobs Store setup ran: {{ jobs_store_setup_ran }}, <br>
-
- Data Store class: {{ data_store }}, <br>
- Data Store needs setup: {{ data_store_needs_setup }}, <br>
- Data Store setup ran: {{ data_store_setup_ran }} <br>
- </p>
-
-{% endblock %}
-{# TODO mivanci delete this file #}
\ No newline at end of file
diff --git a/templates/user/activity.twig b/templates/user/activity.twig
index 5f77015382f7be5ffaa6e3ff22e554ad33ffd11a..514feebdbd0517893fd6f4b7c2f895f4ce3f782f 100644
--- a/templates/user/activity.twig
+++ b/templates/user/activity.twig
@@ -8,18 +8,13 @@
{% set pageMenuItem = 'activity' %}
{% block content %}
-
- <h2>{{ pagetitle }} </h2>
-
- <table class="pure-table pure-table-striped pure-table-attributes">
- <thead>
+ <table>
<tr>
<th><strong>{{ 'Time'|trans }}</strong></th>
<th><strong>{{ 'Access'|trans }}</strong></th>
<th><strong>{{ 'Sent data'|trans }}</strong></th>
</tr>
- </thead>
- <tbody>
+
{% for activity in activityBag.getAll %}
<tr class="accordion">
<td>{{ activity.getHappenedAt|date() }}</td>
@@ -30,19 +25,25 @@
{% endfor %}
</td>
</tr>
- <tr class="panel">
- <td colspan="3">
- <strong>{{ 'IP address'|trans }}</strong>
- <ul><li>{{ activity.getClientIpAddress }}</li></ul>
+ <tr>
+ <td class="dropdown-container" colspan="3">
+ <input type="checkbox" id="dropdown-toggle-{{ loop.index }}" class="dropdown-toggle">
+ <label class="dropdown-label" for="dropdown-toggle-{{ loop.index }}">
+ <img src="{{ asset('css/src/icons/dropdown.svg', 'accounting') }}" alt="Dropdown icon">
+ </label>
+ <div class="dropdown-box">
+ <strong>{{ 'IP address'|trans }}</strong>
+ <ul><li>{{ activity.getClientIpAddress|default(' / ') }}</li></ul>
- <strong>{{ 'Information transfered to service'|trans }}</strong>
- <ul>
- {% for name, value in activity.getUser.getAttributes %}
- <li>
- {{ name|trans }}: {{ value|join(', ') }}
- </li>
- {% endfor %}
- </ul>
+ <strong>{{ 'Information transfered to service'|trans }}</strong>
+ <ul>
+ {% for name, value in activity.getUser.getAttributes %}
+ <li>
+ {{ name|trans }}: {{ value|join(', ') }}
+ </li>
+ {% endfor %}
+ </ul>
+ </div>
</td>
</tr>
{% else %}
@@ -50,7 +51,6 @@
<td colspan="3">{{ 'No data available'|trans }}</td>
</tr>
{% endfor %}
- </tbody>
</table>
<br>
<div class="center">
@@ -66,8 +66,3 @@
</div>
{% endblock %}
-
-{% block postload %}
- {{ parent() }}
- {% include '@accounting/includes/_js-accordion.twig' %}
-{% endblock %}
\ No newline at end of file
diff --git a/templates/user/activity.twig.bak b/templates/user/activity.twig.bak
new file mode 100644
index 0000000000000000000000000000000000000000..5f77015382f7be5ffaa6e3ff22e554ad33ffd11a
--- /dev/null
+++ b/templates/user/activity.twig.bak
@@ -0,0 +1,73 @@
+{# @var activityBag \SimpleSAML\Module\accounting\Entities\Activity\Bag #}
+{# @var connectedServiceProvider \SimpleSAML\Module\accounting\Entities\ConnectedServiceProvider #}
+
+{% extends "@accounting/base.twig" %}
+
+{% set pagetitle = 'Activity'|trans %}
+
+{% set pageMenuItem = 'activity' %}
+
+{% block content %}
+
+ <h2>{{ pagetitle }} </h2>
+
+ <table class="pure-table pure-table-striped pure-table-attributes">
+ <thead>
+ <tr>
+ <th><strong>{{ 'Time'|trans }}</strong></th>
+ <th><strong>{{ 'Access'|trans }}</strong></th>
+ <th><strong>{{ 'Sent data'|trans }}</strong></th>
+ </tr>
+ </thead>
+ <tbody>
+ {% for activity in activityBag.getAll %}
+ <tr class="accordion">
+ <td>{{ activity.getHappenedAt|date() }}</td>
+ <td>{{ activity.getServiceProvider.getName }}</td>
+ <td>
+ {% for name in activity.getUser.getAttributes|keys %}
+ {{ name|trans }}{% if not loop.last %}, {% endif %}
+ {% endfor %}
+ </td>
+ </tr>
+ <tr class="panel">
+ <td colspan="3">
+ <strong>{{ 'IP address'|trans }}</strong>
+ <ul><li>{{ activity.getClientIpAddress }}</li></ul>
+
+ <strong>{{ 'Information transfered to service'|trans }}</strong>
+ <ul>
+ {% for name, value in activity.getUser.getAttributes %}
+ <li>
+ {{ name|trans }}: {{ value|join(', ') }}
+ </li>
+ {% endfor %}
+ </ul>
+ </td>
+ </tr>
+ {% else %}
+ <tr>
+ <td colspan="3">{{ 'No data available'|trans }}</td>
+ </tr>
+ {% endfor %}
+ </tbody>
+ </table>
+ <br>
+ <div class="center">
+ <div class="pagination">
+ {% if page > 1 %}
+ <a href="?page={{ page - 1 }}">❮</a>
+ {% endif %}
+
+ {% if activityBag.getAll|length == maxResults %}
+ <a href="?page={{ page + 1 }}">❯</a>
+ {% endif %}
+ </div>
+ </div>
+
+{% endblock %}
+
+{% block postload %}
+ {{ parent() }}
+ {% include '@accounting/includes/_js-accordion.twig' %}
+{% endblock %}
\ No newline at end of file
diff --git a/templates/user/connected-organizations.twig b/templates/user/connected-organizations.twig
index 0d5a57849814c6b3e21e6f52c19dda0250ca6395..8bbe788587202edc09543178c7a689c414c00751 100644
--- a/templates/user/connected-organizations.twig
+++ b/templates/user/connected-organizations.twig
@@ -3,55 +3,57 @@
{% extends "@accounting/base.twig" %}
-{% set pagetitle = 'Connected organizations'|trans %}
+{% set pagetitle = 'Connected Organizations'|trans %}
{% set pageMenuItem = 'connected-organizations' %}
{% block content %}
-
- <h2>{{ pagetitle }} </h2>
-
- <table class="pure-table pure-table-striped pure-table-attributes">
- <thead>
+ <table>
+ <!-- fixed table header -->
<tr>
<th><strong>{{ 'Name'|trans }}</strong></th>
<th><strong>{{ 'All access'|trans }}</strong></th>
<th><strong>{{ 'Last access'|trans }}</strong></th>
</tr>
- </thead>
- <tbody>
+
{% for connectedServiceProvider in connectedServiceProviderBag.getAll %}
- <tr class="accordion">
+ <tr>
<td>{{ connectedServiceProvider.getServiceProvider.getName|e }}</td>
<td>{{ connectedServiceProvider.getNumberOfAuthentications|e }}</td>
<td>{{ connectedServiceProvider.getLastAuthenticationAt|date() }}</td>
</tr>
- <tr class="panel">
- <td colspan="3">
- <strong>{{ 'Service details'|trans }}</strong>
- <ul>
- <li>{{ 'Entity ID'|trans }}: {{ connectedServiceProvider.getServiceProvider.getEntityId|e }}</li>
- <li>{{ 'Description'|trans }}: {{ connectedServiceProvider.getServiceProvider.getDescription|e|default(' / ') }}</li>
- </ul>
+ <tr>
+ <td class="dropdown-container" colspan="3">
+ <input type="checkbox" id="dropdown-toggle-{{ loop.index }}" class="dropdown-toggle">
+ <label class="dropdown-label" for="dropdown-toggle-{{ loop.index }}">
+ <img src="{{ asset('css/src/icons/dropdown.svg', 'accounting') }}" alt="Dropdown icon">
+ </label>
+ <div class="dropdown-box">
+ <strong>{{ 'Service details'|trans }}</strong>
+ <ul>
+ <li>{{ 'Entity ID'|trans }}: {{ connectedServiceProvider.getServiceProvider.getEntityId|e }}</li>
+ <li>{{ 'Description'|trans }}: {{ connectedServiceProvider.getServiceProvider.getDescription|e|default(' / ') }}</li>
+ </ul>
+
+ <strong>{{ 'Information transfered to service'|trans }}</strong>
+ <ul>
+ {% for name, value in connectedServiceProvider.getUser.getAttributes %}
+ <li>
+ {{ name|trans }}: {{ value|join(', ') }}
+ </li>
+ {% endfor %}
+ </ul>
- <strong>{{ 'Information transfered to service'|trans }}</strong>
- <ul>
- {% for name, value in connectedServiceProvider.getUser.getAttributes %}
+ <strong>{{ 'Login details'|trans }}</strong>
+ <ul>
<li>
- {{ name|trans }}: {{ value|join(', ') }}
+ {{ 'First access'|trans }}: {{ connectedServiceProvider.getFirstAuthenticationAt|date() }}
</li>
- {% endfor %}
- </ul>
-
- <strong>{{ 'Login details'|trans }}</strong>
- <ul>
- <li>
- {{ 'First access'|trans }}: {{ connectedServiceProvider.getFirstAuthenticationAt|date() }}
- </li>
- <li>
- {{ 'Last access'|trans }}: {{ connectedServiceProvider.getLastAuthenticationAt|date() }}
- </li>
- </ul>
+ <li>
+ {{ 'Last access'|trans }}: {{ connectedServiceProvider.getLastAuthenticationAt|date() }}
+ </li>
+ </ul>
+ </div>
</td>
</tr>
{% else %}
@@ -59,12 +61,6 @@
<td colspan="3">{{ 'No data available'|trans }}</td>
</tr>
{% endfor %}
- </tbody>
+ <!-- end of repeating item -->
</table>
-
-{% endblock %}
-
-{% block postload %}
- {{ parent() }}
- {% include '@accounting/includes/_js-accordion.twig' %}
{% endblock %}
diff --git a/templates/user/connected-organizations.twig.bak b/templates/user/connected-organizations.twig.bak
new file mode 100644
index 0000000000000000000000000000000000000000..0d5a57849814c6b3e21e6f52c19dda0250ca6395
--- /dev/null
+++ b/templates/user/connected-organizations.twig.bak
@@ -0,0 +1,70 @@
+{# @var connectedServiceProviderBag \SimpleSAML\Module\accounting\Entities\ConnectedServiceProvider\Bag #}
+{# @var connectedServiceProvider \SimpleSAML\Module\accounting\Entities\ConnectedServiceProvider #}
+
+{% extends "@accounting/base.twig" %}
+
+{% set pagetitle = 'Connected organizations'|trans %}
+
+{% set pageMenuItem = 'connected-organizations' %}
+
+{% block content %}
+
+ <h2>{{ pagetitle }} </h2>
+
+ <table class="pure-table pure-table-striped pure-table-attributes">
+ <thead>
+ <tr>
+ <th><strong>{{ 'Name'|trans }}</strong></th>
+ <th><strong>{{ 'All access'|trans }}</strong></th>
+ <th><strong>{{ 'Last access'|trans }}</strong></th>
+ </tr>
+ </thead>
+ <tbody>
+ {% for connectedServiceProvider in connectedServiceProviderBag.getAll %}
+ <tr class="accordion">
+ <td>{{ connectedServiceProvider.getServiceProvider.getName|e }}</td>
+ <td>{{ connectedServiceProvider.getNumberOfAuthentications|e }}</td>
+ <td>{{ connectedServiceProvider.getLastAuthenticationAt|date() }}</td>
+ </tr>
+ <tr class="panel">
+ <td colspan="3">
+ <strong>{{ 'Service details'|trans }}</strong>
+ <ul>
+ <li>{{ 'Entity ID'|trans }}: {{ connectedServiceProvider.getServiceProvider.getEntityId|e }}</li>
+ <li>{{ 'Description'|trans }}: {{ connectedServiceProvider.getServiceProvider.getDescription|e|default(' / ') }}</li>
+ </ul>
+
+ <strong>{{ 'Information transfered to service'|trans }}</strong>
+ <ul>
+ {% for name, value in connectedServiceProvider.getUser.getAttributes %}
+ <li>
+ {{ name|trans }}: {{ value|join(', ') }}
+ </li>
+ {% endfor %}
+ </ul>
+
+ <strong>{{ 'Login details'|trans }}</strong>
+ <ul>
+ <li>
+ {{ 'First access'|trans }}: {{ connectedServiceProvider.getFirstAuthenticationAt|date() }}
+ </li>
+ <li>
+ {{ 'Last access'|trans }}: {{ connectedServiceProvider.getLastAuthenticationAt|date() }}
+ </li>
+ </ul>
+ </td>
+ </tr>
+ {% else %}
+ <tr>
+ <td colspan="3">{{ 'No data available'|trans }}</td>
+ </tr>
+ {% endfor %}
+ </tbody>
+ </table>
+
+{% endblock %}
+
+{% block postload %}
+ {{ parent() }}
+ {% include '@accounting/includes/_js-accordion.twig' %}
+{% endblock %}
diff --git a/templates/user/personal-data.twig b/templates/user/personal-data.twig
index 9aa3bc58c3bf220b2adf045627348591fdb1de80..ee0e606a93164c77324428ce289568beb2229d33 100644
--- a/templates/user/personal-data.twig
+++ b/templates/user/personal-data.twig
@@ -5,31 +5,30 @@
{% set pageMenuItem = 'personal-data' %}
-{% block content %}
-
- <h2>{{ pagetitle }} </h2>
-
+{% block banner %}
<section id="banner">
<div>
{% trans %}This is what we know about you...{% endtrans %}
</div>
</section>
+{% endblock %}
- <table class="pure-table pure-table-striped pure-table-attributes">
- <thead>
+{% block content %}
+ <table>
+ <!-- fixed table header -->
+ <tr>
+ <th>{{ 'Attribute'|trans }}</th>
+ <th>{{ 'Your value'|trans }}</th>
+ </tr>
+
+ {% for name, value in normalizedAttributes %}
<tr>
- <th><strong>Attribute</strong></th>
- <th><strong>Your value</strong></th>
+ <td>
+ {{ name|trans }}
+ <a href="#"><img src="{{ asset('css/src/icons/i.svg', 'accounting') }}" alt="Info icon"></a>
+ </td>
+ <td>{{ value }}</td>
</tr>
- </thead>
- <tbody>
- {% for name, value in normalizedAttributes %}
- <tr>
- <td>{{ name|trans }}</td>
- <td>{{ value }}</td>
- </tr>
- {% endfor %}
- </tbody>
+ {% endfor %}
</table>
-
{% endblock %}
diff --git a/templates/user/personal-data.twig.bak b/templates/user/personal-data.twig.bak
new file mode 100644
index 0000000000000000000000000000000000000000..9aa3bc58c3bf220b2adf045627348591fdb1de80
--- /dev/null
+++ b/templates/user/personal-data.twig.bak
@@ -0,0 +1,35 @@
+
+{% extends "@accounting/base.twig" %}
+
+{% set pagetitle = 'Personal Data'|trans %}
+
+{% set pageMenuItem = 'personal-data' %}
+
+{% block content %}
+
+ <h2>{{ pagetitle }} </h2>
+
+ <section id="banner">
+ <div>
+ {% trans %}This is what we know about you...{% endtrans %}
+ </div>
+ </section>
+
+ <table class="pure-table pure-table-striped pure-table-attributes">
+ <thead>
+ <tr>
+ <th><strong>Attribute</strong></th>
+ <th><strong>Your value</strong></th>
+ </tr>
+ </thead>
+ <tbody>
+ {% for name, value in normalizedAttributes %}
+ <tr>
+ <td>{{ name|trans }}</td>
+ <td>{{ value }}</td>
+ </tr>
+ {% endfor %}
+ </tbody>
+ </table>
+
+{% endblock %}
diff --git a/www/assets/css/src/default.css b/www/assets/css/src/default.css
index 4ce4350caee79661d1e61f124f9bad2dac4e4bb5..ee7abd9765e507356aa3afcb2ed9507649390a60 100644
--- a/www/assets/css/src/default.css
+++ b/www/assets/css/src/default.css
@@ -1,107 +1,107 @@
:root {
- /* */
- --main-text-c: #181E3C;
- --main-bg-c: #F5F5F5;
+ /* */
+ --main-text-c: #181E3C;
+ --main-bg-c: #F5F5F5;
- --heading-text-c: #5B6186;
+ --heading-text-c: #5B6186;
+
+ --caption-bg-c: #F0F2F9;
+
+ --table-border: #F0F2F9;
- --caption-bg-c: #F0F2F9;
+ --nav-bg-c: #F8F8FC;
+
+ --button-bg-c: #4859B2;
+ --button-text-c: #ffffff;
- --table-border: #F0F2F9;
+ --link-c: #4859B2;
- --nav-bg-c: #F8F8FC;
+ --main-font-family: Raleway;
+ --main-font-weight: 500;
+ --mainfont-size: 18pt;
- --button-bg-c: #4859B2;
- --button-text-c: #ffffff;
+ --table-font-size: 18pt;
- --link-c: #4859B2;
-
- --main-font-family: Raleway;
- --main-font-weight: 500;
- --mainfont-size: 18pt;
-
- --table-font-size: 18pt;
-
- --large-font-size: 24px;
+ --large-font-size: 24px;
}
/* raleway-300 - latin-ext_latin */
@font-face {
- font-family: 'Raleway';
- font-style: normal;
- font-weight: 300;
- src: local(''),
- url('fonts/raleway-v28-latin-ext_latin-300.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
- url('fonts/raleway-v28-latin-ext_latin-300.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
-}
-/* raleway-regular - latin-ext_latin */
-@font-face {
- font-family: 'Raleway';
- font-style: normal;
- font-weight: 400;
- src: local(''),
- url('fonts/raleway-v28-latin-ext_latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
- url('fonts/raleway-v28-latin-ext_latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
-}
-/* raleway-500 - latin-ext_latin */
-@font-face {
- font-family: 'Raleway';
- font-style: normal;
- font-weight: 500;
- src: local(''),
- url('fonts/raleway-v28-latin-ext_latin-500.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
- url('fonts/raleway-v28-latin-ext_latin-500.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
-}
-/* raleway-600 - latin-ext_latin */
-@font-face {
- font-family: 'Raleway';
- font-style: normal;
- font-weight: 600;
- src: local(''),
- url('fonts/raleway-v28-latin-ext_latin-600.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
- url('fonts/raleway-v28-latin-ext_latin-600.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
-}
+ font-family: 'Raleway';
+ font-style: normal;
+ font-weight: 300;
+ src: local(''),
+ url('fonts/raleway-v28-latin-ext_latin-300.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+ url('fonts/raleway-v28-latin-ext_latin-300.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+ }
+ /* raleway-regular - latin-ext_latin */
+ @font-face {
+ font-family: 'Raleway';
+ font-style: normal;
+ font-weight: 400;
+ src: local(''),
+ url('fonts/raleway-v28-latin-ext_latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+ url('fonts/raleway-v28-latin-ext_latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+ }
+ /* raleway-500 - latin-ext_latin */
+ @font-face {
+ font-family: 'Raleway';
+ font-style: normal;
+ font-weight: 500;
+ src: local(''),
+ url('fonts/raleway-v28-latin-ext_latin-500.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+ url('fonts/raleway-v28-latin-ext_latin-500.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+ }
+ /* raleway-600 - latin-ext_latin */
+ @font-face {
+ font-family: 'Raleway';
+ font-style: normal;
+ font-weight: 600;
+ src: local(''),
+ url('fonts/raleway-v28-latin-ext_latin-600.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+ url('fonts/raleway-v28-latin-ext_latin-600.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+ }
/* ======================= */
/* mobile-first body */
/* ======================= */
-/*body {*/
-/* display: grid;*/
-/* grid-template-rows: 4em auto auto auto auto;*/
-/* grid-template-columns: 1fr 18fr 1fr;*/
-/* grid-template-areas:*/
-/* "header header header"*/
-/* "nav nav nav"*/
-/* ". banner ."*/
-/* ". main ."*/
-/* "footer footer footer";*/
-/* min-height: 100vh;*/
-/* font-size: var(--main-font-size);*/
-/* font-family: var(--main-font-family);*/
-/* font-weight: var(--main-font-weight);*/
-/* margin: 0;*/
-/*}*/
+body {
+ display: grid;
+ grid-template-rows: 4em auto auto auto auto;
+ grid-template-columns: 1fr 18fr 1fr;
+ grid-template-areas:
+ "header header header"
+ "nav nav nav"
+ ". banner ."
+ ". main ."
+ "footer footer footer";
+ min-height: 100vh;
+ font-size: var(--main-font-size);
+ font-family: var(--main-font-family);
+ font-weight: var(--main-font-weight);
+ margin: 0;
+}
/* ======================= */
/* header and logo */
/* ======================= */
header {
- grid-area: header;
- background-color: var(--nav-bg-c);
- color: var(--link-c);
- display: flex;
- text-align: center;
- width:100%;
- z-index:999;
- flex-direction: row;
- align-items: center;
- justify-content: flex-start;
+ grid-area: header;
+ background-color: var(--nav-bg-c);
+ color: var(--link-c);
+ display: flex;
+ text-align: center;
+ width:100%;
+ z-index:999;
+ flex-direction: row;
+ align-items: center;
+ justify-content: flex-start;
}
#logo {
- /*margin-left: 2em;*/
+ margin-left: 2em;
}
/* ======================= */
@@ -109,250 +109,316 @@ header {
/* ======================= */
#nav{
- grid-area: nav;
+ grid-area: nav;
}
nav {
- width: 100%;
- padding: 1em;
- text-align: left;
- display:none;
- background-color: var(--nav-bg-c);
+ width: 100%;
+ padding: 1em;
+ text-align: left;
+ display:none;
+ background-color: var(--nav-bg-c);
}
nav ul {
- margin: 0;
- padding: 0;
- list-style: none;
- display: inline-flex;
- flex-direction: column;
- flex-wrap: wrap;
- align-items: left;
- justify-content: flex-end;
+ margin: 0;
+ padding: 0;
+ list-style: none;
+ display: inline-flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: left;
+ justify-content: flex-end;
}
nav li {
- margin-left: 0.5em;
- margin-right: 0.5em;
- color: var(--alt-color);
+ margin-left: 0.5em;
+ margin-right: 0.5em;
+ color: var(--alt-color);
}
nav > ul > li {
- font-variant: normal;
- display: flex;
- flex-direction: row;
- align-items: center;
- margin-top: 0.5em;
+ font-variant: normal;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ margin-top: 0.5em;
}
nav > ul > li > a {
- color: var(--banner-font-family);
- text-decoration: none;
- display: flex;
- flex-direction: row;
- justify-items: center;
+ color: var(--banner-font-family);
+ text-decoration: none;
+ display: flex;
+ flex-direction: row;
+ justify-items: center;
}
.nav-toggle {
- display:none;
+ display:none;
}
.nav-toggle:checked ~ nav {
- display: block;
+ display: block;
}
.nav-toggle:checked ~ div {
- display: none;
+ display: none;
}
.nav-toggle-label {
- margin-right: 1em;
- margin-left: auto;
- display: flex;
- height: 100%;
- align-items: center;
- align-self: flex-end;
+ margin-right: 1em;
+ margin-left: auto;
+ display: flex;
+ height: 100%;
+ align-items: center;
+ align-self: flex-end;
}
.nav-toggle:not(:checked) ~ .nav-toggle-label {
- margin-left: auto;
+ margin-left: auto;
}
.nav-toggle-label span,
.nav-toggle-label span:before,
.nav-toggle-label span:after {
- display: block;
- background: var(--link-c);;
- height: 2px;
- width: 2em;
- position: relative;
+ display: block;
+ background: var(--link-c);;
+ height: 2px;
+ width: 2em;
+ position: relative;
}
.nav-toggle-label span:before,
.nav-toggle-label span:after {
- content: '';
- position: absolute;
+ content: '';
+ position: absolute;
}
.nav-toggle-label span:before {
- bottom: 7px;
+ bottom: 7px;
}
.nav-toggle-label span:after {
- top: 7px;
+ top: 7px;
}
.navicon {
- display: inline-grid;
- justify-content: center;
- align-content: center;
- width: 2em;
+ display: inline-grid;
+ justify-content: center;
+ align-content: center;
+ width: 2em;
}
/* ======================= */
/* Banner */
/* ======================= */
#banner {
- grid-area: banner;
+ grid-area: banner;
}
#banner div {
- color: var(--link-c);
- background-color: var(--nav-bg-c);
- margin: 2em;
- padding-left: 1em;
- padding-right: 1em;
- padding-bottom: 1em;
- padding-top: 2.5em;
+ color: var(--link-c);
+ background-color: var(--nav-bg-c);
+ margin: 2em;
+ padding-left: 1em;
+ padding-right: 1em;
+ padding-bottom: 1em;
+ padding-top: 2.5em;
- border-width: 1px;
- border-style: solid;
- border-color: var(--link-c);
+ border-width: 1px;
+ border-style: solid;
+ border-color: var(--link-c);
}
/* ======================= */
/* Main */
/* ======================= */
+
#main{
- grid-area: main;
+ grid-area: main;
}
/* ======================= */
/* Table */
/* ======================= */
+
table {
- margin:1em;
- padding:1em;
- margin-right: auto;
- font-size: var(--table-font-size);
- width: 100%;
+ margin:1em;
+ padding:1em;
+ margin-right: auto;
+ font-size: var(--table-font-size);
+ width: 100%;
}
th {
- text-align:left;
- padding:0.5em;
- word-wrap: break-word;
- border-bottom: solid 1px var(--table-border);
+ text-align:left;
+ padding:0.5em;
+ word-wrap: break-word;
}
td {
- text-align:left;
- padding:0.5em;
- word-wrap: break-word;
- border-bottom: solid 1px var(--table-border);
+ text-align:left;
+ padding-left:0.5em;
+ padding-right:0.5em;
+ padding-top:1.25em;
+ word-wrap: break-word;
+ border-top: solid 1px var(--table-border);
}
th a {
- text-decoration:none;
+ text-decoration:none;
}
td a {
- text-decoration: none;
+ text-decoration: none;
}
.dropdown {
- float:right;
+ float:right;
}
/* ======================= */
-/* Footer */
+/* dropdown-box */
/* ======================= */
-/*footer {*/
-/* display: flex;*/
-/* text-align: center;*/
-/* width:100%;*/
-/* z-index:999;*/
-/* flex-direction: row;*/
-/* align-items: center;*/
-/* justify-content: flex-start;*/
-/* grid-area: footer;*/
-/* color: var(--link-c);*/
-/* background-color: var(--nav-bg-c);*/
-/*}*/
-
-/*footer div {*/
-/* margin: 2em;*/
-/*}*/
-/* ======================= */
-/* desktop provisions */
-/* ======================= */
-@media only screen and (min-width: 768px) {
- /*body {*/
- /* display: grid;*/
- /* grid-template-rows: 4em auto auto auto;*/
- /* grid-template-columns: 3fr 0.5fr 16fr 0.5fr;*/
- /* grid-template-areas:*/
- /* "header header header header"*/
- /* "nav . banner ."*/
- /* "nav . main ."*/
- /* "nav footer footer footer";*/
- /* min-height: 100vh;*/
- /* font-size: var(--body-font-size);*/
- /* font-family: var(--main-font-family);*/
- /* font-weight: var(--main-font-weight);*/
- /* margin: 0;*/
- /*}*/
-
- header {
- background-color: var(--main-bg-c);
- }
+.dropdown-toggle {
+ display: none;
+}
- #nav {
- background-color: var(--nav-bg-c);
- }
+.dropdown-container {
+ padding:0em;
+ border:none;
+ display:table-cell;
+}
- nav {
- width: 100%;
- padding: 0em;
- margin-left: 0em;
- }
+.dropdown-label {
+ float: right;
+ height: 1.25em;
+ position: relative;
+ top: -1.5em;
+}
- nav > ul {
- width: 100%;
- }
+/*
+.dropdown-toggle:checked ~ .dropdown-label:first-of-type {
+ border: 3px solid black;
+}
+*/
- nav > ul > li {
- font-variant: normal;
+.dropdown-box {
+ background-color: var(--caption-bg-c);
+ display:none;
+}
+
+.dropdown-toggle:checked ~ div.dropdown-box:first-of-type {
+ display: block;
+}
+
+/* ======================= */
+/* Footer */
+/* ======================= */
+footer {
display: flex;
+ text-align: center;
+ width:100%;
+ z-index:999;
flex-direction: row;
align-items: center;
- padding-left: 1em;
- }
-
- nav > ul > li > a {
- width: 100%;
- }
-
- nav > ul > li > a > span > img {
- display: inline;
- }
-
- .nav-toggle ~ nav {
- display: block;
- }
+ justify-content: flex-start;
+ grid-area: footer;
+ color: var(--link-c);
+ background-color: var(--nav-bg-c);
+}
- .nav-toggle-label {
- display: none;
- }
+footer div {
+ margin: 2em;
}
+
+/* ======================= */
+/* desktop provisions */
+/* ======================= */
+@media only screen and (min-width: 768px) {
+ body {
+ display: grid;
+ grid-template-rows: 4em auto auto auto;
+ grid-template-columns: 3fr 0.5fr 16fr 0.5fr;
+ grid-template-areas:
+ "header header header header"
+ "nav . banner ."
+ "nav . main ."
+ "nav footer footer footer";
+ min-height: 100vh;
+ font-size: var(--body-font-size);
+ font-family: var(--main-font-family);
+ font-weight: var(--main-font-weight);
+ margin: 0;
+ }
+
+ header {
+ background-color: var(--main-bg-c);
+ }
+
+ #nav {
+ background-color: var(--nav-bg-c);
+ }
+
+ nav {
+ width: 100%;
+ padding: 0em;
+ margin-left: 0em;
+ }
+
+ nav > ul {
+ width: 100%;
+ }
+
+ nav > ul > li {
+ font-variant: normal;
+ font-size: 90%;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ padding-left: 1em;
+ }
+
+ nav > ul > li > a {
+ width: 100%;
+ }
+
+ nav > ul > li > a > span > img {
+ display: inline;
+ }
+
+ .nav-toggle ~ nav {
+ display: block;
+ }
+
+ .nav-toggle-label {
+ display: none;
+ }
+
+ /* ======================= */
+ /* pagination */
+ /* ======================= */
+ .center {
+ text-align: center;
+ }
+
+ .pagination {
+ display: inline-block;
+ }
+
+ .pagination a {
+ color: black;
+ float: left;
+ padding: 8px 16px;
+ text-decoration: none;
+ transition: background-color .3s;
+ border: 1px solid #ddd;
+ }
+
+ .pagination a.active {
+ background-color: #4CAF50;
+ color: white;
+ border: 1px solid #4CAF50;
+ }
+}
\ No newline at end of file