gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-11-09 16:08:58 +01:00
Code Issues Actions 7 Packages Projects Releases Wiki Activity

client/options/keep content centered: simplify the inner workings

Browse Source
This commit is contained in:
Adorian Doran 2025-11-07 21:15:51 +02:00
parent c617c84d86
commit 9bccc72668
5 changed files with 17 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/client/src/stylesheets/style.css
View File

@ -1811,8 +1811,6 @@ body:not(.mobile) #launcher-pane.horizontal .dropdown-submenu > .dropdown-menu {
.note-split { .note-split {
/* Limits the maximum width of the note */ /* Limits the maximum width of the note */
--max-content-width: var(--preferred-max-content-width); --max-content-width: var(--preferred-max-content-width);
/* Indicates the inline margin of the content. If set to "auto" the content will be centered. */
--content-margin-inline: var(--preferred-content-margin-inline);
margin-inline-start: auto; margin-inline-start: auto;
margin-inline-end: auto; margin-inline-end: auto;

5
apps/client/src/stylesheets/theme-next/pages.css
View File

@ -174,7 +174,6 @@ div.note-detail-empty {
.options-section:not(.tn-no-card) { .options-section:not(.tn-no-card) {
margin-bottom: calc(var(--options-title-offset) + 26px) !important; margin-bottom: calc(var(--options-title-offset) + 26px) !important;
margin-inline: var(--content-margin-inline);
box-shadow: var(--card-box-shadow); box-shadow: var(--card-box-shadow);
border: 1px solid var(--card-border-color) !important; border: 1px solid var(--card-border-color) !important;
border-radius: 8px; border-radius: 8px;
@ -182,6 +181,10 @@ div.note-detail-empty {
padding: var(--options-card-padding); padding: var(--options-card-padding);
} }
body.prefers-centered-content .options-section:not(.tn-no-card) {
margin-inline: auto;
}
body.desktop .options-section:not(.tn-no-card) { body.desktop .options-section:not(.tn-no-card) {
min-width: var(--options-card-min-width); min-width: var(--options-card-min-width);
max-width: var(--options-card-max-width); max-width: var(--options-card-max-width);

11
apps/client/src/widgets/collections/NoteList.css
View File

@ -1,15 +1,16 @@
.note-list-widget { .note-list-widget {
min-height: 0; min-height: 0;
/* Inherited from .note-split */ max-width: var(--max-content-width); /* Inherited from .note-split */
max-width: var(--max-content-width);
/* Inherited from .note-split. If set to "auto" the list widget will be centered horizontally. */
margin-inline: var(--content-margin-inline);
overflow: auto; overflow: auto;
contain: none !important; contain: none !important;
} }
body.prefers-centered-content .note-list-widget {
/* Horizontally center the widget in its parent when the "Keep content centered" option is on /*
margin-inline: auto;
}
.note-list-widget .note-list { .note-list-widget .note-list {
padding: 10px; padding: 10px;
} }

6
apps/client/src/widgets/containers/root_container.ts
View File

@ -69,13 +69,9 @@ export default class RootContainer extends FlexContainer<BasicWidget> {
#setMaxContentWidth() { #setMaxContentWidth() {
const width = Math.max(options.getInt("maxContentWidth") || 0, 640); const width = Math.max(options.getInt("maxContentWidth") || 0, 640);
const centerContent = options.is("centerContent");
document.body.style.setProperty("--preferred-max-content-width", `${width}px`); document.body.style.setProperty("--preferred-max-content-width", `${width}px`);
// To center the content, "--preferred-content-margin-inline" should be set to "auto". document.body.classList.toggle("prefers-centered-content", options.is("centerContent"));
document.body.style.setProperty("--preferred-content-margin-inline",
(centerContent) ? "auto" : "unset");
} }
#setMotion() { #setMotion() {

7
apps/client/src/widgets/note_detail.ts
View File

@ -40,12 +40,15 @@ const TPL = /*html*/`
<style> <style>
.note-detail { .note-detail {
max-width: var(--max-content-width); /* Inherited from .note-split */ max-width: var(--max-content-width); /* Inherited from .note-split */
/* Inherited from .note-split. If set to "auto" the note detail widget will be centered horizontally. */
margin-inline: var(--content-margin-inline);
font-family: var(--detail-font-family); font-family: var(--detail-font-family);
font-size: var(--detail-font-size); font-size: var(--detail-font-size);
} }
body.prefers-centered-content .note-detail {
/* Horizontally center the widget in its parent when the "Keep content centered" option is on /*
margin-inline: auto;
}
.note-detail.full-height { .note-detail.full-height {
height: 100%; height: 100%;
} }