spencer/dsnt-chat
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

improve mobile UI

Browse source
This commit is contained in:
pablof7z 2023-03-16 16:45:27 +01:00
parent a3dc27febd
commit 6b831c62c7
7 changed files with 83 additions and 50 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
demo.html
View file

@ -11,7 +11,15 @@
<p>Below, we have inserted a <code>script</code> tag that should <p>Below, we have inserted a <code>script</code> tag that should
renter a Svelte component upon loading this page.</p> renter a Svelte component upon loading this page.</p>
<script src="public/bundle.js"></script> <script
src="public/bundle.js"
data-chat-type="GLOBAL"
data-chat-tags="nostrica"
data-relays="ws://localhost:8080"
></script>
<link rel="stylesheet" href="public/bundle.css">
></script>
<p>This text will come after the embedded content.</p> <p>This text will come after the embedded content.</p>
</body> </body>

2
package.json
View file

@ -1,6 +1,6 @@
{ {
"name": "nostri.chat", "name": "nostri.chat",
"version": "0.1.1", "version": "0.1.2",
"scripts": { "scripts": {
"dev": "vite dev", "dev": "vite dev",
"build": "svelte-kit sync && svelte-package", "build": "svelte-kit sync && svelte-package",

26
src/ConnectedWidget.svelte
View file

@ -119,7 +119,7 @@
function scrollDown() { function scrollDown() {
animateScroll.scrollToBottom({ animateScroll.scrollToBottom({
container: document.getElementById('messages-container'), container: document.getElementById('messages-container'),
offset: 500, offset: 999999, // hack, oh well, browsers suck
duration: 50 duration: 50
}) })
} }
@ -260,17 +260,19 @@
{/if} {/if}
{/if} {/if}
<div id="messages-container" class="overflow-scroll"> <div id="messages-container" class="overflow-auto -mx-4 px-4" style="height: 50vh; min-height: 300px;">
{#if $selectedMessage} <div id="messages-container-inner">
<NostrNote event={getEventById($selectedMessage)} {responses} {websiteOwnerPubkey} /> {#if $selectedMessage}
{:else} <NostrNote event={getEventById($selectedMessage)} {responses} {websiteOwnerPubkey} />
{#each events as event} {:else}
<NostrNote {event} {responses} {websiteOwnerPubkey} /> {#each events as event}
{#if event.deleted} <NostrNote {event} {responses} {websiteOwnerPubkey} />
👆 deleted {#if event.deleted}
{/if} 👆 deleted
{/each} {/if}
{/if} {/each}
{/if}
</div>
</div> </div>

4
src/NostrNote.svelte
View file

@ -19,7 +19,7 @@
const byWebsiteOwner = !!websiteOwnerPubkey === event.pubkey; const byWebsiteOwner = !!websiteOwnerPubkey === event.pubkey;
$: profiles = $chatData.profiles; $: profiles = $chatData.profiles;
$: displayName = profiles[event.pubkey] && profiles[event.pubkey].display_name || event.pubkey; $: displayName = profiles[event.pubkey] && profiles[event.pubkey].display_name || `[${event.pubkey.slice(0, 6)}]`;
$: nip05 = profiles[event.pubkey] && profiles[event.pubkey].nip05; $: nip05 = profiles[event.pubkey] && profiles[event.pubkey].nip05;
$: profilePicture = profiles[event.pubkey] && profiles[event.pubkey].picture || `https://robohash.org/${event.pubkey}.png?set=set1`; $: profilePicture = profiles[event.pubkey] && profiles[event.pubkey].picture || `https://robohash.org/${event.pubkey}.png?set=set1`;
@ -56,7 +56,7 @@
cursor-pointer cursor-pointer
border border-slate-200 border border-slate-200
{$selectedMessage === event.id ? 'bg-purple-700 text-white' : 'bg-slate-50 text-gray-500 hover:bg-slate-100'} {$selectedMessage === event.id ? 'bg-purple-700 text-white' : 'bg-slate-50 text-gray-500 hover:bg-slate-100'}
p-4 py-2 overflow-scroll rounded-2xl p-4 py-2 overflow-auto rounded-2xl
" on:click|preventDefault={()=>{selectMessage(event.id)}}> " on:click|preventDefault={()=>{selectMessage(event.id)}}>
{event.content} {event.content}
</div> </div>

2
src/Widget.svelte
View file

@ -28,7 +28,7 @@
{#if showChat} {#if showChat}
<div class=" <div class="
shadow-2xl shadow-2xl
bg-white mb-5 w-96 max-w-screen-sm text-black rounded-xl p-5 overflow-scroll bg-white mb-5 w-96 max-w-screen-sm text-black rounded-xl p-5
{minimizeChat ? 'hidden' : ''} {minimizeChat ? 'hidden' : ''}
" style="max-height: 80vh;"> " style="max-height: 80vh;">
{#if !dismissedIntro} {#if !dismissedIntro}

49
src/routes/+page.svelte
View file

@ -1,5 +1,6 @@
<script> <script>
import Container from '../Container.svelte'; import Container from '../Container.svelte';
import Widget from '../Widget.svelte';
import { chatAdapter } from '$lib/store'; import { chatAdapter } from '$lib/store';
let chatStarted; let chatStarted;
@ -31,21 +32,21 @@
</svelte:head> </svelte:head>
<section class=" <section class="
min-h-screen lg:min-h-screen
text-white text-white
bg-gradient-to-b from-orange-500 to-orange-800 bg-gradient-to-b from-orange-500 to-orange-800
"> ">
<div class="min-h-screen mx-auto w-full lg:max-w-7xl py-5 xl:py-10 <div class="lg:min-h-screen mx-auto w-full lg:max-w-7xl py-5 xl:py-10
flex flex-col lg:flex-row flex flex-col md:flex-row
gap-20 items-center px-4 lg:px-0 gap-20 items-center px-4 lg:px-0
relative relative
"> ">
<div class=" <div class="
md:w-3/5 grid grid-cols-1 gap-10 md:w-7/12 gap-10
"> ">
<section id="hero" style="min-height: 50vh;"> <section id="hero" style="min-height: 50vh;">
<h1 class=" <h1 class="
text-4xl md:text-6xl text-6xl
font-black font-black
my-2 my-2
">Nostri.chat</h1> ">Nostri.chat</h1>
@ -72,13 +73,16 @@
</div> </div>
<div class=" <div class="
flex flex-row items-center justify-center flex-row items-center justify-center
min-h-screen fixed min-h-screen
" style="margin-left: 50%;"> hidden md:flex
md:w-5/12
">
<div class=" <div class="
shadow-2xl shadow-2xl
bg-white mb-5 w-96 max-w-screen-sm text-black rounded-3xl p-5 overflow-scroll bg-white mb-5 w-96 max-w-screen-sm text-black rounded-3xl p-5 overflow-auto
flex flex-col justify-end flex flex-col justify-end
fixed
" style="{chatStarted ? 'max-height: 80vh;' : 'padding: 4rem 2rem !important;'}"> " style="{chatStarted ? 'max-height: 80vh;' : 'padding: 4rem 2rem !important;'}">
<Container chatConfiguration={{ <Container chatConfiguration={{
chatType, chatType,
@ -99,9 +103,9 @@
flex flex-col lg:flex-row flex flex-col lg:flex-row
gap-20 px-4 lg:px-0 gap-20 px-4 lg:px-0
" style="min-height: 50vh;"> " style="min-height: 50vh;">
<div class="md:w-8/12 lg:w-3/5 grid grid-cols-1 gap-8"> <div class="md:w-7/12 flex flex-col gap-8">
<div> <div>
<h1 class="text-7xl font-black"> <h1 class="text-6xl lg:text-7xl font-black">
Innovative modes Innovative modes
</h1> </h1>
@ -243,7 +247,7 @@
flex flex-col lg:flex-row flex flex-col lg:flex-row
gap-20 items-center px-4 lg:px-0 gap-20 items-center px-4 lg:px-0
" style="min-height: 50vh;"> " style="min-height: 50vh;">
<div class="md:w-3/5 grid grid-cols-1 gap-8"> <div class="md:w-4/5 lg:w-3/5 grid grid-cols-1 gap-8">
<div> <div>
<h1 class="text-7xl font-black"> <h1 class="text-7xl font-black">
@ -260,7 +264,7 @@
<pre class =" <pre class ="
p-4 p-4
bg-white bg-white
overflow-scroll overflow-auto
"> ">
&lt;script &lt;script
src="https://nostri.chat/public/bundle.js" src="https://nostri.chat/public/bundle.js"
@ -278,6 +282,25 @@
</div> </div>
</section> </section>
<div class="md:hidden">
<Widget chatConfiguration={{
chatType,
chatTags,
chatReferenceTags,
}} {websiteOwnerPubkey} {relays} bind:chatStarted={chatStarted} />
</div>
<footer class="py-6 bg-orange-900 font-mono text-white text-center mt-12 px-10">
<div class="flex justify-center flex-row">
<div class="text-sm">
NOSTRI.CHAT
by
<a class="text-purple-50 hover:text-orange-400" href="https://pablof7z.com">
@pablof7z
</a>
</div>
</div>
</footer>
<style> <style>
/* div { border: solid red 1px; } */ /* div { border: solid red 1px; } */