Replace exception popups and add popovers for custom-* data (#6833)

* Replace popup with Bootstrap popover

* Update desktop-table.html

* Add custom-* popovers

* make custom* popover focusable
pull/6841/head
Arun Pattni 2 years ago committed by GitHub
parent c128c4831c
commit 821e6bcacf
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -37,7 +37,7 @@
{{ name }}</a>
{% if website.notes %}
<i class="fas fa-exclamation-triangle exception col" data-content="{{ website.notes }}"></i>
<i class="fas fa-exclamation-triangle exception col" tabindex="0" data-bs-toggle="popover" data-bs-content="{{ website.notes }}"></i>
{% endif %}
</div>
</td>
@ -81,20 +81,12 @@
<td class="icon-cell">
<div class="row">
{% if tfa contains "custom-hardware" %}
<i class="tfa-icon fas fa-info col"
title="{%- if website.custom-hardware -%}
{%- if website.custom-hardware.size > 1 -%}
Requires one of:
{%- else -%}
Required hardware token:
{%- endif-%}
{%- for item in website.custom-hardware -%}&#013;- {{ item }} {%- endfor -%}
{%- else -%}
Requires custom hardware token
{%- endif -%}
"
></i>
{% if website.custom-hardware %}
<i class="tfa-icon fas fa-info col custom-hardware-popover" tabindex="0" data-bs-content="{%- for item in website.custom-hardware -%}&#60;li&#62;{{ item }}&#60;/li&#62;{%- endfor -%}" data-bs-toggle="popover">
</i>
{% else %}
<i class="tfa-icon fas fa-info col" title="Requires custom hardware token"></i>
{% endif %}
{% endif %}
{% if tfa contains "u2f" %}
@ -111,19 +103,12 @@
<i class="tfa-icon fas fa-check col" title="TOTP support"></i>
{% endif %}
{% if tfa contains "custom-software" %}
<i class="tfa-icon fas fa-info col"
title="{%- if website.custom-software -%}
{%- if website.custom-software.size > 1 -%}
Requires one of:
{%- else -%}
Required app:
{%- endif-%}
{%- for item in website.custom-software -%}&#013;- {{ item }} {%- endfor -%}
{%- else -%}
Requires proprietary app/software
{%- endif -%}
"
></i>
{% if website.custom-software %}
<i class="tfa-icon fas fa-info col custom-software-popover" tabindex="0" data-bs-content="{%- for item in website.custom-software -%}&#60;li&#62;{{ item }}&#60;/li&#62;{%- endfor -%}" data-bs-toggle="popover">
</i>
{% else %}
<i class="tfa-icon fas fa-info col" title="Requires proprietary app/software"></i>
{% endif %}
{% endif %}
</div>
</td>

@ -26,7 +26,7 @@
{{ name }}</a>
{% if website.notes %}
<i class="fas fa-exclamation-triangle exception" data-content="{{ website.notes }}"></i>
<i class="fas fa-exclamation-triangle exception" data-bs-toggle="popover" data-bs-trigger="hover focus" data-bs-title="Exceptions & Restrictions" data-bs-content="{{ website.notes }}"></i>
{% endif %}
</div>

File diff suppressed because it is too large Load Diff

@ -52,3 +52,8 @@ td, th {
thead {
background-color: #ffffff;
}
.exception {
color: #db2828;
font-size: 21px;
}

@ -56,8 +56,7 @@
<script src="https://cdnjs.cloudflare.com/ajax/libs/jets/0.14.1/jets.min.js" integrity="sha512-C5x7QiS49O4ubITbqnAX93oOLk9/cASa+m8GawJMki1i4z8AjFDeklRCqiBBjj7niQULNW6nDhqf7l06zrZ9mA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/js/bootstrap.min.js" integrity="sha512-OvBgP9A2JBgiRad/mM36mkzXSXaJE9BEIENnVEmeZdITvwT09xnxLtT4twkCa8m/loMbPHsvPl0T8lRGVBwjlQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="/js/popup.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/js/bootstrap.bundle.min.js" integrity="sha512-pax4MlgXjHEPfCwcJLQhigY7+N8rt6bVvWLFyUMuxShv170X53TRzGPmPkZmGBhk+jikR8WBM4yl7A9WMHHqvg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="/js/main.js"></script>
<script src="/js/social-media.js"></script>
<script src="/js/search.js"></script>

@ -12,5 +12,3 @@
{% include scss/mobile-table.scss %}
{% include scss/social-media.scss %}
{% include scss/popup.scss %}

@ -51,4 +51,23 @@ let resizeObserver = new ResizeObserver(() => {
resizeObserver.observe($('body')[0]);
$('.exception').popup({position: 'right center', hoverable: true, title: 'Exceptions & Restrictions'});
// Initialise popovers
const exceptionPopoverList = [...document.querySelectorAll('.exception')].map(el => new bootstrap.Popover(el, {
trigger: 'hover focus',
title: 'Exceptions & Restrictions'
}));
const customTfaPopoverConfig = {
html: true,
sanitize: false,
trigger: 'hover focus'
}
const customHardwarePopoverList = [...document.querySelectorAll('.custom-hardware-popover')].map(el => new bootstrap.Popover(el, {
...customTfaPopoverConfig,
title: 'Custom Hardware 2FA'
}));
const customSoftwarePopoverList = [...document.querySelectorAll('.custom-software-popover')].map(el => new bootstrap.Popover(el, {
...customTfaPopoverConfig,
title: 'Custom Software 2FA'
}));

File diff suppressed because one or more lines are too long
Loading…
Cancel
Save