mirror of
https://codeberg.org/ashley/poke.git
synced 2024-11-22 21:37:48 +01:00
add popup
This commit is contained in:
parent
47199e6b37
commit
5cf95d0b1a
1 changed files with 46 additions and 2 deletions
|
@ -377,6 +377,28 @@ text-transform:uppercase;
|
||||||
.subs {
|
.subs {
|
||||||
margin: 0.6em;text-align: left;margin-left: 0px;margin-top: -1em;font-family: "PokeTube flex";font-weight: 1000;font-stretch: ultra-expanded;
|
margin: 0.6em;text-align: left;margin-left: 0px;margin-top: -1em;font-family: "PokeTube flex";font-weight: 1000;font-stretch: ultra-expanded;
|
||||||
}
|
}
|
||||||
|
#popup-container {
|
||||||
|
display: none;
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
background-color: #111;
|
||||||
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
|
||||||
|
padding: 20px;
|
||||||
|
border-radius: 8px;
|
||||||
|
z-index: 1;
|
||||||
|
width: 45em;
|
||||||
|
height: 24em;
|
||||||
|
}
|
||||||
|
#close-btn {
|
||||||
|
cursor: pointer;
|
||||||
|
position: absolute;
|
||||||
|
top: 10px;
|
||||||
|
right: 10px;
|
||||||
|
font-size: 18px;
|
||||||
|
color: #555;
|
||||||
|
}
|
||||||
.video-grid {
|
.video-grid {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
|
@ -453,6 +475,8 @@ color:#ea9999 !important;
|
||||||
.channel-info{
|
.channel-info{
|
||||||
text-align:center;
|
text-align:center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.sticky-top {
|
.sticky-top {
|
||||||
position: sticky;
|
position: sticky;
|
||||||
top: 0px;
|
top: 0px;
|
||||||
|
@ -561,6 +585,16 @@ color:#ea9999 !important;
|
||||||
|
|
||||||
|
|
||||||
<% } %>
|
<% } %>
|
||||||
|
|
||||||
|
<div id="popup-container">
|
||||||
|
<div id="close-btn" onclick="closePopup()">X</div>
|
||||||
|
|
||||||
|
<% if (cinv.descriptionHtml) { %>
|
||||||
|
|
||||||
|
|
||||||
|
<p style="color:#fff;margin-left: 10px;font-weight: bold;"><%-cinv.descriptionHtml%></p>
|
||||||
|
</div> <% } %>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<% if (isMobile) { %>
|
<% if (isMobile) { %>
|
||||||
|
@ -639,7 +673,7 @@ color:#ea9999 !important;
|
||||||
|
|
||||||
<% try { %>
|
<% try { %>
|
||||||
<%- getFirstLine(cinv.description).slice(0, 60) %>
|
<%- getFirstLine(cinv.description).slice(0, 60) %>
|
||||||
<a href="/channel?id=<%= ID %>&tab=about">
|
<a href="/channel?id=<%=ID%>&tab=about" id="popup-trigger">
|
||||||
<% } catch (error) { %>
|
<% } catch (error) { %>
|
||||||
<!-- Handle the error here, if it occurs -->
|
<!-- Handle the error here, if it occurs -->
|
||||||
<p>Error: <%= error.message %></p>
|
<p>Error: <%= error.message %></p>
|
||||||
|
@ -1445,7 +1479,17 @@ document.getElementById('search').addEventListener('keyup', function () {
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
document.getElementById('popup-trigger').addEventListener('click', function (event) {
|
||||||
|
event.preventDefault();
|
||||||
|
document.getElementById('popup-container').style.display = 'block';
|
||||||
|
document.body.style.overflow = 'hidden';
|
||||||
|
});
|
||||||
|
|
||||||
|
function closePopup() {
|
||||||
|
document.getElementById('popup-container').style.display = 'none';
|
||||||
|
document.body.style.overflow = 'auto';
|
||||||
|
}
|
||||||
// @license-end
|
// @license-end
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
Loading…
Reference in a new issue