AmineTMIRI/frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ui fix

Browse Source
This commit is contained in:
MuslemRahimi 2025-03-02 20:43:49 +01:00
parent 2ab03c3878
commit 543bf7d0c5
2 changed files with 113 additions and 106 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
src/routes/blog/article/[slug]/+page.svelte
View File

@ -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,13 +20,20 @@
: ""} : ""}
/> />
<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"> >
<div class="w-full overflow-hidden m-auto mt-5">
<div class="sm:p-0 flex justify-center w-full m-auto overflow-hidden">
<main id="main" class="mt-2 w-full">
{#if article?.cover} {#if article?.cover}
<img <img
src={getImageURL(article?.collectionId, article?.id, article?.cover)} src={getImageURL(
class="h-[200px] w-full object-cover lg:h-[350px]" article?.collectionId,
article?.id,
article?.cover,
)}
class="h-[200px] w-full object-cover lg:h-[350px] rounded-lg border border-gray-800"
loading="lazy" loading="lazy"
alt="Wallpaper" alt="Wallpaper"
/> />
@ -61,16 +68,16 @@
</header> </header>
<div class="text-lg mt-4"> <div class="text-lg mt-4">
<div class="content"> <div class="content max-w-4xl">
{@html article?.description} {@html article?.description}
</div> </div>
</div> </div>
</article> </article>
</div>
</main>
<aside class="hidden lg:block relative fixed w-1/4">
<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>
</aside>
</div> </div>
</div> </div>
</main> </section>
</div>

48
src/routes/learning-center/article/[slug]/+page.svelte
View File

@ -18,18 +18,29 @@
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"> >
<div class="w-full overflow-hidden m-auto mt-5">
<div class="sm:p-0 flex justify-center w-full m-auto overflow-hidden">
<main id="main" class="mt-2 w-full">
{#if article?.cover}
<img <img
src={getImageURL(article?.collectionId, article?.id, article?.cover)} src={getImageURL(
class="h-[200px] w-full object-cover lg:h-[350px]" article?.collectionId,
article?.id,
article?.cover,
)}
class="h-[200px] w-full object-cover lg:h-[350px] rounded-lg border border-gray-800"
loading="lazy" loading="lazy"
alt="Wallpaper" alt="Wallpaper"
/> />
{/if}
<div class="lg:flex"> <div class="lg:flex">
<article <article
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" 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"
> >
<header <header
class="pb-3 border-b-[2px] border-white w-full sm:min-w-[850px] sm:max-w-[850px]" class="pb-3 border-b-[2px] border-white w-full sm:min-w-[850px] sm:max-w-[850px]"
@ -52,30 +63,19 @@
)} )}
</div> </div>
</div> </div>
<div class="flex flex-col text-white mt-3">
<div class="flex flex-wrap gap-x-2 gap-y-3">
{#each article?.tags || [] as tags}
<label
class="px-2 text-sm py-1 text-black rounded bg-white ml-0"
>
{tags}
</label>
{/each}
</div>
</div>
</header> </header>
<div class="text-lg mt-4"> <div class="text-lg mt-4">
<div class="content"> <div class="content max-w-4xl">
{@html article?.description} {@html article?.description}
</div> </div>
</div> </div>
</article> </article>
</div>
</main>
<aside class="hidden lg:block relative fixed w-1/4">
<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>
</aside>
</div> </div>
</div> </div>
</main> </section>
</div>