popups and help text scheme

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>

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>

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>

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              */
   /* ======================= */