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

PR: Improve dividers between cards on mobile #90229

Merged
merged 15 commits into from
May 4, 2024
Merged

PR: Improve dividers between cards on mobile #90229

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
749a2ad
First pass
davemart-in May 2, 2024
c4a05f5
irst pass
davemart-in May 2, 2024
0696867
Merge branch 'fix/reader-mobile-dividers' of github.com:Automattic/wp…
davemart-in May 3, 2024
dfe963d
Fixed issue with search header
davemart-in May 3, 2024
5df0ba6
Fixed section headers
davemart-in May 3, 2024
7ffd179
Update style.scss
davemart-in May 3, 2024
4523aab
Fixed sites tab headers
davemart-in May 3, 2024
045e775
Refactored a number of things
davemart-in May 3, 2024
7107bb3
add style to prop interface type
Addison-Stavlo May 3, 2024
5964b7b
Likes section header tweak
davemart-in May 4, 2024
d7eeb85
Conversations header section tweak
davemart-in May 4, 2024
d6d7923
Fixed back buttons
davemart-in May 4, 2024
f9c4a0f
Fixed comments padding
davemart-in May 4, 2024
7babaf8
Fixed tag stream header lack of padding
davemart-in May 4, 2024
8b27f5c
Fixed A8c section header padding
davemart-in May 4, 2024
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
4 changes: 4 additions & 0 deletions client/blocks/conversations/list.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,9 @@
.conversations__comment-list {
cursor: initial; // override style from .card.is-clickable

@include breakpoint-deprecated( "<660px" ) {
margin: 0 16px;
}
}

.conversations__comment-list-ul {
Expand Down
8 changes: 8 additions & 0 deletions client/blocks/reader-feed-header/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,10 @@
display: flex;
margin-bottom: 16px;
z-index: z-index(".reader-feed-header", ".reader-feed-header__site");

@include breakpoint-deprecated( "<660px" ) {
margin-bottom: 16px;
}
}

.reader-feed-header.is-wide-display .reader-feed-header__site {
Expand Down Expand Up @@ -96,6 +100,10 @@
font-size: $font-body-small;
margin-bottom: 12px;
}

@include breakpoint-deprecated( "<660px" ) {
margin: 0 16px;
}
}

.reader-feed-header .card {
Expand Down
2 changes: 1 addition & 1 deletion client/blocks/reader-post-actions/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
margin: 10px 0 0;

@include breakpoint-deprecated( "<660px" ) {
justify-content: space-evenly;
justify-content: space-around;
}
}

Expand Down
12 changes: 10 additions & 2 deletions client/blocks/reader-post-card/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@
}

.reader-post-card.card {
border-bottom: 5px solid var(--color-neutral-0);
border-bottom: 5px solid var(--color-neutral-5);
border-radius: 6px; /* stylelint-disable-line scales/radii */
box-shadow: rgba(0, 0, 0, 0.05) 0 0 0 1px inset;
margin: 0;
Expand Down Expand Up @@ -253,6 +253,10 @@
.comments__form {
margin-top: 0;
}

@include breakpoint-deprecated( "<660px" ) {
margin: 24px 0 0;
}
}
}

Expand Down Expand Up @@ -289,6 +293,10 @@
border-top: none;
margin: 20px 0 0 10px;
padding-top: 0;

@include breakpoint-deprecated( "<660px" ) {
margin: 20px 0 0;
}
}
}

Expand Down Expand Up @@ -531,7 +539,7 @@

@include breakpoint-deprecated( "<660px" ) {
.reader-post-card__post {
margin-left: 0;
margin: 0;
}
}

Expand Down
4 changes: 0 additions & 4 deletions client/blocks/reader-subscription-list-item/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,10 +45,6 @@
flex-direction: row;
font-size: $font-body-small;
padding: 15px 0;

@include breakpoint-deprecated( "<660px" ) {
margin: 0 15px;
}
}

.reader-subscription-list-item__site-url,
Expand Down
3 changes: 3 additions & 0 deletions client/components/navigation-header/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,12 +31,14 @@ interface Props {
subtitle?: string | ReactNode;
screenReader?: string | ReactNode;
screenOptionsTab?: string;
style?: object;
}

const NavigationHeader = React.forwardRef< HTMLElement, Props >( ( props, ref ) => {
const {
id,
className,
style,
children,
navigationItems = [],
mobileItem,
Expand All @@ -54,6 +56,7 @@ const NavigationHeader = React.forwardRef< HTMLElement, Props >( ( props, ref )
'navigation-header',
screenOptionsTab && children ? 'navigation-header__screen-options-tab' : ''
) }
style={ style }
ref={ ref }
>
<Container>
Expand Down
4 changes: 4 additions & 0 deletions client/components/search-card/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,4 +9,8 @@
.stream__right-column .search-card.card {
max-width: 270px;
margin-left: 0;

@include breakpoint-deprecated( "<660px" ) {
max-width: unset;
}
}
5 changes: 5 additions & 0 deletions client/layout/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -409,12 +409,17 @@ body.is-mobile-app-view {
}
.section-header.card {
box-shadow: none;
margin-bottom: 24px;
padding: 0;

.section-header__label-text {
font-size: 1.25rem;
font-weight: 500;
line-height: 26px;
}

@include breakpoint-deprecated( "<660px" ) {
margin: 0 16px;
}
}
}
2 changes: 1 addition & 1 deletion client/reader/conversations/stream.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
margin: 0 auto;
max-width: 600px;
@media only screen and (max-width: 660px) {
padding: 30px 0 0 30px;
padding: 30px 16px 0 16px;
}
}

Expand Down
5 changes: 1 addition & 4 deletions client/reader/discover/discover-navigation.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,6 @@
&.reader-dual-column {
max-width: 968px; // Max width of dual column reader stream.
}
@media only screen and (max-width: 660px) {
padding: 30px 0 0 30px;
}
}

.discover-stream-navigation {
Expand All @@ -21,7 +18,7 @@
margin-bottom: 0;
}
@media only screen and (max-width: 660px) {
margin: 0 30px -24px;
margin: 0 16px -24px;
}

.discover-stream-navigation__left-button-wrapper,
Expand Down
1 change: 1 addition & 0 deletions client/reader/following/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@
}

@media (max-width: 660px) {
margin: 0 16px;
.navigation-header__main {
min-height: auto;
}
Expand Down
2 changes: 1 addition & 1 deletion client/reader/liked-stream/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
margin: 0 auto;
max-width: 600px;
@media only screen and (max-width: 660px) {
padding: 30px 30px 0 30px;
padding: 30px 16px 0;

.navigation-header__main {
min-height: auto;
Expand Down
4 changes: 4 additions & 0 deletions client/reader/list-stream/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,10 @@
.navigation-header {
margin: 0 auto;
padding: 0 0 16px 0;

@include breakpoint-deprecated( "<660px" ) {
padding: 0 16px 16px;
}
}
}

Expand Down
7 changes: 2 additions & 5 deletions client/reader/search-stream/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -173,13 +173,10 @@ class SearchStream extends React.Component {
return (
<div>
<DocumentHead title={ documentTitle } />
<div
className="search-stream__fixed-area"
style={ { width: this.props.width } }
ref={ this.handleFixedAreaMounted }
>
davemart-in marked this conversation as resolved.
Show resolved Hide resolved
<div className="search-stream__fixed-area" ref={ this.handleFixedAreaMounted }>
<NavigationHeader
title={ translate( 'Search' ) }
style={ { width: this.props.width } }
subtitle={ translate( 'Search for specific topics, authors, or blogs.' ) }
/>
<CompactCard className="search-stream__input-card">
Expand Down
11 changes: 11 additions & 0 deletions client/reader/search-stream/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,9 @@
margin: 0 auto;
padding: 16px 0 16px 0;
}
@include breakpoint-deprecated( "<660px" ) {
padding: 0 16px; // Intentionally padding, not margin
}
}

// .has-header-section only applies for logged out views
Expand Down Expand Up @@ -64,6 +67,9 @@
z-index: 20;
-webkit-font-smoothing: subpixel-antialiased; // Fixes fixed elements text aliasing in Safari

@include breakpoint-deprecated( "<660px" ) {
width: calc(100% - 32px);
}
@include breakpoint-deprecated( ">660px" ) {
padding-top: 30px;
}
Expand Down Expand Up @@ -355,6 +361,11 @@

.search-stream__single-column-results .reader-infinite-stream__row-wrapper {
margin-top: 20px;

@include breakpoint-deprecated( "<660px" ) {
margin: 20px 16px 0;
width: calc(100% - 32px) !important;
}
}

.search-stream__single-column-results .reader-subscription-list-item__options {
Expand Down
25 changes: 25 additions & 0 deletions client/reader/stream/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -263,6 +263,10 @@
padding: 16px 0 32px;
border-bottom: 1px solid #e9e9ea;

@include breakpoint-deprecated( "<660px" ) {
padding: 16px 16px 32px;
}

+ .reader-post-card {
margin-top: 16px;
}
Expand Down Expand Up @@ -631,6 +635,10 @@
font-family: Recoleta, "Noto Serif", Georgia, "Times New Roman", Times, serif;
}

@include breakpoint-deprecated( "<660px" ) {
margin: 0 16px;
}

@include break-medium {
.app-promo__qr-code {
margin: -20px 0 0;
Expand Down Expand Up @@ -855,6 +863,14 @@
.reader-feed-header__seen-button {
margin-bottom: 24px;
}

@include breakpoint-deprecated( "<660px" ) {
margin: 24px 16px 0;

h2 {
margin: 16px 0;
}
}
}

// Posts and Sites tabbed headers
Expand All @@ -878,6 +894,11 @@
margin-top: 60px;
padding-bottom: 0;

@include breakpoint-deprecated( "<660px" ) {
margin: 0 16px;
width: calc(100% - 32px);
}

@include breakpoint-deprecated( ">480px" ) {
height: 58px;
}
Expand Down Expand Up @@ -948,6 +969,10 @@
margin: 0;
}

@include breakpoint-deprecated( "<660px" ) {
margin: 0 16px;
}

.blogging-prompt__menu {
display: none;
}
Expand Down
8 changes: 7 additions & 1 deletion client/reader/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
.is-reader-page .search-stream__with-sites.main {
margin: 0 auto;
@include breakpoint-deprecated( "<660px" ) {
margin: 16px;
margin: 16px 0;
}
}

Expand Down Expand Up @@ -364,6 +364,12 @@
margin-top: 0;
}

.search-stream__single-column-results .reader-tag-sidebar-recommended-sites {
@include breakpoint-deprecated( "<660px" ) {
margin: 36px 16px 0;
}
}

.layout.has-header-section.is-section-reader {
.layout__header-section {
color: var(--studio-white);
Expand Down
21 changes: 17 additions & 4 deletions client/reader/tag-stream/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,10 @@
.navigation-header {
margin: 0 auto;
padding: 0 0 16px 0;

@include breakpoint-deprecated( "<660px" ) {
padding: 0 16px 16px;
}
}
}

Expand All @@ -35,7 +39,7 @@
}

.reader__content .tag-stream__header {
margin-bottom: 0;
margin-bottom: 24px;
}

.reader__content .tag-stream__header.has-description {
Expand All @@ -61,9 +65,8 @@
justify-content: space-between;
align-items: flex-start;

@include break-small {
padding-top: 20px;
padding-bottom: 20px;
@include breakpoint-deprecated( "<660px" ) {
margin: 0 16px;
}
}

Expand Down Expand Up @@ -92,6 +95,16 @@
.button.header-cake__back {
padding: 0;
}

@include breakpoint-deprecated( "<660px" ) {
margin: 32px 16px;
}
}

.is-reader-page .reader-feed-header.has-back-button .card.header-cake {
@include breakpoint-deprecated( "<660px" ) {
margin: 32px 0;
}
}

.is-reader-page .main .tag-stream__empty-content {
Expand Down
Loading