diff --git a/CHANGELOG.md b/CHANGELOG.md index 7c7eab4..09ce472 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,7 +3,6 @@ **potential future features (not confirmed)** - [groupy-like tabbing](https://www.npmjs.com/package/electron-tabs) -- [improved responsiveness](https://chrome.google.com/webstore/detail/notion%20%20-responsiveness-f/leadcilhbmibbkgbnjgmmnfgnnhmeddk) - [highlight/mark viewer](https://chrome.google.com/webstore/detail/notion%2B-mark-manager/hipgmnlpnimedfepbfbfiaobohhffcfc) - [advanced math editor](https://github.com/Manueloccorso/NotionMathEditor_BrowserExtension) @@ -15,6 +14,9 @@ a flexibility update. higher up on the list = higher priority of application = loaded last in order to override others. (excluding core, which though pinned to the top of the list is always loaded first so theming variables can be modified.) +- new: in-page columns disabled/wrapped and wider pages when the window is narrower than 600px + for improved responsiveness. +- improved: a core mod option to make transitions snappy/0s. - bugfix: removed messenger emoji set as the provider no longer supports it. - bugfix: remove shadow around light mode board headers \+ minor text colour fixes for night shift theming. diff --git a/mods/core/client.js b/mods/core/client.js index 396c8bd..592a2ce 100644 --- a/mods/core/client.js +++ b/mods/core/client.js @@ -29,9 +29,11 @@ module.exports = (store, __exports) => { return; clearInterval(attempt_interval); - // scrollbars + // toggleable styles if (store().smooth_scrollbars) document.body.classList.add('smooth-scrollbars'); + if (store().snappy_transitions) + document.body.classList.add('snappy-transitions'); // frameless if (store().frameless && !store().tiling_mode) { diff --git a/mods/core/css/responsive.css b/mods/core/css/responsive.css new file mode 100644 index 0000000..0b92c03 --- /dev/null +++ b/mods/core/css/responsive.css @@ -0,0 +1,26 @@ +/* + * notion-enhancer + * (c) 2020 dragonwocky (https://dragonwocky.me/) + * under the MIT license + */ + +@media (max-width: 600px) { + .notion-column_list-block [style='display: flex;'] > div { + width: 100% !important; + } + .notion-column_list-block [style='display: flex;'] { + flex-direction: column !important; + } + + .notion-app-inner { + --theme_dark--page_normal-width: 100%; + --theme_dark--page-padding: calc(48px + env(safe-area-inset-left)); + --theme_light--page_normal-width: 100%; + --theme_light--page-padding: calc(48px + env(safe-area-inset-left)); + } +} + +.snappy-transitions * { + animation-duration: 0s !important; + transition-duration: 0s !important; +} diff --git a/mods/core/css/theme.css b/mods/core/css/theme.css index 0608b2f..7778954 100644 --- a/mods/core/css/theme.css +++ b/mods/core/css/theme.css @@ -40,6 +40,12 @@ width: var(--theme--page_normal-width) !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; + padding-right: var(--theme--page-padding) !important; +} + .notion-page-content [data-block-id][style*='max-width'] { max-width: 100% !important; } diff --git a/mods/core/css/variables.css b/mods/core/css/variables.css index 225fdd3..76e4bbd 100644 --- a/mods/core/css/variables.css +++ b/mods/core/css/variables.css @@ -16,10 +16,11 @@ --theme_dark--dragarea: #272d2f; --theme_dark--page_normal-width: 900px; --theme_dark--page_full-width: 100%; + --theme_dark--page-padding: calc(96px + env(safe-area-inset-left)); + --theme_dark--page_banner-height: 30vh; --theme_dark--preview-width: 977px; --theme_dark--preview-padding: 8rem; --theme_dark--preview_banner-height: 20vh; - --theme_dark--page_banner-height: 30vh; --theme_dark--font_sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, 'Apple Color Emoji', Arial, sans-serif, 'Segoe UI Emoji', @@ -190,10 +191,11 @@ --theme_light--dragarea: rgba(55, 53, 47, 0.04); --theme_light--page_normal-width: 900px; --theme_light--page_full-width: 100%; + --theme_light--page-padding: calc(96px + env(safe-area-inset-left)); + --theme_light--page_banner-height: 30vh; --theme_light--preview-width: 977px; --theme_light--preview-padding: 8rem; --theme_light--preview_banner-height: 20vh; - --theme_light--page_banner-height: 30vh; --theme_light--font_sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, 'Apple Color Emoji', Arial, sans-serif, 'Segoe UI Emoji', @@ -364,10 +366,11 @@ --theme--dragarea: var(--theme_dark--dragarea); --theme--page_normal-width: var(--theme_dark--page_normal-width); --theme--page_full-width: var(--theme_dark--page_full-width); + --theme--page-padding: var(--theme_dark--page-padding); + --theme--page_banner-height: var(--theme_dark--page_banner-height); --theme--preview-width: var(--theme_dark--preview-width); --theme--preview-padding: var(--theme_dark--preview-padding); --theme--preview_banner-height: var(--theme_dark--preview_banner-height); - --theme--page_banner-height: var(--theme_dark--page_banner-height); --theme--font_sans: var(--theme_dark--font_sans); --theme--font_serif: var(--theme_dark--font_serif); --theme--font_mono: var(--theme_dark--font_mono); @@ -521,12 +524,13 @@ --theme--sidebar: var(--theme_light--sidebar); --theme--overlay: var(--theme_light--overlay); --theme--dragarea: var(--theme_light--dragarea); - --theme--page_normal-width: var(--theme_dark--page_normal-width); - --theme--page_full-width: var(--theme_dark--page_full-width); + --theme--page_normal-width: var(--theme_light--page_normal-width); + --theme--page_full-width: var(--theme_light--page_full-width); + --theme--page-padding: var(--theme_light--page-padding); + --theme--page_banner-height: var(--theme_light--page_banner-height); --theme--preview-width: var(--theme_light--preview-width); --theme--preview-padding: var(--theme_light--preview-padding); --theme--preview_banner-height: var(--theme_light--preview_banner-height); - --theme--page_banner-height: var(--theme_light--page_banner-height); --theme--font_sans: var(--theme_light--font_sans); --theme--font_serif: var(--theme_light--font_serif); --theme--font_mono: var(--theme_light--font_mono); diff --git a/mods/core/mod.js b/mods/core/mod.js index 2294d0a..70bbd29 100644 --- a/mods/core/mod.js +++ b/mods/core/mod.js @@ -56,6 +56,12 @@ module.exports = { type: 'toggle', value: true, }, + { + key: 'snappy_transitions', + label: 'snappy transitions', + type: 'toggle', + value: false, + }, { key: 'hotkey', label: 'window display hotkey:', diff --git a/mods/core/styles.css b/mods/core/styles.css index da69ff5..fbfe5be 100644 --- a/mods/core/styles.css +++ b/mods/core/styles.css @@ -8,3 +8,4 @@ @import './css/variables.css'; @import './css/scrollbars.css'; @import './css/titlebar.css'; +@import './css/responsive.css';