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

Feature: Search for patterns, toggle grid/list view #329

Merged
merged 11 commits into from
Jul 31, 2024
Prev Previous commit
Next Next commit
Initial style updates
stalgiag committed Jun 17, 2024
commit 11272ba436d8397a076cacdc3f5cce8f1bee74ed
56 changes: 44 additions & 12 deletions content-assets/wai-aria-practices/styles.css
Original file line number Diff line number Diff line change
@@ -105,63 +105,95 @@ ul.tiles {
}
}

li.tile {
Copy link
Contributor

Choose a reason for hiding this comment

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

Seems the Practices page uses the tile classname so this change (and other related css rules) would also affect there

This change:
Screenshot 2024-06-24 at 3 18 11 PM

vs what's on production:
Screenshot 2024-06-24 at 3 17 54 PM

Copy link
Contributor Author

@stalgiag stalgiag Jun 24, 2024

Choose a reason for hiding this comment

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

Wow clutch catch thank you! I obviously didn't realize that it was being used elsewhere. Have been in module land for too long.

My original intent for renaming was just to get away from potentially misleading classes (ie avoid a situation in which a ul class="list" has li class="tile"). I handled the regression with this commit (3e794ee) but if we wanted to take it a step further I would advocate for getting rid of both the "tile" and "pattern" classes in favor of some more generic name for both so that all styling can just be derived from the class of the parent ul across both pages. This isn't essential though.

ul.list {
display: grid;
grid-template-columns: 1fr;
row-gap: 0;
padding: 2em;
background: #ffffff;
border: 1px solid var(--line-grey);
border-radius: 4px;
row-gap: 1em;
}

ul.list img {
width: 42px;
height: auto;
}

li.pattern {
align-self: stretch;
list-style: none;
margin: 0;
padding: 2em 2em 0;
background: #ffffff;
height: 100%;
border: 1px solid var(--line-grey);
border-radius: 4px;
}

li.tile a {
ul.list li.pattern {
border: none;
border-bottom: 1px solid var(--line-grey);
padding: 0.25em 0 0.5em 0;
}

ul.list li.pattern:last-child {
border-bottom: none;
}

li.pattern a {
display: block;
text-decoration: none;
color: var(--wai-green);
}

li.tile a:hover {
li.pattern a:hover {
text-decoration: underline;
}

li.tile a:focus {
li.pattern a:focus {
outline-offset: 8px;
outline-color: #113362;
}

li.tile a:visited {
li.pattern a:visited {
color: var(--wai-green);
}

li.tile h2.tile-name {
li.pattern h2.pattern-name {
margin: 0;
border: none;
display: flex;
align-items: flex-start;
}

li.tile img {
li.pattern img {
margin-right: 1em;
}

@media screen and (max-width: 23em) {
li.tile h2.tile-name {
li.pattern h2.pattern-name {
flex-direction: column;
}
li.tile h2.tile-name span {
li.pattern h2.pattern-name span {
margin-top: 0.5em;
}
}

li.tile .tile-introduction {
li.pattern .pattern-introduction {
float: left;
border-top: 1px solid var(--line-grey);
padding-top: 1em;
margin-top: 1.25em;
}

ul.list .pattern-introduction {
border-top: none;
padding-top: 0;
margin-top: 0;
margin-left: 4em;
}

ul.content-list {
list-style-type: none;
padding: 0 1.5em;
@@ -263,7 +295,7 @@ ul.sidebar-list li a code {
display: inline-block;
}

li .tile-introduction {
li .pattern-introduction {
color: rgb(29, 29, 29);
}