fix: Update Countdown and MultiEditorInputHTML components for improve…

…d styling and functionality
inikoo · Dec 12, 2024 · 36e8f42 · 36e8f42
1 parent e37bfa2
commit 36e8f42
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 11 deletions.
diff --git a/resources/js/Components/CMS/Fields/Countdown.vue b/resources/js/Components/CMS/Fields/Countdown.vue
@@ -4,6 +4,7 @@ import { trans } from 'laravel-vue-i18n'
 import PureDatePicker from '@/Components/Pure/PureDatePicker.vue'
 import PureInput from '@/Components/Pure/PureInput.vue'
 import { get, set } from 'lodash'
+import SideEditorInputHTML from './SideEditorInputHTML.vue'
 
 const Countdown = {
     date: new Date(Date.now() + 2 * 24 * 60 * 60 * 1000),
@@ -46,10 +47,9 @@ onMounted(() => {
 
             <!-- Text -->
             <div class="flex items-center gap-x-2 py-1" >
-                <PureInput
+                <SideEditorInputHTML
                     :modelValue="get(model, 'expired_text', '')"
                     @update:modelValue="(e) => set(model, 'expired_text', e)"
-                    :placeholder="trans('Enter text')"
                 />
             </div>
         </div>

diff --git a/resources/js/Components/CMS/Fields/MultiEditorInputHTML.vue b/resources/js/Components/CMS/Fields/MultiEditorInputHTML.vue
@@ -138,11 +138,11 @@ const transitionList = [
         <div class="mt-6 text-sm text-gray-500 mb-2">{{ trans('Text list') }}</div>
         <div class="flex flex-col gap-y-4 ">
             <div v-for="(text, idxText) in model?.multi_text" :key="'texteditor_' + idxText + model?.multi_text?.length" class="flex items-center gap-x-1 w-full">
-                <Editor2 :modelValue="text" @update:modelValue="(e) => set(model, ['multi_text', idxText], e)" v-bind="$attrs">
+                <Editor2 :modelValue="text" @update:modelValue="(e) => set(model, ['multi_text', idxText], e)" v-bind="$attrs" class="w-full">
                     <template #editor-content="{ editor }">
                         <div
-                            class="bg-gray-200 editor-wrapper border-2 border-gray-300 rounded px-3 py-2 shadow-sm focus-within:border-blue-400">
-                            <EditorContent :editor="editor" class="editor-content focus:outline-none" />
+                            class="w-full bg-gray-200 editor-wrapper border-2 border-gray-300 rounded px-1.5 py-2 shadow-sm focus-within:border-blue-400">
+                            <EditorContent :editor="editor" class="max-h-32 overflow-y-auto focus:outline-none" />
                         </div>
                     </template>
                 </Editor2>

diff --git a/resources/js/Components/CMS/Fields/SideEditorInputHTML.vue b/resources/js/Components/CMS/Fields/SideEditorInputHTML.vue
@@ -15,15 +15,15 @@ defineOptions({
 </script>
 
 <template>
-  <div :class="containerClass">
+  <div :class="containerClass" class="w-full">
     <Editor2
       :modelValue="get(model, 'text', '')"
       @update:modelValue="(e) => set(model, 'text', e)"
       v-bind="$attrs"
     >
       <template #editor-content="{ editor }">
         <div class="bg-gray-200 editor-wrapper border-2 border-gray-300 rounded-lg px-3 py-2 shadow-sm focus-within:border-blue-400">
-          <EditorContent :editor="editor" class="editor-content focus:outline-none" />
+          <EditorContent :editor="editor" class="focus:outline-none" />
         </div>
       </template>
     </Editor2>
@@ -35,7 +35,7 @@ defineOptions({
   transition: border-color 0.3s ease, box-shadow 0.3s ease;
 }
 
-.editor-content {
+:deep(.editor-class) {
   min-height: 150px;
   font-size: 1rem;
   line-height: 1.5;

diff --git a/resources/js/Components/Forms/Fields/TextEditor.vue b/resources/js/Components/Forms/Fields/TextEditor.vue
@@ -145,11 +145,11 @@ onBeforeUnmount(() => {
 
 <style>
 .ProseMirror {
-    padding: 7px 15px;
+    padding: 4px 15px;
 }
 
 .ProseMirror p {
-    width: 400px;
+    width: 100%;
     /* background: #e1e1e1; */
     /* max-width: 100%; */
     word-wrap: break-word;

diff --git a/...urces/js/Components/Workshop/Announcement/Templates/Promo/AnnouncementPromo2Countdown.vue b/...urces/js/Components/Workshop/Announcement/Templates/Promo/AnnouncementPromo2Countdown.vue
@@ -490,7 +490,7 @@ defineExpose({
 
             </div>
 
-            <div @click="() => (onClickOpenFieldWorkshop(2))" class="announcement-component-editable grid grid-cols-4 gap-x-2 font-sans mx-auto">
+            <div v-if="compTimeLeft > new Date().getTime()" @click="() => (onClickOpenFieldWorkshop(2))" class="announcement-component-editable grid grid-cols-4 gap-x-2 font-sans mx-auto">
                 <div class="flex flex-col items-center">
                     <div id="countdown-days" class="text-base w-fit flex justify-center overflow-hidden relative rounded-md tabular-nums">
                         {{days}}
@@ -516,6 +516,10 @@ defineExpose({
                     <div class="text-xs opacity-60">{{ trans("Seconds") }}</div>
                 </div>
             </div>
+
+            <div v-else class="flex justify-center">
+                {{ announcementData?.fields?.countdown?.expired_text }}
+            </div>
 
             <div v-if="announcementData?.fields.button_1.text" class="relative justify-self-center md:justify-self-end">
                 <div v-if="isEditable"  @click="() => (onClickOpenFieldWorkshop(3))" class="absolute inset-0 announcement-component-editable " />