style: update screenshot dimensions in HTML template for improved layout

This commit is contained in:
lilong.129
2025-06-29 21:26:44 +08:00
parent a040b53ea9
commit fcc6d266d4

View File

@@ -1212,7 +1212,7 @@ const htmlTemplate = `<!DOCTYPE html>
.screenshot-item-compact .screenshot-image img { .screenshot-item-compact .screenshot-image img {
width: 100%; width: 100%;
height: auto; height: auto;
max-height: 400px; max-height: 500px;
border-radius: 4px; border-radius: 4px;
cursor: pointer; cursor: pointer;
transition: transform 0.2s; transition: transform 0.2s;
@@ -1290,7 +1290,7 @@ const htmlTemplate = `<!DOCTYPE html>
align-items: center; align-items: center;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
height: 250px; height: 350px;
border: none; border: none;
} }
@@ -1317,7 +1317,7 @@ const htmlTemplate = `<!DOCTYPE html>
/* Direct inline screenshot styles */ /* Direct inline screenshot styles */
.screenshot-inline { .screenshot-inline {
max-height: 250px; max-height: 350px;
object-fit: contain; object-fit: contain;
cursor: pointer; cursor: pointer;
transition: transform 0.2s; transition: transform 0.2s;
@@ -1645,12 +1645,12 @@ const htmlTemplate = `<!DOCTYPE html>
} }
.screenshots-horizontal .screenshot-image { .screenshots-horizontal .screenshot-image {
min-height: 200px; min-height: 300px;
padding: 10px 0; padding: 10px 0;
} }
.screenshots-horizontal .screenshot-image img { .screenshots-horizontal .screenshot-image img {
max-height: 250px; max-height: 400px;
width: auto; width: auto;
} }
@@ -1699,7 +1699,7 @@ const htmlTemplate = `<!DOCTYPE html>
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
min-height: 300px; min-height: 400px;
padding: 20px 0; padding: 20px 0;
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
border-radius: 8px; border-radius: 8px;
@@ -1708,7 +1708,7 @@ const htmlTemplate = `<!DOCTYPE html>
.screenshot-image img { .screenshot-image img {
max-width: 100%; max-width: 100%;
max-height: 400px; max-height: 600px;
border-radius: 6px; border-radius: 6px;
cursor: pointer; cursor: pointer;
transition: transform 0.2s; transition: transform 0.2s;
@@ -1721,12 +1721,12 @@ const htmlTemplate = `<!DOCTYPE html>
} }
.screenshot-item.small .screenshot-image { .screenshot-item.small .screenshot-image {
min-height: 250px; min-height: 300px;
padding: 15px 0; padding: 15px 0;
} }
.screenshot-item.small .screenshot-image img { .screenshot-item.small .screenshot-image img {
max-height: 200px; max-height: 350px;
} }
.validator-item { .validator-item {
@@ -2393,21 +2393,21 @@ const htmlTemplate = `<!DOCTYPE html>
} }
.screenshot-image { .screenshot-image {
min-height: 250px; min-height: 300px;
padding: 15px 0; padding: 15px 0;
} }
.screenshot-image img { .screenshot-image img {
max-height: 250px; max-height: 400px;
} }
.screenshot-item.small .screenshot-image { .screenshot-item.small .screenshot-image {
min-height: 200px; min-height: 250px;
padding: 10px 0; padding: 10px 0;
} }
.screenshot-item.small .screenshot-image img { .screenshot-item.small .screenshot-image img {
max-height: 150px; max-height: 300px;
} }
.log-header { .log-header {
@@ -2646,7 +2646,7 @@ const htmlTemplate = `<!DOCTYPE html>
<div class="planning-column-screenshot"> <div class="planning-column-screenshot">
<div class="planning-step-compact"> <div class="planning-step-compact">
<div class="step-header-compact"> <div class="step-header-compact">
<span class="step-name">📸 Take Screenshot</span> <span class="step-name">📸 ScreenShots</span>
<span class="duration">{{formatDuration $planning.ScreenshotElapsed}}</span> <span class="duration">{{formatDuration $planning.ScreenshotElapsed}}</span>
</div> </div>
<div class="screenshot-display screenshot-horizontal-scroll"> <div class="screenshot-display screenshot-horizontal-scroll">
@@ -2955,13 +2955,13 @@ const htmlTemplate = `<!DOCTYPE html>
</div> </div>
{{end}} {{end}}
<!-- Screenshots --> <!-- ScreenShots -->
{{if $step.Attachments}} {{if $step.Attachments}}
{{$attachments := $step.Attachments}} {{$attachments := $step.Attachments}}
{{if eq (printf "%T" $attachments) "map[string]interface {}"}} {{if eq (printf "%T" $attachments) "map[string]interface {}"}}
{{if index $attachments "screen_results"}} {{if index $attachments "screen_results"}}
<div class="screenshots-section"> <div class="screenshots-section">
<h4>Screenshots</h4> <h4>Attachment ScreenShots</h4>
<div class="screenshots-horizontal"> <div class="screenshots-horizontal">
{{range $screenshot := index $attachments "screen_results"}} {{range $screenshot := index $attachments "screen_results"}}
{{$imagePath := ""}} {{$imagePath := ""}}