From 80384f89b9a02d57da90f93b9cc76950dd8a0b68 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mih=C3=A1ly=20H=C3=A9der?= <mihaly.heder@sztaki.hu> Date: Tue, 13 Dec 2022 16:52:36 +0100 Subject: [PATCH] popups and help text scheme --- templates/user/activity.twig | 12 +++--- templates/user/connected-organizations.twig | 14 +++---- templates/user/personal-data.twig | 6 ++- www/assets/css/src/default.css | 43 +++++++++++++++++++-- 4 files changed, 57 insertions(+), 18 deletions(-) diff --git a/templates/user/activity.twig b/templates/user/activity.twig index 33e28d2..1ca5ef5 100644 --- a/templates/user/activity.twig +++ b/templates/user/activity.twig @@ -36,13 +36,11 @@ <ul><li>{{ activity.getClientIpAddress|default(' / ') }}</li></ul> <strong>{{ 'Information transfered to service'|trans }}</strong> - <ul> - {% for name, value in activity.getUser.getAttributes %} - <span class="label"> - {{ name|trans }}: {{ value|join(', ') }} - </span> - {% endfor %} - </ul> + {% for name, value in activity.getUser.getAttributes %} + <span class="label"> + {{ name|trans }}: {{ value|join(', ') }} + </span> + {% endfor %} </div> </td> </tr> diff --git a/templates/user/connected-organizations.twig b/templates/user/connected-organizations.twig index d75ad10..502e97f 100644 --- a/templates/user/connected-organizations.twig +++ b/templates/user/connected-organizations.twig @@ -36,13 +36,13 @@ </ul> <strong>{{ 'Information transfered to service'|trans }}</strong> - <ul> - {% for name, value in connectedServiceProvider.getUser.getAttributes %} - <span class="label"> - {{ name|trans }}: {{ value|join(', ') }} - </span> - {% endfor %} - </ul> + + {% for name, value in connectedServiceProvider.getUser.getAttributes %} + <span class="label"> + {{ name|trans }}: {{ value|join(', ') }} + </span> + {% endfor %} + <strong>{{ 'Login details'|trans }}</strong> <ul> diff --git a/templates/user/personal-data.twig b/templates/user/personal-data.twig index b51b082..2458b1a 100644 --- a/templates/user/personal-data.twig +++ b/templates/user/personal-data.twig @@ -25,7 +25,11 @@ <tr> <td> {{ name|trans }} - <a href="#"><img src="{{ asset('css/src/icons/i.svg', 'accounting') }}" alt="Info icon"></a> + <div class="popup" onclick="doPopup('popup-{{ name }}')"> + <img src="{{ asset('css/src/icons/i.svg', 'accounting') }}" alt="Info icon"/> + {% set helpid = 'help-attribute-' ~ name %} + <span class="popuptext" id="popup-{{ name }}">{{ helpid|trans }}</span> + </div> </td> <td><span class="label">{{ value }}</span></td> </tr> diff --git a/www/assets/css/src/default.css b/www/assets/css/src/default.css index f887107..114cfff 100644 --- a/www/assets/css/src/default.css +++ b/www/assets/css/src/default.css @@ -127,14 +127,12 @@ 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); } nav > ul > li { @@ -146,7 +144,6 @@ } nav > ul > li > a { - color: var(--banner-font-family); text-decoration: none; display: flex; flex-direction: row; @@ -338,6 +335,46 @@ display: block; } + /* ======================= */ + /* Popup */ + /* ======================= */ + + .popup { + position: relative; + display: inline-block; + cursor: pointer; + } + + .popup .popuptext { + visibility: hidden; + width: 160px; + background-color: var(--heading-text-c); + color: #fff; + text-align: center; + border-radius: 6px; + padding: 8px 0; + position: absolute; + z-index: 1; + bottom: 125%; + left: 50%; + margin-left: -80px; + } + + .popup .popuptext::after { + content: ""; + position: absolute; + top: 100%; + left: 50%; + margin-left: -5px; + border-width: 5px; + border-style: solid; + border-color: var(--heading-text-c) transparent transparent transparent; + } + + .popup .show { + visibility: visible; + } + /* ======================= */ /* Footer */ /* ======================= */ -- GitLab