dragonwocky/notion-enhancer
1
0
Fork 0
mirror of https://github.com/notion-enhancer/notion-enhancer.git synced 2025-10-30 13:48:08 +11:00
Code Issues Packages Projects Releases Wiki Activity

tweak: full width pages + table wrap bugfixes

Browse Source 
+ neutral theme font size fix + menu focused mod b/w tab switching fix
This commit is contained in:
dragonwocky 2021-10-10 16:33:06 +11:00
parent 1af8878748
commit 7f266f207b
7 changed files with 61 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
repo/menu/components.mjs
View File

@ -144,7 +144,6 @@ export const options = {
.slice(5, -1)
.split(',')
.map((i) => parseInt(i));
console.log(r, g, b, fmt.rgbContrast(r, g, b));
$input.style.color = fmt.rgbContrast(r, g, b);
$input.style.padding = '';
},

6
repo/menu/menu.mjs
View File

@ -224,8 +224,10 @@ const _$modListCache = {},
});
$mod.addEventListener('click', async (event) => {
if ($mod.className === 'mod-selected') return;
for (const $selected of document.querySelectorAll('.mod-selected')) {
$selected.className = 'mod';
for (const $list of Object.values(_$modListCache)) {
for (const $selected of $list.querySelectorAll('.mod-selected')) {
$selected.className = 'mod';
}
}
$mod.className = 'mod-selected';
const fragment = [

4
repo/neutral/app.css
View File

@ -32,7 +32,9 @@
font-size: 1.3rem !important;
}
.notion-frame .notion-scroller.vertical.horizontal .notion-page-content,
.notion-overlay-container .notion-scroller.vertical .notion-page-content,
.notion-overlay-container .notion-scroller.vertical .notion-page-content {
font-size: 15px !important;
}
.notion-frame
.notion-scroller.vertical.horizontal
.notion-page-content[style*='font-size: 14px'],

51
repo/theming/theme.css
View File

@ -6,26 +6,49 @@
/** layout **/
.notion-frame .notion-scroller [style*='env(safe-area-inset-'][style*=' width: 900px'],
.notion-frame .notion-scroller [style*='env(safe-area-inset-'][style*=';width: 900px'],
.notion-frame
.notion-scroller
[style*='height: 30vh']
[style*='pointer-events:'][style*='max-width: 100%; width: 900px'] {
> .notion-scroller.vertical.horizontal
> .pseudoSelection
> div
> div:nth-child(3)[style*='width: 900px'],
.notion-frame
> .notion-scroller.vertical.horizontal
> .pseudoSelection
+ div
> :nth-child(1)[style*='width: 900px'],
.notion-frame
> .notion-scroller.vertical.horizontal
> :nth-child(2)
> :nth-child(2)[style*='display: flex; width: 100%; justify-content: center;']
> :nth-child(1)[style*='width: 900px'] {
width: var(--theme--page-width) !important;
}
.notion-frame .notion-scroller [style*='env(safe-area-inset-'][style*=' width: 100%'],
.notion-frame
.notion-scroller
[style*='height: 30vh']
[style*='pointer-events:'][style*='max-width: 100%; width: 100%'] {
> .notion-scroller.vertical.horizontal
> .pseudoSelection
> div
> div:nth-child(3):not([style*='width: 900px']),
.notion-frame
> .notion-scroller.vertical.horizontal
> .pseudoSelection
+ div
> :nth-child(1):not([style*='width: 900px']),
.notion-frame
> .notion-scroller.vertical.horizontal
> :nth-child(2)
> :nth-child(2)[style*='display: flex; width: 100%; justify-content: center;']
> :nth-child(1):not([style*='width: 900px']) {
width: var(--theme--page-width_full) !important;
}
.notion-frame
[style*='padding-left: calc(96px + env(safe-area-inset-left)); padding-right: calc(96px + env(safe-area-inset-right));'] {
padding-left: var(--theme--page-padding) !important;
.notion-page-content [style*='width: 100%; max-width:'][style*='align-self: center;'] {
max-width: 100% !important;
}
.notion-frame [style*='padding-right: calc(96px + env(safe-area-inset-right));'] {
padding-right: var(--theme--page-padding) !important;
}
.notion-frame [style*='padding-left: calc(96px + env(safe-area-inset-left));'] {
padding-left: var(--theme--page-padding) !important;
}
[style^='position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; height: 30vh;'],
[style^='position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; height: 30vh;']
img {
@ -36,7 +59,6 @@
.notion-peek-renderer > :nth-child(2) {
max-width: var(--theme--page_preview-width) !important;
}
.notion-peek-renderer
.notion-scroller.vertical
[style*='padding-left: calc(126px + env(safe-area-inset-left));'] {
@ -62,7 +84,6 @@
padding-right: var(--theme--page_preview-padding) !important;
width: 100%;
}
.notion-peek-renderer
.notion-scroller.vertical
[style*='position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; height: 20vh;'],
@ -444,7 +465,7 @@ body,
> div
> div
> div:nth-child(1)
> div {
> div[style*='background'] {
background: var(--theme--ui_input) !important;
}

55
repo/tweaks/client.css
View File

@ -14,7 +14,8 @@
.enhancer--tweak-responsive_breakpoint .notion-column_list-block [style='display: flex;'] {
flex-direction: column !important;
}
.enhancer--tweak-responsive_breakpoint .notion-app-inner {
.enhancer--tweak-responsive_breakpoint .notion-app-inner,
.enhancer--tweak-full_width_pages .notion-app-inner {
--theme--page-width: 100%;
--theme--page-padding: calc(48px + env(safe-area-inset-left));
}
@ -32,59 +33,23 @@
padding-right: 4px;
}
.enhancer--tweak-normalise_table_scroll
.notion-frame
.notion-page-content
.notion-collection_view-block
[style*='padding-left: 126px'],
> [contenteditable]
> .notion-scroller
> [class$='view'][style*='padding-left'],
.enhancer--tweak-normalise_table_scroll
.notion-frame
.notion-page-content
.notion-collection_view-block
[style*='padding-left: 96px'],
.enhancer--tweak-normalise_table_scroll
.notion-peek-renderer
.notion-collection_view-block
[style*='padding-left: 126px'],
.enhancer--tweak-normalise_table_scroll
.notion-peek-renderer
.notion-collection_view-block
[style*='padding-left: 96px'],
.enhancer--tweak-normalise_table_scroll
.notion-page-template-modal
.notion-collection_view-block
[style*='padding-left: 126px'],
.enhancer--tweak-normalise_table_scroll
.notion-page-template-modal
.notion-collection_view-block
[style*='padding-left: 96px'] {
> :first-child[style*='padding-left'] {
padding-left: 0 !important;
}
.enhancer--tweak-normalise_table_scroll
.notion-frame
.notion-page-content
.notion-collection_view-block
[style*='padding-right: 126px'],
> [contenteditable]
> .notion-scroller
> [class$='view'][style*='padding-right'],
.enhancer--tweak-normalise_table_scroll
.notion-frame
.notion-page-content
.notion-collection_view-block
[style*='padding-right: 96px'],
.enhancer--tweak-normalise_table_scroll
.notion-peek-renderer
.notion-collection_view-block
[style*='padding-right: 126px'],
.enhancer--tweak-normalise_table_scroll
.notion-peek-renderer
.notion-collection_view-block
[style*='padding-right: 96px'],
.enhancer--tweak-normalise_table_scroll
.notion-page-template-modal
.notion-collection_view-block
[style*='padding-right: 126px'],
.enhancer--tweak-normalise_table_scroll
.notion-page-template-modal
.notion-collection_view-block
[style*='padding-right: 96px'] {
> :first-child[style*='padding-right'] {
padding-right: 0 !important;
}

2
repo/tweaks/client.mjs
View File

@ -21,7 +21,6 @@ export default async function (api, db) {
screen.width * 0.01 * (await db.get(['tweak.responsive_breakpoint_percent'])),
addResponsiveBreakpoint = () => {
document.body.classList.remove('enhancer--tweak-responsive_breakpoint');
console.log(responsiveBreakpointPercent, window.innerWidth);
if (
window.innerWidth <= responsiveBreakpointPx ||
window.innerWidth <= responsiveBreakpointPercent
@ -33,6 +32,7 @@ export default async function (api, db) {
addResponsiveBreakpoint();
const tweaks = [
'full_width_pages',
'normalise_table_scroll',
'hide_help',
'hide_slash_for_commands',

7
repo/tweaks/mod.json
View File

@ -40,6 +40,13 @@
"tooltip": "the **percentage of the screen below which in-page columns are resized to appear full-width** to reduce content squishing",
"value": 30
},
{
"type": "toggle",
"key": "tweak.full_width_pages",
"label": "full width pages",
"tooltip": "**decreases padding so every page appears full width**",
"value": false
},
{
"type": "toggle",
"key": "tweak.normalise_table_scroll",