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

Jump to bottom

fix: auto-scrolling on form pages, layout issues #2927

Merged
merged 2 commits into from Jun 19, 2023
Merged

fix: auto-scrolling on form pages, layout issues #2927

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
8564894
fix: auto-scrolling on form pages, layout issues
deboer-tim Jun 19, 2023
f59c901
fix: overflow-auto in NavPage
deboer-tim Jun 19, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/renderer/src/lib/ContainerList.svelte
View file
Open in desktop
Expand Up @@ -370,7 +370,7 @@ function errorCallback(container: ContainerInfoUI, errorMessage: string): void {
{/if}
</div>

<div class="flex min-w-full h-full overflow-auto" slot="content">
<div class="flex min-w-full h-full" slot="content">
<table class="mx-5 w-full h-fit" class:hidden="{containerGroups.length === 0}">
<!-- title -->
<thead class="sticky top-0 bg-charcoal-700 z-[2]">
Expand Down
2 changes: 1 addition & 1 deletion packages/renderer/src/lib/ImagesList.svelte
View file
Open in desktop
Expand Up @@ -270,7 +270,7 @@ function computeInterval(): number {
{/if}
</div>

<div class="flex min-w-full h-full overflow-auto" slot="content">
<div class="flex min-w-full h-full" slot="content">
<table class="mx-5 w-full h-fit" class:hidden="{images.length === 0}">
<!-- title -->
<thead class="sticky top-0 bg-charcoal-700 z-[2]">
Expand Down
4 changes: 2 additions & 2 deletions packages/renderer/src/lib/dashboard/DashboardPage.svelte
View file
Open in desktop
Expand Up @@ -36,8 +36,8 @@ function getInitializationContext(id: string) {
</script>

<NavPage searchEnabled="{false}" title="Dashboard">
<div slot="content" class="flex flex-col h-full bg-charcoal-700 shadow-nav pt-5 overflow-hidden">
<div class="min-w-full flex-1 overflow-auto">
<div slot="content" class="flex flex-col min-w-full h-fit bg-charcoal-700 shadow-nav pt-5">
<div class="min-w-full flex-1">
<div class="px-5 space-y-5 h-full">
<!-- Provider is ready display a box to indicate some information -->
{#if providersReady.length > 0}
Expand Down
2 changes: 1 addition & 1 deletion packages/renderer/src/lib/image/BuildImageFromContainerfile.svelte
View file
Open in desktop
Expand Up @@ -130,7 +130,7 @@ async function getContainerBuildContextDirectory() {
</script>

<NavPage title="Build Image from Containerfile" searchEnabled="{false}">
<div slot="content" class="p-5">
<div slot="content" class="p-5 min-w-full h-fit">
{#if providerConnections.length === 0}
<NoContainerEngineEmptyScreen />
{:else}
Expand Down
2 changes: 1 addition & 1 deletion packages/renderer/src/lib/image/PullImage.svelte
View file
Open in desktop
Expand Up @@ -121,7 +121,7 @@ function validateImageName(event): void {
</button>
</div>

<div slot="content" class="p-5">
<div slot="content" class="p-5 min-w-full h-fit">
{#if providerConnections.length === 0}
<NoContainerEngineEmptyScreen />
{:else}
Expand Down
2 changes: 1 addition & 1 deletion packages/renderer/src/lib/image/RunImage.svelte
View file
Open in desktop
Expand Up @@ -388,7 +388,7 @@ function checkContainerName(event: any) {
<Route path="/*" let:meta>
{#if dataReady}
<NavPage title="Create a container from image {imageDisplayName}:{image.tag}" searchEnabled="{false}">
<div slot="content" class="bg-zinc-700 p-5 h-full">
<div slot="content" class="bg-zinc-700 p-5 min-w-full h-fit">
<div class="bg-charcoal-600 px-6 py-4 space-y-2 lg:px-8 sm:pb-6 xl:pb-8">
<section class="pf-c-page__main-tabs pf-m-limit-width">
<div class="pf-c-page__main-body">
Expand Down
2 changes: 1 addition & 1 deletion packages/renderer/src/lib/kube/KubePlayYAML.svelte
View file
Open in desktop
Expand Up @@ -125,7 +125,7 @@ async function getKubernetesfileLocation() {

{#if providerConnections.length > 0}
<NavPage title="Play Pods or Containers from a Kubernetes YAML File" searchEnabled="{false}">
<div slot="content" class="bg-charcoal-700 p-5 h-full">
<div slot="content" class="bg-charcoal-700 p-5 min-w-full h-fit">
<div class="bg-charcoal-800 px-6 py-4 space-y-6 lg:px-8 sm:pb-6 xl:pb-8 rounded-lg">
<div class="text-xl font-medium">Select file:</div>
<div hidden="{runStarted}">
Expand Down
6 changes: 3 additions & 3 deletions packages/renderer/src/lib/pod/DeployPodToKube.svelte
View file
Open in desktop
Expand Up @@ -344,11 +344,11 @@ function updateKubeResult() {
</script>

<NavPage title="Deploy generated pod to Kubernetes" searchEnabled="{false}">
<div slot="content" class="p-5 bg-zinc-700 h-full">
<div class="bg-charcoal-600 h-full p-5">
<div slot="content" class="p-5 bg-zinc-700 min-w-full h-fit">
<div class="bg-charcoal-600 p-5">
{#if kubeDetails}
<p>Generated pod to deploy to Kubernetes:</p>
<div class="h-1/3 pt-2">
<div class="h-48 pt-2">
<MonacoEditor content="{kubeDetails}" language="yaml" />
</div>
{/if}
Expand Down
12 changes: 6 additions & 6 deletions packages/renderer/src/lib/pod/PodCreateFromContainers.svelte
View file
Open in desktop
Expand Up @@ -183,9 +183,9 @@ function updatePortExposure(port: number, checked: boolean) {
</script>

<NavPage title="Copy containers to a pod" searchEnabled="{false}">
<div class="w-full h-full min-w-fit" slot="content">
<div class="m-5 p-6 h-full bg-charcoal-800 rounded-sm text-gray-700">
<div class="w-4/5 min-w-[500px]">
<div class="min-w-full h-fit" slot="content">
<div class="m-5 p-6 bg-charcoal-800 rounded-sm text-gray-700">
<div>
{#if podCreation}
{#if containersPorts.length > 0}
<div class="bg-charcoal-600 border-t-2 border-amber-500 p-4 mb-2" role="alert" aria-label="warning">
Expand Down Expand Up @@ -232,7 +232,7 @@ function updatePortExposure(port: number, checked: boolean) {
<span class="block text-sm font-semibold rounded text-gray-400 dark:text-gray-400" aria-label="Containers"
>Containers to replicate to the pod:</span>
</div>
<div class="max-w-full bg-charcoal-900 mb-4 max-h-40 overflow-y-auto">
<div class="w-full bg-charcoal-900 mb-4 max-h-40 overflow-y-auto">
{#each podCreation.containers as container, index}
<div class="p-2 flex flex-row items-center text-gray-700">
<div class="w-10"><StatusIcon icon="{ContainerIcon}" status="STOPPED" /></div>
Expand Down Expand Up @@ -288,8 +288,8 @@ function updatePortExposure(port: number, checked: boolean) {
{/if}
</div>

<div class="w-full">
<div class="float-right">
<div class="w-full grid justify-items-end">
<div>
<button class="pf-c-button underline hover:text-gray-400" on:click="{() => router.goto('/containers')}">
Close
</button>
Expand Down
2 changes: 1 addition & 1 deletion packages/renderer/src/lib/pod/PodsList.svelte
View file
Open in desktop
Expand Up @@ -231,7 +231,7 @@ function errorCallback(pod: PodInfoUI, errorMessage: string): void {
{/if}
</div>

<div class="flex min-w-full h-full overflow-auto" slot="content">
<div class="flex min-w-full h-full" slot="content">
<table class="mx-5 w-full h-fit" class:hidden="{pods.length === 0}">
<!-- title -->
<thead class="sticky top-0 bg-charcoal-700 z-[2]">
Expand Down
8 changes: 5 additions & 3 deletions packages/renderer/src/lib/ui/NavPage.svelte
View file
Open in desktop
Expand Up @@ -6,7 +6,7 @@ export let searchEnabled = true;

<div class="flex flex-col w-full h-full shadow-pageheader">
<div class="flex flex-col w-full h-full pt-4">
<div class="flex">
<div class="flex pb-2">
<div class="px-5">
<h1 aria-label="{title}" class="text-xl first-letter:uppercase">{title}</h1>
</div>
Expand All @@ -17,7 +17,7 @@ export let searchEnabled = true;
</div>
</div>
{#if searchEnabled}
<div class="flex flex-row pt-2 pb-4">
<div class="flex flex-row pb-4">
<div class="pl-5 lg:w-[35rem] w-[22rem]">
<div class="flex items-center bg-charcoal-800 text-gray-700 rounded-sm">
<svg
Expand Down Expand Up @@ -46,6 +46,8 @@ export let searchEnabled = true;
</div>
{/if}

<slot name="content" />
<div class="flex w-full h-full overflow-auto">
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It looks better to put it there 👍

<slot name="content" />
</div>
</div>
</div>
2 changes: 1 addition & 1 deletion packages/renderer/src/lib/volume/VolumesList.svelte
View file
Open in desktop
Expand Up @@ -221,7 +221,7 @@ function computeInterval(): number {
{/if}
</div>

<div class="flex min-w-full h-full overflow-auto" slot="content">
<div class="flex min-w-full h-full" slot="content">
<table class="mx-5 w-full h-fit" class:hidden="{volumes.length === 0}">
<!-- title -->
<thead class="sticky top-0 bg-charcoal-700 z-[2]">
Expand Down