_Bastler/partey_workadventure
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Improving rendering of share screen

Browse Source
This commit is contained in:
David Négrier 2022-02-11 15:37:23 +01:00
parent c13672c9dc
commit 664cce87b8
1 changed files with 26 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
front/src/Components/Menu/GuestSubMenu.svelte
View File

@ -28,6 +28,8 @@
} }
} }
let canShare = navigator.canShare;
async function shareLink() { async function shareLink() {
const shareData = { url: getLink() }; const shareData = { url: getLink() };
@ -42,18 +44,21 @@
<div class="guest-main"> <div class="guest-main">
<section class="container-overflow"> <section class="container-overflow">
{#if (!canShare) }
<section class="share-url not-mobile"> <section class="share-url not-mobile">
<h3>{$LL.menu.invite.description()}</h3> <h3>{$LL.menu.invite.description()}</h3>
<input type="text" readonly id="input-share-link" value={location.toString()} /> <input type="text" readonly id="input-share-link" class="link-url" value={location.toString()} />
<button type="button" class="nes-btn is-primary" on:click={copyLink}>{$LL.menu.invite.copy()}</button> <button type="button" class="nes-btn is-primary" on:click={copyLink}>{$LL.menu.invite.copy()}</button>
</section> </section>
{:else}
<section class="is-mobile"> <section class="is-mobile">
<h3>{$LL.menu.invite.description()}</h3> <h3>{$LL.menu.invite.description()}</h3>
<input type="hidden" readonly id="input-share-link" value={location.toString()} /> <input type="hidden" readonly id="input-share-link" value={location.toString()} />
<button type="button" class="nes-btn is-primary" on:click={shareLink}>{$LL.menu.invite.share()}</button> <button type="button" class="nes-btn is-primary" on:click={shareLink}>{$LL.menu.invite.share()}</button>
</section> </section>
{/if}
<h3>Select an entry point</h3> <h3>Select an entry point</h3>
<section class="nes-select is-dark"> <section class="nes-select is-dark starting-points">
<select <select
bind:value={entryPoint} bind:value={entryPoint}
on:blur={() => { on:blur={() => {
@ -83,9 +88,18 @@
@import "../../../style/breakpoints.scss"; @import "../../../style/breakpoints.scss";
div.guest-main { div.guest-main {
width: 50%;
margin-left: auto;
margin-right: auto;
height: calc(100% - 56px); height: calc(100% - 56px);
text-align: center; input.link-url {
width: calc(100% - 200px);
}
.starting-points {
width: 80%;
}
section { section {
margin-bottom: 50px; margin-bottom: 50px;
@ -103,25 +117,23 @@
} }
section.is-mobile { section.is-mobile {
display: none; display: block;
text-align: center;
margin-bottom: 20px;
} }
} }
@include media-breakpoint-up(md) { @include media-breakpoint-up(md) {
div.guest-main { div.guest-main {
section.share-url.not-mobile {
display: none;
}
section.is-mobile {
display: block;
text-align: center;
margin-bottom: 20px;
}
section.container-overflow { section.container-overflow {
height: calc(100% - 120px); height: calc(100% - 120px);
} }
} }
} }
@include media-breakpoint-up(lg) {
div.guest-main {
width: 100%;
}
}
</style> </style>