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 <sunil@medhas.org>
Reviewed-by: James Valleroy <jvalleroy@mailbox.org>
This commit is contained in:
Sunil Mohan Adapa 2024-11-26 17:42:49 -08:00 committed by James Valleroy
parent b346169312
commit 37e6e3b9b3
No known key found for this signature in database
GPG Key ID: 77C0C75E7B650808

View File

@ -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;