refactor: use width fit content style in modal

- update some prose style
yilanboy · Nov 10, 2024 · dda184a · dda184a
1 parent cc31cb3
commit dda184a
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 23 deletions.
diff --git a/resources/css/app.css b/resources/css/app.css
@@ -24,22 +24,23 @@
             /* figure */
         prose-figure:table prose-figure:mx-auto
             /* image */
-        prose-img:w-full prose-img:rounded-md
+        prose-img:w-full prose-img:rounded-xl
             /* figure */
         prose-figure:w-full
             /* figcaption */
         prose-figcaption:table-caption prose-figcaption:[caption-side:bottom] prose-figcaption:break-words
-        prose-figcaption:rounded-md prose-figcaption:p-1.5 prose-figcaption:text-center prose-figcaption:bg-slate-200
+        prose-figcaption:rounded-lg prose-figcaption:p-1.5 prose-figcaption:text-center prose-figcaption:bg-slate-200
         dark:prose-figcaption:bg-slate-700 dark:prose-figcaption:text-slate-100
             /* horizontal line */
         prose-hr:my-3 prose-hr:h-1 prose-hr:border-none prose-hr:bg-slate-300 dark:prose-hr:bg-slate-500
             /* code */
         prose-code:before:content-none prose-code:after:content-none prose-code:font-jetbrains-mono prose-code:font-medium
             /* pre */
-        prose-pre:p-4 prose-pre:bg-neutral-800 prose-pre:rounded-lg prose-pre:text-lg dark:prose-pre:bg-neutral-900 prose-pre:border-none
+        prose-pre:p-4 prose-pre:bg-neutral-800 prose-pre:rounded-xl prose-pre:text-lg dark:prose-pre:bg-neutral-900 prose-pre:border-none
+            /* blockquote border */
+        prose-blockquote:relative prose-blockquote:before:absolute prose-blockquote:before:w-1.5 prose-blockquote:before:h-full prose-blockquote:before:rounded prose-blockquote:before:top-0 prose-blockquote:before:-left-4 prose-blockquote:before:bg-emerald-300 dark:prose-blockquote:before:bg-lividus-700 prose-blockquote:before:contain-none prose-blockquote:ml-4
             /* blockquote */
-        prose-blockquote:border-emerald-400 prose-blockquote:text-slate-600 prose-blockquote:bg-emerald-100/50
-        dark:prose-blockquote:border-lividus-600 dark:prose-blockquote:text-slate-400 dark:prose-blockquote:bg-lividus-800/50 prose-blockquote:py-2 prose-blockquote:pr-2 !important;
+         prose-blockquote:border-none prose-blockquote:rounded-xl prose-blockquote:text-slate-600 prose-blockquote:bg-emerald-100/80 dark:prose-blockquote:text-slate-400 dark:prose-blockquote:bg-lividus-800/50 prose-blockquote:py-2 prose-blockquote:pr-2 !important;
     }
 
     /* ckeditor5-font/theme/fontsize.css */

diff --git a/resources/ts/code-block-helper.ts b/resources/ts/code-block-helper.ts
@@ -84,12 +84,15 @@ function createExpandCodeButton(preOuterHtml: string): HTMLButtonElement {
     );
     expandCodeButton.innerHTML = ARROWS_ANGLE_EXPAND_ICON_SVG;
 
-    const modal = new Modal(preOuterHtml, ['font-jetbrains-mono', 'text-xl']);
+    const modal = new Modal({
+        innerHtml: preOuterHtml,
+        customClassName: ['font-jetbrains-mono', 'text-xl'],
+    });
 
     expandCodeButton.addEventListener(
         'click',
         function (this: HTMLButtonElement) {
-            modal.openModal();
+            modal.open();
         },
     );
 

diff --git a/resources/ts/modal.ts b/resources/ts/modal.ts
@@ -36,55 +36,59 @@ export class Modal {
     public element: HTMLDivElement;
     private abortController: AbortController;
 
-    public constructor(innerHtml: string, customClassName: string[] = []) {
+    public constructor({
+        innerHtml,
+        customClassName = [],
+    }: {
+        innerHtml: string;
+        customClassName?: string[];
+    }) {
         this.element = document.createElement('div');
         this.element.id = 'dynamic-content-modal';
-        this.element.innerHTML = this.modalInnerHtmlTemplate(
+        this.element.innerHTML = this.innerHtmlTemplate(
             innerHtml,
             customClassName,
         );
 
         this.abortController = new AbortController();
     }
 
-    public modalInnerHtmlTemplate(
+    public innerHtmlTemplate(
         innerHtml: string,
         customClassName: string[],
     ): string {
-        return `
-        <div class="relative z-30 ${customClassName.join(' ')}">
+        return `<div class="relative z-30 ${customClassName.join(' ')}">
             <!-- Background backdrop, show/hide based on modal state -->
             <div
                 id="${BACKGROUND_BACKDROP_ID}"
-                class="fixed inset-0 bg-gray-500/75 transition-opacity backdrop-blur-md ${HIDE_BACKGROUND_BACKDROP_CLASS_NAME.join(' ')}"
+                class="fixed inset-0 bg-gray-500/75 backdrop-blur-md transition-opacity ${HIDE_BACKGROUND_BACKDROP_CLASS_NAME.join(' ')}"
             ></div>
 
             <div class="fixed inset-0 z-10 w-screen overflow-y-auto">
-                <div class="flex min-h-full justify-center p-4 text-center items-center">
+                <div class="flex min-h-full items-center justify-center p-4 text-center">
                     <!-- Modal panel, show/hide based on modal state. -->
                     <div
                         id="${MODAL_PANEL_ID}"
-                        class="relative transform overflow-hidden rounded-lg text-left transition-all sm:w-full sm:max-w-6xl ${HIDE_MODAL_PANEL_CLASS_NAME.join(' ')}"
+                        class="relative transform overflow-hidden rounded-xl text-left transition-all sm:w-fit sm:max-w-6xl ${HIDE_MODAL_PANEL_CLASS_NAME.join(' ')}"
                     >
                         ${innerHtml}
                     </div>
                 </div>
             </div>
 
-            <div class="fixed z-10 right-10 top-10">
+            <div class="fixed right-10 top-10 z-10">
                 <button
                     id="${CLOSE_MODAL_BUTTON_ID}"
                     type="button"
-                    class="text-gray-200 hover:text-gray-50 transition duration-300"
+                    class="text-gray-200 transition duration-300 hover:text-gray-50"
                 >
                    ${X_CIRCLE_FILL_ICON_SVG}
                 </button>
             </div>
-        </div>
-    `;
+        </div>`;
     }
 
-    public openModal() {
+    public open() {
         // transport modal to another part of the DOM on the page entirely
         document.body.appendChild(this.element);
         document.body.style.overflow = 'hidden';
@@ -119,7 +123,7 @@ export class Modal {
         // Add close button handler
         const closeButton = document.getElementById(CLOSE_MODAL_BUTTON_ID);
 
-        closeButton?.addEventListener('click', () => this.closeModal(), {
+        closeButton?.addEventListener('click', () => this.close(), {
             signal: this.abortController.signal,
         });
 
@@ -128,14 +132,14 @@ export class Modal {
             'keydown',
             (event) => {
                 if (event.key === 'Escape') {
-                    this.closeModal();
+                    this.close();
                 }
             },
             { signal: this.abortController.signal },
         );
     }
 
-    private closeModal() {
+    private close() {
         // Abort all event listeners
         this.abortController.abort();
         // Create new controller for next time