Refactor FPGA Lab UI - First Draft (more on the way) #49
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…obile responsiveness (Sub-900px layout)
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Tinkered with the FPGA Lab interface, focusing on mobile responsiveness, typographic consistency, and easier first-time interaction for new users. I'd like to work with you all further to develop more educational content here.
Key Changes:
Mobile Layout (<900px): Implemented a vertical stack layout (Video → Terminal → Debug). Added smart corner rounding logic so the stack looks like a single cohesive unit (top corners round, middle square, bottom round) while preserving the desktop layout.
UI Harmonization: Standardized fonts sizes (0.85rem) and weights across the sidebar and content views to match the terminal aesthetic. Removed "ALL CAPS" headers for a cleaner look.
Improved Contrast: Updated text colors in the instruction panels to high-contrast grey (#d4d4d4) for better legibility against the dark background.
Onboarding: Reordered the sidebar to place "Tutorials" at the top. The "Hello World" item now automatically prepares the "Blink LEDs" command for immediate execution.
Local Development: Added
local_connect.html
and
preview_tt.html
to allow developers to work on the UI and mock terminal interactions without needing physical hardware connectivity.
Files Modified
Core UI & Templates:
ansible/roles/site/files/pib/pibfpgas/src/pibfpgas/static/pib.css
(Major styling & mobile media queries)
ansible/roles/site/files/pib/pibfpgas/src/pibfpgas/templates/tt.html
(HTML structure updates)
Logic & Scripts:
ansible/roles/site/files/pib/pibfpgas/src/pibfpgas/static/demos.js
ansible/roles/site/files/pib/pistat/src/pistat/static/dcws.js
New Dev Tools:
ansible/roles/site/files/pib/pibfpgas/src/pibfpgas/templates/local_connect.html
ansible/roles/site/files/pib/pibfpgas/src/pibfpgas/templates/preview_tt.html