fix: style
This commit is contained in:
@@ -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>
|
||||
|
||||
@@ -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'
|
||||
|
||||
@@ -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">
|
||||
|
||||
Reference in New Issue
Block a user