Improve RTL & smaller size banners
Currently, the banners are implemented using https://gitlab.gnome.org/GNOME/gnome-software/blob/master/data/assets/org.gnome.Software.Featured.xml
the issue is that currently we allow the designers to write some CSS properties, see this example for Inkscape banner
border-color: #ccc;
text-shadow: none;
color: #606060;
background:
url('file://@datadir@/gnome-software/featured-inkscape.svg')
20% / 60% auto no-repeat,
linear-gradient(to bottom, #ffffff, #e2e2e2);
Which makes RTL supprt & smaller banners being drawn the same way for LTR & large sizes banners.
This could be somehow fixed by adding a banner
class to the banner so that we can have stuff like .banner
& .banner:dir(rtl)
. This could also be pushed a bit to have classes like sm
, md
, lg
for the banners
.banner {
border-color: #ccc;
text-shadow: none;
color: #606060;
background:
url('file://@datadir@/gnome-software/featured-inkscape.svg') 20% / 60% auto no-repeat,
linear-gradient(to bottom, #ffffff, #e2e2e2);
}
.banner:dir(rtl) {
background:
url('file://@datadir@/gnome-software/featured-inkscape.svg') right 40% / 60% auto no-repeat,
linear-gradient(to bottom, #ffffff, #e2e2e2);
}
.banner.lg {
font-size: 24px;
}
.banner.md {
font-size: 16px;
}
.banner.sm {
font-size: 12px;
}
During my work on replacing the current Banner Editor shipped with Software I noticed those issues & tried to implement this behaviour on Banner Viewer
SM SIZE
MD SIZE
LG SIZE
RTL
Those screenshots are barely few seconds of CSS tweaking, things could be improved a lot for the final product.