Skip to content

Commit

Permalink
Reintroduce article metadata from leftCol breakpoint upwards on apps (
Browse files Browse the repository at this point in the history 
#10251)

Fixes a bug where the article metadata was visible below this breakpoint but hidden above it. Uses the `ArticleMeta` component from this breakpoint, as the new `ArticleMetaApps` component isn't supported at this width.
  • Loading branch information
@JamieB-gu
JamieB-gu authored Jan 18, 2024
1 parent 9f666c8 commit 068bf70
Show file tree
Hide file tree
Showing 6 changed files with 346 additions and 159 deletions.
82 changes: 56 additions & 26 deletions dotcom-rendering/src/layouts/CommentLayout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -569,32 +569,62 @@ export const CommentLayout = (props: WebProps | AppsProps) => {
<GridItem area="meta" element="aside">
<div css={maxWidth}>
{isApps ? (
<Hide when="above" breakpoint="leftCol">
<ArticleMetaApps
branding={branding}
format={format}
pageId={article.pageId}
webTitle={article.webTitle}
byline={article.byline}
tags={article.tags}
primaryDateline={
article.webPublicationDateDisplay
}
secondaryDateline={
article.webPublicationSecondaryDateDisplay
}
isCommentable={
article.isCommentable
}
discussionApiUrl={
article.config.discussionApiUrl
}
shortUrlId={
article.config.shortUrlId
}
ajaxUrl={article.config.ajaxUrl}
></ArticleMetaApps>
</Hide>
<>
<Hide when="above" breakpoint="leftCol">
<ArticleMetaApps
branding={branding}
format={format}
pageId={article.pageId}
webTitle={article.webTitle}
byline={article.byline}
tags={article.tags}
primaryDateline={
article.webPublicationDateDisplay
}
secondaryDateline={
article.webPublicationSecondaryDateDisplay
}
isCommentable={
article.isCommentable
}
discussionApiUrl={
article.config
.discussionApiUrl
}
shortUrlId={
article.config.shortUrlId
}
ajaxUrl={article.config.ajaxUrl}
></ArticleMetaApps>
</Hide>
<Hide when="below" breakpoint="leftCol">
<ArticleMeta
branding={branding}
format={format}
pageId={article.pageId}
webTitle={article.webTitle}
byline={article.byline}
tags={article.tags}
primaryDateline={
article.webPublicationDateDisplay
}
secondaryDateline={
article.webPublicationSecondaryDateDisplay
}
isCommentable={
article.isCommentable
}
discussionApiUrl={
article.config
.discussionApiUrl
}
shortUrlId={
article.config.shortUrlId
}
ajaxUrl={article.config.ajaxUrl}
/>
</Hide>
</>
) : (
<ArticleMeta
branding={branding}
Expand Down
82 changes: 56 additions & 26 deletions dotcom-rendering/src/layouts/ImmersiveLayout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -596,32 +596,62 @@ export const ImmersiveLayout = (props: WebProps | AppProps) => {
<GridItem area="meta" element="aside">
<div css={maxWidth}>
{isApps ? (
<Hide when="above" breakpoint="leftCol">
<ArticleMetaApps
branding={branding}
format={format}
pageId={article.pageId}
webTitle={article.webTitle}
byline={article.byline}
tags={article.tags}
primaryDateline={
article.webPublicationDateDisplay
}
secondaryDateline={
article.webPublicationSecondaryDateDisplay
}
isCommentable={
article.isCommentable
}
discussionApiUrl={
article.config.discussionApiUrl
}
shortUrlId={
article.config.shortUrlId
}
ajaxUrl={article.config.ajaxUrl}
></ArticleMetaApps>
</Hide>
<>
<Hide when="above" breakpoint="leftCol">
<ArticleMetaApps
branding={branding}
format={format}
pageId={article.pageId}
webTitle={article.webTitle}
byline={article.byline}
tags={article.tags}
primaryDateline={
article.webPublicationDateDisplay
}
secondaryDateline={
article.webPublicationSecondaryDateDisplay
}
isCommentable={
article.isCommentable
}
discussionApiUrl={
article.config
.discussionApiUrl
}
shortUrlId={
article.config.shortUrlId
}
ajaxUrl={article.config.ajaxUrl}
></ArticleMetaApps>
</Hide>
<Hide when="below" breakpoint="leftCol">
<ArticleMeta
branding={branding}
format={format}
pageId={article.pageId}
webTitle={article.webTitle}
byline={article.byline}
tags={article.tags}
primaryDateline={
article.webPublicationDateDisplay
}
secondaryDateline={
article.webPublicationSecondaryDateDisplay
}
isCommentable={
article.isCommentable
}
discussionApiUrl={
article.config
.discussionApiUrl
}
shortUrlId={
article.config.shortUrlId
}
ajaxUrl={article.config.ajaxUrl}
/>
</Hide>
</>
) : (
<ArticleMeta
branding={branding}
Expand Down
89 changes: 62 additions & 27 deletions dotcom-rendering/src/layouts/InteractiveLayout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -514,33 +514,68 @@ export const InteractiveLayout = (props: WebProps | AppsProps) => {
<GridItem area="meta" element="aside">
<div css={maxWidth}>
{isApps ? (
<Hide from="leftCol">
<ArticleMetaApps
branding={branding}
format={format}
pageId={article.pageId}
webTitle={article.webTitle}
byline={article.byline}
tags={article.tags}
primaryDateline={
article.webPublicationDateDisplay
}
secondaryDateline={
article.webPublicationSecondaryDateDisplay
}
isCommentable={
article.isCommentable
}
discussionApiUrl={
article.config
.discussionApiUrl
}
shortUrlId={
article.config.shortUrlId
}
ajaxUrl={article.config.ajaxUrl}
></ArticleMetaApps>
</Hide>
<>
<Hide from="leftCol">
<ArticleMetaApps
branding={branding}
format={format}
pageId={article.pageId}
webTitle={article.webTitle}
byline={article.byline}
tags={article.tags}
primaryDateline={
article.webPublicationDateDisplay
}
secondaryDateline={
article.webPublicationSecondaryDateDisplay
}
isCommentable={
article.isCommentable
}
discussionApiUrl={
article.config
.discussionApiUrl
}
shortUrlId={
article.config
.shortUrlId
}
ajaxUrl={
article.config.ajaxUrl
}
></ArticleMetaApps>
</Hide>
<Hide until="leftCol">
<ArticleMeta
branding={branding}
format={format}
pageId={article.pageId}
webTitle={article.webTitle}
byline={article.byline}
tags={article.tags}
primaryDateline={
article.webPublicationDateDisplay
}
secondaryDateline={
article.webPublicationSecondaryDateDisplay
}
isCommentable={
article.isCommentable
}
discussionApiUrl={
article.config
.discussionApiUrl
}
shortUrlId={
article.config
.shortUrlId
}
ajaxUrl={
article.config.ajaxUrl
}
/>
</Hide>
</>
) : (
<ArticleMeta
branding={branding}
Expand Down
82 changes: 56 additions & 26 deletions dotcom-rendering/src/layouts/PictureLayout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -571,32 +571,62 @@ export const PictureLayout = (props: WebProps | AppsProps) => {
<GridItem area="meta" element="aside">
<div>
{isApps ? (
<Hide from="leftCol">
<ArticleMetaApps
branding={branding}
format={format}
pageId={article.pageId}
webTitle={article.webTitle}
byline={article.byline}
tags={article.tags}
primaryDateline={
article.webPublicationDateDisplay
}
secondaryDateline={
article.webPublicationSecondaryDateDisplay
}
isCommentable={
article.isCommentable
}
discussionApiUrl={
article.config.discussionApiUrl
}
shortUrlId={
article.config.shortUrlId
}
ajaxUrl={article.config.ajaxUrl}
></ArticleMetaApps>
</Hide>
<>
<Hide from="leftCol">
<ArticleMetaApps
branding={branding}
format={format}
pageId={article.pageId}
webTitle={article.webTitle}
byline={article.byline}
tags={article.tags}
primaryDateline={
article.webPublicationDateDisplay
}
secondaryDateline={
article.webPublicationSecondaryDateDisplay
}
isCommentable={
article.isCommentable
}
discussionApiUrl={
article.config
.discussionApiUrl
}
shortUrlId={
article.config.shortUrlId
}
ajaxUrl={article.config.ajaxUrl}
></ArticleMetaApps>
</Hide>
<Hide until="leftCol">
<ArticleMeta
branding={branding}
format={format}
pageId={article.pageId}
webTitle={article.webTitle}
byline={article.byline}
tags={article.tags}
primaryDateline={
article.webPublicationDateDisplay
}
secondaryDateline={
article.webPublicationSecondaryDateDisplay
}
isCommentable={
article.isCommentable
}
discussionApiUrl={
article.config
.discussionApiUrl
}
shortUrlId={
article.config.shortUrlId
}
ajaxUrl={article.config.ajaxUrl}
/>
</Hide>
</>
) : (
<ArticleMeta
branding={branding}
Expand Down
Loading

0 comments on commit 068bf70

Please sign in to comment.