better apps UX, fix login not triggering redirect on org site

This commit is contained in:
Rotimi Best
2023-10-08 18:14:13 +01:00
parent d5f6c10d70
commit 203bbe2106
6 changed files with 20 additions and 19 deletions
@@ -50,7 +50,7 @@
comment: comment, comment: comment,
name: 'You', name: 'You',
avatar: $profile.avatar_url, avatar: $profile.avatar_url,
commentAt: new Date().getTime().toLocaleString() commentAt: new Date()
} }
]; ];
scrollToBottom(); scrollToBottom();
@@ -194,7 +194,7 @@
</div> </div>
</PageNav> </PageNav>
<div bind:this={bodyRef} class="overflow-auto h-[90%] pb-10 px-2 min-w-[300px] max-w-[350px]"> <div bind:this={bodyRef} class="overflow-y-auto h-[87%] pb-10 px-2 md:min-w-[300px]">
{#each comments as comment} {#each comments as comment}
<div class="pb-2 mt-2"> <div class="pb-2 mt-2">
<div class="flex items-start"> <div class="flex items-start">
@@ -212,7 +212,7 @@
</p> </p>
</div> </div>
</div> </div>
<article class="prose prose-sm sm:prose ml-8"> <article class="prose prose-sm sm:prose ml-8 max-w-[300px]">
{comment.comment} {comment.comment}
</article> </article>
</div> </div>
@@ -148,7 +148,7 @@
> >
{#if hasUserVoted} {#if hasUserVoted}
<span <span
class="progress absolute top-0 left-0 {didUserSelect(option) class="progress absolute top-0 text-black left-0 {didUserSelect(option)
? 'bg-primary-700' ? 'bg-primary-700'
: 'bg-gray-300'} h-full bg-opacity-25" : 'bg-gray-300'} h-full bg-opacity-25"
style="width: {calculatePercent(poll.options, option)}%;" style="width: {calculatePercent(poll.options, option)}%;"
@@ -1,4 +1,4 @@
<script> <script lang="ts">
import PageNav from '$lib/components/PageNav/index.svelte'; import PageNav from '$lib/components/PageNav/index.svelte';
import CloseButton from '$lib/components/Buttons/Close/index.svelte'; import CloseButton from '$lib/components/Buttons/Close/index.svelte';
import PrimaryButton from '$lib/components/PrimaryButton/index.svelte'; import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
@@ -7,7 +7,7 @@
import Poll from './components/Poll.svelte'; import Poll from './components/Poll.svelte';
import Tabs from './components/Tabs.svelte'; import Tabs from './components/Tabs.svelte';
export let handleClose; export let handleClose = () => {};
const users = [ const users = [
{ {
@@ -147,7 +147,7 @@
</div> </div>
</PageNav> </PageNav>
<div class="m-2 overlow-auto"> <div class="m-2 overlow-y-auto min-w-[300px]">
{#if shouldCreatePoll} {#if shouldCreatePoll}
<CreatePollForm onSubmit={handlePollCreate} onCancel={handleCreatePoll} /> <CreatePollForm onSubmit={handlePollCreate} onCancel={handleCreatePoll} />
{:else} {:else}
+2 -6
View File
@@ -75,12 +75,9 @@
} }
function startDragging(event: MouseEvent) { function startDragging(event: MouseEvent) {
console.log('start dragging');
$isDown = true; $isDown = true;
setTimeout(() => { setTimeout(() => {
console.log('is down', $isDown);
if (event.button === 0 && $apps.selectedApp && $isDown) { if (event.button === 0 && $apps.selectedApp && $isDown) {
console.log('start dragging if');
event.preventDefault(); event.preventDefault();
const isNearLeftBorder = event.clientX - appContentRef.getBoundingClientRect().left < 5; const isNearLeftBorder = event.clientX - appContentRef.getBoundingClientRect().left < 5;
const isNearRightBorder = appContentRef.getBoundingClientRect().right - event.clientX < 5; const isNearRightBorder = appContentRef.getBoundingClientRect().right - event.clientX < 5;
@@ -90,7 +87,6 @@
event.clientX >= 0 && event.clientX >= 0 &&
event.clientX <= window.innerWidth event.clientX <= window.innerWidth
) { ) {
console.log('is dragging');
isDragging = true; isDragging = true;
resize = true; resize = true;
startX = event.clientX; startX = event.clientX;
@@ -194,7 +190,7 @@
<SendAlt size={24} class="carbon-icon dark:text-white" /> <SendAlt size={24} class="carbon-icon dark:text-white" />
</IconButton> </IconButton>
</div> </div>
<div class="mb-2"> <!-- <div class="mb-2">
<IconButton <IconButton
toolTipProps={{ title: 'QandA', hotkeys: ['A', '2'] }} toolTipProps={{ title: 'QandA', hotkeys: ['A', '2'] }}
value={APPS_CONSTANTS.APPS.QANDA} value={APPS_CONSTANTS.APPS.QANDA}
@@ -213,7 +209,7 @@
> >
<AlignBoxTopLeft size={24} class="carbon-icon dark:text-white" /> <AlignBoxTopLeft size={24} class="carbon-icon dark:text-white" />
</IconButton> </IconButton>
</div> </div> -->
<div class="mb-2"> <div class="mb-2">
<IconButton <IconButton
toolTipProps={{ title: 'Poll', hotkeys: ['A', '4'] }} toolTipProps={{ title: 'Poll', hotkeys: ['A', '4'] }}
+1 -1
View File
@@ -74,7 +74,7 @@ export interface LessonComment {
name: string; name: string;
avatar: string; avatar: string;
comment: string; comment: string;
commentAt: string; commentAt: string | Date;
} }
// Generated from https://supabase-schema.vercel.app/ // Generated from https://supabase-schema.vercel.app/
+10 -5
View File
@@ -1,4 +1,4 @@
<script> <script lang="ts">
import { page } from '$app/stores'; import { page } from '$app/stores';
import TextField from '$lib/components/Form/TextField.svelte'; import TextField from '$lib/components/Form/TextField.svelte';
import PrimaryButton from '$lib/components/PrimaryButton/index.svelte'; import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
@@ -7,6 +7,7 @@
import { LOGIN_FIELDS } from '$lib/utils/constants/authentication'; import { LOGIN_FIELDS } from '$lib/utils/constants/authentication';
import AuthUI from '$lib/components/AuthUI/index.svelte'; import AuthUI from '$lib/components/AuthUI/index.svelte';
import { currentOrg } from '$lib/utils/store/org'; import { currentOrg } from '$lib/utils/store/org';
import { onDestroy } from 'svelte';
let formRef; let formRef;
let supabase = getSupabase(); let supabase = getSupabase();
@@ -14,6 +15,7 @@
let submitError; let submitError;
let loading = false; let loading = false;
let errors = {}; let errors = {};
let reloadTimeout: NodeJS.Timeout;
let query = new URLSearchParams($page.url.search); let query = new URLSearchParams($page.url.search);
let redirect = query.get('redirect'); let redirect = query.get('redirect');
@@ -36,18 +38,21 @@
console.log('data', data); console.log('data', data);
if (error) throw error; if (error) throw error;
// reload page on org site cause for some reason the authlistener on +layout.svelte doesn't run // reload page on org site cause for some reason the authlistener on +layout.svelte doesn't run sometimes
// on org site reloadTimeout = setTimeout(() => {
if ($currentOrg.id && redirect) {
console.log('Forcing full page reload for auth listener'); console.log('Forcing full page reload for auth listener');
window.location.reload(); window.location.reload();
} }, 1500);
} catch (error) { } catch (error) {
submitError = error.error_description || error.message; submitError = error.error_description || error.message;
} finally { } finally {
loading = false; loading = false;
} }
} }
onDestroy(() => {
clearTimeout(reloadTimeout);
});
</script> </script>
<svelte:head> <svelte:head>