Changeset 11985

Timestamp:

07/21/2022 06:03:31 AM (3 years ago)

Author:

dd32

Message:

Make: Replace masonry usage on the make homepage with flexbox css.

This is not a 1:1 replacement and it removes the masonry re-ordering, but masonry.js was affecting a minority of the teams cards and removal makes visual regression testing more viable.

Location:

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-makehome

Files:

• front-page.php (modified) (2 diffs)
• functions.php (modified) (1 diff)
• style.css (modified) (3 diffs)

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-makehome/front-page.php

@@ -8 +8 @@
     <div class="wrapper">
         <h2 class="section-title"><?php _e( 'There are many different ways for you to get involved with WordPress:', 'make-wporg' ); ?></h2>
-        <div class="js-masonry" data-masonry-options='{ "itemSelector": ".make_site" }'>
+        <div class="make-sites">
         <?php
             $sites_query = new WP_Query( 'post_type=make_site&posts_per_page=-1&order=ASC' );
@@ -17 +17 @@
                 $make_site_id = get_post_meta( $post->ID, 'make_site_id', true );
                 $url          = $makesites[ $make_site_id ];
-        ?>
+            ?>
             <article id="site-<?php the_ID(); ?>" <?php post_class(); ?>>
                 <h2>

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-makehome/functions.php

@@ -4 +4 @@
 function make_enqueue_scripts() {
     wp_enqueue_style( 'make-style', get_stylesheet_uri(), array(), filemtime( __DIR__ . '/style.css' ) );
-    wp_enqueue_script( 'masonry' );
 }
 

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-makehome/style.css

@@ -174 +174 @@
 }
 
+section.get-involved .make-sites {
+    display: flex;
+    flex-flow: wrap;
+}
+
 section.get-involved article {
     margin: 10px;
@@ -181 +186 @@
     font-size: 1.5em;
     background: #fff;
-    float: left;
     box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
     -webkit-transition: none 0.4s ease;
@@ -198 +202 @@
     background: #fcfcfc;
     box-shadow: 0 1px 3px rgba( 0, 0, 0, 0.3 );
-}
-
-section.get-involved article:nth-of-type(odd) {
-    clear: left;
 }