chore: adjust css for mobile

vincentdchan · Dec 6, 2023 · 3185b20 · 3185b20 · vercel · Dec 6, 2023
1 parent 5578261
commit 3185b20
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 28 deletions.
diff --git a/packages/blocky-core/css/blocky-core.css b/packages/blocky-core/css/blocky-core.css
@@ -54,6 +54,8 @@
   font-size: 32px;
   font-weight: 700;
   color: var(--blocky-primary-color);
+  padding-left: 56px;
+  padding-right: 56px;
 }
 
 .blocky-editor-title-container:empty::before {
@@ -230,3 +232,24 @@
   left: 0px;
   height: 2px;
 }
+
+.blocky-editor-blocks-container {
+  padding: 12px 56px 72px;
+}
+
+
+@media only screen and (max-width: 600px) {
+
+.blocky-editor-title-container {
+  font-size: 32px;
+  font-weight: 700;
+  color: var(--blocky-primary-color);
+  padding-left: 42px;
+  padding-right: 42px;
+}
+
+.blocky-editor-blocks-container {
+  padding: 12px 42px 72px;
+}
+
+}
diff --git a/packages/blocky-core/src/view/editor.ts b/packages/blocky-core/src/view/editor.ts
@@ -93,15 +93,6 @@ enum MineType {
   Html = "text/html",
 }
 
-function makeDefaultPadding(): Padding {
-  return {
-    top: 12,
-    right: 56,
-    bottom: 72,
-    left: 56,
-  };
-}
-
 interface BlockSizeInfo {
   id: string;
   rect: DOMRect;
@@ -201,8 +192,6 @@ export class Editor {
 
   readonly collaborativeCursorManager: CollaborativeCursorManager;
 
-  readonly padding: Padding;
-
   composing = false;
   private disposables: IDisposable[] = [];
 
@@ -242,11 +231,6 @@ export class Editor {
     this.container = container;
     this.idGenerator = idGenerator ?? makeDefaultIdGenerator();
 
-    this.padding = {
-      ...makeDefaultPadding(),
-      ...padding,
-    };
-
     this.collaborativeCursorManager = new CollaborativeCursorManager(
       collaborativeCursorFactory
     );

diff --git a/packages/blocky-core/src/view/renderer.ts b/packages/blocky-core/src/view/renderer.ts
@@ -171,11 +171,6 @@ export class DocRenderer {
         "div",
         `${clsPrefix}-editor-title-container ${this.blockClassName}`,
         (elem: HTMLElement) => {
-          const { padding } = this.editor;
-          const { right, left } = padding;
-          elem.style.paddingLeft = `${left}px`;
-          elem.style.paddingRight = `${right}px`;
-
           if (this.editor.controller?.options?.titleEditable === false) {
             elem.contentEditable = "false";
           }
@@ -187,12 +182,7 @@ export class DocRenderer {
       dom,
       renderCounter++,
       "div",
-      `${clsPrefix}-editor-blocks-container`,
-      (elem: HTMLElement) => {
-        const { padding } = this.editor;
-        const { top, right, bottom, left } = padding;
-        elem.style.padding = `${top}px ${right}px ${bottom}px ${left}px`;
-      }
+      `${clsPrefix}-editor-blocks-container`
     );
 
     this.renderBlocks(

diff --git a/packages/blocky-example/app/loro/loroBlock.tsx b/packages/blocky-example/app/loro/loroBlock.tsx
@@ -79,7 +79,7 @@ function LoroBlock(props: LoroBlockProps) {
           </DialogContentText>
         </DialogContent>
         <DialogActions>
-          <Button onClick={handleClose}>Canel</Button>
+          <Button onClick={handleClose}>Cancel</Button>
           <Button onClick={handleConfirm} color="error" autoFocus>
             Confirm
           </Button>

diff --git a/packages/blocky-example/app/loro/loroExample.module.scss b/packages/blocky-example/app/loro/loroExample.module.scss
@@ -5,6 +5,7 @@
 
   :global(.blocky-editor-container) {
     flex: 1;
+    max-width: 100%;
   }
 
   :global(.blocky-documents) {