diff options
Diffstat (limited to 'assets/src')
| -rw-r--r-- | assets/src/components/RequestPage.svelte | 31 | ||||
| -rw-r--r-- | assets/src/components/SharePage.svelte | 32 | ||||
| -rw-r--r-- | assets/src/components/share/Info.svelte | 52 | ||||
| -rw-r--r-- | assets/src/components/share/Requests.svelte | 20 |
4 files changed, 50 insertions, 85 deletions
diff --git a/assets/src/components/RequestPage.svelte b/assets/src/components/RequestPage.svelte index d73d9c0..eb6b559 100644 --- a/assets/src/components/RequestPage.svelte +++ b/assets/src/components/RequestPage.svelte @@ -2,17 +2,40 @@ import { start } from "../network/channel/connection"; import { startRequest } from "../network/channel/request"; - // TODO: Switch to store-based state updates. + import Header from "./Header.svelte"; start().then(startRequest); </script> +<Header color="white" /> + <main> - <h1>Requesting</h1> + <div class="left-segment"> + <h1>Waiting for a response...</h1> + <p> + The share’s content will become available to you once the sharer + decides to accept your request. + </p> + </div> + <div class="right-segment" /> </main> +<svelte:head> + <style> + html, + body { + background-color: white; + color: black; + } + </style> +</svelte:head> + <style> - h1 { - font-size: 4em; + .left-segment { + flex-shrink: 0; + } + + .right-segment { + flex-shrink: 1; } </style> diff --git a/assets/src/components/SharePage.svelte b/assets/src/components/SharePage.svelte index b172f8c..9be9466 100644 --- a/assets/src/components/SharePage.svelte +++ b/assets/src/components/SharePage.svelte @@ -8,8 +8,10 @@ <Header color="black" /> <main> - <Info /> - <div class="request-list"> + <div class="left-segment"> + <Info /> + </div> + <div class="right-segment"> {#if $data.locked} <h1>Requests</h1> <Requests /> @@ -22,31 +24,7 @@ html, body { background-color: black; + color: white; } </style> </svelte:head> - -<style> - main { - display: flex; - justify-content: space-around; - align-items: center; - height: 100%; - width: 66%; - margin: auto; - flex-wrap: wrap; - } - - h1 { - font-size: 35px; - color: white; - font-weight: 400; - } - - .request-list { - width: 315px; - height: 100%; - padding-top: 225px; - box-sizing: border-box; - } -</style> diff --git a/assets/src/components/share/Info.svelte b/assets/src/components/share/Info.svelte index 2d648ce..79ef404 100644 --- a/assets/src/components/share/Info.svelte +++ b/assets/src/components/share/Info.svelte @@ -10,49 +10,31 @@ let connection = getStateStore(); </script> -<div class="info"> - {#if !$data.locked} - <h1>What do you want to share?</h1> - <Selector /> +{#if !$data.locked} + <h1>What do you want to share?</h1> + <Selector /> +{:else} + <h1> + You are <br /> + sharing <b>a text.</b> + </h1> + {#if $connection === ConnectionState.CONNECTED} + <p> + Your share is available under: <br /> + rook.rnrd.eu/<span>{getOwnToken()}</span> + </p> + <!-- TODO: Display actual data. --> + <div class="data">••••••••••••••••••••••••••••••</div> {:else} - <h1> - You are <br /> - sharing <b>a text.</b> - </h1> - {#if $connection === ConnectionState.CONNECTED} - <p> - Your share is available under: <br /> - rook.rnrd.eu/<span>{getOwnToken()}</span> - </p> - <!-- TODO: Display actual data. --> - <div class="data">••••••••••••••••••••••••••••••</div> - {:else} - <p>Connecting to signaling server...</p> - {/if} + <p>Connecting to signaling server...</p> {/if} -</div> +{/if} <style> - h1 { - font-size: 35px; - color: white; - font-weight: 400; - } - - p { - color: #626262; - font-size: 16px; - margin-bottom: 30px; - } - span { color: white; } - .info { - width: 315px; - } - .data { font-size: 14px; width: 100%; diff --git a/assets/src/components/share/Requests.svelte b/assets/src/components/share/Requests.svelte index f9ef237..54eab57 100644 --- a/assets/src/components/share/Requests.svelte +++ b/assets/src/components/share/Requests.svelte @@ -3,24 +3,6 @@ import Request from "./Request.svelte"; </script> -<!-- <script lang="ts"> - import { getOwnToken, start } from "../../network/channel/connection"; - import { startShare } from "../../network/channel/share"; - - import requests from "../../stores/requests"; - import Request from "./Request.svelte"; - - const startPromise = start().then(startShare); - - // TODO: Switch to store-based state updates. -</script> - -{#await startPromise} - <h3>Fetching token...</h3> -{:then} - <h3>Your token is <b>{getOwnToken()}</b>.</h3> --> - {#each $requests as request} <Request token={request} /> -{/each} -<!-- {/await} --> +{/each}
\ No newline at end of file |