feat: добавь скринкасты Card Columns и примени обрезку
This commit is contained in:
root committed
1 parent
8b50c821a7
commit
eb90714012
9 files changed
+60
-20
No files matched your search
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 81 KiB After Width: | Height: | Size: 85 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 194 KiB After Width: | Height: | Size: 183 KiB |
Binary file not shown.
@@ -435,7 +435,7 @@
|
||||
</p>
|
||||
|
||||
<figure class="case-media case-media--wide">
|
||||
<img src="../../assets/card-columns-obsidian/overview.webp" alt="База ссылок в Obsidian, сгруппированная по тегам в колонки Card Columns" width="2084" height="1296" loading="eager" decoding="async" data-image-viewer />
|
||||
<img src="../../assets/card-columns-obsidian/overview.webp" alt="База ссылок в Obsidian, сгруппированная по тегам в колонки Card Columns" width="2076" height="1288" loading="eager" decoding="async" data-image-viewer />
|
||||
<figcaption>Links: 196 результатов в режиме Columns</figcaption>
|
||||
</figure>
|
||||
|
||||
@@ -488,8 +488,13 @@
|
||||
пришлось бы закрывать его, чтобы проверить результат.
|
||||
</p>
|
||||
<figure class="case-media case-media--wide">
|
||||
<img src="../../assets/card-columns-obsidian/filter-use.webp" alt="Теги-фильтры над колонками карточек Card Columns" width="1280" height="796" loading="lazy" decoding="async" data-image-viewer />
|
||||
<figcaption>Фильтры тегов остаются рядом с колонками</figcaption>
|
||||
<div class="case-video-shell">
|
||||
<video controls preload="metadata" playsinline poster="../../assets/card-columns-obsidian/filter-use.webp" aria-label="Демонстрация фильтрации тегов в Card Columns" data-case-video-player style="display: block; width: 100%; height: auto; margin: 0">
|
||||
<source src="../../assets/card-columns-obsidian/filter-use.webm" type="video/webm" />
|
||||
Ваш браузер не поддерживает видео.
|
||||
</video>
|
||||
</div>
|
||||
<figcaption>Фильтрация тегов: OR и AND</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
|
||||
@@ -533,7 +538,12 @@
|
||||
и обложки. Один вид подстраивается под разные базы, а не наоборот.
|
||||
</p>
|
||||
<figure class="case-media case-media--wide">
|
||||
<img src="../../assets/card-columns-obsidian/view-configure.webp" alt="Экран настройки вида Columns" width="1280" height="1183" loading="lazy" decoding="async" data-image-viewer />
|
||||
<div class="case-video-shell">
|
||||
<video controls preload="metadata" playsinline poster="../../assets/card-columns-obsidian/view-configure.webp" aria-label="Демонстрация настроек вида Columns" data-case-video-player style="display: block; width: 100%; height: auto; margin: 0">
|
||||
<source src="../../assets/card-columns-obsidian/view-configure.webm" type="video/webm" />
|
||||
Ваш браузер не поддерживает видео.
|
||||
</video>
|
||||
</div>
|
||||
<figcaption>Настройки вида Columns</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
|
||||
@@ -436,7 +436,7 @@
|
||||
</p>
|
||||
|
||||
<figure class="case-media case-media--wide">
|
||||
<img src="../../../assets/card-columns-obsidian/overview.webp" alt="An Obsidian links database grouped into Card Columns by tags" width="2084" height="1296" loading="eager" decoding="async" data-image-viewer />
|
||||
<img src="../../../assets/card-columns-obsidian/overview.webp" alt="An Obsidian links database grouped into Card Columns by tags" width="2076" height="1288" loading="eager" decoding="async" data-image-viewer />
|
||||
<figcaption>Links: 196 results in Columns view</figcaption>
|
||||
</figure>
|
||||
|
||||
@@ -489,8 +489,13 @@
|
||||
it just to check what changed.
|
||||
</p>
|
||||
<figure class="case-media case-media--wide">
|
||||
<img src="../../../assets/card-columns-obsidian/filter-use.webp" alt="Tag filters above Card Columns cards and columns" width="1280" height="796" loading="lazy" decoding="async" data-image-viewer />
|
||||
<figcaption>Tag filters stay beside the columns</figcaption>
|
||||
<div class="case-video-shell">
|
||||
<video controls preload="metadata" playsinline poster="../../../assets/card-columns-obsidian/filter-use.webp" aria-label="Tag filtering demo in Card Columns" data-case-video-player style="display: block; width: 100%; height: auto; margin: 0">
|
||||
<source src="../../../assets/card-columns-obsidian/filter-use.webm" type="video/webm" />
|
||||
Your browser does not support video.
|
||||
</video>
|
||||
</div>
|
||||
<figcaption>Tag filtering: OR and AND</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
|
||||
@@ -532,7 +537,12 @@
|
||||
property chips, dates, and covers have their own controls. The view adapts to the database.
|
||||
</p>
|
||||
<figure class="case-media case-media--wide">
|
||||
<img src="../../../assets/card-columns-obsidian/view-configure.webp" alt="Columns view configuration screen" width="1280" height="1183" loading="lazy" decoding="async" data-image-viewer />
|
||||
<div class="case-video-shell">
|
||||
<video controls preload="metadata" playsinline poster="../../../assets/card-columns-obsidian/view-configure.webp" aria-label="Columns view configuration demo" data-case-video-player style="display: block; width: 100%; height: auto; margin: 0">
|
||||
<source src="../../../assets/card-columns-obsidian/view-configure.webm" type="video/webm" />
|
||||
Your browser does not support video.
|
||||
</video>
|
||||
</div>
|
||||
<figcaption>Columns view settings</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
|
||||
@@ -123,7 +123,7 @@
|
||||
</p>
|
||||
|
||||
<figure class="case-media case-media--wide">
|
||||
<img src="{{assetPrefix}}assets/card-columns-obsidian/overview.webp" alt="An Obsidian links database grouped into Card Columns by tags" width="2084" height="1296" loading="eager" decoding="async" data-image-viewer />
|
||||
<img src="{{assetPrefix}}assets/card-columns-obsidian/overview.webp" alt="An Obsidian links database grouped into Card Columns by tags" width="2076" height="1288" loading="eager" decoding="async" data-image-viewer />
|
||||
<figcaption>Links: 196 results in Columns view</figcaption>
|
||||
</figure>
|
||||
|
||||
@@ -176,8 +176,13 @@
|
||||
it just to check what changed.
|
||||
</p>
|
||||
<figure class="case-media case-media--wide">
|
||||
<img src="{{assetPrefix}}assets/card-columns-obsidian/filter-use.webp" alt="Tag filters above Card Columns cards and columns" width="1280" height="796" loading="lazy" decoding="async" data-image-viewer />
|
||||
<figcaption>Tag filters stay beside the columns</figcaption>
|
||||
<div class="case-video-shell">
|
||||
<video controls preload="metadata" playsinline poster="{{assetPrefix}}assets/card-columns-obsidian/filter-use.webp" aria-label="Tag filtering demo in Card Columns" data-case-video-player style="display: block; width: 100%; height: auto; margin: 0">
|
||||
<source src="{{assetPrefix}}assets/card-columns-obsidian/filter-use.webm" type="video/webm" />
|
||||
Your browser does not support video.
|
||||
</video>
|
||||
</div>
|
||||
<figcaption>Tag filtering: OR and AND</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
|
||||
@@ -219,7 +224,12 @@
|
||||
property chips, dates, and covers have their own controls. The view adapts to the database.
|
||||
</p>
|
||||
<figure class="case-media case-media--wide">
|
||||
<img src="{{assetPrefix}}assets/card-columns-obsidian/view-configure.webp" alt="Columns view configuration screen" width="1280" height="1183" loading="lazy" decoding="async" data-image-viewer />
|
||||
<div class="case-video-shell">
|
||||
<video controls preload="metadata" playsinline poster="{{assetPrefix}}assets/card-columns-obsidian/view-configure.webp" aria-label="Columns view configuration demo" data-case-video-player style="display: block; width: 100%; height: auto; margin: 0">
|
||||
<source src="{{assetPrefix}}assets/card-columns-obsidian/view-configure.webm" type="video/webm" />
|
||||
Your browser does not support video.
|
||||
</video>
|
||||
</div>
|
||||
<figcaption>Columns view settings</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
|
||||
@@ -122,7 +122,7 @@
|
||||
</p>
|
||||
|
||||
<figure class="case-media case-media--wide">
|
||||
<img src="{{assetPrefix}}assets/card-columns-obsidian/overview.webp" alt="База ссылок в Obsidian, сгруппированная по тегам в колонки Card Columns" width="2084" height="1296" loading="eager" decoding="async" data-image-viewer />
|
||||
<img src="{{assetPrefix}}assets/card-columns-obsidian/overview.webp" alt="База ссылок в Obsidian, сгруппированная по тегам в колонки Card Columns" width="2076" height="1288" loading="eager" decoding="async" data-image-viewer />
|
||||
<figcaption>Links: 196 результатов в режиме Columns</figcaption>
|
||||
</figure>
|
||||
|
||||
@@ -175,8 +175,13 @@
|
||||
пришлось бы закрывать его, чтобы проверить результат.
|
||||
</p>
|
||||
<figure class="case-media case-media--wide">
|
||||
<img src="{{assetPrefix}}assets/card-columns-obsidian/filter-use.webp" alt="Теги-фильтры над колонками карточек Card Columns" width="1280" height="796" loading="lazy" decoding="async" data-image-viewer />
|
||||
<figcaption>Фильтры тегов остаются рядом с колонками</figcaption>
|
||||
<div class="case-video-shell">
|
||||
<video controls preload="metadata" playsinline poster="{{assetPrefix}}assets/card-columns-obsidian/filter-use.webp" aria-label="Демонстрация фильтрации тегов в Card Columns" data-case-video-player style="display: block; width: 100%; height: auto; margin: 0">
|
||||
<source src="{{assetPrefix}}assets/card-columns-obsidian/filter-use.webm" type="video/webm" />
|
||||
Ваш браузер не поддерживает видео.
|
||||
</video>
|
||||
</div>
|
||||
<figcaption>Фильтрация тегов: OR и AND</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
|
||||
@@ -220,7 +225,12 @@
|
||||
и обложки. Один вид подстраивается под разные базы, а не наоборот.
|
||||
</p>
|
||||
<figure class="case-media case-media--wide">
|
||||
<img src="{{assetPrefix}}assets/card-columns-obsidian/view-configure.webp" alt="Экран настройки вида Columns" width="1280" height="1183" loading="lazy" decoding="async" data-image-viewer />
|
||||
<div class="case-video-shell">
|
||||
<video controls preload="metadata" playsinline poster="{{assetPrefix}}assets/card-columns-obsidian/view-configure.webp" aria-label="Демонстрация настроек вида Columns" data-case-video-player style="display: block; width: 100%; height: auto; margin: 0">
|
||||
<source src="{{assetPrefix}}assets/card-columns-obsidian/view-configure.webm" type="video/webm" />
|
||||
Ваш браузер не поддерживает видео.
|
||||
</video>
|
||||
</div>
|
||||
<figcaption>Настройки вида Columns</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
|
||||
@@ -59,11 +59,11 @@ Card Columns оставляет заметки в Bases, но меняет сп
|
||||
|
||||
## Медиа
|
||||
|
||||
Изображения взяты из репозитория Card Columns и лежат в `public/assets/card-columns-obsidian/`:
|
||||
Скриншоты и скринкасты взяты из репозитория Card Columns и лежат в `public/assets/card-columns-obsidian/`:
|
||||
|
||||
- `overview.webp` - обзор базы Links;
|
||||
- `filter-use.webp` - фильтрация тегами;
|
||||
- `view-configure.webp` - настройки вида.
|
||||
- `overview.webp` - обзор базы Links, обрезан по краям на 4 px;
|
||||
- `filter-use.webp` - постер фильтрации тегами, обрезан по краям на 4 px; `filter-use.webm` - демонстрация OR/AND;
|
||||
- `view-configure.webp` - постер настроек вида; `view-configure.webm` - демонстрация настроек.
|
||||
|
||||
## Источники фактуры
|
||||
|
||||
|
||||
Reference in new issue
Block a user