Andy Matuschak mode - V2.7 (updated for 0.7+ new panes)

death.au · May 21, 2020, 10:17am

So. I procrastinated a when I should’ve been working today and… I made a thing.

It’s not for everyone, and you really shouldn’t be opening as many notes as is in the video, but nonetheless, here it is.

I’ve updated this for the new pane system in Obsidian 0.7+ and done some more commenting so the code should be clearer (for those who know what they’re doing).
As part of this update, I also made sure that the scrolling panes only apply to the main workspace section in the middle (not the sidebars) and only for vertically split panes at the root level. This means you can horizontally split inside of a vertical pane, and nothing should go wonky.

/* Andy Matuschak mode! V2! for 0.7.0! (so... 2.7?) */

/* everything under .mod-root now. Don't want Andy messing with sidebars */
/* also, Andy only makes sense for vertical splits, at the root level, right? */
.mod-root.workspace-split.mod-vertical { 
  overflow-x:auto; 
  --header-width: 36px; /* <- 36px is the header height in the default theme */
}
.mod-root.workspace-split.mod-vertical > div { 
  min-width: calc(700px + var(--header-width)); /* <-- 700px is the default theme's "readable" max-width */
  box-shadow: 0px 0px 20px 20px rgba(0,0,0,0.25);
  position:sticky;
  left:0;
}

/* shift sticky position, so titles will stack up to the left */
/* This will currently stack to a maximum of 10 before resetting */
.mod-root.workspace-split.mod-vertical > div:nth-child(10n-8) { left: calc(var(--header-width) * 0); }
.mod-root.workspace-split.mod-vertical > div:nth-child(10n-7) { left: calc(var(--header-width) * 1); }
.mod-root.workspace-split.mod-vertical > div:nth-child(10n-6) { left: calc(var(--header-width) * 2); }
.mod-root.workspace-split.mod-vertical > div:nth-child(10n-5) { left: calc(var(--header-width) * 3); }
.mod-root.workspace-split.mod-vertical > div:nth-child(10n-4) { left: calc(var(--header-width) * 4); }
.mod-root.workspace-split.mod-vertical > div:nth-child(10n-3) { left: calc(var(--header-width) * 5); }
.mod-root.workspace-split.mod-vertical > div:nth-child(10n-2) { left: calc(var(--header-width) * 6); }
.mod-root.workspace-split.mod-vertical > div:nth-child(10n-1) { left: calc(var(--header-width) * 7); }
.mod-root.workspace-split.mod-vertical > div:nth-child(10n+0) { left: calc(var(--header-width) * 8); }
.mod-root.workspace-split.mod-vertical > div:nth-child(10n+1) { left: calc(var(--header-width) * 9); }

/* now it's time for the fancy vertical titles */

/* first we'll add a bit of gap for the title to sit inside of */
.workspace-leaf-content {
  padding-left: var(--header-width);
  position: relative;
}

/* this is where the magic happens */
.view-header {
  writing-mode: vertical-lr;
  border-right: 1px solid var(--background-secondary-alt);
  border-left: 2px solid var(--background-secondary-alt);
  border-top: none;
  border-bottom: none;
  height: auto;
  width: var(--header-width);
  position: absolute;
  left:0;
  top:0;
  bottom:0;
}

/* active titles have different border colours */
.workspace-leaf.mod-active .view-header {
  border-right: 2px solid var(--interactive-accent);
  border-bottom: none;
}

/* unset the title container height and swap padding */
.view-header-title-container {
  height: unset;
  padding-left: unset;
  padding-top: 5px;
}

/* fix the long-title-obscuring shadows */
.view-header-title-container:after {
  width: 100%;
  height: 30px;
  top:unset;
  bottom: 0;
  background: linear-gradient(to bottom, transparent, var(--background-secondary));
}
.workspace-leaf.mod-active .view-header-title-container:after {
  background: linear-gradient(to bottom, transparent, var(--background-primary-alt));
}

/* swap the padding/margin around for the header and actions icons */
.view-header-icon, .view-actions {
  padding: 10px 5px;
}
.view-action {
  margin: 8px 0;
}

/* get rid of the gap left by the now-missing horizontal title */
.view-content {
  height: 100%;
}

/* make the fake drop target overlay have a background so you can see it. */
/* TODO: figure out how the fake target overlay works so we can put the title back, too */
.workspace-fake-target-overlay {
  background-color: var(--background-primary);
}

BONUS: Mods

Some people have requested alternate behaviours and code has been provided. So I figured I should start indexing them in the first post:

Turn spine titles the other way (thanks @piotry)
Turn spine titles upright (thanks @Wendystraite)
Horizontal Andy’s mode (rather than vertical)
Fixed first pane

mahraani · May 21, 2020, 10:27am

This is perfect!! Thank you for procrastinating and doing this instead!

lizardmenfromspace · May 21, 2020, 1:37pm

I shall use the random note selector and sacrifice a note to the note gods in your honor!

@death.au it seems it doesn’t get along well with popovers, where the popovers show up in weird places instead of their normal spot. This seems to happen with the other version too. But only seems to happen when you are working 3-4 notes down from the start.

nickmilo · May 21, 2020, 5:28pm

Wow, just wow. I have about 10 different documents I’m working in right now so I’m excited to apply this functionality right away!

ricalamino · May 21, 2020, 8:59pm

That is awesome. I am using that already…

SeanWcom · May 21, 2020, 9:04pm

This is fantastic, nice work!

j.split · May 21, 2020, 9:29pm

This is fantastic, thank you for posting!

drsn · May 22, 2020, 12:32am

Very nice. Fantastic Thanks

death.au · May 22, 2020, 1:17am

Interesting. I haven’t actually seen that myself, as I normally don’t work with that many notes.

I’ll look into it when I get a bit of time. I assume it’s something to do with the size of the container changing… starts muttering in CSS

Klaas · May 22, 2020, 7:20am

@death.au Fantastic. I started using your proto version (V1), and now just installed V2. With V1 you also wrote code to delete the note title in the transclusion. I added it to my version of V2. For others who might be interested, here it is:

/* Delete title in transclusion */
.markdown-embed-title { display:none; }
.markdown-preview-view .markdown-embed { border:none; padding:0; margin:0; }
.markdown-preview-view .markdown-embed-content { max-height: unset;}
.markdown-preview-view .markdown-embed-content>:first-child { margin-top: 0; }
.markdown-preview-view .markdown-embed-content>:last-child { margin-bottom: 0; }
.markdown-preview-view .markdown-embed-content>:first-child { margin-top: 0; }
.markdown-preview-view .markdown-embed-content>:last-child { margin-bottom: 0; }

Many thanks !!

Jeffurry · May 22, 2020, 9:13am

Great work @death.au, really wonderful stuff. I have the same ‘popover’ issue as @lizardmenfromspace. I also have a mildly irritating issue with the ‘three little dot’ menu item. The active hover-area fir it seem very small now (maybe because it is vertical now?), making it quite difficult to click it. Can that active area be made bigger at all? I also get some stuttering or vibrating when hovering over it. Sorry to be a demanding, whingeing snowflake.

kard32 · May 22, 2020, 4:14pm

Omg this is nuts. Wrote an entire 17-page memo on V1 - gonna fire this up now

nickmilo · May 22, 2020, 5:25pm

Thanks @Klaas For those that would like a border around their transclusions, here’s a slight adjustment:

/* Delete title in transclusion */
.markdown-embed-title { display:none; }
.markdown-preview-view .markdown-embed { border:1px solid var(--blockquote-border); padding:0; margin:0; }
.markdown-preview-view .markdown-embed-content { max-height: unset;}
.markdown-preview-view .markdown-embed-content>:first-child { margin-top: 0; }
.markdown-preview-view .markdown-embed-content>:last-child { margin-bottom: 0; }
.markdown-preview-view .markdown-embed-content>:first-child { margin-top: 0; }
.markdown-preview-view .markdown-embed-content>:last-child { margin-bottom: 0; }

Klaas · May 23, 2020, 4:47am

@nickmilo Thank you.

death.au · May 24, 2020, 3:25am

@Klaas & @nickmilo, I created a separate thread for the “Naked embeds” as I’ve come to call them here: "Naked" Embeds (CSS tweak)

shydlou · May 26, 2020, 2:15pm

@death.au fyi… V2 breaks the “Split Horizontally” feature, where as V1 didn’t. Just enable V2, open a file and split horizontally an empty pane will open where the horizontal split should be.

henrique · June 12, 2020, 3:57am

I loved it, but is there any way to slide horizontally by shortcut keys?

Martin · June 12, 2020, 9:34am

I love this mode <3

Sadly I just updated to the insider version (0.7.1) and the Andy mode breaks the left sidebar width adaptation (see attached)

Martin · June 12, 2020, 3:20pm

In fact @death.au already has corrected this for v0.7.0+, shared on Discord -> I share it here if that’s OK :

/* Andy Matuschak mode! V2! for 0.7.0! (so... 2.7?) */

/* everything under .mod-root now. Don't want Andy messing with sidebars */
/* also, Andy only makes sense for vertical splits, at the root level, right? */
.mod-root.workspace-split.mod-vertical { 
  overflow-x:auto; 
  --header-width: 36px; /* <- 36px is the header height in the default theme */
}
.mod-root.workspace-split.mod-vertical > div { 
  min-width: calc(700px + var(--header-width)); /* <-- 700px is the default theme's "readable" max-width */
  box-shadow: 0px 0px 20px 20px rgba(0,0,0,0.25);
  position:sticky;
  left:0;
}

/* shift sticky position, so titles will stack up to the left */
/* This will currently stack to a maximum of 10 before resetting */
.mod-root.workspace-split.mod-vertical > div:nth-child(10n-8) { left: calc(var(--header-width) * 0); }
.mod-root.workspace-split.mod-vertical > div:nth-child(10n-7) { left: calc(var(--header-width) * 1); }
.mod-root.workspace-split.mod-vertical > div:nth-child(10n-6) { left: calc(var(--header-width) * 2); }
.mod-root.workspace-split.mod-vertical > div:nth-child(10n-5) { left: calc(var(--header-width) * 3); }
.mod-root.workspace-split.mod-vertical > div:nth-child(10n-4) { left: calc(var(--header-width) * 4); }
.mod-root.workspace-split.mod-vertical > div:nth-child(10n-3) { left: calc(var(--header-width) * 5); }
.mod-root.workspace-split.mod-vertical > div:nth-child(10n-2) { left: calc(var(--header-width) * 6); }
.mod-root.workspace-split.mod-vertical > div:nth-child(10n-1) { left: calc(var(--header-width) * 7); }
.mod-root.workspace-split.mod-vertical > div:nth-child(10n+0) { left: calc(var(--header-width) * 8); }
.mod-root.workspace-split.mod-vertical > div:nth-child(10n+1) { left: calc(var(--header-width) * 9); }

/* now it's time for the fancy vertical titles */

/* first we'll add a bit of gap for the title to sit inside of */
.workspace-leaf-content {
  padding-left: var(--header-width);
  position: relative;
}

/* this is where the magic happens */
.view-header {
  writing-mode: vertical-lr;
  border-right: 1px solid var(--background-secondary-alt);
  border-left: 2px solid var(--background-secondary-alt);
  border-top: none;
  border-bottom: none;
  height: auto;
  width: var(--header-width);
  position: absolute;
  left:0;
  top:0;
  bottom:0;
}

/* active titles have different border colours */
.workspace-leaf.mod-active .view-header {
  border-right: 2px solid var(--interactive-accent);
  border-bottom: none;
}

/* unset the title container height and swap padding */
.view-header-title-container {
  height: unset;
  padding-left: unset;
  padding-top: 5px;
}

/* fix the long-title-obscuring shadows */
.view-header-title-container:after {
  width: 100%;
  height: 30px;
  top:unset;
  bottom: 0;
  background: linear-gradient(to bottom, transparent, var(--background-secondary));
}
.workspace-leaf.mod-active .view-header-title-container:after {
  background: linear-gradient(to bottom, transparent, var(--background-primary-alt));
}

/* swap the padding/margin around for the header and actions icons */
.view-header-icon, .view-actions {
  padding: 10px 5px;
}
.view-action {
  margin: 8px 0;
}

/* get rid of the gap left by the now-missing horizontal title */
.view-content {
  height: 100%;
}

/* make the fake drop target overlay have a background so you can see it. */
/* TODO: figure out how the fake target overlay works so we can put the title back, too */
.workspace-fake-target-overlay {
  background-color: var(--background-primary);
}

MooddooM · June 13, 2020, 1:16pm

Very helpful solution. Works like magic. Thank you @death.au

Presentation mode is currently (v0.7.1) a minor issue. It cannot enter a complete full-screen mode or sometime only show up in a child note container.