MokoConsulting/MokoJoomHero
1
0
Fork 0
Code Issues Pull Requests 1 Releases 1 Wiki Activity

feat: gradient overlay direction #54

New Issue
Closed
opened 2026-06-04 12:05:52 +00:00 by jmiller · 1 comment
jmiller commented 2026-06-04 12:05:52 +00:00
Owner
Copy Link
Copy Source

Summary

Replace the flat solid-colour overlay with an optional gradient overlay. A common pattern is a dark gradient at the bottom fading to transparent at the top, improving text readability while keeping the upper portion of the hero image visible.

Requirements

  • New overlayType list field: solid (default), gradient-bottom, gradient-top, gradient-left, gradient-right
  • Reuse the existing overlayColor and overlayOpacity values as the opaque end
  • The transparent end should be rgba(overlayColor, 0)
  • CSS linear-gradient() applied to .mokojoomhero__overlay background
  • Solid mode remains unchanged for backwards compatibility

Acceptance Criteria

  • Overlay can fade from opaque to transparent in four directions
  • Existing solid overlay behaviour is preserved as default
  • Text remains readable with gradient overlay
  • Works with all background modes
## Summary Replace the flat solid-colour overlay with an optional gradient overlay. A common pattern is a dark gradient at the bottom fading to transparent at the top, improving text readability while keeping the upper portion of the hero image visible. ## Requirements - New `overlayType` list field: solid (default), gradient-bottom, gradient-top, gradient-left, gradient-right - Reuse the existing `overlayColor` and `overlayOpacity` values as the opaque end - The transparent end should be `rgba(overlayColor, 0)` - CSS `linear-gradient()` applied to `.mokojoomhero__overlay` background - Solid mode remains unchanged for backwards compatibility ## Acceptance Criteria - [ ] Overlay can fade from opaque to transparent in four directions - [ ] Existing solid overlay behaviour is preserved as default - [ ] Text remains readable with gradient overlay - [ ] Works with all background modes
jmiller added the cssenhancementjoomla labels 2026-06-04 12:05:52 +00:00
jmiller commented 2026-06-04 12:05:57 +00:00
Author
Owner
Copy Link
Copy Source

Branch created: feature/54-feat-gradient-overlay-direction

git fetch origin
git checkout feature/54-feat-gradient-overlay-direction
Branch created: [`feature/54-feat-gradient-overlay-direction`](https://git.mokoconsulting.tech/MokoConsulting/MokoJoomHero/src/branch/feature/54-feat-gradient-overlay-direction) ```bash git fetch origin git checkout feature/54-feat-gradient-overlay-direction ```
Sign in to join this conversation.
Labels
Clear labels
automation
Automated processes or scripts
 breaking-change
Breaking API or functionality change
 bug
Something isn't working
 build
Build system changes
 ci-cd
CI/CD pipeline changes
 config
Configuration file changes
 css
CSS/styling changes
 dependencies
Dependency updates
 deploy-failure
Automated deploy failure tracking
 docker
Docker configuration changes
 documentation
Documentation changes
 dolibarr
Dolibarr module or extension
 duplicate
This issue or pull request already exists
 enhancement
New feature or request
 generic
Generic project or library
 good first issue
Good for newcomers
 health-check
Repository health check results
 health: excellent
Health score 90-100
 health: fair
Health score 50-69
 health: good
Health score 70-89
 health: poor
Health score below 50
 help wanted
Extra attention is needed
 html
HTML template changes
 invalid
This doesn't seem right
 javascript
JavaScript code changes
 joomla
Joomla extension or component
 major-release
Major version release (breaking changes)
 minor-release
Minor version release (XX.YY.00)
 mokostandards
MokoStandards compliance
 needs-review
Awaiting code review
 needs-testing
Requires manual or automated testing
 patch-release
Patch version release (XX.YY.ZZ)
 php
PHP code changes
 push-failure
File push failure requiring attention
 python
Python code changes
 question
Further information is requested
 regression
Regression from a previous working state
 release-candidate
Release candidate build
 security
Security-related changes
 size/l
Large change (101-300 lines)
 size/m
Medium change (31-100 lines)
 size/s
Small change (11-30 lines)
 size/xl
Extra large change (301-1000 lines)
 size/xs
Extra small change (1-10 lines)
 size/xxl
Extremely large change (1000+ lines)
 standards-drift
Repository drifted from MokoStandards
 standards-update
MokoStandards sync update
 standards-violation
Standards compliance failure
 status: blocked
Blocked by another issue or dependency
 status: in-progress
Currently being worked on
 status: needs-review
Awaiting code review
 status: on-hold
Temporarily on hold
 status: pending
Pending action or decision
 status: wontfix
This will not be worked on
 sync-failure
Bulk sync failure requiring attention
 sync-report
Bulk sync run report
 template-validation-failure
Template workflow validation failure
 test-failure
Automated test failure
 tests
Test suite changes
 type: bug
Something isn't working
 type: chore
Maintenance tasks
 type: enhancement
Enhancement to existing feature
 type: feature
New feature or request
 type: refactor
Code refactoring
 type: release
Release preparation or tracking
 type: test
Test suite additions or changes
 type: version
Version-related change
 typescript
TypeScript code changes
 version
Version bump or release
 version-branch
Version branch related
 version-drift
Version mismatch detected
 wontfix
This will not be worked on
 work-in-progress
Work in progress, not ready for merge
bug
Something is not working
 chore
Maintenance and housekeeping
 documentation
Documentation improvements
 enhancement
Improvement to existing functionality
 feature
New feature or request
 pending: dependency
Blocked by another issue or external dependency
 pending: deployment
Tested and approved, awaiting deployment to production
 pending: design
Needs UI/UX or architecture design before implementation
 pending: documentation
Feature works, needs documentation/wiki update
 pending: feedback
Awaiting feedback or decision from stakeholder
 pending: review
Implementation complete, awaiting code review
 pending: testing
Feature implemented but not yet tested
 priority: critical
Must fix immediately
 priority: high
Should fix soon
 priority: low
Nice to have
 priority: medium
Fix when convenient
 refactor
Code restructuring without behavior change
 roadmap
Planned feature or enhancement tracked on the roadmap
 scope: client
Client-specific work
 scope: dolibarr
Dolibarr modules and customizations
 scope: infrastructure
Server, CI, backups, monitoring
 scope: joomla
Joomla templates and extensions
 scope: waas
MokoWaaS platform
 security
Security vulnerability or hardening
 status: blocked
Waiting on external dependency
 status: duplicate
Duplicate of another issue
 status: in-progress
Being worked on
 status: needs-review
Ready for review
 status: wontfix
Will not be addressed
No labels css enhancement joomla
Type —
Status —
Priority —
Milestone
No items
No Milestone
Assignees
Clear assignees
jmiller (Jonathan Miller)
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: MokoConsulting/MokoJoomHero#54
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?