chore: adjust css for mobile

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

Hide file tree

Showing 6 changed files with 27 additions and 38 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/controller.ts b/packages/blocky-core/src/view/controller.ts
@@ -1,6 +1,5 @@
 import { isUpperCase } from "blocky-common/es";
 import { Subject } from "rxjs";
-import { type Padding } from "blocky-common/es/dom";
 import { EditorState, NodeTraverser } from "@pkg/model";
 import {
   AttributesObject,
@@ -90,11 +89,6 @@ export interface IEditorControllerOptions {
   idGenerator?: IdGenerator;
   toolbarFactory?: ToolbarFactory;
 
-  /**
-   * The inner padding of the editor
-   */
-  padding?: Partial<Padding>;
-
   collaborativeCursorFactory?: CollaborativeCursorFactory;
 
   emptyPlaceholder?: string;

diff --git a/packages/blocky-core/src/view/editor.ts b/packages/blocky-core/src/view/editor.ts
@@ -1,4 +1,4 @@
-import { isContainNode, removeNode, type Padding } from "blocky-common/es/dom";
+import { isContainNode, removeNode } from "blocky-common/es/dom";
 import {
   isUpperCase,
   areEqualShallow,
@@ -84,7 +84,6 @@ export interface IEditorOptions {
   container: HTMLDivElement;
   idGenerator?: IdGenerator;
   toolbarFactory?: ToolbarFactory;
-  padding?: Partial<Padding>;
   collaborativeCursorFactory?: CollaborativeCursorFactory;
 }
 
@@ -93,15 +92,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 +191,6 @@ export class Editor {
 
   readonly collaborativeCursorManager: CollaborativeCursorManager;
 
-  readonly padding: Padding;
-
   composing = false;
   private disposables: IDisposable[] = [];
 
@@ -219,7 +207,6 @@ export class Editor {
       },
       state: controller.state,
       toolbarFactory: controller.options?.toolbarFactory,
-      padding: controller.options?.padding,
       collaborativeCursorFactory:
         controller.options?.collaborativeCursorFactory,
     });
@@ -234,19 +221,13 @@ export class Editor {
       registry,
       idGenerator,
       toolbarFactory,
-      padding,
       collaborativeCursorFactory,
     } = options;
     this.state = state;
     this.registry = registry;
     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) {