fix: style

This commit is contained in:
2026-04-03 10:55:12 +02:00
parent 855721b4b1
commit c1efcf1b86
5 changed files with 18 additions and 12 deletions

View File

@@ -4,8 +4,7 @@
<CategoryMenu />
<div class="w-full flex flex-col items-center gap-4">
<UTable :data="productsList" :columns="columns" class="flex-1 w-full" :ui="{
root : 'max-w-100wv overflow-auto!'
}" />
root: 'max-w-100wv overflow-auto!' }" />
<UPagination v-model:page="page" :total="total" :items-per-page="perPage" />
</div>
</div>

View File

@@ -7,7 +7,7 @@
</div>
<div class="container mx-auto ">
<div
class="gap-4 mb-6 bg-slate-50 dark:bg-(--main-dark) border border-(--border-light) dark:border-(--border-dark) p-4 rounded-md">
class="gap-4 bg-slate-50 dark:bg-(--main-dark) border border-(--border-light) dark:border-(--border-dark) p-4 rounded-md">
<div class="flex items-center justify-between">
<div class="flex flex-col items-center gap-3" v-if="!isTranslations">
<USelectMenu v-model="toLangId" :items="langs" value-key="id"
@@ -97,7 +97,7 @@
</div>
<div v-else-if="productStore.productDescription" class="">
<div class="flex items-start gap-30">
<div class="flex items-start gap-30 py-8">
<div class="w-80 h-80 bg-(--second-light) dark:bg-gray-700 rounded-lg flex items-center justify-center">
<span class="text-gray-500 dark:text-gray-400">Product Image</span>
</div>
@@ -131,7 +131,7 @@
root: 'items-start!'
}">
<template #description>
<div v-if="!isTranslations" class="flex justify-end items-center gap-3 mb-4">
<div v-if="!isTranslations" class="flex justify-end items-center gap-3 py-4">
<UButton v-if="!isEditing" @click="activeTab === 'usage' ? enableEdit() : enableDescriptionEdit()"
class="flex items-center gap-2 m-2 cursor-pointer bg-(--accent-blue-light)! dark:bg-(--accent-blue-dark)!">
<p class="text-white">Change Text</p>
@@ -154,16 +154,17 @@
</template>
</UEditorToolbar>
</UEditor>
<p v-else v-html="productStore.productDescription.description" class="text-black dark:text-white"></p>
<p v-else v-html="productStore.productDescription.description" class="text-black dark:text-white px-7"></p>
</template>
<template #usage>
<div class="px-7">
<div class="flex justify-end items-center gap-3 mb-4">
<div class="flex justify-end items-center gap-3 py-4">
<UButton v-if="!isEditing" @click="enableEdit"
class="flex items-center gap-2 m-2 cursor-pointer bg-(--accent-blue-light)! dark:bg-(--accent-blue-dark)!">
<p class="text-(--text-sky-light) dark:text-(--text-sky-dark)">Change Text</p>
<UIcon name="material-symbols-light:stylus-note-sharp" class="text-[30px] text-(--text-sky-light) dark:text-(--text-sky-dark)" />
<UIcon name="material-symbols-light:stylus-note-sharp"
class="text-[30px] text-(--text-sky-light) dark:text-(--text-sky-dark)" />
</UButton>
<UButton v-if="isEditing" @click="saveText" color="neutral" variant="outline"
@@ -178,7 +179,8 @@
</div>
<UEditor v-if="isTranslations" v-slot="{ editor }" v-model="productStore.productDescription.usage"
content-type="html" :ui="{ base: 'p-8 sm:px-16' }" class="w-full min-h-74" placeholder="Write there ...">
content-type="html" :ui="{ base: 'p-8 sm:px-16' }" class="w-full min-h-74"
placeholder="Write there ...">
<UEditorToolbar :editor="editor" :items="toolbarItems" class="sm:px-8">
<template #link>
<EditorLinkPopover :editor="editor" auto-open />
@@ -478,13 +480,16 @@ function removeInlineStylesFromAll(product) {
const div = document.createElement('div')
div.innerHTML = html
const isDark = document.documentElement.classList.contains('dark')
div.querySelectorAll('*').forEach(el => {
const bg = el.style.background || el.style.backgroundColor
if (bg) {
el.style.background = ''
el.style.backgroundColor = ''
el.style.color = isDark ? 'white' : 'black'
}
})
div.querySelectorAll('p').forEach(p => {
if (p.querySelector('img')) {
p.style.display = 'flex'

View File

@@ -1,5 +1,7 @@
<template>
<UNavigationMenu orientation="vertical" type="single" :items="items" class="data-[orientation=vertical]:w-72" />
<UNavigationMenu orientation="vertical" type="single" :items="items" class="data-[orientation=vertical]:w-72" :ui="{
root:''
}"/>
</template>
<script setup lang="ts">