Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(tables): preserve table row heights with icons and thumbnails #1674

Merged
merged 25 commits into from
Apr 5, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
25 commits
Select commit Hold shift + click to select a range
adfa635
Split example in two + add example border
hannahiss Nov 28, 2022
d51004c
Merge branch 'main' into main-his-tables-icons-thumbnails
hannahiss Nov 28, 2022
e9ef51c
Merge branch 'main' into main-his-tables-icons-thumbnails
hannahiss Dec 1, 2022
018c4df
Adjust row height for tables containing icons or thumbnails to comply…
hannahiss Dec 1, 2022
ac4000b
Remove info callout for ODS recommendation (see PR https://github.com…
hannahiss Dec 15, 2022
89de3d2
Remove info callout for ODS recommendation (see PR https://github.com…
hannahiss Dec 15, 2022
4bc1777
Remove changes on table-responsive from this PR (See https://github.c…
hannahiss Dec 15, 2022
148add9
Merge branch 'main' into main-his-tables-icons-thumbnails
hannahiss Dec 16, 2022
254e71b
Fix indentation
julien-deramond Dec 19, 2022
7cb670d
Merge branch 'main' into main-his-tables-icons-thumbnails
louismaximepiton Dec 21, 2022
58624cd
Merge branch 'main' into main-his-tables-icons-thumbnails
julien-deramond Dec 26, 2022
0481299
Fix bundlewatch
julien-deramond Dec 26, 2022
fc45a13
Fix rem values
julien-deramond Dec 26, 2022
581de59
Reorder items alphabetically in migration guide note
julien-deramond Dec 26, 2022
559709b
Add break line to split normal and sm vars
julien-deramond Dec 26, 2022
48efe1c
Merge branch 'main' into main-his-tables-icons-thumbnails
hannahiss Jan 6, 2023
25d4a11
Same margins for sm and standard tables. update migration guide. Add …
hannahiss Jan 6, 2023
19e4e63
Add boosted mod
hannahiss Jan 6, 2023
0e05a1f
Merge branch 'main' into main-his-tables-icons-thumbnails
hannahiss Mar 6, 2023
4721637
Merge branch 'main' into main-his-tables-icons-thumbnails
hannahiss Mar 14, 2023
e03ad3c
Merge branch 'main' into main-his-tables-icons-thumbnails
hannahiss Mar 17, 2023
9fa99f0
Change after Franco's review: move icon/thumbnail 1px down (for both …
hannahiss Mar 17, 2023
18ec3ed
Merge branch 'main' into main-his-tables-icons-thumbnails
julien-deramond Mar 30, 2023
53d6b59
Merge branch 'main' into main-his-tables-icons-thumbnails
julien-deramond Apr 4, 2023
f928e8e
Merge branch 'main' into main-his-tables-icons-thumbnails
julien-deramond Apr 5, 2023
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions scss/_tables.scss
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,13 @@
width: $spacer * 2;
max-width: $spacer * 2;
}

// Use negative margins on icons in tables to preserve row height
svg,
img {
margin-top: $table-cell-icon-margin-top;
louismaximepiton marked this conversation as resolved.
Show resolved Hide resolved
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

TBH I was a bit afraid when I read it on how the rendering would be with bigger images. But one can disable the default behavior by doing this so I suppose it's OK: <svg class="... my-0" width="5rem" height="5rem" .../>. Here's the rendering FYI:

Screenshot 2023-04-05 at 08 17 17

margin-bottom: $table-cell-icon-margin-bottom;
}
// End mod
}

Expand Down
2 changes: 2 additions & 0 deletions scss/_variables.scss
Original file line number Diff line number Diff line change
Expand Up @@ -869,6 +869,8 @@ $table-cell-padding-x: $spacer * .5 !default; // Boosted mod
$table-cell-padding-y-sm: .5625rem !default; // Boosted mod
$table-cell-padding-x-sm: $table-cell-padding-x !default; // Boosted mod

$table-cell-icon-margin-top: -.75rem !default; // Boosted mod
$table-cell-icon-margin-bottom: -.625rem !default; // Boosted mod
$table-cell-vertical-align: top !default;
$table-line-height: 1.25 !default; // Boosted mod

Expand Down
Loading