The goal of this concept is to develop a more compact look for Magnolia 5 without loosing the generosity of our current visual design. The font sizes we currently use feel too big sometimes, in particular, if we compare them with surrounding elements outside of the web browser Magnolia runs in.
I've developed a series of draft screen shots using smaller font sizes:
- in the action bar
- in most titles
In most cases, this also requires to adjust the surrounding paddings and margins.
We can also:
- make dialogs appear more compact by reducing the height of the header, and maybe also the footer (though, with the buttons, that latter might looked too crammed then, we'll have to try and see)
- make the look on the iPad look more compact
Here are two screen shots showing the visual design of a typical app before and after the change of font sizes in the action bar and secondary menus. More examples are contained in the archive attached to the Jira ticket as well.
Please note that these are rough drafts only, though there is a concept behind them.
Here is the main Jira ticket for tracking changes - see raw commit messages below. Please note that these will grow in time, according to feedback rounds with PM.
For more visual input, please refer to the Change log for visual design.
- MGNLUI-466 new styles for search box - giving it a more 'boxy' look
- MGNLUI-466 style fixes for collapsed action bar after trimming header tags from section titles, first section should stay at same y position in action bar
- MGNLUI-466 updated maximum dimensions of action bar preview, and ensured it's cleared when no preview is available for selected item
- MGNLUI-466 keep preview section stuck to bottom of the action bar
- MGNLUI-466 special top adjustment for select all checkbox on tablet
- MGNLUI-466 removed unnecessary header tag for section titles
- MGNLUI-466 do not use node-folder icon since inner symbol is not readable enough, replaced with plain folder icon
- MGNLUI-466 reworked and simplified checkbox styles with multicolor SVGs
- MGNLUI-466 app-preloader also has v-viewport class, needed to ensure
- MGNLUI-466 MGNLUI-473 action bar preview section styles, and do not show it when action bar is collapsed, or on tablet
- MGNLUI-466 increased icons size in trees and lists
- MGNLUI-466 Refined form and dialog styles, header, title and footer sizes and positions. Also made dialogs shrink according to content height
- MGNLUI-466 accurate font-family for tables + minor css cleanup
- MGNLUI-466 adjusted size of split feed titles (favorites, pulse dashboard)
- MGNLUI-466 more compact look and styles refactoring for the action bar - rules cleanup and less fixed px sizes