fix: Fullscreen button in header bar + full-width iframe

- Fullscreen button added to Preview/Source button group (not overlay)
- iframe breaks out of container: width:100vw with negative margins
- removed overlay expand icon — redundant with header button

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-05-21 00:37:31 +01:00
parent 64e6b23492
commit 404a704d5e
+7 -8
View File
@@ -39,6 +39,11 @@
<div class="ui mini buttons tw-mr-1"> <div class="ui mini buttons tw-mr-1">
<a href="?display=rendered" class="ui mini basic button {{if not .IsDisplayingSource}}active{{end}}">{{ctx.Locale.Tr "repo.file_view_preview"}}</a> <a href="?display=rendered" class="ui mini basic button {{if not .IsDisplayingSource}}active{{end}}">{{ctx.Locale.Tr "repo.file_view_preview"}}</a>
<a href="?display=source" class="ui mini basic button {{if .IsDisplayingSource}}active{{end}}">{{ctx.Locale.Tr "repo.file_view_source"}}</a> <a href="?display=source" class="ui mini basic button {{if .IsDisplayingSource}}active{{end}}">{{ctx.Locale.Tr "repo.file_view_source"}}</a>
{{if .HTMLPreviewEnabled}}
<a href="{{$.HTMLPreviewLink}}" target="_blank" rel="noopener noreferrer" class="ui mini basic button">Fullscreen</a>
{{else}}
<a href="{{$.RawFileLink}}" target="_blank" rel="noopener noreferrer" class="ui mini basic button">Fullscreen</a>
{{end}}
</div> </div>
{{end}} {{end}}
{{/* Gitea icon toggles for markup etc.; HTML uses Preview/Source buttons above only */}} {{/* Gitea icon toggles for markup etc.; HTML uses Preview/Source buttons above only */}}
@@ -137,15 +142,9 @@
</audio> </audio>
{{else if .IsHTMLFile}} {{else if .IsHTMLFile}}
{{if .HTMLPreviewEnabled}} {{if .HTMLPreviewEnabled}}
<div style="position:relative;"> <iframe src="{{$.HTMLPreviewLink}}" class="html-preview-iframe" style="width:100vw;height:calc(100vh - 220px);min-height:400px;border:none;margin-left:calc(-50vw + 50%);margin-right:calc(-50vw + 50%);" sandbox="allow-scripts"></iframe>
<a href="{{$.HTMLPreviewLink}}" target="_blank" rel="noopener noreferrer" title="Open in new tab" style="position:absolute;top:8px;right:12px;z-index:10;background:rgba(0,0,0,0.6);color:#fff;border-radius:4px;padding:4px 8px;font-size:12px;text-decoration:none;opacity:0.7;transition:opacity 0.2s;" onmouseover="this.style.opacity='1'" onmouseout="this.style.opacity='0.7'">{{svg "octicon-screen-full" 14}}</a>
<iframe src="{{$.HTMLPreviewLink}}" class="html-preview-iframe" style="width:100%;height:calc(100vh - 220px);min-height:400px;border:none;" sandbox="allow-scripts"></iframe>
</div>
{{else}} {{else}}
<div style="position:relative;"> <iframe src="{{$.RawFileLink}}" class="html-preview-iframe" style="width:100vw;height:calc(100vh - 220px);min-height:400px;border:none;margin-left:calc(-50vw + 50%);margin-right:calc(-50vw + 50%);" sandbox="allow-scripts"></iframe>
<a href="{{$.RawFileLink}}" target="_blank" rel="noopener noreferrer" title="Open in new tab" style="position:absolute;top:8px;right:12px;z-index:10;background:rgba(0,0,0,0.6);color:#fff;border-radius:4px;padding:4px 8px;font-size:12px;text-decoration:none;opacity:0.7;transition:opacity 0.2s;" onmouseover="this.style.opacity='1'" onmouseout="this.style.opacity='0.7'">{{svg "octicon-screen-full" 14}}</a>
<iframe src="{{$.RawFileLink}}" class="html-preview-iframe" style="width:100%;height:calc(100vh - 220px);min-height:400px;border:none;" sandbox="allow-scripts"></iframe>
</div>
{{end}} {{end}}
{{else}} {{else}}
<div class="file-view-render-container"> <div class="file-view-render-container">