NuxtImg Migration (#279)
Co-authored-by: Julien Nahum <julien@nahum.net>
This commit is contained in:
@@ -22,7 +22,7 @@
|
||||
</div>
|
||||
<div v-else class="h-6 text-gray-600 dark:text-gray-400 flex">
|
||||
<div class="flex-grow">
|
||||
<img :src="currentUrl" class="h-6 rounded shadow-md">
|
||||
<NuxtImg :src="currentUrl" class="h-6 rounded shadow-md"/>
|
||||
</div>
|
||||
<a href="#" class="hover:text-nt-blue flex" @click.prevent="clearUrl">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
:title="file.file.name"
|
||||
>
|
||||
<div v-if="file.src && !isImageHide" class="h-20 overflow-hidden flex">
|
||||
<img class="block object-cover object-center w-full" :src="file.src" @error="isImageHide=true">
|
||||
<NuxtImg class="block object-cover object-center w-full" :src="file.src" @error="isImageHide=true"/>
|
||||
</div>
|
||||
<div v-else class="h-20 flex items-center justify-center">
|
||||
<svg class="w-10 h-10 text-gray-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
|
||||
|
||||
@@ -5,12 +5,8 @@
|
||||
<div class="flex items-center">
|
||||
<NuxtLink :to="{ name: user ? 'home' : 'index' }"
|
||||
class="flex-shrink-0 font-semibold hover:no-underline flex items-center">
|
||||
<img src="/img/logo.svg" alt="notion tools logo" class="w-8 h-8">
|
||||
|
||||
<span
|
||||
class="ml-2 text-md hidden sm:inline text-black dark:text-white"
|
||||
>
|
||||
OpnForm</span>
|
||||
<NuxtImg src="/img/logo.svg" alt="notion tools logo" class="w-8 h-8"/>
|
||||
<span class="ml-2 text-md hidden sm:inline text-black dark:text-white">OpnForm</span>
|
||||
</NuxtLink>
|
||||
<workspace-dropdown class="ml-6"/>
|
||||
</div>
|
||||
@@ -57,7 +53,7 @@
|
||||
class="flex items-center justify-center w-full rounded-md px-4 py-2 text-sm text-gray-700 dark:text-gray-50 hover:bg-gray-50 dark:hover:bg-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-gray-500"
|
||||
dusk="nav-dropdown-button" @click.stop="toggle()"
|
||||
>
|
||||
<img :src="user.photo_url" class="rounded-full w-6 h-6">
|
||||
<NuxtImg :src="user.photo_url" class="rounded-full w-6 h-6"/>
|
||||
<p class="ml-2 hidden sm:inline">
|
||||
{{ user.name }}
|
||||
</p>
|
||||
|
||||
@@ -6,10 +6,10 @@
|
||||
<template v-if="workspace" #trigger="{toggle}">
|
||||
<div class="flex items-center cursor group" role="button" @click.stop="toggle()">
|
||||
<div class="rounded-full h-8 8">
|
||||
<img v-if="isUrl(workspace.icon)"
|
||||
<NuxtImg v-if="isUrl(workspace.icon)"
|
||||
:src="workspace.icon"
|
||||
:alt="workspace.name + ' icon'" class="flex-shrink-0 h-8 w-8 rounded-full shadow"
|
||||
>
|
||||
/>
|
||||
<div v-else class="rounded-full pt-2 text-xs truncate bg-nt-blue-lighter h-8 w-8 text-center shadow"
|
||||
v-text="workspace.icon"
|
||||
/>
|
||||
@@ -26,10 +26,10 @@
|
||||
:class="{'bg-blue-100 dark:bg-blue-900':workspace.id === worksp.id}" @click.prevent="switchWorkspace(worksp)"
|
||||
>
|
||||
<div class="rounded-full h-8 w-8 flex-shrink-0" role="button">
|
||||
<img v-if="isUrl(worksp.icon)"
|
||||
<NuxtImg v-if="isUrl(worksp.icon)"
|
||||
:src="worksp.icon"
|
||||
:alt="worksp.name + ' icon'" class="flex-shrink-0 h-8 w-8 rounded-full shadow"
|
||||
>
|
||||
/>
|
||||
<div v-else class="rounded-full flex-shrink-0 pt-1 text-xs truncate bg-nt-blue-lighter h-8 w-8 text-center shadow"
|
||||
v-text="worksp.icon"
|
||||
/>
|
||||
|
||||
@@ -71,7 +71,7 @@
|
||||
<div v-if="!field.image_block" class="p-4 border border-dashed">
|
||||
Open <b>{{ field.name }}'s</b> block settings to upload image.
|
||||
</div>
|
||||
<img v-else :alt="field.name" :src="field.image_block" class="max-w-full">
|
||||
<NuxtImg v-else :alt="field.name" :src="field.image_block" class="max-w-full"/>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
@@ -13,10 +13,10 @@
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<img src="/img/pages/forms/blurred_graph.png"
|
||||
<NuxtImg src="/img/pages/forms/blurred_graph.png"
|
||||
alt="Sample Graph"
|
||||
class="mx-auto filter blur-md z-0"
|
||||
>
|
||||
/>
|
||||
|
||||
</div>
|
||||
<Loader v-else-if="isLoading" class="h-6 w-6 text-nt-blue mx-auto" />
|
||||
|
||||
@@ -16,16 +16,16 @@
|
||||
<div id="cover-picture"
|
||||
class="max-h-56 rounded-t-lg w-full overflow-hidden flex items-center justify-center"
|
||||
>
|
||||
<img alt="Cover Picture" :src="coverPictureSrc(form.cover_picture)" class="w-full">
|
||||
<NuxtImg alt="Cover Picture" :src="coverPictureSrc(form.cover_picture)" class="w-full"/>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="form.logo_picture" class="w-full mx-auto p-5 relative"
|
||||
:class="{'pt-20':!form.cover_picture, 'max-w-lg': form && (form.width === 'centered')}"
|
||||
>
|
||||
<img alt="Logo Picture" :src="coverPictureSrc(form.logo_picture)"
|
||||
<NuxtImg alt="Logo Picture" :src="coverPictureSrc(form.logo_picture)"
|
||||
:class="{'top-5':!form.cover_picture, '-top-10':form.cover_picture}"
|
||||
class="w-20 h-20 object-contain absolute left-5 transition-all"
|
||||
>
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
rel="nofollow"
|
||||
>
|
||||
<div v-if="isImage(file.file_url)" class="w-8 h-8">
|
||||
<img class="object-cover h-full w-full rounded" :src="file.file_url">
|
||||
<NuxtImg class="object-cover h-full w-full rounded" :src="file.file_url"/>
|
||||
</div>
|
||||
<span v-else
|
||||
class="py-1 px-2"
|
||||
|
||||
@@ -8,8 +8,7 @@
|
||||
</div>
|
||||
<div class="flex justify-center mt-5 md:mt-0">
|
||||
<NuxtLink :to="{ name: user ? 'home' : 'index' }" class="flex-shrink-0 font-semibold flex items-center">
|
||||
<img src="/img/logo.svg" alt="notion tools logo" class="w-10 h-10">
|
||||
|
||||
<NuxtImg src="/img/logo.svg" alt="notion tools logo" class="w-10 h-10"/>
|
||||
<span class="ml-2 text-xl text-black dark:text-white">
|
||||
OpnForm
|
||||
</span>
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
<h3 class="font-semibold text-xl">QR Code</h3>
|
||||
<p>Scan the QR code to open the form (Right click to copy the image)</p>
|
||||
<div class="flex items-center">
|
||||
<img v-if="QrUrl" :src="QrUrl" class="m-auto" />
|
||||
<NuxtImg v-if="QrUrl" :src="QrUrl" class="m-auto" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -17,9 +17,9 @@
|
||||
</div>
|
||||
|
||||
<div class="aspect-[4/3] rounded-lg shadow-sm overflow-hidden">
|
||||
<img class="group-hover:scale-110 transition-all duration-200 h-full object-cover w-full"
|
||||
<NuxtImg class="group-hover:scale-110 transition-all duration-200 h-full object-cover w-full"
|
||||
:src="template.image_url" alt=""
|
||||
>
|
||||
/>
|
||||
</div>
|
||||
<p
|
||||
class="text-lg font-semibold leading-tight tracking-tight text-gray-900 mt-4 group-hover:text-blue-500 transition-all duration-150"
|
||||
|
||||
@@ -5,8 +5,7 @@
|
||||
<div
|
||||
class="relative px-4 pt-16 overflow-hidden bg-blue-100 ring-blue-100 ring-1 sm:shadow-lg isolate sm:rounded-2xl sm:px-16 md:pt-20 lg:flex lg:gap-x-20 lg:px-16 lg:pt-0 sm:shadow-gray-600/10">
|
||||
<div class="absolute inset-0">
|
||||
<img class="object-cover object-top w-full h-full" src="/img/pages/ai_form_builder/background-pattern-ai.svg" alt="">
|
||||
|
||||
<NuxtImg class="object-cover object-top w-full h-full" src="/img/pages/ai_form_builder/background-pattern-ai.svg" alt=""/>
|
||||
</div>
|
||||
|
||||
<div class="relative max-w-md mx-auto text-center xl:max-w-lg lg:mx-0 lg:flex-auto lg:py-16 lg:text-left">
|
||||
@@ -78,8 +77,8 @@
|
||||
|
||||
<div
|
||||
class="relative px-6 mx-auto mt-8 lg:px-0 sm:mt-12 lg:bottom-0 lg:right-0 lg:absolute lg:max-w-md xl:max-w-none">
|
||||
<img class="rounded-t-2xl ring-1 ring-blue-100 lg:rounded-tr-none"
|
||||
src="/img/pages/ai_form_builder/ai-feature-illustration.svg" alt="App screenshot">
|
||||
<NuxtImg class="rounded-t-2xl ring-1 ring-blue-100 lg:rounded-tr-none"
|
||||
src="/img/pages/ai_form_builder/ai-feature-illustration.svg" alt="App screenshot"/>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -84,8 +84,8 @@
|
||||
</div>
|
||||
<div class="w-full md:w-1/2 lg:w-7/12 flex items-center justify-center relative w-full"
|
||||
:class="{'md:pr-8':index%2==1, 'md:pl-8':index%2==0}">
|
||||
<img loading="lazy" class="block rounded-2xl w-full"
|
||||
:src="step.img" alt="cover-product">
|
||||
<NuxtImg loading="lazy" class="block rounded-2xl w-full"
|
||||
:src="step.img" alt="cover-product"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
<template>
|
||||
<div v-if="user.active_license" class="border p-5 shadow-md rounded-md">
|
||||
<div class="w-auto flex flex-col items-center">
|
||||
<img src="/img/appsumo/as-taco-white-bg.png" class="max-w-[60px]" alt="AppSumo">
|
||||
<NuxtImg src="/img/appsumo/as-taco-white-bg.png" class="max-w-[60px]" alt="AppSumo"/>
|
||||
|
||||
<img src="/img/appsumo/as-Select-dark.png" class="max-w-[150px]" alt="AppSumo">
|
||||
<NuxtImg src="/img/appsumo/as-Select-dark.png" class="max-w-[150px]" alt="AppSumo"/>
|
||||
|
||||
</div>
|
||||
<p class="mt-6">
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
<template>
|
||||
<div v-if="hasValidLicense" class="p-6 bg-white border shadow-md rounded-md">
|
||||
<img src="/img/appsumo/as-taco-white-bg.png" class="max-w-[60px] mx-auto" alt="AppSumo">
|
||||
<NuxtImg src="/img/appsumo/as-taco-white-bg.png" class="max-w-[60px] mx-auto" alt="AppSumo"/>
|
||||
|
||||
<img src="/img/appsumo/as-Select-dark.png" class="max-w-[300px] mx-auto" alt="AppSumo">
|
||||
<NuxtImg src="/img/appsumo/as-Select-dark.png" class="max-w-[300px] mx-auto" alt="AppSumo"/>
|
||||
|
||||
<p class="mt-6">
|
||||
<span class="text-green-500">We found your AppSumo Lifetime deal license!</span> Just complete the registration form to finalize the activation of
|
||||
@@ -10,9 +10,9 @@
|
||||
</p>
|
||||
</div>
|
||||
<div v-else-if="hasLicenseError" class="p-6 bg-white border border-red-500 shadow-md rounded-md">
|
||||
<img src="/img/appsumo/as-taco-white-bg.png" class="max-w-[60px] mx-auto" alt="AppSumo">
|
||||
<NuxtImg src="/img/appsumo/as-taco-white-bg.png" class="max-w-[60px] mx-auto" alt="AppSumo"/>
|
||||
|
||||
<img src="/img/appsumo/as-Select-dark.png" class="max-w-[300px] mx-auto" alt="AppSumo">
|
||||
<NuxtImg src="/img/appsumo/as-Select-dark.png" class="max-w-[300px] mx-auto" alt="AppSumo"/>
|
||||
|
||||
<p class="mt-6">
|
||||
<span class="text-red-600">Invalid AppSumo license</span>. The license was probably already attached to an OpnForm account. Please contact support.
|
||||
|
||||
Reference in New Issue
Block a user