improved responsiveness + snappier transitions mode

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.

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) {

mods/core/css/responsive.css

@@ -0,0 +1,26 @@
+/*
+ * notion-enhancer
+ * (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (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;
+}

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

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

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:',

mods/core/styles.css

@@ -8,3 +8,4 @@
 @import './css/variables.css';
 @import './css/scrollbars.css';
 @import './css/titlebar.css';
+@import './css/responsive.css';