111 lines
3.5 KiB
HTML
111 lines
3.5 KiB
HTML
|
<script>
|
||
|
|
var modal = document.querySelector('.modal'); // assuming you have only 1
|
||
|
|
var html = document.querySelector('html');
|
||
|
|
modal.querySelector('.modal-background').addEventListener('click', function(e) {
|
||
|
|
e.preventDefault();
|
||
|
|
modal.classList.remove('is-active');
|
||
|
|
html.classList.remove('is-clipped');
|
||
|
|
});
|
||
|
|
modal.querySelector('.modal-close').addEventListener('click', function(e) {
|
||
|
|
e.preventDefault();
|
||
|
|
modal.classList.remove('is-active');
|
||
|
|
html.classList.remove('is-clipped');
|
||
|
|
});
|
||
|
|
|
||
|
|
var TABS = [...document.querySelectorAll('#tabs li')];
|
||
|
|
var CONTENT = [...document.querySelectorAll('#tab-content div')];
|
||
|
|
var ACTIVE_CLASS = 'is-active';
|
||
|
|
initTabs();
|
||
|
|
</script>
|
||
|
|
<style>
|
||
|
|
#tab-content div {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
#tab-content div.is-active {
|
||
|
|
display: block;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
<div class="modal is-active is-clipped">
|
||
|
|
<div class="modal-background"></div>
|
||
|
|
<div class="modal-content">
|
||
|
|
<div class="box">
|
||
|
|
<div class="tabs is-toggle is-fullwidth" id="tabs">
|
||
|
|
<ul>
|
||
|
|
<li class="is-active" data-tab="1">
|
||
|
|
<a>
|
||
|
|
<span class="icon is-small"><i class="fa-solid fa-user"></i></span>
|
||
|
|
<span>Channels</span>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
<li data-tab="2">
|
||
|
|
<a>
|
||
|
|
<span class="icon is-small"><i class="fa-solid fa-hashtag"></i></span>
|
||
|
|
<span>Users</span>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
<li data-tab="3">
|
||
|
|
<a>
|
||
|
|
<span class="icon is-small"><i class="fa-solid fa-people"></i></span>
|
||
|
|
<span>Intersection</span>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
<li data-tab="4">
|
||
|
|
<a>
|
||
|
|
<span class="icon is-small"><i class="fa-solid fa-hashtag"></i></span>
|
||
|
|
<span>Intersection</span>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<div id="tab-content">
|
||
|
|
<div class="is-active" data-content="1">
|
||
|
|
<h4 class="subtitle is-4">Channels {{ nick }} is on</h4>
|
||
|
|
{% for channel in chans %}
|
||
|
|
<a class="panel-block">
|
||
|
|
<span class="panel-icon">
|
||
|
|
<i class="fa-solid fa-hashtag" aria-hidden="true"></i>
|
||
|
|
</span>
|
||
|
|
{{ channel }}
|
||
|
|
</a>
|
||
|
|
{% endfor %}
|
||
|
|
</div>
|
||
|
|
<div data-content="2">
|
||
|
|
<h4 class="subtitle is-4">Users on {{ channel }}</h4>
|
||
|
|
{% for user in users %}
|
||
|
|
<a class="panel-block">
|
||
|
|
<span class="panel-icon">
|
||
|
|
<i class="fa-solid fa-user" aria-hidden="true"></i>
|
||
|
|
</span>
|
||
|
|
{{ user }}
|
||
|
|
</a>
|
||
|
|
{% endfor %}
|
||
|
|
</div>
|
||
|
|
<div data-content="3">
|
||
|
|
<h4 class="subtitle is-4">Users sharing channels with {{ nick }}</h4>
|
||
|
|
{% for user in inter_users %}
|
||
|
|
<a class="panel-block">
|
||
|
|
<span class="panel-icon">
|
||
|
|
<i class="fa-solid fa-user" aria-hidden="true"></i>
|
||
|
|
</span>
|
||
|
|
{{ user }}
|
||
|
|
</a>
|
||
|
|
{% endfor %}
|
||
|
|
</div>
|
||
|
|
<div data-content="4">
|
||
|
|
<h4 class="subtitle is-4">Channels sharing users with {{ channel }}</h4>
|
||
|
|
{% for channel in inter_chans %}
|
||
|
|
<a class="panel-block">
|
||
|
|
<span class="panel-icon">
|
||
|
|
<i class="fa-solid fa-hashtag" aria-hidden="true"></i>
|
||
|
|
</span>
|
||
|
|
{{ channel }}
|
||
|
|
</a>
|
||
|
|
{% endfor %}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<button class="modal-close is-large" aria-label="close"></button>
|
||
|
|
</div>
|
||
|
|
</div>
|