Changeset 11985

Timestamp:

07/21/2022 06:03:31 AM (4 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;
 }