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

Share & showcase
42

Is there a way to scroll/move back to a prior note without using the scrollbar (or trackpad)? The scrolling in the video works wonderfully on a trackpad, but with a keyboard and mouse, it’s not as natural (you have to manually drag the scrollbar).

What’s more, is that the “Focus on Pane to the left” and “Focus on pane to the right” keyboard shortcuts only activate the window, but they don’t scroll. So you can “jump” back to a prior note, but that note is not actually displayed on the screen.

How are people using this mode with a keyboard and mouse?

1 Like
43

Hold shift while scrolling, that should allow you to scroll horizontally. Works with other apps with horizontal scrolling as well.

3 Likes
44

@3mbry0 You just changed my life. Thank you!

3 Likes
46

Thank you !
The new code allows me to use it without messing around my sidebar, it is perfect and beautiful.

47

Yeah I saw Ward wiki in 2012 :grin: There was some link that explained the function of the colors in the square icons according to a system I don’t remember.

48

@mcx Interesting. I’m curious, even back in 2012, did Ward have that leaf/panel style?

49

Yes, nothing is changed, but it has more content on it I’m sure. There has been other layouts for TiddlyWiki too, similar to that style. It’s very nice the federated wiki is still running.
This is a tiddlywiki I like very much, but it is abandoned. It had a lot features and very customizable.

image
image1200×708 195 KB

3 Likes
50

BUG

I’ve been using Andy Mode for a while. I’m not sure if others had this problem after upgrading to 0.8.2, but when I scroll down many times the whole UI scrolls up (see the gif below).

I tried to switch back to the default css and it doesn’t happen.

Obsidian-scrolling-bug
Obsidian-scrolling-bug1918×757 149 KB

51

idk what thats about, but I’ve had the same thing happen in my vault. I’m running a different css though.

52

I have not had that problem.

53

@s-kyy I’ve never seen that happen before. I wonder if there’s something else going on there. Perhaps you could post or PM me your whole obsidian.css file and I’ll see if I can figure out what’s going on there.

54

@s-kyy, @jellishero and anyone else with this problem: The only way I could replicate it myself was by shrinking the window so that the left sidebar was too tall for the window. This is clearly not what was happening in @s-kyy’s screen recording, but it did cause the same whole-ui-scrolling effect, and I was able to come up with a fix:

html, body { overflow: hidden; }

You can see it working in the following screen recording:

2 Likes
55

@death.au Would it be possible to modify this so that you have an infinitely vertically scrollable sidebar (like in Roam)? I tried modifying your code by replacing all instances of “vertical” with “horizontal” (lazy hack I know) and removing the parts that rotate headers, but it didn’t do anything.

I envision it working like so:

  • The panel width is fixed on the RHS
  • New panels get stacked (either bottom/top, personal preference)
  • RHS panels scroll infinitely in the vertical direction, the main panel stays in place
  • Clicking on a panel brings it into focus and maximizes it (if minimized)

Bonus points if we can somehow hack it to bring a panel to the main window when you click its title.

58

I worked out something like you were asking, though it’s not really exact.
This CSS works on any horizontally stacked panels, though you still have to do at least the first horizontal split manually via the menu (as panels split vertically by default).
Scrolling is also a bit weird, because you’re scrolling vertically through individual notes and the whole note stack.
Also the note titles stick at the top, but not the bottom, so when you scroll back up, notes disappear off the bottom (this is the same with normal Andy’s mode notes disappearing off the right).

Also, I can’t really do anything about clicking note titles in just CSS… That will have to wait for plugins. Again, that’s something I want to bring to normal Andy’s mode as well. When we have a proper plugin API, I’ll deprecate this CSS and maintain a plugin instead.

Here’s a screenshot of what I have (code is below):

image
image1840×1080 694 KB

/* everything under .mod-root now. Don't want Andy messing with sidebars */
.mod-root .workspace-split.mod-horizontal {
  overflow-y: auto;
  --header-height: 36px;
}

.mod-root .workspace-split.mod-horizontal>div {
  position: sticky;
  top: 0;
  display:block;
  height:auto;
  max-height:100%;
}

/* 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-horizontal>div:nth-child(10n-8) {
  top: calc(var(--header-height) * 0);
  max-height: calc(100% - (var(--header-height) * 0));
}

.mod-root .workspace-split.mod-horizontal>div:nth-child(10n-7) {
  top: calc(var(--header-height) * 1);
  max-height: calc(100% - (var(--header-height) * 1));
}

.mod-root .workspace-split.mod-horizontal>div:nth-child(10n-6) {
  top: calc(var(--header-height) * 2);
  max-height: calc(100% - (var(--header-height) * 2));
}

.mod-root .workspace-split.mod-horizontal>div:nth-child(10n-5) {
  top: calc(var(--header-height) * 3);
  max-height: calc(100% - (var(--header-height) * 3));
}

.mod-root .workspace-split.mod-horizontal>div:nth-child(10n-4) {
  top: calc(var(--header-height) * 4);
  max-height: calc(100% - (var(--header-height) * 4));
}

.mod-root .workspace-split.mod-horizontal>div:nth-child(10n-3) {
  top: calc(var(--header-height) * 5);
  max-height: calc(100% - (var(--header-height) * 5));
}

.mod-root .workspace-split.mod-horizontal>div:nth-child(10n-2) {
  top: calc(var(--header-height) * 6);
  max-height: calc(100% - (var(--header-height) * 6));
}

.mod-root .workspace-split.mod-horizontal>div:nth-child(10n-1) {
  top: calc(var(--header-height) * 7);
  max-height: calc(100% - (var(--header-height) * 7));
}

.mod-root .workspace-split.mod-horizontal>div:nth-child(10n+0) {
  top: calc(var(--header-height) * 8);
  max-height: calc(100% - (var(--header-height) * 8));
}

.mod-root .workspace-split.mod-horizontal>div:nth-child(10n+1) {
  top: calc(var(--header-height) * 9);
  max-height: calc(100% - (var(--header-height) * 9));
}
11 Likes
60

tried to send a PM, didn’t work, so sadly I’ll need to ask here even though kinda off-topic…

can you tell me how did you get the transparency/blur as shown on your screenshot?

It’s suuuuper nice.

61

Translucency is an upcoming feature in Obsidian. It’ll be a plugin option supported on both Windows and Mac (sadly Linux cannot use it due to OS constraints, I believe). Death’s just ahead of the curve!

2 Likes
62

How nice! Thanks for letting me know
I’ll be looking forward to it

1 Like
63

Is there any way to keep the first page in focus, so that when you scroll the other pages the first page stays open? I expected pinning the page to achieve this but it didn’t.

Related to this, is there any way to make the first page title horizontal along the top (default) rather than vertical down the side (Andy mode)?

1 Like