From 37e6e3b9b306669a7147633104b735c812e52165 Mon Sep 17 00:00:00 2001 From: Sunil Mohan Adapa Date: Tue, 26 Nov 2024 17:42:49 -0800 Subject: [PATCH] ui: Align app icons in the center for home, apps, and help pages Overall, this is something we can try out. - This looks better in some cases - Default large list of disabled apps - Home page with very few icons - Help index page /plinth/help - Mobile views - This looks somewhat worse in some cases - Last row of a large list of apps, esp. when the number apps left is even and the number of apps in the previous row is not (similarly with odd number of apps). - Mismatch between enabled/disabled app section. Thanks to @Ged296123 and @fefekrzr for suggesting the change. Signed-off-by: Sunil Mohan Adapa Reviewed-by: James Valleroy --- static/themes/default/css/main.css | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/static/themes/default/css/main.css b/static/themes/default/css/main.css index 2d0825116..dcca81531 100644 --- a/static/themes/default/css/main.css +++ b/static/themes/default/css/main.css @@ -504,11 +504,12 @@ footer { } } -/* Cards in Apps, System and Help pages */ +/* Cards in Index, Apps, System and Help pages */ .card-list { display: flex; flex-wrap: wrap; - justify-content: left; + justify-content: center; + margin: 0 auto; } .card-section-title, .system-section-title { @@ -572,6 +573,11 @@ a.menu_link_active { } /* System page - special card styling */ +.system-page .card-list { + justify-content: left; + margin: 0; +} + .system-page .card { text-align: left; width: 20.625rem;