Note overview

Plugins
229

I always wanted to have a card like view for when I click on a notebook in Joplin. Note-overview seemed a good tool for this. Using some css trick I managed to get this. It's not beautiful but it works. hopefully people find it helpful and useful and some one can make it more prettier .

The slight issue I have is that every time I update I have to add this <div class= "container">. Is there a way to add some text a single time instead of repeat it with every note?

image
image1901×884 114 KB

added this to the top of my note:

<style>
.container {
  column-count: 3;
  column-gap: 0.5 rem;

}
.note {
	padding: 0.2rem;
	margin-top:5px;
	max-height:500px;
	overflow:hidden visible;
	float:left;
	font-size:13px;
	line-height: 1.2;
width: calc(100%/1);
border: 1px solid grey;
	 break-inside: avoid-column;
	 background:#006699;
}

	.note h1 {
		color:#ffbf80;
	}
	
	.note h1:after
{
    content:' ';
    display:block;
    border: 1px solid grey;
}


</style>

Note Overview script:

<!-- note-overview-plugin
search: notebook:"test"
fields: title,body
alias: updated_time AS Last Updated, title AS Title
listview:
  text: "  <div class= \"note\">\r\n \r\n {{body}} \r\n </div>"
-->

This also works surprisingly well on mobile:

image
image1024×2392 229 KB

BEWARE that if you have a large number of notes this will use a lot of resource I tried doing it on some 300 notes and Joplin was using 70% CPU and 2GB of memory

8 Likes