1. About
   • Showcase
2. How it works
3. What is possible
4. Installation
5. Usage
   • Style Settings plugin
   • Dataview
     • span
     • Progress Bar
6. Implicit settings
7. Support cssclasses
8. 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

0. DOWNLOAD Style Settings plugin and turn it on (https://github.com/mgmeyers/obsidian-style-settings).
1. Download and enable Dataview plugin, learn it. (Some examples you can find in files)
2. 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
3. Enable snippet in Settings > Appearance > CSS snippets
4. 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

6. 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

1. 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

2. 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.

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

Dataview query

[!WARNING] Try to follow original format of cards. It includes

1. Cover image (important)
2. Link (note title) (important)
3. Rows with additional information (can be omitted)
4. 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

1. volume - yaml property where you store a total number of pages, chapters, episodes and so on. It has to be a number value
2. timestamp - yaml property where you store your current page, chapter, episode and so on. It has to be a number value
3. 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

1. 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.

2. 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.

• Left Icon and Right Icon are icons that surround Property Name. By default •. You can change it to any symbol or emoji e.g.

Support classes

• cards-readline-off (breaks limits of option Readable line length so you can see library with full width.

Before: After:

TODO

• Make adaptive cards (mobile version) for different resolutions(devices) e.g. @media (max-width: 400pt)
• Add font-family support via Style Settings (cancelled)
• Make individual .cards-icon styles.
• Collect feedbacks and make a list of needed fixes/bugs. (no feedbacks ;c)
• Check popular themes and make better compability.
• Think about merging with MetaData + Dataview + Snippet (Right now it's too slow for working with). Made test version with dwjs and db.markdownTable, non-public
• Change selector for readable line length to --file-line-width native variable
• Add changable styles for links inside rows (canceled)
• Add an ability to add background for every single card(think about it) (canceled)
• Add several hover animations (underway in other repo)