Better Block / Page embed view

Moving Better Block / Page embed view · Issue #1142 · logseq/logseq (github.com) to here since it is more of a feature request

When embedding a page/block the “double dots” are kind of nasty it would be much neater to take the “roam approach on this one”

in LogSeq (double dots highlighted)

in Roam
by default there is no double dots

however hovering on the left hand side
image
and clicking reveals them
image


I did some “research” in roam and it seems purely based on css with just one event when we click like in the 3rd picture, maybe some CSS wizard can take a look ?

2 Likes

try this:

/* === hide top bullet in embed-block ===*/
.embed-block .flex-1.flex-row {
	margin-left: -15px; }  /* tweak value to move the top bullet */
.embed-block .block-children {
	border-left : 0px; }  /* hide the first indentation line */
.embed-block .flex-1.flex-row .bullet-container.cursor .bullet {
	background-color: transparent} /* embled-block top bullet */
.embed-block .block-children .flex-1.flex-row .bullet-container.cursor .bullet {
	background-color: var(--ls-block-bullet-color)} /* embled-block children bullets */

didn’t thoroughly tested it … let me know if it breaks stuff

3 Likes

at first sight it looks gold …
will test a bit more

1 Like

Just magic :smiley:

is there a way to toggle enable disable this code? since now it is kinda hard to reach the original block ?

thank you

I use Stylus to manage css snippets : GitHub - openstyles/stylus: Stylus - Userstyles Manager

that works too :smiley: thank you

The solution chosen here doesn’t work for me. Can someone confirm that it is still working with the current version of Logseq?

After some uneducated guessing, everything works when I remove all instances of " .flex-1.flex-row"

Out of curiosity, what is that parameter meant to do?

1 Like

I’d like to bump this issue; the existing solutions didn’t work for me, and I think this should be treated as a feature request for Logseq rather than as an invitation for brittle CSS hacking.

3 Likes

Try this (adjust some number if it doesn’t fit)

/* block embedding */

/* handle bullets and triangle folding controls */
.embed-block .block-main-container div.block-control-wrap {
  height: 26px !important;
  margin: 18px 0px -18px 0px;
}

/* that do not affect children blocks */
.embed-block .block-children-container div.block-control-wrap {
  height: auto;
  margin: auto;
}

/* shift top block */
.embed-block .px-3.pt-1.pb-2 {
  margin: 0px 0px 0px -54px;
  padding-top: 1px;
  padding-bottom: 0;
}

/* add some space for text in the top block */
.embed-block .block-main-container .flex-1.w-full {
  margin-left: 4px;
}


/* page embedding */
.embed-page {
  margin: 0;
  padding: 0;
}

.embed-page .embed-header {
  margin: 0;
}

/* for page icon */
.embed-page .mr-3 {
  margin: 0;
}

/* shift page embedding */
.embed-page .blocks-container.flex-1 {
  margin: 0px 0px 0px -10px;
}