Skip to content

Commit 7779815

Browse files
Center docker cards in multi-row preview rows
1 parent dc56bc5 commit 7779815

2 files changed

Lines changed: 11 additions & 11 deletions

File tree

src/folderview.plus/usr/local/emhttp/plugins/folderview.plus/styles/docker.css

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -366,7 +366,7 @@ tr.folder.fv-parent-expanded div.folder-preview {
366366
.folder-preview.fv-preview-multirow .folder-preview-row {
367367
width: 100%;
368368
box-sizing: border-box;
369-
align-items: flex-start;
369+
align-items: center;
370370
justify-content: flex-start;
371371
min-height: var(--fvplus-preview-row-height);
372372
padding: 0;
@@ -403,7 +403,7 @@ tr.folder.fv-parent-expanded div.folder-preview {
403403

404404
.folder-preview.fv-preview-multirow .folder-preview-wrapper {
405405
min-height: calc(var(--fvplus-preview-row-height) - 0.9em);
406-
margin: 7px 0 0 10px;
406+
margin: 0 0 0 10px;
407407
align-items: center;
408408
flex: 0 0 auto;
409409
min-width: max-content;
@@ -584,10 +584,10 @@ tr.folder.fv-parent-expanded div.folder-preview {
584584
}
585585

586586
.folder-preview.fv-preview-multirow .folder-preview-divider {
587-
align-self: stretch;
588-
height: auto;
589-
min-height: calc(var(--fvplus-preview-row-height) - 1.2em);
590-
margin: 0.35em 0 0.35em 6px;
587+
align-self: center;
588+
height: 1.35em;
589+
min-height: 1.35em;
590+
margin: 0 0 0 6px;
591591
}
592592

593593
.folder-element-custom-btn {

tests/docker-preview-overflow-feature.test.mjs

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,7 @@ test('docker styles support multi-row previews and member action sheet styling',
7979
assert.match(dockerCss, /\.folder-preview\.fv-preview-multirow \{[\s\S]*row-gap:\s*2px/);
8080
assert.match(dockerCss, /\.folder-preview\.fv-preview-multirow \{[\s\S]*padding:\s*2px 0/);
8181
assert.match(dockerCss, /\.folder-preview\.fv-preview-multirow \.folder-preview-row \{/);
82-
assert.match(dockerCss, /\.folder-preview\.fv-preview-multirow \.folder-preview-row \{[\s\S]*align-items:\s*flex-start/);
82+
assert.match(dockerCss, /\.folder-preview\.fv-preview-multirow \.folder-preview-row \{[\s\S]*align-items:\s*center/);
8383
assert.match(dockerCss, /\.folder-preview\.fv-preview-multirow \.folder-preview-row \{[\s\S]*justify-content:\s*flex-start/);
8484
assert.match(dockerCss, /\.folder-preview\.fv-preview-multirow \.folder-preview-row \{[\s\S]*min-height:\s*var\(--fvplus-preview-row-height\)/);
8585
assert.match(dockerCss, /\.folder-preview\.fv-preview-multirow \.folder-preview-row \{[\s\S]*padding:\s*0/);
@@ -88,15 +88,15 @@ test('docker styles support multi-row previews and member action sheet styling',
8888
assert.match(dockerCss, /\.folder-preview-wrapper \{[\s\S]*margin-top:\s*7px/);
8989
assert.match(dockerCss, /\.folder-preview-wrapper \{[\s\S]*flex:\s*0 0 auto/);
9090
assert.match(dockerCss, /\.folder-preview\.fv-preview-multirow \.folder-preview-wrapper \{[\s\S]*min-height:\s*calc\(var\(--fvplus-preview-row-height\) - 0\.9em\)/);
91-
assert.match(dockerCss, /\.folder-preview\.fv-preview-multirow \.folder-preview-wrapper \{[\s\S]*margin:\s*7px 0 0 10px/);
91+
assert.match(dockerCss, /\.folder-preview\.fv-preview-multirow \.folder-preview-wrapper \{[\s\S]*margin:\s*0 0 0 10px/);
9292
assert.match(dockerCss, /\.folder-preview-divider \{/);
9393
assert.match(dockerCss, /\.folder-preview-divider \{[\s\S]*align-self:\s*stretch/);
9494
assert.match(dockerCss, /\.folder-preview-divider \{[\s\S]*min-height:\s*calc\(var\(--fvplus-preview-row-height\) - 1\.2em\)/);
9595
assert.match(dockerCss, /\.folder-preview-divider \{[\s\S]*margin:\s*0\.35em 0 0\.35em 6px/);
9696
assert.match(dockerCss, /\.folder-preview\.fv-preview-multirow \.folder-preview-divider \{/);
97-
assert.match(dockerCss, /\.folder-preview\.fv-preview-multirow \.folder-preview-divider \{[\s\S]*align-self:\s*stretch/);
98-
assert.match(dockerCss, /\.folder-preview\.fv-preview-multirow \.folder-preview-divider \{[\s\S]*height:\s*auto/);
99-
assert.match(dockerCss, /\.folder-preview\.fv-preview-multirow \.folder-preview-divider \{[\s\S]*margin:\s*0\.35em 0 0\.35em 6px/);
97+
assert.match(dockerCss, /\.folder-preview\.fv-preview-multirow \.folder-preview-divider \{[\s\S]*align-self:\s*center/);
98+
assert.match(dockerCss, /\.folder-preview\.fv-preview-multirow \.folder-preview-divider \{[\s\S]*height:\s*1\.35em/);
99+
assert.match(dockerCss, /\.folder-preview\.fv-preview-multirow \.folder-preview-divider \{[\s\S]*margin:\s*0 0 0 6px/);
100100
assert.match(dockerCss, /\.folder-preview\.fv-preview-multirow \.fv-docker-preview-card \{/);
101101
assert.match(dockerCss, /\.folder-preview \.fv-preview-webui-placeholder \{/);
102102
assert.match(dockerCss, /\.folder-preview \.fv-preview-webui-placeholder \{[\s\S]*visibility:\s*hidden/);

0 commit comments

Comments
 (0)