fix: add Drive overlay button to demo videos for alternative access#22
fix: add Drive overlay button to demo videos for alternative access#22hoangsonww merged 1 commit intomasterfrom
Conversation
…nd improve UI clarity
hoangsonww
added
bug
github-project-automation
Bot
moved this to Backlog
in Forge Local-First Agentic Coding Tool Kanban Board
github-project-automation
Bot
moved this from Backlog
to Done
in Forge Local-First Agentic Coding Tool Kanban Board
hoangsonww
changed the title
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request introduces a Google Drive overlay button for demo videos in index.html, providing an alternative viewing option for users. Corresponding styles for the button's appearance and behavior are added to wiki/styles.css. The review feedback focuses on improving code maintainability by moving inline layout styles to the stylesheet and utilizing existing CSS variables for font consistency.
| <div class="code-win" style="margin: 0 0 32px; display: flex; flex-direction: column;"> | ||
| <div class="titlebar"><div class="traffic"><i></i><i></i><i></i></div><span class="ttl">REPL demo · forge</span></div> | ||
| <video src="https://github.com/user-attachments/assets/eb592bbf-62a1-4d74-a540-7e066ebe56a4 | ||
| <div class="video-wrap" style="position:relative"> |
There was a problem hiding this comment.
Avoid using inline styles for layout. Since you've introduced the video-wrap class, move the position: relative property to the stylesheet. This promotes reusability and keeps the HTML structure clean.
| <div class="video-wrap" style="position:relative"> | |
| <div class="video-wrap"> |
| <div class="code-win" style="margin: 0 0 32px; display: flex; flex-direction: column;"> | ||
| <div class="titlebar"><div class="traffic"><i></i><i></i><i></i></div><span class="ttl">CLI demo · forge run</span></div> | ||
| <video src="https://github.com/user-attachments/assets/bc3b3204-fd87-436f-9467-604535edb4e2 | ||
| <div class="video-wrap" style="position:relative"> |
There was a problem hiding this comment.
Avoid using inline styles for layout. Since you've introduced the video-wrap class, move the position: relative property to the stylesheet. This promotes reusability and keeps the HTML structure clean.
| <div class="video-wrap" style="position:relative"> | |
| <div class="video-wrap"> |
| <div class="code-win" style="margin: 0; display: flex; flex-direction: column;"> | ||
| <div class="titlebar"><div class="traffic"><i></i><i></i><i></i></div><span class="ttl">Web dashboard demo · forge ui start</span></div> | ||
| <video src="https://github.com/user-attachments/assets/218cd64f-40fe-4836-9c62-c7a08538056b | ||
| <div class="video-wrap" style="position:relative"> |
There was a problem hiding this comment.
Avoid using inline styles for layout. Since you've introduced the video-wrap class, move the position: relative property to the stylesheet. This promotes reusability and keeps the HTML structure clean.
| <div class="video-wrap" style="position:relative"> | |
| <div class="video-wrap"> |
| white-space: pre; | ||
| } | ||
|
|
||
| /* Top-right "↗ Drive" overlay on demo videos. Positioned over the player |
There was a problem hiding this comment.
Add the .video-wrap class definition here to handle the relative positioning for the video containers. This allows the overlay buttons to be correctly positioned relative to their parent.
.video-wrap {
position: relative;
}
/* Top-right "↗ Drive" overlay on demo videos. Positioned over the player| align-items: center; | ||
| gap: 7px; | ||
| padding: 7px 13px 7px 11px; | ||
| font: 600 11.5px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; |
There was a problem hiding this comment.
Use the --mono CSS variable instead of hardcoding the font stack to ensure consistency with the rest of the site's typography.
font: 600 11.5px/1 var(--mono);1 participant
This pull request improves the user experience for demo videos on the site by adding a visible overlay button that links directly to Google Drive copies of each demo. This provides an easy alternative for users who may have trouble playing the inline GitHub-hosted videos (for example, due to corporate proxies).
Key changes:
Feature addition:
.video-overlay-btn) above each demo video inindex.html, linking to a Google Drive folder containing all demo clips. This gives users a one-click fallback if the embedded video doesn't play.Styling and accessibility:
wiki/styles.cssfor the overlay button, ensuring it is visually distinct, accessible, and remains readable over any video frame. The overlay includes a top-right position, a ↗ arrow icon, hover/focus states, and a drop shadow for clarity.