admin/site-portfolio
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: добавь ссылку и скриншоты Card Columns в кейс

Browse Source
This commit is contained in:
root committed 2026-09-29 14:06:18 +02:00
1 parent 0f8277dd0a
commit d25c2e2185
8 files changed
+50 -119
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

public/assets/card-columns-obsidian/filter-use.webp
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 81 KiB

public/assets/card-columns-obsidian/overview.webp
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 194 KiB

public/assets/card-columns-obsidian/view-configure.webp
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 67 KiB

public/cases/card-columns-obsidian/index.html
+11 -28
View File
@@ -181,7 +181,7 @@
"creator": {
"@id": "https://mamadaevv.site/#person"
},
"datePublished": "2026-09-24",
"datePublished": "2026-09-29",
"about": "UX/UI-дизайн и проектирование интерфейсов"
},
{
@@ -499,17 +499,15 @@
отбор по тегам И/ИЛИ за два клика
</p>
<!-- МЕДИА: hero-спойлер, финальный экран плагина. Раскомментировать при вставке скрина.
<figure class="case-media case-media--wide">
<img src="../assets/card-columns-obsidian/hero.webp" alt="Card Columns: колонки карточек поверх .base файла" width="1920" height="1080" loading="eager" decoding="async" data-image-viewer />
<figcaption>Вид Columns поверх базы заметок</figcaption>
<img src="../../assets/card-columns-obsidian/overview.webp" alt="База ссылок в Obsidian, сгруппированная по тегам в колонки Card Columns" width="2084" height="1296" loading="eager" decoding="async" data-image-viewer />
<figcaption>База заметок, сгруппированная по тегам в Columns</figcaption>
</figure>
-->
<ul class="case-brief">
<li><span>Роль</span>Продуктовый дизайн и разработка</li>
<li><span>Платформа</span>Obsidian Bases</li>
<li><span>Статус</span>Рабочий плагин, open source (MIT)</li>
<li><span>Статус</span>Рабочий плагин в <a href="https://community.obsidian.md/plugins/card-columns" target="_blank" rel="noopener noreferrer">каталоге плагинов Obsidian</a>, open source (MIT)</li>
<li><span>Команда</span>Соло, пет-проект</li>
<li><span>Срок</span>Черновой ответ, заменить</li>
</ul>
@@ -546,12 +544,7 @@
выдал Bases-запрос (Sort, Filter, Properties, Search из тулбара). Значит, вся логика
выборки остаётся на Bases, а моя задача, только представление и навигация по нему.
</p>
<!-- МЕДИА: общий скрин/видео обзора — доска колонок поверх .base файла.
<figure class="case-media case-media--wide">
<img src="../assets/card-columns-obsidian/overview.webp" alt="Вид Card Columns поверх .base файла: заметки по колонкам" width="1920" height="1080" loading="lazy" decoding="async" data-image-viewer />
<figcaption>Обзор вида</figcaption>
</figure>
-->
</div>
<div class="case-block" id="pochemu-svoi">
@@ -662,18 +655,10 @@
с базой. Модалка превращает его в прерванный сценарий: открыл, настроил, закрыл, проверил.
Пилюли оставляют результат перед глазами, а состояние фильтра видно всегда.
</p>
<!-- МЕДИА: короткое видео фильтрации по тегам (OR / AND).
<figure class="case-media" style="margin: 0.85rem 0 1.2rem">
<div class="case-video-shell">
<video controls preload="metadata" playsinline poster="../assets/card-columns-obsidian/filter-poster.webp" data-case-video-player style="display: block; width: 100%; height: auto; margin: 0">
<source src="../assets/card-columns-obsidian/filter.webm" type="video/webm" />
<source src="../assets/card-columns-obsidian/filter.mp4" type="video/mp4" />
Ваш браузер не поддерживает видео.
</video>
</div>
<figcaption>Фильтрация по тегам: OR и AND</figcaption>
<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>
</figure>
-->
<h3>Карточки и обложки</h3>
<p class="section__prose">
@@ -744,12 +729,10 @@
тулбара Bases остаются рабочими. Плагин только рисует результат запроса, данные не
дублируются и не зависят от отдельного хранилища.
</p>
<!-- МЕДИА: скриншот настроек (gear-меню) с секциями.
<figure class="case-media case-media--content">
<img src="../assets/card-columns-obsidian/settings.webp" alt="Окно настроек плагина: General, Title, Properties, Cover" width="1200" height="675" loading="lazy" decoding="async" data-image-viewer />
<figcaption>Настройки вида</figcaption>
<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 />
<figcaption>Настройки вида Columns</figcaption>
</figure>
-->
</div>
<div class="case-block" id="rezultat">
public/en/cases/card-columns-obsidian/index.html
+11 -28
View File
@@ -181,7 +181,7 @@
"creator": {
"@id": "https://mamadaevv.site/#person"
},
"datePublished": "2026-09-24",
"datePublished": "2026-09-29",
"about": "UX/UI design and interface design"
},
{
@@ -500,17 +500,15 @@
filtered by AND/OR tags with just two clicks
</p>
<!-- МЕДИА: hero-спойлер, финальный экран плагина. Раскомментировать при вставке скрина.
<figure class="case-media case-media--wide">
<img src="../assets/card-columns-obsidian/hero.webp" alt="Card Columns: card columns on top of the .base file" width="1920" height="1080" loading="eager" decoding="async" data-image-viewer />
<figcaption>"Columns" view on top of the note database</figcaption>
<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 />
<figcaption>A notes database grouped into Columns by tags</figcaption>
</figure>
-->
<ul class="case-brief">
<li>Role: Product Design and Development</li>
<li><span>Platform:</span> Obsidian Bases</li>
<li><span>Status</span>: Working plugin, open source (MIT)</li>
<li><span>Status</span>: Working plugin in the <a href="https://community.obsidian.md/plugins/card-columns" target="_blank" rel="noopener noreferrer">Obsidian plugin directory</a>, open source (MIT)</li>
<li><span>Team: Solo</span>, side project</li>
<li><span>Status:</span> Draft response, to be replaced</li>
</ul>
@@ -547,12 +545,7 @@
the Bases query returns (Sort, Filter, Properties, Search from the toolbar). This means that all the logic
for data retrieval remains with Bases, and my task is solely to display and navigate the results.
</p>
<!-- МЕДИА: общий скрин/видео обзора — доска колонок поверх .base файла.
<figure class="case-media case-media--wide">
<img src="../assets/card-columns-obsidian/overview.webp" alt="View of "Card Columns" in the .base file: notes on the columns" width="1920" height="1080" loading="lazy" decoding="async" data-image-viewer />
<figcaption>Species Overview</figcaption>
</figure>
-->
</div>
<div class="case-block" id="pochemu-svoi">
@@ -666,18 +659,10 @@
with the database. A modal window turns it into an interrupted workflow: open, configure, close, check.
The pill-shaped icons keep the result right in front of you, and the filter status is always visible.
</p>
<!-- МЕДИА: короткое видео фильтрации по тегам (OR / AND).
<figure class="case-media" style="margin: 0.85rem 0 1.2rem">
<div class="case-video-shell">
<video controls preload="metadata" playsinline poster="../assets/card-columns-obsidian/filter-poster.webp" data-case-video-player style="display: block; width: 100%; height: auto; margin: 0">
<source src="../assets/card-columns-obsidian/filter.webm" type="video/webm" />
<source src="../assets/card-columns-obsidian/filter.mp4" type="video/mp4" />
Your browser does not support video.
</video>
</div>
<figcaption>Filtering by tags: OR and AND</figcaption>
<figure class="case-media case-media--wide">
<img src="../../../assets/card-columns-obsidian/filter-use.webp" alt="Tag pills used to filter cards in Card Columns" width="1280" height="796" loading="lazy" decoding="async" data-image-viewer />
<figcaption>Filtering cards by tag</figcaption>
</figure>
-->
<h3>Cards and Covers</h3>
<p class="section__prose">
@@ -748,12 +733,10 @@
the Bases toolbar remain functional. The plugin only renders the query results; the data is not
duplicated and does not depend on a separate storage.
</p>
<!-- МЕДИА: скриншот настроек (gear-меню) с секциями.
<figure class="case-media case-media--content">
<img src="../assets/card-columns-obsidian/settings.webp" alt="Plugin Settings Window: General, Title, Properties, Cover" width="1200" height="675" loading="lazy" decoding="async" data-image-viewer />
<figcaption>View Settings</figcaption>
<figure class="case-media case-media--wide">
<img src="../../../assets/card-columns-obsidian/view-configure.webp" alt="Configure view popover with card and column width settings" width="1280" height="1183" loading="lazy" decoding="async" data-image-viewer />
<figcaption>Columns view settings</figcaption>
</figure>
-->
</div>
<div class="case-block" id="rezultat">
src/pages/cases/card-columns-obsidian.en.html
+10 -27
View File
@@ -187,17 +187,15 @@
filtered by AND/OR tags with just two clicks
</p>
<!-- МЕДИА: hero-спойлер, финальный экран плагина. Раскомментировать при вставке скрина.
<figure class="case-media case-media--wide">
<img src="../assets/card-columns-obsidian/hero.webp" alt="Card Columns: card columns on top of the .base file" width="1920" height="1080" loading="eager" decoding="async" data-image-viewer />
<figcaption>"Columns" view on top of the note database</figcaption>
<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 />
<figcaption>A notes database grouped into Columns by tags</figcaption>
</figure>
-->
<ul class="case-brief">
<li>Role: Product Design and Development</li>
<li><span>Platform:</span> Obsidian Bases</li>
<li><span>Status</span>: Working plugin, open source (MIT)</li>
<li><span>Status</span>: Working plugin in the <a href="https://community.obsidian.md/plugins/card-columns" target="_blank" rel="noopener noreferrer">Obsidian plugin directory</a>, open source (MIT)</li>
<li><span>Team: Solo</span>, side project</li>
<li><span>Status:</span> Draft response, to be replaced</li>
</ul>
@@ -234,12 +232,7 @@
the Bases query returns (Sort, Filter, Properties, Search from the toolbar). This means that all the logic
for data retrieval remains with Bases, and my task is solely to display and navigate the results.
</p>
<!-- МЕДИА: общий скрин/видео обзора — доска колонок поверх .base файла.
<figure class="case-media case-media--wide">
<img src="../assets/card-columns-obsidian/overview.webp" alt="View of "Card Columns" in the .base file: notes on the columns" width="1920" height="1080" loading="lazy" decoding="async" data-image-viewer />
<figcaption>Species Overview</figcaption>
</figure>
-->
</div>
<div class="case-block" id="pochemu-svoi">
@@ -353,18 +346,10 @@
with the database. A modal window turns it into an interrupted workflow: open, configure, close, check.
The pill-shaped icons keep the result right in front of you, and the filter status is always visible.
</p>
<!-- МЕДИА: короткое видео фильтрации по тегам (OR / AND).
<figure class="case-media" style="margin: 0.85rem 0 1.2rem">
<div class="case-video-shell">
<video controls preload="metadata" playsinline poster="../assets/card-columns-obsidian/filter-poster.webp" data-case-video-player style="display: block; width: 100%; height: auto; margin: 0">
<source src="../assets/card-columns-obsidian/filter.webm" type="video/webm" />
<source src="../assets/card-columns-obsidian/filter.mp4" type="video/mp4" />
Your browser does not support video.
</video>
</div>
<figcaption>Filtering by tags: OR and AND</figcaption>
<figure class="case-media case-media--wide">
<img src="{{assetPrefix}}assets/card-columns-obsidian/filter-use.webp" alt="Tag pills used to filter cards in Card Columns" width="1280" height="796" loading="lazy" decoding="async" data-image-viewer />
<figcaption>Filtering cards by tag</figcaption>
</figure>
-->
<h3>Cards and Covers</h3>
<p class="section__prose">
@@ -435,12 +420,10 @@
the Bases toolbar remain functional. The plugin only renders the query results; the data is not
duplicated and does not depend on a separate storage.
</p>
<!-- МЕДИА: скриншот настроек (gear-меню) с секциями.
<figure class="case-media case-media--content">
<img src="../assets/card-columns-obsidian/settings.webp" alt="Plugin Settings Window: General, Title, Properties, Cover" width="1200" height="675" loading="lazy" decoding="async" data-image-viewer />
<figcaption>View Settings</figcaption>
<figure class="case-media case-media--wide">
<img src="{{assetPrefix}}assets/card-columns-obsidian/view-configure.webp" alt="Configure view popover with card and column width settings" width="1280" height="1183" loading="lazy" decoding="async" data-image-viewer />
<figcaption>Columns view settings</figcaption>
</figure>
-->
</div>
<div class="case-block" id="rezultat">
src/pages/cases/card-columns-obsidian.html
+10 -27
View File
@@ -186,17 +186,15 @@
отбор по тегам И/ИЛИ за два клика
</p>
<!-- МЕДИА: hero-спойлер, финальный экран плагина. Раскомментировать при вставке скрина.
<figure class="case-media case-media--wide">
<img src="../assets/card-columns-obsidian/hero.webp" alt="Card Columns: колонки карточек поверх .base файла" width="1920" height="1080" loading="eager" decoding="async" data-image-viewer />
<figcaption>Вид Columns поверх базы заметок</figcaption>
<img src="{{assetPrefix}}assets/card-columns-obsidian/overview.webp" alt="База ссылок в Obsidian, сгруппированная по тегам в колонки Card Columns" width="2084" height="1296" loading="eager" decoding="async" data-image-viewer />
<figcaption>База заметок, сгруппированная по тегам в Columns</figcaption>
</figure>
-->
<ul class="case-brief">
<li><span>Роль</span>Продуктовый дизайн и разработка</li>
<li><span>Платформа</span>Obsidian Bases</li>
<li><span>Статус</span>Рабочий плагин, open source (MIT)</li>
<li><span>Статус</span>Рабочий плагин в <a href="https://community.obsidian.md/plugins/card-columns" target="_blank" rel="noopener noreferrer">каталоге плагинов Obsidian</a>, open source (MIT)</li>
<li><span>Команда</span>Соло, пет-проект</li>
<li><span>Срок</span>Черновой ответ, заменить</li>
</ul>
@@ -233,12 +231,7 @@
выдал Bases-запрос (Sort, Filter, Properties, Search из тулбара). Значит, вся логика
выборки остаётся на Bases, а моя задача, только представление и навигация по нему.
</p>
<!-- МЕДИА: общий скрин/видео обзора — доска колонок поверх .base файла.
<figure class="case-media case-media--wide">
<img src="../assets/card-columns-obsidian/overview.webp" alt="Вид Card Columns поверх .base файла: заметки по колонкам" width="1920" height="1080" loading="lazy" decoding="async" data-image-viewer />
<figcaption>Обзор вида</figcaption>
</figure>
-->
</div>
<div class="case-block" id="pochemu-svoi">
@@ -349,18 +342,10 @@
с базой. Модалка превращает его в прерванный сценарий: открыл, настроил, закрыл, проверил.
Пилюли оставляют результат перед глазами, а состояние фильтра видно всегда.
</p>
<!-- МЕДИА: короткое видео фильтрации по тегам (OR / AND).
<figure class="case-media" style="margin: 0.85rem 0 1.2rem">
<div class="case-video-shell">
<video controls preload="metadata" playsinline poster="../assets/card-columns-obsidian/filter-poster.webp" data-case-video-player style="display: block; width: 100%; height: auto; margin: 0">
<source src="../assets/card-columns-obsidian/filter.webm" type="video/webm" />
<source src="../assets/card-columns-obsidian/filter.mp4" type="video/mp4" />
Ваш браузер не поддерживает видео.
</video>
</div>
<figcaption>Фильтрация по тегам: OR и AND</figcaption>
<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>
</figure>
-->
<h3>Карточки и обложки</h3>
<p class="section__prose">
@@ -431,12 +416,10 @@
тулбара Bases остаются рабочими. Плагин только рисует результат запроса, данные не
дублируются и не зависят от отдельного хранилища.
</p>
<!-- МЕДИА: скриншот настроек (gear-меню) с секциями.
<figure class="case-media case-media--content">
<img src="../assets/card-columns-obsidian/settings.webp" alt="Окно настроек плагина: General, Title, Properties, Cover" width="1200" height="675" loading="lazy" decoding="async" data-image-viewer />
<figcaption>Настройки вида</figcaption>
<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 />
<figcaption>Настройки вида Columns</figcaption>
</figure>
-->
</div>
<div class="case-block" id="rezultat">
texts/cases/card-columns-obsidian.md
+8 -9
View File
@@ -12,7 +12,7 @@
- **Роль:** Продуктовый дизайн и разработка
- **Платформа:** Obsidian Bases
- **Статус:** Рабочий плагин, open source (MIT)
- **Статус:** Рабочий плагин в [каталоге плагинов Obsidian](https://community.obsidian.md/plugins/card-columns), open source (MIT)
- **Команда:** Соло, пет-проект
## Введение
@@ -98,19 +98,18 @@ Bases, это не заметка и не отдельная база данны
> **Callout (✅):** Главный вывод: вид для Bases получается рабочим только тогда, когда он уважает тулбар фреймворка. Я добавил представление, а не вторую систему хранения, и заметки остались обычными заметками.
## Медиа-плейсхолдеры (в HTML закомментированы)
## Медиа
| Слот | Файл | Что показывать |
| Файл | Что показывает | Источник |
|---|---|---|
| Обзор | `overview.webp` | Вид Card Columns поверх `.base` файла |
| Колонки | `board.webp` | Колонки карточек с группировкой по свойству |
| Фильтр | `filter.webm` / `filter.mp4` + `filter-poster.webp` | Фильтрация по тегам, OR и AND |
| Настройки | `settings.webp` | Gear-меню с секциями |
Ещё один слот (`note-before.webp`) остался в шаблоне из ранней версии и сейчас не используется, удалить при вставке медиа.
| `overview.webp` | База заметок в режиме Columns, сгруппированная по тегам | `card-columns/images/overview.webp` |
| `filter-use.webp` | Фильтрация карточек кликабельными тегами | `card-columns/images/filter use.webp` |
| `view-configure.webp` | Настройка вида и ширины колонок | `card-columns/images/view configure.webp` |
## Источники фактуры
- Репозиторий: `https://github.com/mamadaevv/card-columns` (лицензия MIT).
- Каталог плагинов Obsidian: `https://community.obsidian.md/plugins/card-columns`.
- Скриншоты взяты из `images/` репозитория Card Columns.
- Все параметры кастомизации и логика фильтрации взяты из README репозитория.
- Drag-and-drop в плагине **отсутствует**: он есть у соседнего `ewerx/obsidian-bases-kanban`, не путать.