[Backport] Fix UI details for a better UX and design #3323
Merged
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.
References
This is a backport of AyuntamientoMadrid#1886
Objectives
This PR fix some UI details for a better UX and design. 👨🎨
Improve help text for legislation processes proposals categories indicating to admin users they can use 160 characters by category. [Image 1]
Align proposal feed description without image on welcome page: when enable only proposals feed from admin, the proposals without an image appear unaligned. [Image 2]
Show card label only if it is present on welcome page: this was added on cards of custom pages, now on welcome page too avoiding to show an empty span. [Image 3]
Replace open to active filter on admin legislation processes index: now on active filter show open processes and the "next" ones, processes with a start date greater than current date. [Image 4]
Replace created at date to start and end date on admin legislation processes [Image 4]
Add default colours for legislation processes header [Image 5]
Use interpolation instead of concatenation on legislation helper. ✊ 🤓
Visual Changes
[Image 1]
[Image 2] BEFORE
[Image 2] AFTER
Also fixed on small screens
[Image 3] BEFORE
[Image 3] AFTER
[Image 4]
[Image 5]