Conversation
git commit -m "Progress on home page—some components still need adjustment."
|
@DrJfrost can we get a description with screenshots and testing notes on this? If it's not ready for review, please make it draft. |
herzog0
force-pushed
the
homepage-componente
branch
from
a693c30 to
fff7b85
Compare
herzog0
force-pushed
the
homepage-componente
branch
from
b4320ee to
1356906
Compare
herzog0
requested review from
jlchilders11
and removed request for
fromagge and
gregjkal
jlchilders11
left a comment
jlchilders11
left a comment
There was a problem hiding this comment.
Couple of small nits, plus a larger conversation on card width design.
| min-height: 299px; | ||
| } | ||
|
|
||
| @media (min-width: 768px) and (max-width: 1024px) { |
There was a problem hiding this comment.
Breakpoint for tablet should be 1279px, not 1024px. This is missing from the base ticket, unfortunately.
| {% include 'v3/includes/_why_boost_cards.html' with why_boost_cards=why_boost_cards %} | ||
| </div> | ||
| <div class="card-masonry-bottom py-large"> | ||
| <div class="item-a"> |
There was a problem hiding this comment.
These top two cards are the same height in the design:
| "a f" | ||
| "d c" | ||
| "e c" | ||
| "e b" |
There was a problem hiding this comment.
Currently, the grid is trying to pull the "b" card down to line up with the bottom of the "e" card, causing extra space to show up.
| } | ||
| } | ||
|
|
||
| @media (max-width: 767px) { |
There was a problem hiding this comment.
This is perhaps a larger design consideration, but on mobile the breakpoint is larger than the max-width of the cards, leading to an awkward appearance in between:
5 participants
Issue: #2125
Summary & Context
Changes
V3HomepageViewand registers the/v3/homepage/URL.v3/homepage.htmltemplate, assembling a comprehensive homepage using existing V3 UI components and a new masonry layout.SharedResourcesclass incore/views.pyto consolidate and share demo content data (e.g., posts, events, install options, testimonials) used byV3ComponentDemoViewandV3HomepageView.V3ComponentDemoViewto utilize the newSharedResourcesclass, removing duplicate data definitions and promoting reusability.v3-homepage.css) andjoin-cardcomponents (join-card.css).base.htmlto_v3_example_section.htmlto improve organization.Please list any potential risks or areas that need extra attention during review/testing
Screenshots
Self-review Checklist
Frontend