Skip to content

Commit

Permalink
✨ Adjusted sizes for mobile
Browse files Browse the repository at this point in the history
  • Loading branch information
@nwrenger
nwrenger committed Jan 3, 2024
1 parent 20decaa commit c9fd7d5
Show file tree
Hide file tree
Showing 2 changed files with 43 additions and 51 deletions.
83 changes: 37 additions & 46 deletions src/routes/builder/Grid.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -84,51 +84,39 @@
>
{#if item.type == GuiType.Header}
{#if typeof item.data.textValue == 'object'}
{#if item.data.textValue?.text}
<div
class="flex {verticalAlign(item.data.textValue?.vertical)} {horizontalAlign(
item.data.textValue?.horizontal
)} h-full"
>
<h2 class="h2 truncate">
<div
class="flex {!item.data.textValue?.text ? 'opacity-30' : ''} {verticalAlign(
item.data.textValue?.vertical || GuiAlign.Top
)} {horizontalAlign(item.data.textValue?.horizontal || GuiAlign.Left)} h-full"
>
<h2 class="lg:h2 h3 truncate">
{#if item.data.textValue?.text}
{item.data.textValue.text}
</h2>
</div>
{:else}
<div
class="flex opacity-30 {verticalAlign(
item.data.textValue?.vertical || GuiAlign.Top
)} {horizontalAlign(item.data.textValue?.horizontal || GuiAlign.Left)} h-full"
>
<h2 class="h2 truncate">Unset</h2>
</div>
{/if}
{:else}
Unset
{/if}
</h2>
</div>
{:else}
<p class="truncate">
TypeError: Mismatched Type. Please delete this Element and put in a new one!
</p>
{/if}
{:else if item.type == GuiType.BodyText}
{#if typeof item.data.textValue == 'object'}
{#if item.data.textValue?.text}
<div
class="flex {verticalAlign(item.data.textValue?.vertical)} {horizontalAlign(
item.data.textValue?.horizontal
)} h-full"
>
<p class="truncate">
<div
class="flex {!item.data.textValue?.text ? 'opacity-30' : ''} {verticalAlign(
item.data.textValue?.vertical || GuiAlign.Top
)} {horizontalAlign(item.data.textValue?.horizontal || GuiAlign.Left)} h-full"
>
<p class="lg:text-base text-xs truncate">
{#if item.data.textValue?.text}
{item.data.textValue.text}
</p>
</div>
{:else}
<div
class="flex opacity-30 {verticalAlign(
item.data.textValue?.vertical || GuiAlign.Top
)} {horizontalAlign(item.data.textValue?.horizontal || GuiAlign.Left)} h-full"
>
<p class="truncate">Unset</p>
</div>
{/if}
{:else}
Unset
{/if}
</p>
</div>
{:else}
<p class="truncate">
TypeError: Mismatched Type. Please delete this Element and put in a new one!
Expand All @@ -140,19 +128,19 @@
{#each item.data.actions as action}
{#if action}
<span
class="rounded-sm pt-2 pb-2 pr-5 pl-5 variant-filled flex-nowrap flex truncate h-fit"
class="rounded-sm pt-2 pb-2 pr-5 pl-5 variant-filled flex-nowrap flex truncate h-fit lg:text-base text-xs"
>
{action.textValue}
{#if action.event}
<span
class="ml-2 badge variant-filled-tertiary z-10 place-self-center truncate"
class="ml-2 badge variant-filled-tertiary z-10 place-self-center truncate lg:text-base text-xs"
>{action.event.type}</span
>
{/if}
</span>
{:else}
<span
class="rounded-sm pt-2 pb-2 pr-5 pl-5 variant-filled opacity-30 truncate h-fit"
class="rounded-sm pt-2 pb-2 pr-5 pl-5 variant-filled opacity-30 truncate h-fit lg:text-base text-xs"
>Unset</span
>
{/if}
Expand All @@ -161,23 +149,26 @@
{/if}
{:else if item.type == GuiType.Alert}
{#if item.data.textValue}
<p class="truncate">{item.data.textValue}</p>
<p class="truncate lg:text-base text-xs">{item.data.textValue}</p>
{:else}
<p class="opacity-30 truncate">Unset</p>
<p class="opacity-30 truncate lg:text-base text-xs">Unset</p>
{/if}
<div class="flex justify-center items-end h-full">
{#if item.data.actions && item.data.actions[0]}
<span class="rounded-sm pt-2 pb-2 pr-5 pl-5 variant-filled truncate h-fit mb-8">
<span
class="rounded-sm pt-2 pb-2 pr-5 pl-5 variant-filled truncate h-fit mb-8 lg:text-base text-xs"
>
{item.data.actions[0].textValue}
{#if item.data.actions[0].event}
<span class="ml-2 badge variant-filled-tertiary z-10 place-self-center truncate"
<span
class="ml-2 badge variant-filled-tertiary z-10 place-self-center truncate lg:text-base text-xs"
>{item.data.actions[0].event.type}</span
>
{/if}
</span>
{:else}
<span
class="rounded-sm pt-2 pb-2 pr-5 pl-5 variant-filled opacity-30 truncate h-fit mb-8"
class="rounded-sm pt-2 pb-2 pr-5 pl-5 variant-filled opacity-30 truncate h-fit mb-8 lg:text-base text-xs"
>Unset</span
>
{/if}
Expand All @@ -190,13 +181,13 @@
{/if}
<span class="badge variant-filled absolute -top-4 -left-4 z-[2]">{item.name}</span>
<button
class="btn w-8 h-[24px] pt-1 pb-1 pr-2 pl-2 variant-filled-primary absolute -top-4 right-8 z-[2]"
class="btn w-8 h-[24px] pt-1 pb-1 pr-2 pl-2 variant-filled-primary absolute -top-4 right-8 z-[99]"
title="Edit"
on:click={() => editItem(item)}
on:pointerdown={(e) => e.stopPropagation()}><i class="fa-solid fa-pen"></i></button
>
<button
class="btn w-8 h-[24px] pt-1 pb-1 pr-2 pl-2 variant-filled-error absolute -top-4 -right-4 z-[2]"
class="btn w-8 h-[24px] pt-1 pb-1 pr-2 pl-2 variant-filled-error absolute -top-4 -right-4 z-[99]"
title="Delete"
on:click={() => deleteItem(item.id)}
on:pointerdown={(e) => e.stopPropagation()}
Expand Down
11 changes: 6 additions & 5 deletions src/routes/builder/Menu.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@
return {
name: 'Header',
w: 20,
h: 1,
h: 2,
x: undefined,
y: undefined,
moveable: true,
Expand All @@ -65,7 +65,7 @@
return {
name: 'Body Text',
w: 20,
h: 1,
h: 2,
x: undefined,
y: undefined,
moveable: true,
Expand All @@ -76,9 +76,9 @@
return {
name: 'Buttons',
w: 20,
h: 1,
h: 2,
x: 0,
y: 9,
y: 8,
moveable: false,
textValue: null,
actions: [null, null, null]
Expand Down Expand Up @@ -307,7 +307,8 @@
</button>
{#if del}
<button
class="ml-1 btn-icon w-8 h-8 variant-filled-error place-self-center"
class="ml-1 btn w-8 variant-filled-error place-self-center"
style="padding-top: 13px; padding-bottom: 13px;"
on:click={() => {
if (del) del(id ?? '');
}}><i class="fa-solid fa-delete-left"></i></button
Expand Down

0 comments on commit c9fd7d5

Please sign in to comment.