About
- Showcase
How it works
What is possible
Installation
Usage
- Style Settings plugin
- Dataview
  - span
  - Progress Bar
Implicit settings
Support cssclasses
todo/future features

Cards-View-snippet

Click ★ if you liked the snippet

This is a snippet for alternative display style of Dataview results. Most appropriate case of using is creating personal libraries. Here is a demo result with quick show case for different themes:

Desktop version

Here is how you can use it with Tabs plugin.

Mobile version

Some popular themes with the snippet

(Default, AnuPpuccin, Vauxhall, 80s Neon, Obsidian Nord)

Remember, it's a raw and new snippet, so there are some things that you and me don't expect <3

How it works

It works with Dataview(it finds notes you need and create table) table and changes its display view from table to cards. Also there are supporting plugin: Style Settings(quickly change styles of cards, Tabs(to make tabs and switch between them) and Book Search(to quickly add a book and load its metadata for predefined template)

Tip

You can download a Hover Editor plugin and be able to edit your notes without opening it in a new tab.

What is possible

Changing card width
Changing card background
Changing image size
Chaning gaps between rows and columns
Changing border width
Changing font-sizes
Changing icons
Changing Mobile style
and more

Installation

Tip

You can download vault as whole. It has everything described below(plugins/templates). Click this button and download zip -> Open as a new vault in Obsidian as a new vault via Manage vault

DOWNLOAD Style Settings plugin and turn it on (https://github.com/mgmeyers/obsidian-style-settings).
Download and enable Dataview plugin, learn it. (Some examples you can find in files)
Download file Cards.css and insert it in your Obsidian's folder snippets(see documentantion https://help.obsidian.md/Extending+Obsidian/CSS+snippets) e.g. C:\Users\User\Obsidian_folder\.obsidian\snippets\Cards.css
Enable snippet in Settings > Appearance > CSS snippets
Create a book note. (You can copy or download demo Demo Book Expected result:

Tip

Don't forget about property cssclasses: cards and cards-readline-off in your note with library

Create new note with Dataview query. Demo Library Expected result: Now it's done and you can see a default cards view.

Usage

Style Settings plugin

Open Style Settings plugin. I'd recommend to open it in a split view.
- Open Command Palette Ctrl + P
- Insert Style Settings: Show style settings view
- Now Style Settings are opened in new tab. Drag and drop the tab to the left or to the right
- Now you can change style and see result. Convenient

In Style Settings you can see two settings. For Desktop version and mobile version. Cards snippet - DeusEx01 and Mobile Cards snippet - DeusEx01 respectively.

Tip

Mobile version is activated if width of screen less than 400 points. To change the width go to the snippet and find @media(max-width:400pt), then change max-width: to your value.

If you want to restore default style click Restore default button:

Dataview query

Warning

Try to follow original format of cards. It includes

Cover image (important)
Link (note title) (important)
Rows with additional information (can be omitted)
Progress bar (can be omitted)

You can to not follow the template but I'm not sure in good visual result.

Span Tag

Dataview query is quite basic, the only thing I've added and what is not so common is

"<span " + "class='cards-icon'>" + "PROPERTY_NAME" + "</span>" + PROPERTY_VALUE as PROPERTY_NAME

Here you can define a name of property PROPERTY_NAME followed by its actual value PROPERTY_VALUE which is taken by Dataview query from your YAML properties. You can delete this "<span " + "class='cards-icon'>" + "PROPERTY_NAME" + "</span>" + and leave only PROPERTY_VALUE as PROPERTY_NAME

Progress Bar

"<progress max=" + 
volume + " value=" + number(
timestamp) + "> </progress> "  + number(
timestamp) + " of " + number(
volume) + " " + 
units + " (" +round(number(
timestamp)/number(
volume)*100) + "%" + ")" as Progress

Where

volume - yaml property where you store a total number of pages, chapters, episodes and so on. It has to be a number value
timestamp - yaml property where you store your current page, chapter, episode and so on. It has to be a number value
units - yaml property where you store your name of units. How you measure your book or series. (e.g. book and chapters, series and eposodes). It has to be a text value

Implicit settings

Rows Before Clip in Title and Rows sections. It allows you to say how many rows of text you want to see before it's clipped if it's too long. Last symbols are replaced with three dots .... By default 2 rows are shown. E.g.

Property Name Style is dedicated to text which contains name of property inside "<span " + "class='cards-icon'>" + "Series" + "</span>" code from demo version of Dataview. E.g.