Single Column View

[pcause]

Really like cardboard and want to pin to the sidebar. Can you add a css layout that just as a single column and then arrows to move between columns. Column width to adapt to the size of the sidebar. I'd assume this can be done with css, perhaps hiding columns and then the arrows hide the current column and unhide the previous/next column.

[roovo]

Tagging #30 and #43 as these are connected (in my mind anyway)....

This is something I would like to be able to support - as it would have massive potential benefit for mobile screens too. Basically I would like to make the view more responsive so as the screen or view aspect ratio and/or size is changed the board view adapts accordingly.

In practice though, this is likely to be a way off before it gets near the top of the backlog. I will keep this issue updated with any thoughts in the meantime!

[roovo]

connected to #7

[Angush]

I made some CSS tweaks to get a (slightly hacky/imperfect) version of this going, just because it's an easy one and I wanted an excuse to use container queries. It should also support the new 0.7.1 update with collapsible columns, though I haven't actually installed that yet.

Looks like this:

I don't know whether this'll work on mobile, given container queries are only supported in Chrome 106 and above (aka. Electron 21, which Obsidian only just updated to on the desktop with v1.1.9 - the latest public version at time of posting).

Would be a bit more complicated to implement without container queries, as I imagine that would require an IntersectionObserver and some classList manipulation.

But, if you're using Obsidian v.1.1.9 (and used the installer from the website to install that update), you're welcome to add this as a CSS snippet file for your vault.

/* Container query styling to support single-column views */

.card-board-view {
  container-type: inline-size;
  container-name: card-board-view;
}

@container card-board-view (max-width: 550px) {
  .card-board-columns {
    display: flex;
    flex-direction: column;
    margin-right: 0;
  }

  .card-board-column {
    width: auto;
  }

  .card-board-container {
    height: 100%;
  }

  .card-board-container > div[dir] {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow-y: scroll;
  }

  .card-board-tab-list {
    flex: 0 1 auto;
  }

  .card-board-boards {
    flex: 1 1 auto;
    overflow-y: auto;
  }

  .mod-top-right-space .card-board-boards {
    padding-bottom: 3em;
    /* bit of padding to ensure the obsidian status bar doesn't overlap */ 
  }

  :not(.mod-top-right-space) .card-board-boards {
    padding-bottom: 1em;
  }

  .card-board-container .card-board-boards {
    height: calc(100% - 15px - 7.5px);
  }

  /* Make collapsed columns horizontal to fit in low-width scenarios */

  .card-board-column.collapsed {
    width: auto;
    padding: 0.6em 1em 0em 1em;
  }

  .card-board-column.collapsed .arrow-down {
    margin: 0 0.4em 0 -0.2em;
  }

  .card-board-column.collapsed .card-board-column-header .sub-text {
    margin-block: 0;
    margin-inline: 0.3em;
  }

  div[dir] .card-board-column.collapsed .card-board-column-header {
    writing-mode: initial;
  }
}

/* Some hacky style tweaks to make it look nicer when docked as a side panel */

.mod-top-right-space .card-board-pre-tabs {
  display: none;
}

.mod-top-right-space li.card-board-tab-title:nth-of-type(2) .card-board-tabs-inner {
  /* make first board tab flush with panel */
  border-top-left-radius: 0;
}

.mod-top-right-space .card-board-view {
  padding: 0;
}

.mod-top-right-space .card-board-container {
  --old-secondary: var(--background-primary);
}

.mod-top-right-space ul.card-board-tab-list {
  background-color: var(--background-secondary-alt);
}

.mod-top-right-space .card-board-container > div {
  --background-primary: var(--background-secondary-alt);
}

.mod-top-right-space .card-board-card,
.mod-top-right-space .card-board-boards,
.mod-top-right-space .card-board-columns,
.mod-top-right-space li.card-board-post-tabs {
  background-color: var(--old-secondary);
}

.mod-top-right-space .card-board-tab-title,
.mod-top-right-space li.card-board-pre-tabs,
.mod-top-right-space li.card-board-tab-title.is-active {
  --background-secondary-alt: var(--old-secondary);
}

[roovo]

Oh wow - that's really cool of you @Angush - thank you. I'm going to have to read up on containers as that's something I've not come across before!