feat: Responsiveness

2025-03-13 15:14:42 -07:00
parent 2883031609
commit f16180ec59
7 changed files with 46 additions and 139 deletions
@@ -212,7 +212,7 @@ ${svgString}`);
  </div>
 {/snippet}

-<Card title="Actions" isOpen isStackable icon={{ component: DownloadIcon, class: 'rotate-180' }}>
+<Card title="Actions" isStackable icon={{ component: DownloadIcon, class: 'rotate-180' }}>
  <div class="flex min-w-fit flex-col gap-2 p-2">
    <div class="flex w-full items-center gap-2 whitespace-nowrap py-2">
      PNG size
@@ -1,6 +1,7 @@
 <script lang="ts">
  import * as Popover from '$/components/ui/popover';
  import type { Component } from 'svelte';
+  import { Button } from './ui/button';

  interface Props {
    links: { title: string; href: string }[];
@@ -13,7 +14,9 @@

 <Popover.Root>
  <Popover.Trigger class="flex items-center gap-0">
-    <svelte:component this={icon} class={className} />
+    <Button variant="ghost" size="sm">
+      <svelte:component this={icon} class={className} />
+    </Button>
  </Popover.Trigger>
  <Popover.Content>
    <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
@@ -8,6 +8,6 @@
  let { children }: Props = $props();
 </script>

-<div class="flex h-12 items-center justify-between gap-2 rounded-2xl bg-muted p-3">
+<div class="hidden h-12 items-center justify-between gap-2 rounded-2xl bg-muted p-3 md:flex">
  {@render children()}
 </div>
@@ -34,7 +34,7 @@
 {/snippet}

 <Popover.Root>
-  <Popover.Trigger class="flex items-center gap-0">
+  <Popover.Trigger class="flex shrink-0 items-center gap-0">
    <img class="size-6" src="./favicon.svg" alt="Mermaid Live Editor" />
  </Popover.Trigger>
  <Popover.Content align="start" class="overflow-hidden  p-0" sideOffset={16}>
@@ -15,9 +15,10 @@
  import { MCBaseURL } from '$lib/util/util';
  import type { ComponentProps, Snippet } from 'svelte';
  import GithubIcon from '~icons/fa-brands/github';
-  import CloseIcon from '~icons/fa/close';
+  import CloseIcon from '~icons/material-symbols/close-rounded';
  import DropdownNavMenu from './DropdownNavMenu.svelte';
  import MainMenu from './MainMenu.svelte';
+  import { Button } from './ui/button';

  interface Props {
    children: Snippet;
@@ -27,11 +28,7 @@

  const { isEnabledMermaidChartLinks } = env;

-  let isMenuOpen = $state(false);
  const isReferral = document.referrer.includes(MCBaseURL);
-  function toggleMenu() {
-    isMenuOpen = !isMenuOpen;
-  }

  type Links = ComponentProps<typeof DropdownNavMenu>['links'];

@@ -79,15 +76,16 @@
      <activePromotion.component {closeBanner} />
    </div>
    {#snippet closeBanner()}
-      <button
+      <Button
        title="Dismiss banner"
-        aria-label="Dismiss banner"
+        variant="ghost"
+        size="sm"
        onclick={() => {
          dismissPromotion(activePromotion?.id);
          activePromotion = undefined;
        }}>
-        <CloseIcon class="px-2" />
-      </button>
+        <CloseIcon />
+      </Button>
    {/snippet}
  </div>
 {/if}
@@ -100,90 +98,43 @@
      id="switcher"
      class="flex items-center justify-center gap-4 font-medium"
      class:flex-row-reverse={isReferral}>
-      <a href="/">
+      <a href="/" class="whitespace-nowrap text-accent">
        {#if !isReferral}
          Mermaid
        {/if}
        Live Editor
      </a>
      {#if isEnabledMermaidChartLinks}
-        <Switch
-          id="editorMode"
-          class="data-[state=checked]:bg-secondary"
-          checked={isReferral}
-          onclick={() => {
-            logEvent('playgroundToggle', { isReferred: isReferral });
-            window.open(
-              `${MCBaseURL}/play#${$stateStore.serialized}`,
-              '_self',
-              // Do not send referrer header, if the user already came from playground
-              isReferral ? 'noreferrer' : ''
-            );
-          }} />
+        <div class=" hidden items-center justify-center gap-4 md:flex">
+          <Separator orientation="vertical" />
+          <Switch
+            id="editorMode"
+            class="data-[state=checked]:bg-secondary"
+            checked={isReferral}
+            onclick={() => {
+              logEvent('playgroundToggle', { isReferred: isReferral });
+              window.open(
+                `${MCBaseURL}/play#${$stateStore.serialized}`,
+                '_self',
+                // Do not send referrer header, if the user already came from playground
+                isReferral ? 'noreferrer' : ''
+              );
+            }} />

-        <a href="{MCBaseURL}/play#{$stateStore.serialized}">
-          Playground <span class="text-sm opacity-50">- more features, no account required</span>
-        </a>
+          <a href="{MCBaseURL}/play#{$stateStore.serialized}" class="whitespace-nowrap">
+            Playground <span class="hidden text-sm opacity-50 lg:inline"
+              >- more features, no account required</span>
+          </a>
+        </div>
      {/if}
    </div>
  </div>

-  <label
-    for="menu-toggle"
-    class={isMenuOpen ? 'hidden' : 'pointer-cursor fixed right-4 z-[1000] lg:hidden'}>
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      xmlns:xlink="http://www.w3.org/1999/xlink"
-      class="fill-current"
-      width="20"
-      height="20"
-      viewBox="0 0 20 20">
-      <title>Menu</title>
-      <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z" />
-    </svg>
-  </label>
-
-  <!-- Cross SVG -->
-  <label
-    for="menu-toggle"
-    class={isMenuOpen ? 'pointer-cursor fixed right-4 z-[1000] lg:hidden' : 'hidden'}>
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      xmlns:xlink="http://www.w3.org/1999/xlink"
-      class="fill-current"
-      width="20"
-      height="20"
-      viewBox="0 0 20 20">
-      <title>Cross</title>
-      <line x1="5" y1="5" x2="15" y2="15" stroke="white" stroke-width="2" />
-      <line x1="5" y1="15" x2="15" y2="5" stroke="white" stroke-width="2" />
-    </svg>
-  </label>
-
-  <input
-    class="hidden"
-    type="checkbox"
-    id="menu-toggle"
-    bind:checked={isMenuOpen}
-    onclick={toggleMenu} />
-
-  <div class="hidden w-full lg:flex lg:w-auto lg:items-center" id="menu">
-    <div
-      class="h-full items-center justify-between gap-2 overflow-hidden pt-4 text-base lg:flex lg:pt-0">
-      <DropdownNavMenu icon={GithubIcon} links={githubLinks} />
-      <Separator orientation="vertical" />
-
-      {@render children()}
-    </div>
+  <div
+    id="menu"
+    class="hidden h-full w-full flex-nowrap items-center justify-between gap-3 overflow-hidden pt-4 text-base md:flex md:w-auto md:items-center md:pt-0">
+    <DropdownNavMenu icon={GithubIcon} links={githubLinks} />
+    <Separator orientation="vertical" />
+    {@render children()}
  </div>
 </nav>
-
-<style>
-  #menu-toggle:checked + #menu {
-    position: absolute;
-    top: 2.5rem;
-    padding: 1rem 0;
-    background: #661ae6;
-    display: flex;
-  }
-</style>
@@ -137,7 +137,7 @@
        in:fade={{ delay: 800 }}
        out:fade={{ duration: 1000 }}>
        <span class="text-sm tracking-wider text-white">{currentTagline.label}</span>
-        <Button size="sm" class="bg-[#1E1A2E] font-semibold tracking-wider">Try now</Button>
+        <Button size="sm" class="font-semibold tracking-wider">Try now</Button>
      </a>
    {/key}
  </div>
@@ -133,7 +133,7 @@

 <div class="flex h-full flex-col overflow-hidden">
  <Navbar>
-    <Toggle bind:pressed={isHistoryOpen}>
+    <Toggle bind:pressed={isHistoryOpen} size="sm">
      <HistoryIcon />
    </Toggle>
    <Button size="sm">Share</Button>
@@ -183,63 +183,16 @@
      <Resizable.Handle class="mr-1 opacity-0" />
      <Resizable.Pane>
        <div class="relative flex h-full flex-1 flex-col overflow-hidden">
-          <!-- <Card title="Diagram" isClosable={false}>
-            {#snippet actions()}
-              <div class="flex flex-row items-center gap-2">
-                <label
-                  class="label flex cursor-pointer gap-1 py-0"
-                  title="Rough mode is in beta. Features like clickable nodes, Pan & Zoom, will be disabled."
-                  for="rough">
-                  <span>Rough</span>
-                  <input
-                    type="checkbox"
-                    class="toggle {$stateStore.rough ? 'btn-secondary' : 'toggle-primary'}"
-                    id="rough"
-                    bind:checked={$inputStateStore.rough} />
-                </label>
-                <label
-                  class="label flex cursor-pointer gap-1 py-0"
-                  title={$stateStore.rough ? 'Pan & Zoom is disabled in rough mode.' : ''}
-                  for="panZoom">
-                  <span>Pan & Zoom</span>
-                  <input
-                    type="checkbox"
-                    class="toggle {$stateStore.panZoom ? 'btn-secondary' : 'toggle-primary'}"
-                    id="panZoom"
-                    disabled={$stateStore.rough}
-                    bind:checked={$inputStateStore.panZoom} />
-                </label>
-                <a
-                  href={`${base}/view#${$stateStore.serialized}`}
-                  target="_blank"
-                  class="btn btn-secondary btn-xs gap-1"
-                  title="View diagram in new page"
-                  ><ExternalLinkAltIcon />Full screen</a>
-                {#if env.isEnabledMermaidChartLinks}
-                  <a
-                    href={`${MCBaseURL}/app/plugin/save?state=${$stateStore.serialized}`}
-                    target="_blank"
-                    class="btn btn-secondary btn-xs gap-1 bg-[#FF3570]"
-                    title="Save diagram in Mermaid Chart"
-                    ><img
-                      src="./mermaidchart-logo.svg"
-                      class="size-5"
-                      alt="Mermaid chart logo" />Save to Mermaid Chart</a>
-                {/if}
-              </div>
-            {/snippet} -->
-
          <Resizable.PaneGroup direction="horizontal" autoSaveId="viewAndHistory" class="">
            <Resizable.Pane minSize={15} class="relative">
-              <!-- <div class="flex-1 overflow-auto"> -->
              <View {panZoomState} />
              <div class="absolute right-0 top-0"><PanZoomToolbar {panZoomState} /></div>
              <div class="absolute bottom-0 right-0"><VersionSecurityToolbar /></div>
              <div class="absolute bottom-0 left-5"><SyncRoughToolbar /></div>
            </Resizable.Pane>
            {#if isHistoryOpen}
-              <Resizable.Handle class="ml-2 opacity-0" />
-              <Resizable.Pane minSize={25} defaultSize={40}>
+              <Resizable.Handle class="ml-2 hidden opacity-0 md:block" />
+              <Resizable.Pane minSize={25} defaultSize={40} class="hidden md:block">
                <div class="flex h-full flex-grow flex-col">
                  <History />
                </div>
@@ -247,7 +200,7 @@
            {/if}
          </Resizable.PaneGroup>

-          <div class="mx-2 rounded p-2 shadow md:hidden">
+          <div class="rounded bg-primary p-2 text-center shadow md:hidden">
            Code editing not supported on mobile. Please use a desktop browser.
          </div>
        </div>