Merge pull request #2637 from owid/misc-touchups

Various small site bugfixes

baker/siteRenderers.tsx

@@ -65,9 +65,6 @@ import {
     getPostBySlug,
     isPostCitable,
     getBlockContent,
-    getPosts,
-    mapGdocsToWordpressPosts,
-    getFullPost,
 } from "../db/wpdb.js"
 import { queryMysql, knexTable } from "../db/db.js"
 import { getPageOverrides, isPageOverridesCitable } from "./pageOverrides.js"
@@ -226,21 +223,7 @@ export const renderPost = async (
 }
 
 export const renderFrontPage = async () => {
-    const wpPosts = await Promise.all(
-        (await getPosts()).map((post) => getFullPost(post, true))
-    )
-    const gdocPosts = await Gdoc.getPublishedGdocs().then(
-        mapGdocsToWordpressPosts
-    )
-    const gdocSlugs = new Set(gdocPosts.map(({ slug }) => slug))
-    const posts = [...gdocPosts]
-    // Only adding each wpPost if there isn't already a gdoc with the same slug,
-    // to make sure we use the most up-to-date metadata
-    for (const wpPost of wpPosts) {
-        if (!gdocSlugs.has(wpPost.slug)) {
-            posts.push(wpPost)
-        }
-    }
+    const posts = await getBlogIndex()
 
     const NUM_FEATURED_POSTS = 6
 
@@ -290,6 +273,10 @@ export const renderFrontPage = async () => {
                     if (post) {
                         return post
                     }
+                    console.log(
+                        "Featured work error: could not find listed post with slug: ",
+                        manuallySetPost.slug
+                    )
                 }
                 return filteredPosts[missingPosts++]
             })

db/wpdb.ts

@@ -751,24 +751,26 @@ export const getFullPost = async (
 })
 
 export const getBlogIndex = memoize(async (): Promise<IndexPost[]> => {
-    // TODO: do not get post content in the first place
-    const wordpressPosts = await getPosts(
-        [WP_PostType.Post],
-        selectHomepagePosts
+    await db.getConnection() // side effect: ensure connection is established
+    const gdocPosts = await Gdoc.getListedGdocs()
+    const wpPosts = await Promise.all(
+        await getPosts([WP_PostType.Post], selectHomepagePosts).then((posts) =>
+            posts.map((post) => getFullPost(post, true))
+        )
     )
 
-    const wordpressPostsCards = await Promise.all(
-        wordpressPosts.map((post) => getFullPost(post, true))
-    )
+    const gdocSlugs = new Set(gdocPosts.map(({ slug }) => slug))
+    const posts = [...mapGdocsToWordpressPosts(gdocPosts)]
 
-    await db.getConnection() // side effect: ensure connection is established
-    const listedGdocs = await Gdoc.getListedGdocs()
+    // Only adding each wpPost if there isn't already a gdoc with the same slug,
+    // to make sure we use the most up-to-date metadata
+    for (const wpPost of wpPosts) {
+        if (!gdocSlugs.has(wpPost.slug)) {
+            posts.push(wpPost)
+        }
+    }
 
-    return orderBy(
-        [...wordpressPostsCards, ...mapGdocsToWordpressPosts(listedGdocs)],
-        (post) => post.date.getTime(),
-        ["desc"]
-    )
+    return orderBy(posts, (post) => post.date.getTime(), ["desc"])
 })
 
 export const mapGdocsToWordpressPosts = (

site/SiteMobileCategory.scss

@@ -7,6 +7,7 @@
         width: 100%;
         align-items: center;
         justify-content: space-between;
+        text-align: left;
         padding: 8px 16px;
         color: $blue-60;
         line-height: 21px;

site/SiteMobileMenu.scss

@@ -43,6 +43,7 @@
 
     .SiteNavigationToggle__caret {
         font-size: 12px;
+        margin-right: 8px;
     }
     .SiteNavigationToggle__dropdown {
         ul {

site/SiteNavigationTopics.scss

@@ -40,6 +40,7 @@
                 background-color: transparent;
                 cursor: pointer;
                 border: none;
+                white-space: break-spaces;
                 // pseudo elements for ensuring continuity of hover between
                 // bordering items while still having a visual gap between an
                 // active element and its adjacent siblings
@@ -125,6 +126,7 @@
         .SiteNavigationTopic {
             list-style-type: none;
             break-inside: avoid-column;
+            white-space: break-spaces;
             @include body-3-medium;
             > a {
                 display: block;

site/gdocs/ArticleBlock.tsx

@@ -78,11 +78,11 @@ const layouts: { [key in Container]: Layouts} = {
         ["sdg-grid"]: "grid col-start-2 span-cols-12 col-lg-start-3 span-lg-cols-10 span-sm-cols-12 col-sm-start-2",
         ["sdg-toc"]: "grid grid-cols-8 col-start-4 span-cols-8 grid-md-cols-10 col-md-start-3 span-md-cols-10 grid-sm-cols-12 span-sm-cols-12 col-sm-start-2",
         ["side-by-side"]: "grid span-cols-12 col-start-2",
-        ["sticky-left-left-column"]: "grid grid-cols-7 span-cols-7 span-md-cols-12 grid-md-cols-12",
-        ["sticky-left-right-column"]: "grid grid-cols-5 span-cols-5 span-md-cols-12 grid-md-cols-12",
+        ["sticky-left-left-column"]: "grid grid-cols-7 span-cols-7 span-md-cols-10 grid-md-cols-10",
+        ["sticky-left-right-column"]: "grid grid-cols-5 span-cols-5 span-md-cols-10 grid-md-cols-10",
         ["sticky-left"]: "grid span-cols-12 col-start-2",
-        ["sticky-right-left-column"]: "grid span-cols-5 grid grid-cols-5 span-md-cols-12 grid-md-cols-12",
-        ["sticky-right-right-column"]: "span-cols-7 span-md-cols-12",
+        ["sticky-right-left-column"]: "grid span-cols-5 grid grid-cols-5 span-md-cols-10 grid-md-cols-10 col-md-start-2 span-sm-cols-12 grid-sm-cols-12 col-sm-start-1",
+        ["sticky-right-right-column"]: "span-cols-7 grid-cols-7 span-md-cols-10 grid-md-cols-10 col-md-start-2 span-sm-cols-12 grid-sm-cols-12 col-sm-start-1",
         ["sticky-right"]: "grid span-cols-12 col-start-2",
         ["text"]: "col-start-5 span-cols-6 col-md-start-3 span-md-cols-10 span-sm-cols-12 col-sm-start-2",
         ["topic-page-intro"]: "grid col-start-2 span-cols-12",

site/gdocs/OwidGdocHeader.tsx

@@ -47,7 +47,7 @@ function OwidArticleHeader({
                 </div>
             ) : null}
             {!!breadcrumbs?.length && (
-                <div className="centered-article-header__breadcrumbs-container col-start-4 span-cols-8 col-md-start-3 span-md-cols-10 col-sm-start-2 span-sm-cols-12">
+                <div className="centered-article-header__breadcrumbs-container col-start-4 span-cols-8 col-md-start-2 span-md-cols-12">
                     <Breadcrumbs
                         items={breadcrumbs}
                         className={`centered-article-header__breadcrumbs breadcrumbs-${breadcrumbColor}`}
@@ -56,10 +56,12 @@ function OwidArticleHeader({
             )}
             <header
                 className={cx(
-                    "centered-article-header align-center grid grid-cols-8 col-start-4 span-cols-8 col-md-start-3 span-md-cols-10 col-sm-start-2 span-sm-cols-12"
+                    "centered-article-header align-center grid",
+                    "grid-cols-8 span-cols-8 col-start-4",
+                    "grid-md-cols-12 span-md-cols-12 col-md-start-2"
                 )}
             >
-                <div className="centered-article-header__title-container col-start-2 span-cols-6">
+                <div className="centered-article-header__title-container col-start-2 span-cols-6 span-md-cols-10 col-md-start-2">
                     {content.supertitle ? (
                         <h3 className="centered-article-header__supertitle span-cols-8">
                             {content.supertitle}
@@ -70,11 +72,11 @@ function OwidArticleHeader({
                     </h1>
                 </div>
                 {content.subtitle ? (
-                    <h2 className="centered-article-header__subtitle col-start-2 span-cols-6">
+                    <h2 className="centered-article-header__subtitle col-start-2 span-cols-6 span-md-cols-10 col-md-start-2">
                         {content.subtitle}
                     </h2>
                 ) : null}
-                <div className="centered-article-header__meta-container col-start-2 span-cols-6 grid grid-cols-2">
+                <div className="centered-article-header__meta-container col-start-2 span-cols-6 span-md-cols-10 col-md-start-2 grid grid-cols-2 ">
                     <div className="span-cols-1 span-sm-cols-2">
                         <div className="centered-article-header__byline">
                             {"By: "}

site/gdocs/centered-article.scss

@@ -30,7 +30,7 @@ $banner-height: 200px;
     left: 0;
     right: 0;
     height: $banner-height;
-    background: $blue-10;
+    background: $amber;
     z-index: -1;
 }
 
@@ -58,6 +58,11 @@ $banner-height: 200px;
     margin: 80px 0 24px;
     min-height: calc($banner-height - 80px);
     padding-top: 48px;
+
+    @include md-down {
+        margin-top: 48px;
+        padding-top: 24px;
+    }
 }
 
 .article-block__text {
@@ -110,6 +115,10 @@ h3.article-block__heading {
 
     img {
         width: 100%;
+
+        &.lightbox-image {
+            cursor: zoom-in;
+        }
     }
 
     .download-png-link {
@@ -133,6 +142,10 @@ h3.article-block__heading {
     text-align: center;
 }
 
+.article-block__chart + .article-block__heading {
+    margin-top: 0;
+}
+
 .article-block__heading + .article-block__heading {
     margin-top: 0;
 }
@@ -183,11 +196,14 @@ h3.article-block__heading.has-supertitle {
         // take up exactly: (number of lines - 1) * line-height
         // in height, effectively, such that the header is always the same height
         // unless the breadcrumbs are longer than a single line.
-        $header-breadcrumb-margin-top: 40px;
-        margin-top: $header-breadcrumb-margin-top;
-        margin-bottom: calc(-1.6em - $header-breadcrumb-margin-top);
-        // lh is a relatively recent CSS unit, so we use ems as a fallback in the rule above
-        margin-bottom: calc(-1lh - $header-breadcrumb-margin-top);
+        --header-breadcrumb-margin-top: 40px;
+
+        @include md-down {
+            --header-breadcrumb-margin-top: 16px;
+        }
+
+        margin-top: var(--header-breadcrumb-margin-top);
+        margin-bottom: calc(-1.6em - var(--header-breadcrumb-margin-top));
 
         font-size: 1rem;
         a {
@@ -219,13 +235,22 @@ h3.article-block__heading.has-supertitle {
         margin-top: 0;
         margin-bottom: 24px;
         color: $blue-90;
+
+        @include md-down {
+            @include h2-bold;
+            margin-top: 0;
+        }
     }
 }
 
 .centered-article-header__subtitle {
     @include subtitle-1;
     margin-top: 0;
     color: $blue-50;
+
+    @include md-down {
+        @include body-1-regular;
+    }
 }
 
 .centered-article-header__meta-container {
@@ -258,6 +283,15 @@ h3.article-block__heading.has-supertitle {
             border-right: 1px solid $blue-10;
         }
     }
+
+    @include sm-only {
+        padding: 16px 0;
+        > div:first-child {
+            border-bottom: 1px solid $blue-10;
+            padding-bottom: 16px;
+            margin-bottom: 16px;
+        }
+    }
 }
 
 .footnote-container,
@@ -451,6 +485,13 @@ h3.article-block__heading.has-supertitle {
     .article-block__explorer {
         margin-top: 0;
     }
+
+    .article-block__chart,
+    .article-block__image {
+        &:last-child {
+            margin-bottom: 0;
+        }
+    }
 }
 
 .article-block__chart,
@@ -643,6 +684,10 @@ h3.article-block__heading.has-supertitle {
 .article-block__sticky-left,
 .article-block__side-by-side {
     margin: 48px 0;
+
+    @include md-down {
+        margin: 0;
+    }
 }
 
 .article-block__prominent-link {