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;
     }