mirror of
https://github.com/maybe-finance/maybe.git
synced 2025-07-19 13:19:39 +02:00
Mobile responsive template preparation (#2071)
* Mobile responsive template * Fix sidebar mobile conflict * Lint fix
This commit is contained in:
parent
2bc3887262
commit
52d170e36c
6 changed files with 117 additions and 74 deletions
|
@ -7,7 +7,7 @@ export default class extends Controller {
|
|||
config: Object,
|
||||
};
|
||||
|
||||
static targets = ["leftPanel", "rightPanel", "content"];
|
||||
static targets = ["leftPanel", "leftPanelMobile", "rightPanel", "content"];
|
||||
|
||||
initialize() {
|
||||
this.leftPanelOpen = this.configValue.left_panel.is_open;
|
||||
|
@ -20,6 +20,16 @@ export default class extends Controller {
|
|||
this.#persistPreference("show_sidebar", this.leftPanelOpen);
|
||||
}
|
||||
|
||||
toggleLeftPanelMobile() {
|
||||
if (this.leftPanelOpen) {
|
||||
this.leftPanelMobileTarget.classList.remove("hidden");
|
||||
this.leftPanelOpen = false;
|
||||
} else {
|
||||
this.leftPanelMobileTarget.classList.add("hidden");
|
||||
this.leftPanelOpen = true;
|
||||
}
|
||||
}
|
||||
|
||||
toggleRightPanel() {
|
||||
this.rightPanelOpen = !this.rightPanelOpen;
|
||||
this.#updatePanelWidths();
|
||||
|
@ -27,7 +37,6 @@ export default class extends Controller {
|
|||
}
|
||||
|
||||
#updatePanelWidths() {
|
||||
this.contentTarget.style.maxWidth = `${this.#contentMaxWidth()}px`;
|
||||
this.leftPanelTarget.style.width = `${this.#leftPanelWidth()}px`;
|
||||
this.rightPanelTarget.style.width = `${this.#rightPanelWidth()}px`;
|
||||
this.rightPanelTarget.style.overflow = this.#rightPanelOverflow();
|
||||
|
@ -61,18 +70,6 @@ export default class extends Controller {
|
|||
return "hidden";
|
||||
}
|
||||
|
||||
#contentMaxWidth() {
|
||||
if (!this.leftPanelOpen && !this.rightPanelOpen) {
|
||||
return 1024;
|
||||
}
|
||||
|
||||
if (this.leftPanelOpen && !this.rightPanelOpen) {
|
||||
return 896;
|
||||
}
|
||||
|
||||
return 768;
|
||||
}
|
||||
|
||||
#persistPreference(field, value) {
|
||||
fetch(`/users/${this.userIdValue}`, {
|
||||
method: "PATCH",
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue