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.

Sign up for GitHub

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

Jump to bottom

Refactoring to support downstream work in UIDS Base card updates #847

Merged
merged 55 commits into from
Apr 18, 2023
Merged

Refactoring to support downstream work in UIDS Base card updates #847

Show file tree
Hide file tree
Changes from 9 commits
Commits
Show all changes
55 commits
Select commit Hold shift + click to select a range
814d49a
Added grid component for checking out cards in a grid.
pyrello Jan 9, 2023
0a2bddd
Removed flex-wrap and flex widths from media to see if this fixes the…
bspeare Jan 10, 2023
0b0ce40
Merged in '4.x' branch, resolved conflicts.
pyrello Jan 10, 2023
4df84b8
Merged '4.x' branch and resolved conflicts.
pyrello Jan 11, 2023
a35f48a
Moved widescreen class above sm, md, lg sizes to adjust cascade order.
bspeare Jan 20, 2023
9f42cb4
Moved widescreen width to only be set with media--large.
bspeare Jan 20, 2023
4674a39
Adjusting widths again.
bspeare Jan 20, 2023
78d05a8
Unsetting flex behavior for stacked cards.
bspeare Jan 20, 2023
b5849be
Moved media sizes into card component.
bspeare Jan 20, 2023
c69506d
Moved media to left/right layout section.
bspeare Jan 20, 2023
74bd41c
Circle is always padded.
pyrello Jan 20, 2023
4c537c6
Merge branch '4.x' into more_card_updates
pyrello Jan 23, 2023
1b33ca2
Adjusting card media to have large be full-width.
pyrello Jan 24, 2023
09abf40
Added card__body line-height.
bspeare Feb 14, 2023
122c56f
Merge branch '4.x' into more_card_updates
bspeare Feb 14, 2023
c0dd50b
Adjusted border color and added adjustment for bg--black.
bspeare Feb 15, 2023
c979755
Merge branch 'more_card_updates' of github.com:uiowa/uids into more_c…
bspeare Feb 15, 2023
3bda4c0
Adjusted subtitle line-height.
bspeare Feb 15, 2023
a7656db
Merged the '4.x' branch and fixed conflicts.
pyrello Mar 3, 2023
9bf89e8
Added a quick and dirty way of testing backgrounds with cards.
pyrello Mar 6, 2023
440014c
Added background container rule to remove padding if card and backgro…
bspeare Mar 6, 2023
bf889f2
Removed card bottom margin for testing.
bspeare Mar 6, 2023
8e5c38b
Fix circle button background color issues.
GaryRidgway Mar 9, 2023
2373f91
Merge branch '4.x' into more_card_updates
bspeare Mar 10, 2023
3a54af9
Updated default headline style to serif.
bspeare Mar 14, 2023
2a12ad6
Adjusted scope of media styles to be for card only until more work ca…
bspeare Mar 14, 2023
29f124b
Adjusted media auto styles to scope only within small and medium sizes.
bspeare Mar 14, 2023
72e6a62
Adjusted image sizes.
bspeare Mar 14, 2023
efdce66
Moved card-specific media styles to card scss, excepting the media as…
pyrello Mar 14, 2023
24ba192
Trying out a larger small size.
bspeare Mar 14, 2023
f41b7e3
Merge branch 'more_card_updates' of github.com:uiowa/uids into more_c…
bspeare Mar 15, 2023
ee378fc
Adjusted card image sizes.
bspeare Mar 15, 2023
725ae5f
Adjusted media sizes so that if small or medium are selected, then th…
bspeare Mar 16, 2023
b58f60c
Merge branch '4.x' into more_card_updates
bspeare Mar 16, 2023
e212086
Adjusting image sizes after more testing.
bspeare Mar 17, 2023
9fc1c38
Merge branch 'more_card_updates' of github.com:uiowa/uids into more_c…
bspeare Mar 17, 2023
dc86a3e
Added rule from uids_base that unsets card padding if borderless and …
bspeare Mar 17, 2023
c7ef008
Added more media adjustments after testing.
bspeare Mar 17, 2023
2831059
Adjusted min-width back to 150px.
bspeare Mar 20, 2023
c6253c5
Changed max-width from pixel to rems after SiteNow testing.
bspeare Mar 20, 2023
c6887bb
Moved max-width into breakpoint after testing.
bspeare Mar 20, 2023
eff6c90
Adjusted media sizes.
bspeare Mar 21, 2023
53f0052
Moving small back to 9.375 rem.
bspeare Mar 23, 2023
d72749d
Updated .gitignore based on Yarn 2. Added grid updates based on #872.
pyrello Mar 30, 2023
e59febc
More Yarn updates.
pyrello Mar 30, 2023
d0f3a3a
Revert "More Yarn updates."
pyrello Mar 30, 2023
130c820
Let's try updating the node version to match SiteNow.
pyrello Mar 30, 2023
71836eb
Adding specific yarn dependency to make it easier to set up locally f…
pyrello Mar 30, 2023
a70f251
Stripping out some extra stuff that was added that we might not want …
pyrello Mar 30, 2023
9b882cc
Merge branch '4.x' into more_card_updates
pyrello Mar 30, 2023
1882308
Adding this back in because the image was too small.
bspeare Mar 30, 2023
b694de0
Changing these breakpoints to sm.
bspeare Mar 30, 2023
a622167
Scoped these to circle only, we don't want this for square or widescr…
bspeare Apr 3, 2023
e0887b4
Moved button closer to card content.
bspeare Apr 4, 2023
2d12118
Added word-wrap: anywhere to deal with non breaking spaces like Commu…
bspeare Apr 13, 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
41 changes: 39 additions & 2 deletions src/components/card/card.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@
display: flex;
flex-direction: row;
flex-grow: 1;
flex-wrap: wrap;
margin-bottom: 1.6rem;
padding: 2rem;
text-decoration: none;
Expand Down Expand Up @@ -98,6 +97,7 @@
// === Media === //
.card {
// Overrides for shared media classes.

.media {
margin-left: auto;
margin-right: auto;
Expand All @@ -121,6 +121,44 @@
margin-top: -2rem;
margin-bottom: 2rem;
}

.media--small {
@include breakpoint(sm) {
width: 25%;
}
}

.media--medium {
@include breakpoint(sm) {
width: 37.5%;
}
}

.media--large {
@include breakpoint(sm) {
width: 50%;
}
}

&[class*="card--layout"] {
.media--small {
@include breakpoint(sm) {
flex: 0 0 25%;
}
}

.media--medium {
@include breakpoint(sm) {
flex: 0 0 37.5%;
}
}

.media--large {
@include breakpoint(sm) {
flex: 0 0 50%;
}
}
}
pyrello marked this conversation as resolved.
Show resolved Hide resolved
}
// === End: Media === //

Expand Down Expand Up @@ -229,7 +267,6 @@
.card--layout-right {
@include breakpoint(sm) {
display: flex;
flex-wrap: nowrap;
flex-direction: unset;
width: 100%;
margin-bottom: 1.6rem;
Expand Down
25 changes: 0 additions & 25 deletions src/components/media/media.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,29 +22,6 @@
}
}



.media--small {
@include breakpoint(sm) {
flex: 0 0 25%;
width: 25%;
}
}

.media--medium {
@include breakpoint(sm) {
flex: 0 0 37.5%;
width: 37.5%;
}
}

.media--large {
@include breakpoint(sm) {
flex: 0 0 50%;
width: 50%;
}
}

.media--border {
img {
padding: 0.5rem;
Expand Down Expand Up @@ -81,8 +58,6 @@
}

.media--widescreen {
width: 100%;

img,
iframe {
aspect-ratio: 16 / 9;
Expand Down