workadventure/front/src/Components/Menu/GuestSubMenu.svelte
Gregoire Parant fd64fc43a4 Finish 2 days room limit
- Create modal to register when limit is past
 - Create modal to share the link
 - Use UrlManager to check if limit room is active

Signed-off-by: Gregoire Parant <g.parant@thecodingmachine.com>
2021-12-23 13:09:28 +01:00

76 lines
2 KiB
Svelte

<script lang="ts">
function copyLink() {
const input: HTMLInputElement = document.getElementById("input-share-link") as HTMLInputElement;
input.focus();
input.select();
document.execCommand("copy");
}
async function shareLink() {
const shareData = { url: location.toString() };
try {
await navigator.share(shareData);
} catch (err) {
console.error("Error: " + err);
copyLink();
}
}
</script>
<div class="guest-main">
<section class="container-overflow">
<section class="share-url not-mobile">
<h3>Share the link of the room!</h3>
<input type="text" readonly id="input-share-link" value={location.toString()} />
<button type="button" class="nes-btn is-primary" on:click={copyLink}>Copy</button>
</section>
<section class="is-mobile">
<h3>Share the link of the room!</h3>
<input type="hidden" readonly id="input-share-link" value={location.toString()} />
<button type="button" class="nes-btn is-primary" on:click={shareLink}>Share</button>
</section>
</section>
</div>
<style lang="scss">
div.guest-main {
height: calc(100% - 56px);
text-align: center;
section {
margin-bottom: 50px;
}
section.container-overflow {
height: 100%;
margin: 0;
padding: 0;
overflow: auto;
}
section.is-mobile {
display: none;
}
}
@media only screen and (max-width: 900px), only screen and (max-height: 600px) {
div.guest-main {
section.share-url.not-mobile {
display: none;
}
section.is-mobile {
display: block;
text-align: center;
margin-bottom: 20px;
}
section.container-overflow {
height: calc(100% - 120px);
}
}
}
</style>