[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]
![categories](https://user-images.githubusercontent.com/631897/52490534-3b99d600-2bc5-11e9-8cbe-01d378cc7f6b.png)
[Image 2] BEFORE
![before](https://user-images.githubusercontent.com/631897/52490549-47859800-2bc5-11e9-8728-e406801f7b51.png)
[Image 2] AFTER
![after](https://user-images.githubusercontent.com/631897/52490552-49e7f200-2bc5-11e9-9a94-a423cbe1ef61.png)
Also fixed on small screens
![mobile](https://user-images.githubusercontent.com/631897/52490581-553b1d80-2bc5-11e9-8a43-b42a00434262.png)
[Image 3] BEFORE
![card_before](https://user-images.githubusercontent.com/631897/52490593-58360e00-2bc5-11e9-93b9-b9c63e25459c.png)
[Image 3] AFTER
![card_after](https://user-images.githubusercontent.com/631897/52490595-59673b00-2bc5-11e9-83ad-da976ba640da.png)
[Image 4]
![admin_processes](https://user-images.githubusercontent.com/631897/52797396-18b06b80-3076-11e9-975d-9a0b2adbf104.png)
[Image 5]
![screenshot 2019-02-15 at 18 21 41](https://user-images.githubusercontent.com/631897/52873133-934cba00-314e-11e9-88e5-1ffb77e1b30f.png)