Bump

v3xlabs · Feb 15, 2024 · 681836e · 681836e
1 parent 9fcc57f
commit 681836e
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 24 deletions.
diff --git a/packages/thorin-core/src/button/index.ts b/packages/thorin-core/src/button/index.ts
@@ -1,5 +1,6 @@
+/* eslint-disable unicorn/template-indent */
 import { css, html, LitElement } from 'lit';
-import { customElement } from 'lit/decorators.js';
+import { customElement, property } from 'lit/decorators.js';
 
 @customElement('thorin-button')
 export class ThorinButton extends LitElement {
@@ -17,6 +18,9 @@ export class ThorinButton extends LitElement {
             border-radius: 24px;
             padding: 8px 16px;
         }
+        button.full {
+            width: 100%;
+        }
         button:hover,
         button:active {
             background: var(--thorin-blue-bright);
@@ -28,14 +32,21 @@ export class ThorinButton extends LitElement {
         }
     `;
 
+    @property({ type: String })
+    width: 'auto' | 'full' = 'auto';
+
     render() {
         return html`
-            <button @click="${this._onClick}">
+            <button @click="${this._onClick}" class="${this.computeClass}">
                 <slot></slot>
             </button>
         `;
     }
 
+    private get computeClass() {
+        return this.width === 'full' ? 'full' : '';
+    }
+
     private _onClick(event: PointerEvent) {
         console.log('Button clicked', event);
     }

diff --git a/packages/thorin-core/src/modal/index.ts b/packages/thorin-core/src/modal/index.ts
@@ -23,56 +23,77 @@ export class ThorinModal extends LitElement {
             display: flex; /* Show modal when open */
         }
         .modal {
-            transition: all 20ms ease-in-out;
-            overflow: hidden; /* Smooth resizing */
+            transition: all 250ms ease-out;
+            /* overflow: hidden; Smooth resizing */
             background: var(--thorin-background-primary);
             padding: 16px;
             border-radius: 24px;
             max-width: 100vw;
+
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            position: fixed;
+            left: 50%;
+            top: 50%;
+            transform: translate(-50%, -50%);
+            max-width: 100%;
+            width: auto;
+            box-sizing: border-box;
+            overflow: hidden;
+        }
+        @media (max-width: 768px) {
+            .modal {
+                top: auto;
+                bottom: 0;
+                transform: translate(-50%, 0%);
+                height: auto;
+                max-height: 100vh;
+                overflow-y: auto;
+            }
         }
         .content {
-            overflow: unset;
-            max-width: 100vw;
+            max-height: 100vh;
+            overflow: visible;
+            width: fit-content;
+            height: fit-content;
         }
     `;
 
+    render() {
+        return html`
+            <div class="modal">
+                <div class="content">
+                    <slot></slot>
+                    <thorin-button width="full">Close</thorin-button>
+                </div>
+            </div>
+        `;
+    }
+
     firstUpdated() {
         const modal = this.shadowRoot?.querySelector('.modal');
         const modalContent = this.shadowRoot?.querySelector('.content');
         const resizeObserver = new ResizeObserver((entries) => {
             for (const entry of entries) {
                 const { height, width } = entry.contentRect;
-                // Apply the new height and width to the modal, if necessary
-                // This is where you'd dynamically adjust based on content, similar to Framer Motion
-                // For example, adjust max-height/max-width or transform scale
 
                 console.log('Resize observed', height, width);
                 modal?.setAttribute(
                     'style',
                     `max-height: ${height + 32}px; max-width: ${width + 32}px`
                 );
-                modalContent?.setAttribute(
-                    'style',
-                    `max-height: ${height}px; max-width: ${width}px`
-                );
+                // modalContent?.setAttribute(
+                //     'style',
+                //     `max-height: ${height}px; max-width: ${width}px`
+                // );
             }
         });
 
         if (modalContent) {
             resizeObserver.observe(modalContent);
         }
     }
-
-    render() {
-        return html`
-            <div class="modal">
-                <div class="content">
-                    <slot></slot>
-                    <thorin-button>Close</thorin-button>
-                </div>
-            </div>
-        `;
-    }
 }
 
 declare global {

diff --git a/packages/thorin-core/src/style.css b/packages/thorin-core/src/style.css
@@ -2,6 +2,14 @@ html, body {
     font-family: "Satoshi", sans-serif;
 }
 
+* {
+    box-sizing: border-box;
+}
+
+p {
+    margin: 0;
+}
+
 @font-face {
     font-family: "Satoshi";
     src: url("https://app.ens.domains/fonts/sans-serif/Satoshi-Bold.otf")