feat(ux): add animated gradient border branding for RL experiments #20
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
- Add experiment-highlight CSS library with animated gradient border - Attach library for users with 'view rl reports' permission - Add .rl-experiment class for integrating modules to apply branding - Style contextual links and page titles on RL admin pages - Add body class 'rl-admin-page' on RL routes for targeted styling - Add dynamic page title showing experiment name on detail page The gradient border uses a 10-color palette (blue to green to yellow) with a 10s animation cycle. Integrating modules can simply add the 'rl-experiment' class to their elements to receive the branding.
6 tasks
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
Summary
Add visual branding for RL experiments with an animated gradient border, helping administrators easily identify RL-powered elements.
Changes
css/experiment-highlight.csswith animated gradient borderexperiment-highlightlibrary torl.libraries.ymlhook_page_attachments()to attach library for authorized usershook_preprocess_html()to add body class on RL admin pagesexperimentDetailTitle()callback for dynamic page titlesColor Palette
Uses a 10-color gradient from blue to green to yellow:
#0077B6→#0096C7→#00B4D8→#48CAE4→#26828E#1F9E89→#35B779→#6CCE59→#B4DE2C→#DAE319Test Plan
rl-experimentclass to any element - verify border appearsCloses #19