studio-variable/index-main
4
0
Fork 0
Code Issues 11 Pull requests Projects Releases Packages Wiki Activity Actions

Add before/after comparison block plugin

Browse source 
- Create custom block plugin with Vue 3 + Composition API
- Use kirbyup for building Vue SFC components
- Block allows selecting two images with slider comparison UI
- Preview shows images overlapped at 50% in the panel
- Add beforeafter block to report blueprint
- Update report template to use authors field
- Change text block heading level from 4 to 3

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
isUnknown 2026-02-09 17:21:46 +01:00
parent 509eb0ddab
commit 3d182a233d
12 changed files with 313 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

1
site/plugins/beforeafter/index.css Normal file
View file

@ -0,0 +1 @@
.beforeafter-preview[data-v-2682dba7]{cursor:pointer;border-radius:var(--rounded);overflow:hidden;background:var(--color-background)}.beforeafter-preview__images[data-v-2682dba7]{position:relative;width:100%;height:200px;background:var(--color-gray-200)}.beforeafter-preview__image[data-v-2682dba7]{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover}.beforeafter-preview__image--after[data-v-2682dba7]{clip-path:polygon(0 0,50% 0,50% 100%,0 100%)}.beforeafter-preview__divider[data-v-2682dba7]{position:absolute;left:50%;top:0;bottom:0;width:2px;background:#fff;box-shadow:0 0 8px #0000004d;transform:translate(-1px)}.beforeafter-preview__caption[data-v-2682dba7]{padding:.75rem;font-size:var(--text-sm);color:var(--color-gray-600);font-style:italic;background:var(--color-background);margin:0}.beforeafter-preview__empty[data-v-2682dba7]{padding:3rem 1rem;text-align:center;color:var(--color-gray-500);font-size:var(--text-sm)}.beforeafter-preview:hover .beforeafter-preview__images[data-v-2682dba7]{opacity:.9}