diff --git a/src/public/javascripts/widgets/basic_widget.js b/src/public/javascripts/widgets/basic_widget.js
index 8339b3914..f6e03cf38 100644
--- a/src/public/javascripts/widgets/basic_widget.js
+++ b/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('`;
+
+ $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;
}
diff --git a/src/public/javascripts/widgets/flex_container.js b/src/public/javascripts/widgets/flex_container.js
index ca1e57b77..c768caea3 100644
--- a/src/public/javascripts/widgets/flex_container.js
+++ b/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 = $(``);
- if (this.cssEl) {
- const css = this.cssEl.trim().startsWith('`;
-
- 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());
}
diff --git a/src/public/javascripts/widgets/mobile_layout.js b/src/public/javascripts/widgets/mobile_layout.js
index 47b415015..597681890 100644
--- a/src/public/javascripts/widgets/mobile_layout.js
+++ b/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 = `
+`;
+
+const FANCYTREE_CSS = `
+`;
+
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')));
}
}
\ No newline at end of file
diff --git a/src/public/stylesheets/mobile.css b/src/public/stylesheets/mobile.css
deleted file mode 100644
index e668afbde..000000000
--- a/src/public/stylesheets/mobile.css
+++ /dev/null
@@ -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;
-}
\ No newline at end of file
diff --git a/src/views/mobile.ejs b/src/views/mobile.ejs
index cba269134..00d52ab35 100644
--- a/src/views/mobile.ejs
+++ b/src/views/mobile.ejs
@@ -42,7 +42,6 @@
-