From 77f358b846ad41f22b1f43a56e384d800d1e437c Mon Sep 17 00:00:00 2001 From: zadam Date: Sun, 1 Mar 2020 18:57:13 +0100 Subject: [PATCH] migrated mobile CSS to the mobile layout --- .../javascripts/widgets/basic_widget.js | 48 +++++++++++++ .../javascripts/widgets/flex_container.js | 45 +----------- .../javascripts/widgets/mobile_layout.js | 68 +++++++++++++++++-- src/public/stylesheets/mobile.css | 68 ------------------- src/views/mobile.ejs | 1 - 5 files changed, 113 insertions(+), 117 deletions(-) delete mode 100644 src/public/stylesheets/mobile.css 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 @@ -