Form responsive improvements (#2465)

* Move Start a Workflow form to Card * Move schedule form to Card * Update custom search attribute form for responsiveness * Update schedule spec form responsiveness * Remove unnecessary divs * Fix input error and disabled classes
temporalio · Dec 6, 2024 · f2e7ef5 · f2e7ef5
1 parent 1f38b9b
commit f2e7ef5
Show file tree

Hide file tree

Showing 9 changed files with 114 additions and 117 deletions.
diff --git a/src/lib/components/schedule/schedule-day-of-month-view.svelte b/src/lib/components/schedule/schedule-day-of-month-view.svelte
@@ -16,9 +16,7 @@
     {translate('schedules.recurring-dates-heading')}
   </h3>
   <p>{translate('schedules.recurring-dates-description')}</p>
-  <div class="flex w-full flex-col gap-4">
-    <DayOfMonthPicker bind:daysOfMonth />
-    <MonthPicker bind:months />
-  </div>
+  <DayOfMonthPicker bind:daysOfMonth />
+  <MonthPicker bind:months />
 </div>
 <SchedulesTimeView bind:hour bind:minute />
diff --git a/src/lib/components/schedule/schedule-form-view.svelte b/src/lib/components/schedule/schedule-form-view.svelte
@@ -8,6 +8,7 @@
   import SchedulesCalendarView from '$lib/components/schedule/schedules-calendar-view.svelte';
   import Alert from '$lib/holocene/alert.svelte';
   import Button from '$lib/holocene/button.svelte';
+  import Card from '$lib/holocene/card.svelte';
   import Input from '$lib/holocene/input/input.svelte';
   import Link from '$lib/holocene/link.svelte';
   import Loading from '$lib/holocene/loading.svelte';
@@ -165,18 +166,16 @@
   onDestroy(() => ($error = ''));
 </script>
 
-<div class="pb-10">
+<div class="flex flex-col gap-4 pb-10">
   {#if $loading}
     <Loading title={loadingText} />
   {:else}
-    <header class="mb-12 flex flex-col gap-4">
-      <Link href={backHref} icon="chevron-left">
-        {backTitle}
-      </Link>
-      <h1>{title}</h1>
-    </header>
-    <form class="mb-4 flex w-full flex-col gap-4 md:w-2/3 xl:w-1/2">
-      <div class="w-full">
+    <Link href={backHref} icon="chevron-left">
+      {backTitle}
+    </Link>
+    <h1>{title}</h1>
+    <Card class="w-full xl:w-3/4 2xl:w-1/2">
+      <form class="mb-4 flex w-full flex-col gap-4">
         <Input
           id="name"
           bind:value={name}
@@ -188,8 +187,6 @@
           on:blur={onBlur}
           required
         />
-      </div>
-      <div class="w-full">
         <Input
           id="workflowType"
           bind:value={workflowType}
@@ -199,8 +196,6 @@
           on:blur={onBlur}
           required
         />
-      </div>
-      <div class="w-full">
         <Input
           id="workflowId"
           bind:value={workflowId}
@@ -210,8 +205,6 @@
           on:blur={onBlur}
           required
         />
-      </div>
-      <div class="w-full">
         <Input
           id="taskQueue"
           bind:value={taskQueue}
@@ -221,43 +214,43 @@
           on:blur={onBlur}
           required
         />
-      </div>
-      <ScheduleInputPayload
-        bind:input
-        bind:editInput
-        bind:encoding
-        payloads={schedule?.action?.startWorkflow?.input}
-        showEditActions={Boolean(schedule)}
-      />
-      <AddSearchAttributes
-        bind:attributesToAdd={searchAttributesInput}
-        class="w-full"
-      />
-      <SchedulesCalendarView
-        let:preset
-        {schedule}
-        bind:daysOfWeek
-        bind:daysOfMonth
-        bind:months
-        bind:days
-        bind:hour
-        bind:minute
-        bind:second
-        bind:phase
-        bind:cronString
-      >
-        <div class="mt-4 flex flex-row items-center gap-4 max-sm:flex-col">
-          <Button
-            disabled={isDisabled(preset) || !writeActionsAreAllowed()}
-            on:click={() => handleConfirm(preset, schedule)}
-            class="max-sm:w-full">{confirmText}</Button
-          >
-          <Button variant="ghost" href={backHref} class="max-sm:w-full"
-            >{translate('common.cancel')}</Button
-          >
-        </div>
-      </SchedulesCalendarView>
-      <Alert intent="error" title={$error} hidden={!$error} />
-    </form>
+        <ScheduleInputPayload
+          bind:input
+          bind:editInput
+          bind:encoding
+          payloads={schedule?.action?.startWorkflow?.input}
+          showEditActions={Boolean(schedule)}
+        />
+        <AddSearchAttributes
+          bind:attributesToAdd={searchAttributesInput}
+          class="w-full"
+        />
+        <SchedulesCalendarView
+          let:preset
+          {schedule}
+          bind:daysOfWeek
+          bind:daysOfMonth
+          bind:months
+          bind:days
+          bind:hour
+          bind:minute
+          bind:second
+          bind:phase
+          bind:cronString
+        >
+          <div class="mt-4 flex flex-row items-center gap-4 max-sm:flex-col">
+            <Button
+              disabled={isDisabled(preset) || !writeActionsAreAllowed()}
+              on:click={() => handleConfirm(preset, schedule)}
+              class="max-sm:w-full">{confirmText}</Button
+            >
+            <Button variant="ghost" href={backHref} class="max-sm:w-full"
+              >{translate('common.cancel')}</Button
+            >
+          </div>
+        </SchedulesCalendarView>
+        <Alert intent="error" title={$error} hidden={!$error} />
+      </form>
+    </Card>
   {/if}
 </div>
diff --git a/src/lib/components/schedule/schedules-interval-view.svelte b/src/lib/components/schedule/schedules-interval-view.svelte
@@ -41,7 +41,7 @@
   <p>
     {translate('schedules.interval-view-description')}
   </p>
-  <div class="flex flex-col items-center gap-2 lg:flex-row">
+  <div class="flex flex-col gap-2 md:flex-row md:items-center">
     <Input
       id="days"
       class="w-28"
@@ -54,7 +54,7 @@
       maxLength={3}
       error={error(days)}
     />
-    <div class="hidden lg:block">:</div>
+    <div class="hidden md:block">:</div>
     <Input
       id="hour-interval"
       class="w-24"
@@ -67,7 +67,7 @@
       maxLength={2}
       error={error(hour)}
     />
-    <div class="hidden lg:block">:</div>
+    <div class="hidden md:block">:</div>
     <Input
       id="minute-interval"
       class="w-24"
@@ -80,7 +80,7 @@
       maxLength={2}
       error={error(minute)}
     />
-    <div class="hidden lg:block">:</div>
+    <div class="hidden md:block">:</div>
     <Input
       id="second"
       class="w-24"

diff --git a/src/lib/components/workflow/add-search-attributes.svelte b/src/lib/components/workflow/add-search-attributes.svelte
@@ -27,13 +27,14 @@
   };
 </script>
 
-<div class="flex flex-col gap-2 {className}">
+<div class="flex flex-col gap-4 {className}">
   {#each attributesToAdd as attribute}
     <SearchAttributeInput {attributesToAdd} bind:attribute {onRemove} />
   {/each}
   <Button
     variant="ghost"
     leadingIcon="add"
+    class="max-sm:w-full"
     on:click={addSearchAttribute}
     disabled={!searchAttributes.length ||
       attributesToAdd.length === searchAttributes.length ||

diff --git a/src/lib/components/workflow/search-attribute-input/index.svelte b/src/lib/components/workflow/search-attribute-input/index.svelte
@@ -38,22 +38,31 @@
   };
 </script>
 
-<div class="flex items-end gap-2">
-  <div class="min-w-fit">
-    <Select
-      id="search-attribute"
-      label={translate('workflows.custom-search-attribute')}
-      class="w-full"
-      placeholder={translate('workflows.select-attribute')}
-      bind:value={attribute.label}
-      onChange={handleAttributeChange}
-    >
-      {#each $customSearchAttributeOptions as { value, label, type }}
-        <Option disabled={isDisabled(value)} {value} description={type}
-          >{label}</Option
-        >
-      {/each}
-    </Select>
+<div
+  class="flex flex-col gap-2 border-b border-subtle pb-4 sm:flex-row sm:gap-4"
+>
+  <div class="flex min-w-fit justify-between gap-2 sm:gap-4">
+    <div class="grow [&_button]:w-full">
+      <Select
+        id="search-attribute"
+        label={translate('workflows.custom-search-attribute')}
+        placeholder={translate('workflows.select-attribute')}
+        bind:value={attribute.label}
+        onChange={handleAttributeChange}
+      >
+        {#each $customSearchAttributeOptions as { value, label, type }}
+          <Option disabled={isDisabled(value)} {value} description={type}
+            >{label}</Option
+          >
+        {/each}
+      </Select>
+    </div>
+    <Button
+      variant="ghost"
+      leadingIcon="close"
+      class="mt-6 w-10 rounded-full sm:hidden"
+      on:click={() => onRemove(attribute.label)}
+    />
   </div>
   {#if attribute.type === SEARCH_ATTRIBUTE_TYPE.BOOL}
     <Select
@@ -102,7 +111,7 @@
   <Button
     variant="ghost"
     leadingIcon="close"
-    class="mt-6 w-10 rounded-full"
+    class="mt-6 w-10 rounded-full max-sm:hidden"
     on:click={() => onRemove(attribute.label)}
   />
 </div>
diff --git a/src/lib/holocene/day-of-month-picker.svelte b/src/lib/holocene/day-of-month-picker.svelte
@@ -18,25 +18,24 @@
   };
 </script>
 
-<div class="text-center">
-  <div
-    class="surface-primary grid gap-x-4 gap-y-4 rounded border border-subtle px-0 py-4 text-center md:gap-x-8 md:px-2 xl:gap-x-16 xl:px-4"
-  >
-    {#each daysInMonth as day}
-      {@const active = daysOfMonth.includes(day)}
-      <Button
-        variant="secondary"
-        class={active && 'bg-interactive-secondary-active'}
-        on:click={(e) => onClick(e, day)}
-      >
-        {day}
-      </Button>
-    {/each}
-  </div>
+<div
+  class="surface-primary grid place-items-center gap-1 rounded border border-subtle px-0 py-4 text-center sm:gap-4 md:gap-x-8 md:px-2 xl:gap-x-16 xl:px-4"
+>
+  {#each daysInMonth as day}
+    {@const active = daysOfMonth.includes(day)}
+    <Button
+      variant="secondary"
+      class="max-md:h-9 max-md:px-4 max-md:py-1.5 max-md:text-sm max-sm:h-8 max-sm:px-2 max-sm:py-1 max-sm:text-xs {active &&
+        'bg-interactive-secondary-active'}"
+      on:click={(e) => onClick(e, day)}
+    >
+      {day}
+    </Button>
+  {/each}
 </div>
 
 <style lang="postcss">
   .grid {
-    grid-template-columns: repeat(7, minmax(45px, 1fr));
+    grid-template-columns: repeat(7, minmax(32px, 1fr));
   }
 </style>
diff --git a/src/lib/holocene/day-of-week-picker.svelte b/src/lib/holocene/day-of-week-picker.svelte
@@ -28,7 +28,7 @@
 </script>
 
 <div class="flex flex-col gap-4 text-center">
-  <div class="flex gap-2 text-center">
+  <div class="flex flex-wrap gap-2 text-center">
     {#each genericWeekDays as { label, value }}
       {@const active = daysOfWeek.includes(value)}
       <Button

diff --git a/src/lib/holocene/input/input.svelte b/src/lib/holocene/input/input.svelte
@@ -94,6 +94,7 @@
     <slot name="before-input" {disabled} />
     <div
       class={merge(
+        'input-container',
         'surface-primary relative box-border inline-flex h-10 w-full items-center rounded-lg border border-subtle text-sm focus-within:outline-none focus-within:ring-2 focus-within:ring-primary/70',
       )}
       class:disabled
@@ -187,8 +188,6 @@
 <style lang="postcss">
   /* Base styles */
   .input-container {
-    /* @apply ; */
-
     &.error,
     &.invalid {
       @apply border-danger focus-within:ring-danger/70;

diff --git a/src/lib/pages/start-workflow.svelte b/src/lib/pages/start-workflow.svelte
@@ -193,24 +193,22 @@
   $: checkTaskQueue(taskQueueParam);
 </script>
 
-<div class="flex w-full flex-col items-center pb-10">
-  <div class="mb-6 flex w-full items-start">
-    <Link
-      href={`${routeForWorkflows({
-        namespace,
-      })}?${$workflowsSearchParams}`}
-      data-testid="back-to-workflows"
-      icon="chevron-left"
-    >
-      {translate('workflows.back-to-workflows')}
-    </Link>
-  </div>
-  <div class="flex w-full flex-col gap-4 lg:w-2/3 2xl:w-1/2">
-    <h1 class="mb-4 overflow-hidden" data-testid="start-workflow">
-      Start a Workflow
-    </h1>
+<div class="flex w-full flex-col gap-4 pb-20">
+  <Link
+    href={`${routeForWorkflows({
+      namespace,
+    })}?${$workflowsSearchParams}`}
+    data-testid="back-to-workflows"
+    icon="chevron-left"
+  >
+    {translate('workflows.back-to-workflows')}
+  </Link>
+  <h1 class="mb-4 overflow-hidden" data-testid="start-workflow">
+    Start a Workflow
+  </h1>
+  <Card class="flex w-full flex-col gap-4 xl:w-3/4 2xl:w-1/2">
     <div
-      class="flex w-full flex-col items-center justify-between gap-2 md:flex-row md:gap-4"
+      class="flex w-full flex-col justify-between gap-2 sm:items-center md:flex-row md:gap-4"
     >
       <Input
         id="workflowId"
@@ -268,7 +266,7 @@
     {/key}
     {#if viewAdvancedOptions}
       <Card class="flex flex-col gap-2">
-        <div class="flex justify-between">
+        <div class="flex flex-wrap justify-between">
           <h3>{translate('workflows.user-metadata')}</h3>
           <p class="flex items-center gap-1 text-sm text-subtle">
             {translate('workflows.markdown-supported')}
@@ -315,5 +313,5 @@
     {#if error}
       <Alert intent="error" title={error} />
     {/if}
-  </div>
+  </Card>
 </div>