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
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>
</body>

2
package.json
View file

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

6
src/ConnectedWidget.svelte
View file

@ -119,7 +119,7 @@
function scrollDown() {
animateScroll.scrollToBottom({
container: document.getElementById('messages-container'),
offset: 500,
offset: 999999, // hack, oh well, browsers suck
duration: 50
})
}
@ -260,7 +260,8 @@
{/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;">
<div id="messages-container-inner">
{#if $selectedMessage}
<NostrNote event={getEventById($selectedMessage)} {responses} {websiteOwnerPubkey} />
{:else}
@ -271,6 +272,7 @@
{/if}
{/each}
{/if}
</div>
</div>

4
src/NostrNote.svelte
View file

@ -19,7 +19,7 @@
const byWebsiteOwner = !!websiteOwnerPubkey === event.pubkey;
$: 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;
$: profilePicture = profiles[event.pubkey] && profiles[event.pubkey].picture || `https://robohash.org/${event.pubkey}.png?set=set1`;
@ -56,7 +56,7 @@
cursor-pointer
border border-slate-200
{$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)}}>
{event.content}
</div>

2
src/Widget.svelte
View file

@ -28,7 +28,7 @@
{#if showChat}
<div class="
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' : ''}
" style="max-height: 80vh;">
{#if !dismissedIntro}

49
src/routes/+page.svelte
View file

@ -1,5 +1,6 @@
<script>
import Container from '../Container.svelte';
import Widget from '../Widget.svelte';
import { chatAdapter } from '$lib/store';
let chatStarted;
@ -31,21 +32,21 @@
</svelte:head>
<section class="
min-h-screen
lg:min-h-screen
text-white
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
flex flex-col lg:flex-row
<div class="lg:min-h-screen mx-auto w-full lg:max-w-7xl py-5 xl:py-10
flex flex-col md:flex-row
gap-20 items-center px-4 lg:px-0
relative
">
<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;">
<h1 class="
text-4xl md:text-6xl
text-6xl
font-black
my-2
">Nostri.chat</h1>
@ -72,13 +73,16 @@
</div>
<div class="
flex flex-row items-center justify-center
min-h-screen fixed
" style="margin-left: 50%;">
flex-row items-center justify-center
min-h-screen
hidden md:flex
md:w-5/12
">
<div class="
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
fixed
" style="{chatStarted ? 'max-height: 80vh;' : 'padding: 4rem 2rem !important;'}">
<Container chatConfiguration={{
chatType,
@ -99,9 +103,9 @@
flex flex-col lg:flex-row
gap-20 px-4 lg:px-0
" 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>
<h1 class="text-7xl font-black">
<h1 class="text-6xl lg:text-7xl font-black">
Innovative modes
</h1>
@ -243,7 +247,7 @@
flex flex-col lg:flex-row
gap-20 items-center px-4 lg:px-0
" 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>
<h1 class="text-7xl font-black">
@ -260,7 +264,7 @@
<pre class ="
p-4
bg-white
overflow-scroll
overflow-auto
">
&lt;script
src="https://nostri.chat/public/bundle.js"
@ -278,6 +282,25 @@
</div>
</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>
/* div { border: solid red 1px; } */