Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[DT-156] Fix broken breakpoint UI on workflow detail page header #960

Merged
merged 2 commits into from
Nov 28, 2022
Merged

[DT-156] Fix broken breakpoint UI on workflow detail page header #960

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
7c6b365
Fix UI at different breakpoints
laurakwhit Nov 22, 2022
3758d35
Center checked icon in toggle switch
laurakwhit Nov 22, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 6 additions & 4 deletions src/lib/components/auto-refresh-workflow.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,9 @@
$: checked = $autoRefreshWorkflow === 'on';
</script>

<label for="autorefresh" class="font-secondary text-sm">Auto refresh</label>
<Tooltip bottomLeft text="15 second page refresh">
<ToggleSwitch id="autorefresh" {checked} on:change={onChange} />
</Tooltip>
<label for="autorefresh" class="flex items-center gap-4 font-secondary text-sm"
>Auto refresh
<Tooltip bottomLeft text="15 second page refresh">
<ToggleSwitch id="autorefresh" {checked} on:change={onChange} />
</Tooltip>
</label>
2 changes: 1 addition & 1 deletion src/lib/holocene/toggle-switch.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@
input:checked + .slider {
@apply border-gray-900 bg-gray-900;
&:before {
@apply translate-x-4 bg-blue-100 text-center;
@apply flex translate-x-4 items-center justify-center bg-blue-100;
content: url('data:image/svg+xml, %3Csvg%20width=%2212%22%20height=%2210%22%20viewBox=%220%200%2012%2010%22%20fill=%22none%22%20xmlns=%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%3Cpath%20d=%22M4.36831%209.00391L0.572266%205.20786L1.52128%204.25885L4.36831%207.10588L10.4786%200.995582L11.4276%201.94459L4.36831%209.00391Z%22%20fill=%22%231D4ED8%22%2F%3E%0A%3C%2Fsvg%3E%0A');
}
}
Expand Down
20 changes: 13 additions & 7 deletions src/lib/layouts/workflow-header.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -100,17 +100,23 @@
</a>
</div>
<div
class="mb-8 flex flex-col items-center justify-between gap-4 xl:flex-row xl:gap-0"
class="mb-8 flex w-full flex-col items-center justify-between gap-4 lg:flex-row"
>
<h1
data-cy="workflow-id-heading"
class="relative flex items-center gap-4 text-2xl"
<div
class="flex w-full items-center justify-start gap-4 overflow-hidden whitespace-nowrap lg:w-auto"
>
<WorkflowStatus status={workflow?.status} />
<span class="select-all font-medium">{workflow.id}</span>
</h1>
<h1
data-cy="workflow-id-heading"
class="select-all overflow-hidden text-ellipsis text-2xl font-medium"
>
{workflow.id}
</h1>
</div>
{#if isRunning}
<div class="flex items-center justify-start gap-4 xl:justify-end">
<div
class="flex flex-col items-center justify-center gap-4 whitespace-nowrap sm:flex-row lg:justify-end"
>
<AutoRefreshWorkflow onChange={onRefreshChange} />
<WorkflowActions {cancelInProgress} {workflow} {namespace} />
</div>
Expand Down