fix: explainer component
This commit is contained in:
Andras Bacsai
@@ -1,72 +0,0 @@
|
||||
<script lang="ts">
|
||||
import Explainer from '$lib/components/Explainer.svelte';
|
||||
|
||||
export let setting: any;
|
||||
export let title: any;
|
||||
export let description: any;
|
||||
export let isCenter = true;
|
||||
export let disabled = false;
|
||||
export let dataTooltip: any = null;
|
||||
export let loading = false;
|
||||
</script>
|
||||
|
||||
<div class="flex items-center py-4 pr-8">
|
||||
<div class="flex w-96 flex-col">
|
||||
<div class="text-xs font-bold text-stone-100 md:text-base">{title}</div>
|
||||
<Explainer text={description} />
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class:tooltip={dataTooltip}
|
||||
class:text-center={isCenter}
|
||||
data-tip={dataTooltip}
|
||||
class="flex justify-center"
|
||||
>
|
||||
<div
|
||||
on:click
|
||||
aria-pressed="false"
|
||||
class="relative mx-20 inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out"
|
||||
class:opacity-50={disabled || loading}
|
||||
class:bg-green-600={!loading && setting}
|
||||
class:bg-stone-700={!loading && !setting}
|
||||
class:bg-yellow-500={loading}
|
||||
>
|
||||
<span class="sr-only">Use setting</span>
|
||||
<span
|
||||
class="pointer-events-none relative inline-block h-5 w-5 transform rounded-full bg-white shadow transition duration-200 ease-in-out"
|
||||
class:translate-x-5={setting}
|
||||
class:translate-x-0={!setting}
|
||||
>
|
||||
<span
|
||||
class=" absolute inset-0 flex h-full w-full items-center justify-center transition-opacity duration-200 ease-in"
|
||||
class:opacity-0={setting}
|
||||
class:opacity-100={!setting}
|
||||
class:animate-spin={loading}
|
||||
aria-hidden="true"
|
||||
>
|
||||
<svg class="h-3 w-3 bg-white text-red-600" fill="none" viewBox="0 0 12 12">
|
||||
<path
|
||||
d="M4 8l2-2m0 0l2-2M6 6L4 4m2 2l2 2"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<span
|
||||
class="absolute inset-0 flex h-full w-full items-center justify-center transition-opacity duration-100 ease-out"
|
||||
aria-hidden="true"
|
||||
class:opacity-100={setting}
|
||||
class:opacity-0={!setting}
|
||||
class:animate-spin={loading}
|
||||
>
|
||||
<svg class="h-3 w-3 bg-white text-green-600" fill="currentColor" viewBox="0 0 12 12">
|
||||
<path
|
||||
d="M3.707 5.293a1 1 0 00-1.414 1.414l1.414-1.414zM5 8l-.707.707a1 1 0 001.414 0L5 8zm4.707-3.293a1 1 0 00-1.414-1.414l1.414 1.414zm-7.414 2l2 2 1.414-1.414-2-2-1.414 1.414zm3.414 2l4-4-1.414-1.414-4 4 1.414 1.414z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -32,7 +32,6 @@
|
||||
import { errorNotification } from '$lib/common';
|
||||
import { appSession } from '$lib/store';
|
||||
import PublicRepository from './_PublicRepository.svelte';
|
||||
import Explaner from '$lib/components/Explainer.svelte';
|
||||
import DocLink from '$lib/components/DocLink.svelte';
|
||||
|
||||
const { id } = $page.params;
|
||||
|
||||
@@ -32,16 +32,15 @@
|
||||
import { onDestroy, onMount } from 'svelte';
|
||||
import Select from 'svelte-select';
|
||||
|
||||
import Explainer from '$lib/components/Explainer.svelte';
|
||||
import { get, post } from '$lib/api';
|
||||
import cuid from 'cuid';
|
||||
import { browser } from '$app/env';
|
||||
import { addToast, appSession, disabledButton, setLocation, status } from '$lib/store';
|
||||
import { t } from '$lib/translations';
|
||||
import { errorNotification, getDomain, notNodeDeployments, staticDeployments } from '$lib/common';
|
||||
import Setting from '$lib/components/Setting.svelte';
|
||||
import Tooltip from '$lib/components/Tooltip.svelte';
|
||||
import Explaner from '$lib/components/Explainer.svelte';
|
||||
import Explainer from '$lib/components/Explainer.svelte';
|
||||
|
||||
const { id } = $page.params;
|
||||
|
||||
$: isDisabled =
|
||||
@@ -447,7 +446,7 @@
|
||||
<div class="grid grid-cols-2 items-center">
|
||||
<label for="baseBuildImage" class="text-base font-bold text-stone-100"
|
||||
>{$t('application.base_build_image')}
|
||||
<Explaner
|
||||
<Explainer
|
||||
explanation={application.buildPack === 'laravel'
|
||||
? 'For building frontend assets with webpack.'
|
||||
: 'Image that will be used during the build process.'}
|
||||
@@ -472,7 +471,7 @@
|
||||
<div class="grid grid-cols-2 items-center">
|
||||
<label for="baseImage" class="text-base font-bold text-stone-100"
|
||||
>{$t('application.base_image')}
|
||||
<Explaner explanation={'Image that will be used for the deployment.'} /></label
|
||||
<Explainer explanation={'Image that will be used for the deployment.'} /></label
|
||||
>
|
||||
<div class="custom-select-wrapper">
|
||||
<Select
|
||||
@@ -492,7 +491,7 @@
|
||||
<div class="grid grid-cols-2 items-center pb-8">
|
||||
<label for="deploymentType" class="text-base font-bold text-stone-100"
|
||||
>Deployment Type
|
||||
<Explaner
|
||||
<Explainer
|
||||
explanation={"Defines how to deploy your application. <br><br><span class='text-green-500 font-bold'>Static</span> is for static websites, <span class='text-green-500 font-bold'>node</span> is for server-side applications."}
|
||||
/></label
|
||||
>
|
||||
@@ -542,7 +541,7 @@
|
||||
<div class="grid grid-cols-2 items-center">
|
||||
<label for="fqdn" class="text-base font-bold text-stone-100"
|
||||
>{$t('application.url_fqdn')}
|
||||
<Explaner
|
||||
<Explainer
|
||||
explanation={"If you specify <span class='text-settings font-bold'>https</span>, the application will be accessible only over https.<br>SSL certificate will be generated automatically.<br><br>If you specify <span class='text-settings font-bold'>www</span>, the application will be redirected (302) from non-www and vice versa.<br><br>To modify the domain, you must first stop the application.<br><br><span class='text-settings font-bold'>You must set your DNS to point to the server IP in advance.</span>"}
|
||||
/>
|
||||
</label>
|
||||
@@ -550,7 +549,6 @@
|
||||
<input
|
||||
readonly={isDisabled}
|
||||
disabled={isDisabled}
|
||||
bind:this={domainEl}
|
||||
name="fqdn"
|
||||
id="fqdn"
|
||||
required
|
||||
@@ -648,7 +646,7 @@
|
||||
<div class="grid grid-cols-2 items-center">
|
||||
<label for="port" class="text-base font-bold text-stone-100"
|
||||
>{$t('forms.port')}
|
||||
<Explaner explanation={'The port your application listens on.'} /></label
|
||||
<Explainer explanation={'The port your application listens on.'} /></label
|
||||
>
|
||||
<input
|
||||
disabled={isDisabled}
|
||||
@@ -662,7 +660,7 @@
|
||||
{/if}
|
||||
<div class="grid grid-cols-2 items-center">
|
||||
<label for="exposePort" class="text-base font-bold text-stone-100"
|
||||
>Exposed Port <Explaner
|
||||
>Exposed Port <Explainer
|
||||
explanation={'You can expose your application to a port on the host system.<br><br>Useful if you would like to use your own reverse proxy or tunnel and also in development mode. Otherwise leave empty.'}
|
||||
/></label
|
||||
>
|
||||
@@ -719,7 +717,7 @@
|
||||
{#if application.buildPack === 'docker'}
|
||||
<div class="grid grid-cols-2 items-center pt-4">
|
||||
<label for="dockerFileLocation" class="text-base font-bold text-stone-100"
|
||||
>Dockerfile Location <Explaner
|
||||
>Dockerfile Location <Explainer
|
||||
explanation={"Should be absolute path, like <span class='text-settings font-bold'>/data/Dockerfile</span> or <span class='text-settings font-bold'>/Dockerfile.</span>"}
|
||||
/></label
|
||||
>
|
||||
@@ -747,7 +745,7 @@
|
||||
</div>
|
||||
<div class="grid grid-cols-2 items-center">
|
||||
<label for="denoOptions" class="text-base font-bold text-stone-100"
|
||||
>Arguments <Explaner
|
||||
>Arguments <Explainer
|
||||
explanation={"List of arguments to pass to <span class='text-settings font-bold'>deno run</span> command. Could include permissions, configurations files, etc."}
|
||||
/></label
|
||||
>
|
||||
@@ -766,7 +764,7 @@
|
||||
<div class="flex-col">
|
||||
<label for="baseDirectory" class="pt-2 text-base font-bold text-stone-100"
|
||||
>{$t('forms.base_directory')}
|
||||
<Explaner
|
||||
<Explainer
|
||||
explanation={"Directory to use as the base for all commands.<br>Could be useful with <span class='text-settings font-bold'>monorepos</span>."}
|
||||
/></label
|
||||
>
|
||||
@@ -786,7 +784,7 @@
|
||||
<div class="flex-col">
|
||||
<label for="publishDirectory" class="pt-2 text-base font-bold text-stone-100"
|
||||
>{$t('forms.publish_directory')}
|
||||
<Explaner
|
||||
<Explainer
|
||||
explanation={"Directory containing all the assets for deployment. <br> For example: <span class='text-settings font-bold'>dist</span>,<span class='text-settings font-bold'>_site</span> or <span class='text-settings font-bold'>public</span>."}
|
||||
/></label
|
||||
>
|
||||
|
||||
@@ -21,13 +21,13 @@
|
||||
import Secret from './_Secret.svelte';
|
||||
import { get, post } from '$lib/api';
|
||||
import { page } from '$app/stores';
|
||||
import Explainer from '$lib/components/Explainer.svelte';
|
||||
import { t } from '$lib/translations';
|
||||
import { goto } from '$app/navigation';
|
||||
import { errorNotification, getDomain } from '$lib/common';
|
||||
import { onMount } from 'svelte';
|
||||
import Loading from '$lib/components/Loading.svelte';
|
||||
import { addToast } from '$lib/store';
|
||||
import SimpleExplainer from '$lib/components/SimpleExplainer.svelte';
|
||||
|
||||
const { id } = $page.params;
|
||||
|
||||
@@ -145,7 +145,7 @@
|
||||
{:else}
|
||||
<div class="mx-auto max-w-6xl px-6 pt-4">
|
||||
<div class="flex justify-center py-4 text-center">
|
||||
<Explainer
|
||||
<SimpleExplainer
|
||||
customClass="w-full"
|
||||
text={applicationSecrets.length === 0
|
||||
? "You can add secrets to PR/MR deployments. Please add secrets to the application first. <br>Useful for creating <span class='text-green-500 font-bold'>staging</span> environments."
|
||||
@@ -194,8 +194,9 @@
|
||||
</div>
|
||||
</a>
|
||||
<div class="flex items-center justify-center">
|
||||
<button class="btn btn-sm bg-coollabs hover:bg-coollabs-100" on:click={() => redeploy(container)}
|
||||
>{$t('application.preview.redeploy')}</button
|
||||
<button
|
||||
class="btn btn-sm bg-coollabs hover:bg-coollabs-100"
|
||||
on:click={() => redeploy(container)}>{$t('application.preview.redeploy')}</button
|
||||
>
|
||||
</div>
|
||||
<div class="flex items-center justify-center">
|
||||
|
||||
@@ -24,7 +24,7 @@
|
||||
import { page } from '$app/stores';
|
||||
import Storage from './_Storage.svelte';
|
||||
import { get } from '$lib/api';
|
||||
import Explainer from '$lib/components/Explainer.svelte';
|
||||
import SimpleExplainer from '$lib/components/SimpleExplainer.svelte';
|
||||
import { t } from '$lib/translations';
|
||||
|
||||
const { id } = $page.params;
|
||||
@@ -88,7 +88,7 @@
|
||||
|
||||
<div class="mx-auto max-w-6xl rounded-xl px-6 pt-4">
|
||||
<div class="flex justify-center py-4 text-center">
|
||||
<Explainer customClass="w-full" text={$t('application.storage.persistent_storage_explainer')} />
|
||||
<SimpleExplainer customClass="w-full" text={$t('application.storage.persistent_storage_explainer')} />
|
||||
</div>
|
||||
<table class="mx-auto border-separate text-left">
|
||||
<thead>
|
||||
|
||||
Reference in New Issue
Block a user