refac: styling

This commit is contained in:
Timothy J. Baek 2024-10-06 02:49:16 -07:00
parent 75780256d1
commit 059ac466e0
2 changed files with 12 additions and 14 deletions

View File

@ -26,7 +26,7 @@
getContents();
}
function getContents() {
const getContents = () => {
contents = [];
messages.forEach((message) => {
if (message.content) {
@ -101,12 +101,8 @@
}
});
if (messages.length === 0 || (messages.at(-1)?.done && contents.length === 0)) {
showArtifacts.set(false);
showControls.set(false);
}
selectedContentIdx = contents ? contents.length - 1 : 0;
}
};
function navigateContent(direction: 'prev' | 'next') {
console.log(selectedContentIdx);
@ -149,6 +145,8 @@
});
});
};
onMount(() => {});
</script>
<div class=" w-full h-full relative flex flex-col bg-gray-50 dark:bg-gray-850">
@ -157,18 +155,16 @@
<div class=" absolute top-0 left-0 right-0 bottom-0 z-10"></div>
{/if}
<div
class=" absolute pointer-events-none z-50 w-full flex items-center justify-end p-4 dark:text-gray-100"
>
<div class=" absolute pointer-events-none z-50 w-full flex items-center justify-end p-4">
<button
class="self-center pointer-events-auto"
class="self-center pointer-events-auto p-1 rounded-full bg-white dark:bg-gray-850"
on:click={() => {
dispatch('close');
showControls.set(false);
showArtifacts.set(false);
}}
>
<XMark className="size-4" />
<XMark className="size-3 text-gray-900 dark:text-white" />
</button>
</div>
@ -186,7 +182,9 @@
></iframe>
</div>
{:else}
<div class="m-auto text-xs">{$i18n.t('No HTML, CSS, or JavaScript content found.')}</div>
<div class="m-auto font-medium text-xs text-gray-900 dark:text-white">
{$i18n.t('No HTML, CSS, or JavaScript content found.')}
</div>
{/if}
</div>
</div>

View File

@ -4,7 +4,7 @@
import Markdown from './Markdown.svelte';
import LightBlub from '$lib/components/icons/LightBlub.svelte';
import { showArtifacts, showControls, showOverview } from '$lib/stores';
import { mobile, showArtifacts, showControls, showOverview } from '$lib/stores';
export let id;
export let content;
@ -73,7 +73,7 @@
on:code={(e) => {
const { lang } = e.detail;
console.log('code', lang);
if (['html', 'svg'].includes(lang)) {
if (['html', 'svg'].includes(lang) && !$mobile) {
showArtifacts.set(true);
showControls.set(true);
}