Collapse pages in query results

Customization
1

I have a query in my config.edn to return TODO’s for all pages with a properties of tags:: LTI and state:: active . The query returns the correct results, but I’d like to collapse the results by page instead of displaying all TODO’s by default - I’d like to expand the block to view the TODO’s. I’ve been struggling with :result-transform and :view , to no avail. Has anyone done this?

   {:title "Long-term Important"
 :query (and (task TODO) (page-tags [[lti]]))
 :collapsed? false}

Result:

image
image1127×443 21.4 KB

Desired result:

image
image1157×273 12.4 KB

Thanks!

2

Welcome.

  • Expanding/collapsing by clicking somewhere, it needs coding.
  • For an easier alternative, try adding the following CSS rules inside file custom.css :
    div.custom-query-results div.custom-query-page-result div.initial {
  display: none;
}
div.custom-query-results div.custom-query-page-result:hover div.initial {
  display: block;
}
    • Usage tips:
      • To hide the currently visible page and show the next one, don’t move the mouse downwards, but move it leftwards.
      • To exit editing a result, don’t click outside, but press Esc.
3

Very nice, thanks. Where did you find the div names?

Could that css only affect the results for the query with a title “Long-term Important” as in the screencaps?

4
  • Modify the title like this:
    {:title [:span {:class "collapse-pages"} "Long-term Important"]
  • Then in custom.css:
    • replace the two div.custom-query-results
    • with div.custom-query:has(.collapse-pages)
  • You can inspect the divs (and all other elements) with Ctrl + Shift + i
1 Like
5

outstanding, that worked great - thank you!

I didn’t know queries could embed css classes…I’m guessing that’s what you did. Very cool. Thanks again