Styling improvements

webapp/src/customtags.ts

@@ -8,3 +8,5 @@ export const TaskTag = Tag.define();
 export const TaskMarkerTag = Tag.define();
 export const CommentTag = Tag.define();
 export const CommentMarkerTag = Tag.define();
+export const BulletList = Tag.define();
+export const OrderedList = Tag.define();

webapp/src/editor.tsx

@@ -220,9 +220,12 @@ export class Editor implements AppEventDispatcher {
           { selector: "ATXHeading3", class: "line-h3" },
           { selector: "ListItem", class: "line-li", nesting: true },
           { selector: "Blockquote", class: "line-blockquote" },
+          { selector: "Task", class: "line-task" },
           { selector: "CodeBlock", class: "line-code" },
           { selector: "FencedCode", class: "line-fenced-code" },
           { selector: "Comment", class: "line-comment" },
+          { selector: "BulletList", class: "line-ul" },
+          { selector: "OrderedList", class: "line-ol" },
         ]),
         keymap.of([
           ...smartQuoteKeymap,
@@ -292,6 +295,17 @@ export class Editor implements AppEventDispatcher {
               await this.dispatchAppEvent("page:click", clickEvent);
             });
           },
+          // focus: (event: FocusEvent, view: EditorView) => {
+          //   console.log("Got focus");
+          //   document.body.classList.add("keyboard");
+          // },
+          // blur: (event: FocusEvent, view: EditorView) => {
+          //   console.log("Lost focus");
+          //   document.body.classList.remove("keyboard");
+          // },
+          // focusout: (event: FocusEvent, view: EditorView) => {
+          //   window.scrollTo(0, 0);
+          // },
         }),
         markdown({
           base: customMarkDown,

webapp/src/parser.ts

@@ -149,7 +149,6 @@ const WikiMarkdown = commonmark.configure([
         TaskMarker: ct.TaskMarkerTag,
         Url: t.url,
         Comment: ct.CommentTag,
-        // CommentMarker: ct.CommentMarkerTag,
       }),
     ],
   },

webapp/src/styles/editor.scss

@@ -109,29 +109,69 @@
     background-color: #efefef;
   }
 
-  .line-li-1 {
+  // Indentation of follow-up lines
-    text-indent: -2ch;
+  @mixin lineOverflow($baseIndent) {
-    padding-left: 2ch;
+    text-indent: -1 * ($baseIndent + 2ch);
+    padding-left: $baseIndent + 2ch;
+
+    &.line-task {
+      text-indent: -1 * ($baseIndent + 6ch);
+      padding-left: $baseIndent + 6ch;
     }
 
-  .line-li-1.line-li-2 {
+    &.line-blockquote {
-    text-indent: -4ch;
+      text-indent: -1 * ($baseIndent + 4ch);
-    padding-left: 4ch;
+      padding-left: $baseIndent + 4ch;
+    }
   }
 
-  .line-li-1.line-li-2.line-li-3 {
+  .line-ul {
-    text-indent: -6ch;
+    &.line-li-1 {
-    padding-left: 6ch;
+      @include lineOverflow(0);
     }
 
-  .line-li-1.line-li-2.line-li-3.line-li-4 {
+    &.line-li-1.line-li-2 {
-    text-indent: -8ch;
+      @include lineOverflow(2);
-    padding-left: 8ch;
     }
 
-  .line-li-1.line-li-2.line-li-3.line-li-4.line-li-5 {
+    &.line-li-1.line-li-2.line-li-3 {
-    text-indent: -10ch;
+      @include lineOverflow(4);
-    padding-left: 10ch;
+    }
+
+    &.line-li-1.line-li-2.line-li-3.line-li-4 {
+      @include lineOverflow(6);
+    }
+
+    &.line-li-1.line-li-2.line-li-3.line-li-4.line-li-5 {
+      @include lineOverflow(8);
+    }
+  }
+
+  .line-ol {
+    &.line-li-1 {
+      @include lineOverflow(1);
+    }
+
+    &.line-li-1.line-li-2 {
+      @include lineOverflow(2);
+    }
+
+    &.line-li-1.line-li-2.line-li-3 {
+      @include lineOverflow(4);
+    }
+
+    &.line-li-1.line-li-2.line-li-3.line-li-4 {
+      @include lineOverflow(6);
+    }
+
+    &.line-li-1.line-li-2.line-li-3.line-li-4.line-li-5 {
+      @include lineOverflow(8);
+    }
+  }
+
+  .line-comment {
+    text-indent: -1 * 3ch;
+    padding-left: 3ch;
   }
 
   .task-marker {

webapp/src/styles/filter_box.scss

@@ -2,7 +2,7 @@
   position: absolute;
   font-family: var(--ui-font);
   margin: auto;
-  width: 500px;
+  max-width: 500px;
   height: 600px;
   background-color: #fff;
   left: 0;

webapp/src/styles/main.scss

@@ -19,7 +19,7 @@ body {
 
 #top {
   height: 55px;
-  position: absolute;
+  position: fixed;
   top: 0;
   left: 0;
   right: 0;
@@ -46,7 +46,7 @@ body {
 }
 
 #bottom {
-  position: absolute;
+  position: fixed;
   bottom: 0;
   left: 0;
   right: 0;
@@ -61,6 +61,10 @@ body {
   text-align: right;
 }
 
+// body.keyboard #bottom {
+//   bottom: 250px;
+// }
+
 #editor {
   position: absolute;
   top: 55px;