migrated mobile CSS to the mobile layout

src/public/javascripts/widgets/basic_widget.js

@@ -2,6 +2,40 @@ import Component from "./component.js";
 import keyboardActionsService from "../services/keyboard_actions.js";
 
 class BasicWidget extends Component {
+    constructor() {
+        super();
+
+        this.attrs = {
+            style: ''
+        };
+        this.classes = [];
+    }
+
+    id(id) {
+        this.attrs.id = id;
+        return this;
+    }
+
+    class(className) {
+        this.classes.push(className);
+        return this;
+    }
+
+    css(name, value) {
+        this.attrs.style += `${name}: ${value};`;
+        return this;
+    }
+
+    collapsible() {
+        this.css('min-height', '0');
+        return this;
+    }
+
+    cssBlock(block) {
+        this.cssEl = block;
+        return this;
+    }
+
     render() {
         const $widget = this.doRender();
 
@@ -10,6 +44,20 @@ class BasicWidget extends Component {
 
         this.toggle(this.isEnabled());
 
+        if (this.cssEl) {
+            const css = this.cssEl.trim().startsWith('<style>') ? this.cssEl : `<style>${this.cssEl}</style>`;
+
+            $widget.append(css);
+        }
+
+        for (const key in this.attrs) {
+            $widget.attr(key, this.attrs[key]);
+        }
+
+        for (const className of this.classes) {
+            $widget.addClass(className);
+        }
+
         return $widget;
     }
 

src/public/javascripts/widgets/flex_container.js

@@ -8,57 +8,14 @@ export default class FlexContainer extends BasicWidget {
             throw new Error(`Direction argument given as "${direction}", use either 'row' or 'column'`);
         }
 
-        this.attrs = {
-            style: `display: flex; flex-direction: ${direction};`,
-        };
-
-        this.classes = [];
+        this.attrs.style = `display: flex; flex-direction: ${direction};`;
 
         this.children = [];
     }
 
-    id(id) {
-        this.attrs.id = id;
-        return this;
-    }
-
-    class(className) {
-        this.classes.push(className);
-        return this;
-    }
-
-    css(name, value) {
-        this.attrs.style += `${name}: ${value};`;
-        return this;
-    }
-
-    collapsible() {
-        this.css('min-height', '0');
-        return this;
-    }
-
-    cssBlock(block) {
-        this.cssEl = block;
-        return this;
-    }
-
     doRender() {
         this.$widget = $(`<div>`);
 
-        if (this.cssEl) {
-            const css = this.cssEl.trim().startsWith('<style>') ? this.cssEl : `<style>${this.cssEl}</style>`;
-
-            this.$widget.append(css);
-        }
-
-        for (const key in this.attrs) {
-            this.$widget.attr(key, this.attrs[key]);
-        }
-
-        for (const className of this.classes) {
-            this.$widget.addClass(className);
-        }
-
         for (const widget of this.children) {
             this.$widget.append(widget.render());
         }

src/public/javascripts/widgets/mobile_layout.js

@@ -7,22 +7,82 @@ import CloseDetailButtonWidget from "./close_detail_button.js";
 import MobileDetailMenuWidget from "./mobile_detail_menu.js";
 import ScreenContainer from "./screen_container.js";
 
+const MOBILE_CSS = `
+<style>
+kbd {
+    display: none;
+}
+
+.dropdown-menu {
+    font-size: larger;
+}
+
+.action-button {
+    background: none;
+    border: none;
+    cursor: pointer;
+    font-size: 1.5em;
+    padding-left: 0.5em;
+    padding-right: 0.5em;
+}
+</style>`;
+
+const FANCYTREE_CSS = `
+<style>
+.fancytree-custom-icon {
+    font-size: 2em;
+}
+
+.fancytree-title {
+    font-size: 1.5em;
+    margin-left: 0.6em !important;
+}
+
+.fancytree-node {
+    padding: 5px;
+}
+
+.fancytree-node .fancytree-expander:before {
+    font-size: 2em !important;
+}
+
+span.fancytree-expander {
+    width: 24px !important;
+}
+
+.fancytree-loading span.fancytree-expander {
+    width: 24px;
+    height: 32px;
+}
+
+.fancytree-loading  span.fancytree-expander:after {
+    width: 20px;
+    height: 20px;
+    margin-top: 4px;
+    border-width: 2px;
+    border-style: solid;
+}
+</style>`;
+
 export default class MobileLayout {
     getRootWidget(appContext) {
-        return new FlexContainer('row')
+        return new FlexContainer('row').cssBlock(MOBILE_CSS)
             .setParent(appContext)
             .id('root-widget')
             .css('height', '100vh')
             .child(new ScreenContainer("tree", 'column')
                 .class("d-sm-flex d-md-flex d-lg-flex d-xl-flex col-12 col-sm-5 col-md-4 col-lg-4 col-xl-4")
                 .child(new MobileGlobalButtonsWidget())
-                .child(new NoteTreeWidget()))
+                .child(new NoteTreeWidget().cssBlock(FANCYTREE_CSS)))
             .child(new ScreenContainer("detail", "column")
                 .class("d-sm-flex d-md-flex d-lg-flex d-xl-flex col-12 col-sm-7 col-md-8 col-lg-8")
                 .child(new FlexContainer('row')
                     .child(new MobileDetailMenuWidget())
-                    .child(new NoteTitleWidget())
+                    .child(new NoteTitleWidget()
+                        .css('padding', '10px')
+                        .css('font-size', 'larger'))
                     .child(new CloseDetailButtonWidget()))
-                .child(new NoteDetailWidget()));
+                .child(new NoteDetailWidget()
+                    .css('padding', '5px 20px 10px 0')));
     }
 }

src/public/stylesheets/mobile.css

@@ -1,68 +0,0 @@
-html, body {
-    height: 100%;
-    width: 100%;
-    margin: 0;
-    padding: 0;
-}
-
-.note-detail {
-    padding: 5px 20px 10px 0;
-    height: 100%;
-    flex-direction: column;
-}
-
-.note-title-container {
-    padding: 10px;
-    font-size: larger;
-}
-
-.fancytree-custom-icon {
-    font-size: 2em;
-}
-
-.fancytree-title {
-    font-size: 1.5em;
-    margin-left: 0.6em !important;
-}
-
-.fancytree-node {
-    padding: 5px;
-}
-
-.fancytree-node .fancytree-expander:before {
-    font-size: 2em !important;
-}
-
-kbd {
-    display: none;
-}
-
-.dropdown-menu {
-    font-size: larger;
-}
-
-span.fancytree-expander {
-    width: 24px !important;
-}
-
-.fancytree-loading span.fancytree-expander {
-    width: 24px;
-    height: 32px;
-}
-
-.fancytree-loading  span.fancytree-expander:after {
-    width: 20px;
-    height: 20px;
-    margin-top: 4px;
-    border-width: 2px;
-    border-style: solid;
-}
-
-.action-button {
-    background: none;
-    border: none;
-    cursor: pointer;
-    font-size: 1.5em;
-    padding-left: 0.5em;
-    padding-right: 0.5em;
-}

src/views/mobile.ejs

@@ -42,7 +42,6 @@
 
 <link href="stylesheets/themes.css" rel="stylesheet">
 <link href="stylesheets/style.css" rel="stylesheet">
-<link href="stylesheets/mobile.css" rel="stylesheet">
 
 <link rel="stylesheet" type="text/css" href="libraries/boxicons/css/boxicons.min.css">