ui fix
This commit is contained in:
MuslemRahimi
parent
2ab03c3878
commit
543bf7d0c5
@ -6,7 +6,7 @@
|
|||||||
let article = data?.getArticle;
|
let article = data?.getArticle;
|
||||||
|
|
||||||
$: {
|
$: {
|
||||||
if (data?.getParams && typeof window !== "undefined") {
|
if (data?.getParams) {
|
||||||
article = data?.getArticle;
|
article = data?.getArticle;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -20,57 +20,64 @@
|
|||||||
: ""}
|
: ""}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<div>
|
<section
|
||||||
<main id="main" class="mt-2 text-white min-h-screen pb-40">
|
class="w-full max-w-3xl sm:max-w-[1400px] overflow-hidden min-h-screen pb-20 pt-5 px-4 lg:px-3 text-white"
|
||||||
<div class="mx-auto max-w-screen-xl">
|
>
|
||||||
{#if article?.cover}
|
<div class="w-full overflow-hidden m-auto mt-5">
|
||||||
<img
|
<div class="sm:p-0 flex justify-center w-full m-auto overflow-hidden">
|
||||||
src={getImageURL(article?.collectionId, article?.id, article?.cover)}
|
<main id="main" class="mt-2 w-full">
|
||||||
class="h-[200px] w-full object-cover lg:h-[350px]"
|
{#if article?.cover}
|
||||||
loading="lazy"
|
<img
|
||||||
alt="Wallpaper"
|
src={getImageURL(
|
||||||
/>
|
article?.collectionId,
|
||||||
{/if}
|
article?.id,
|
||||||
<div class="lg:flex">
|
article?.cover,
|
||||||
<article
|
)}
|
||||||
class="z-5 relative mx-1 {article?.cover
|
class="h-[200px] w-full object-cover lg:h-[350px] rounded-lg border border-gray-800"
|
||||||
? '-mt-10 lg:-mt-16'
|
loading="lazy"
|
||||||
: 'mt-5'} rounded-t-md bg-default p-3 xs:p-4 lg:ml-3 lg:p-5 xl:mx-4"
|
alt="Wallpaper"
|
||||||
>
|
/>
|
||||||
<header
|
{/if}
|
||||||
class="pb-3 border-b-[2px] border-white w-full sm:min-w-[850px] sm:max-w-[850px]"
|
<div class="lg:flex">
|
||||||
|
<article
|
||||||
|
class="z-5 relative mx-1 {article?.cover
|
||||||
|
? '-mt-10 lg:-mt-16'
|
||||||
|
: 'mt-5'} rounded-t-md bg-default p-3 xs:p-4 lg:ml-3 lg:p-5 xl:mx-4"
|
||||||
>
|
>
|
||||||
<h1
|
<header
|
||||||
class="mb-3 text-2xl sm:text-3xl font-bold text-white md:text-4xl"
|
class="pb-3 border-b-[2px] border-white w-full sm:min-w-[850px] sm:max-w-[850px]"
|
||||||
>
|
>
|
||||||
{article?.title}
|
<h1
|
||||||
</h1>
|
class="mb-3 text-2xl sm:text-3xl font-bold text-white md:text-4xl"
|
||||||
<div class="text-white">
|
>
|
||||||
<div>
|
{article?.title}
|
||||||
Last Updated: {new Date(article?.updated)?.toLocaleString(
|
</h1>
|
||||||
"en-US",
|
<div class="text-white">
|
||||||
{
|
<div>
|
||||||
month: "short",
|
Last Updated: {new Date(article?.updated)?.toLocaleString(
|
||||||
day: "numeric",
|
"en-US",
|
||||||
year: "numeric",
|
{
|
||||||
daySuffix: "2-digit",
|
month: "short",
|
||||||
},
|
day: "numeric",
|
||||||
)}
|
year: "numeric",
|
||||||
|
daySuffix: "2-digit",
|
||||||
|
},
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div class="text-lg mt-4">
|
||||||
|
<div class="content max-w-4xl">
|
||||||
|
{@html article?.description}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</article>
|
||||||
|
</div>
|
||||||
<div class="text-lg mt-4">
|
</main>
|
||||||
<div class="content">
|
<aside class="hidden lg:block relative fixed w-1/4">
|
||||||
{@html article?.description}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</article>
|
|
||||||
|
|
||||||
<div class="mt-5 lg:w-full">
|
<div class="mt-5 lg:w-full">
|
||||||
<div
|
<div class="flex flex-wrap gap-y-5 justify-center px-5">
|
||||||
class="flex flex-wrap gap-y-5 justify-center px-5 lg:sticky lg:top-20 lg:px-0"
|
|
||||||
>
|
|
||||||
{#if !data?.user}
|
{#if !data?.user}
|
||||||
<div
|
<div
|
||||||
class="w-full text-white border border-gray-600 rounded-md h-fit bg-inherit lg:mx-0 lg:w-[300px] xl:w-[360px]"
|
class="w-full text-white border border-gray-600 rounded-md h-fit bg-inherit lg:mx-0 lg:w-[300px] xl:w-[360px]"
|
||||||
@ -118,7 +125,7 @@
|
|||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</aside>
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</div>
|
||||||
</div>
|
</section>
|
||||||
|
|||||||
@ -18,64 +18,64 @@
|
|||||||
image={getImageURL(article?.collectionId, article?.id, article?.cover)}
|
image={getImageURL(article?.collectionId, article?.id, article?.cover)}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<div>
|
<section
|
||||||
<main id="main" class="mt-2 text-white min-h-screen pb-40">
|
class="w-full max-w-3xl sm:max-w-[1400px] overflow-hidden min-h-screen pb-20 pt-5 px-4 lg:px-3 text-white"
|
||||||
<div class="mx-auto max-w-screen-xl">
|
>
|
||||||
<img
|
<div class="w-full overflow-hidden m-auto mt-5">
|
||||||
src={getImageURL(article?.collectionId, article?.id, article?.cover)}
|
<div class="sm:p-0 flex justify-center w-full m-auto overflow-hidden">
|
||||||
class="h-[200px] w-full object-cover lg:h-[350px]"
|
<main id="main" class="mt-2 w-full">
|
||||||
loading="lazy"
|
{#if article?.cover}
|
||||||
alt="Wallpaper"
|
<img
|
||||||
/>
|
src={getImageURL(
|
||||||
<div class="lg:flex">
|
article?.collectionId,
|
||||||
<article
|
article?.id,
|
||||||
class="z-5 relative mx-1 -mt-10 rounded-t-md bg-default p-3 xs:p-4 lg:-mt-16 lg:ml-3 lg:p-5 xl:mx-4"
|
article?.cover,
|
||||||
>
|
)}
|
||||||
<header
|
class="h-[200px] w-full object-cover lg:h-[350px] rounded-lg border border-gray-800"
|
||||||
class="pb-3 border-b-[2px] border-white w-full sm:min-w-[850px] sm:max-w-[850px]"
|
loading="lazy"
|
||||||
|
alt="Wallpaper"
|
||||||
|
/>
|
||||||
|
{/if}
|
||||||
|
<div class="lg:flex">
|
||||||
|
<article
|
||||||
|
class="z-5 relative mx-1 {article?.cover
|
||||||
|
? '-mt-10 lg:-mt-16'
|
||||||
|
: 'mt-5'} rounded-t-md bg-default p-3 xs:p-4 lg:ml-3 lg:p-5 xl:mx-4"
|
||||||
>
|
>
|
||||||
<h1
|
<header
|
||||||
class="mb-3 text-2xl sm:text-3xl font-bold text-white md:text-4xl"
|
class="pb-3 border-b-[2px] border-white w-full sm:min-w-[850px] sm:max-w-[850px]"
|
||||||
>
|
>
|
||||||
{article?.title}
|
<h1
|
||||||
</h1>
|
class="mb-3 text-2xl sm:text-3xl font-bold text-white md:text-4xl"
|
||||||
<div class="text-white">
|
>
|
||||||
<div>
|
{article?.title}
|
||||||
Last Updated: {new Date(article?.updated)?.toLocaleString(
|
</h1>
|
||||||
"en-US",
|
<div class="text-white">
|
||||||
{
|
<div>
|
||||||
month: "short",
|
Last Updated: {new Date(article?.updated)?.toLocaleString(
|
||||||
day: "numeric",
|
"en-US",
|
||||||
year: "numeric",
|
{
|
||||||
daySuffix: "2-digit",
|
month: "short",
|
||||||
},
|
day: "numeric",
|
||||||
)}
|
year: "numeric",
|
||||||
|
daySuffix: "2-digit",
|
||||||
|
},
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div class="text-lg mt-4">
|
||||||
|
<div class="content max-w-4xl">
|
||||||
|
{@html article?.description}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex flex-col text-white mt-3">
|
</article>
|
||||||
<div class="flex flex-wrap gap-x-2 gap-y-3">
|
</div>
|
||||||
{#each article?.tags || [] as tags}
|
</main>
|
||||||
<label
|
<aside class="hidden lg:block relative fixed w-1/4">
|
||||||
class="px-2 text-sm py-1 text-black rounded bg-white ml-0"
|
|
||||||
>
|
|
||||||
{tags}
|
|
||||||
</label>
|
|
||||||
{/each}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<div class="text-lg mt-4">
|
|
||||||
<div class="content">
|
|
||||||
{@html article?.description}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</article>
|
|
||||||
|
|
||||||
<div class="mt-5 lg:w-full">
|
<div class="mt-5 lg:w-full">
|
||||||
<div
|
<div class="flex flex-wrap gap-y-5 justify-center px-5">
|
||||||
class="flex flex-wrap gap-y-5 justify-center px-5 lg:sticky lg:top-20 lg:px-0"
|
|
||||||
>
|
|
||||||
{#if !data?.user}
|
{#if !data?.user}
|
||||||
<div
|
<div
|
||||||
class="w-full text-white border border-gray-600 rounded-md h-fit bg-inherit lg:mx-0 lg:w-[300px] xl:w-[360px]"
|
class="w-full text-white border border-gray-600 rounded-md h-fit bg-inherit lg:mx-0 lg:w-[300px] xl:w-[360px]"
|
||||||
@ -123,7 +123,7 @@
|
|||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</aside>
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</div>
|
||||||
</div>
|
</section>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user