fix: add a way to close the invite box
This commit is contained in:
parent
32cec2baab
commit
8337f81b85
2 changed files with 50 additions and 5 deletions
|
|
@ -755,6 +755,35 @@ body[data-perms*="files.write.own"] [data-requires-permission="files.write.own"]
|
|||
border-radius: 100px;
|
||||
}
|
||||
|
||||
/* ICON - CLOSE */
|
||||
.icon.close {
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
display: block;
|
||||
transform: scale(var(--icon-scale, 1));
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
border: 2px solid;
|
||||
border-radius: var(--border-radius);
|
||||
}
|
||||
.icon.close::after,
|
||||
.icon.close::before {
|
||||
content: "";
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
width: 12px;
|
||||
height: 2px;
|
||||
background: currentColor;
|
||||
transform: rotate(45deg);
|
||||
border-radius: var(--border-radius);
|
||||
top: 8px;
|
||||
left: 3px;
|
||||
}
|
||||
.icon.close::after {
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
/* ICON - CONTROLLER */
|
||||
.icon.controller {
|
||||
box-sizing: border-box;
|
||||
|
|
|
|||
|
|
@ -33,14 +33,21 @@
|
|||
document.addEventListener("topic_changed", update_topic_indicators);
|
||||
document.addEventListener("user_logged_in", update_topic_indicators);
|
||||
|
||||
function clear_invite_popup() {
|
||||
document.body.querySelectorAll(".invitepopover").forEach((element) => element.remove());
|
||||
}
|
||||
|
||||
function generate_invite(click_event) {
|
||||
click_event.preventDefault();
|
||||
|
||||
const button = click_event.target;
|
||||
|
||||
document.body.querySelectorAll(".invitepopover").forEach((element) => element.remove());
|
||||
|
||||
clear_invite_popup();
|
||||
const invite_div = document.createElement("div");
|
||||
invite_div.classList.add("invitepopover");
|
||||
invite_div.innerHTML = `<form>
|
||||
invite_div.innerHTML = `
|
||||
<div class="icon close" onclick="clear_invite_popup()"></div>
|
||||
<form>
|
||||
<input name="code" type="text" placeholder="Custom code (optional)">
|
||||
<button onclick="create_invite(event);">Generate</button>
|
||||
</form>`;
|
||||
|
|
@ -89,6 +96,7 @@
|
|||
|
||||
invite_popover.innerHTML = `
|
||||
<div>
|
||||
<div class="icon close" onclick="clear_invite_popup()"></div>
|
||||
<div class="share-option">
|
||||
<span class="name">Code</span>
|
||||
<input readonly type="text" name="code" value="${invite_code.code}" />
|
||||
|
|
@ -234,7 +242,15 @@
|
|||
display: inline-block;
|
||||
}
|
||||
|
||||
.share-option input {
|
||||
.invitepopover .icon.close {
|
||||
cursor: pointer;
|
||||
margin-right: -0.25rem;
|
||||
margin-top: -0.25rem;
|
||||
margin-bottom: 0.75rem;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.invitepopover .share-option input {
|
||||
padding: 0.75rem;
|
||||
margin: 0 1rem 1rem 0;
|
||||
background: none;
|
||||
|
|
@ -246,7 +262,7 @@
|
|||
width: 15rem;
|
||||
}
|
||||
|
||||
.share-option button {
|
||||
.invitepopover .share-option button {
|
||||
padding: 1rem;
|
||||
text-transform: uppercase;
|
||||
border: 1px solid var(--border-subtle);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue