nik/FreedomBox
1
0
Fork 0
mirror of https://github.com/freedombox/FreedomBox.git synced 2026-08-26 12:46:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

ui: Drop box shadow around the card in card lists

Browse Source 
- Drop the box shadow around a card item. Applies to home, apps, system, and
help pages.

- Replace the box shadow on hover with gray background. This gives the card a
much flatter look.

- Drop the top and bottom padding for app title as this is no longer necessary
as the white space around the icon/text is not overwhelming.

  - Add top padding for app titles to make them level with icon tops.

- Drop the margin around the cards as it is not needed anymore. This completely
removes non-clickable area between the cards (which is unnecessary).

  - Increase the padding to compensate for the reduction in the total gap
  between the cards.

  - In system page, increase in top margin for the section title is needed to
  compensate for the loss of bottom margin for cards.

  - In system page, increase in the total width of the card is necessary to make
  the total row size the size of the container.

Tests:

- In apps and system pages, gap between the section title and cards in the
previous row is sufficient.

- In system page, 4 cards fit exactly in each row given the screen is large
enough.

- In apps page, app titles margins appear pleasant.

- In system page, the app titles align with icon tops.

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-02 19:02:52 -07:00 committed by James Valleroy
parent d14eb15a43
commit 5fedde1bda
No known key found for this signature in database
GPG Key ID: 77C0C75E7B650808
1 changed files with 5 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
static/themes/default/css/main.css
View File

@ -515,14 +515,10 @@ footer {
display: flex; display: flex;
font-weight: 800; font-weight: 800;
font-size: 1.25rem; font-size: 1.25rem;
margin-bottom: 1.25rem; margin: 1.25rem 0;
border-bottom: var(--neutral-dark-color) solid 2px; border-bottom: var(--neutral-dark-color) solid 2px;
} }
.card-section-title {
margin-top: 1.25rem;
}
a.menu_link { a.menu_link {
text-decoration: none; text-decoration: none;
} }
@ -539,17 +535,15 @@ a.menu_link_active {
display: block; display: block;
line-height: 1.42857143; line-height: 1.42857143;
text-align: center; text-align: center;
box-shadow: 0 0.1875rem 0.3125rem 0 rgba(0,0,0,0.2);
width: 10rem; width: 10rem;
padding: 0.5rem 0.25rem; padding: 1rem;
margin: 0 0.625rem 1.25rem;
border: none; border: none;
border-radius: 0.5rem; border-radius: 0.5rem;
transition: border .2s ease-in-out; transition: border .2s ease-in-out;
} }
.card:hover { .card:hover {
box-shadow: 0 0.3125rem 0.9375rem 0.125rem rgba(0, 0, 0, 0.2); background: #eee;
} }
.card .nav-link { .card .nav-link {
@ -560,7 +554,6 @@ a.menu_link_active {
.card-title { .card-title {
font-size: 1.25rem; font-size: 1.25rem;
padding: 0.25rem 0;
margin-bottom: 0; margin-bottom: 0;
} }
@ -581,7 +574,7 @@ a.menu_link_active {
/* System page - special card styling */ /* System page - special card styling */
.system-page .card { .system-page .card {
text-align: left; text-align: left;
width: 19.375rem; width: 20.625rem;
padding: 0; padding: 0;
} }
@ -600,7 +593,7 @@ a.menu_link_active {
text-overflow: ellipsis; text-overflow: ellipsis;
grid-row: 1; grid-row: 1;
grid-column: 2; grid-column: 2;
padding: 0; padding: 0.375rem 0 0;
} }
.system-page .card-icon { .system-page .card-icon {