WordPress.org
Get WordPress

Making WordPress.org

Changeset 8923


Ignore:
Timestamp:
06/05/2019 07:10:22 AM (5 years ago)
Author:
tellyworth
Message:

Make home theme: show next meeting time in user's TZ.

This uses the shortcode from [8922] to display the next meeting for each team, with a link to find additional meetings, rather than a single "Weekly" meeting per team. JS is used to convert the time into the user's local time zone. It also links to a filtered list of meetings per team.

Props ck3lee.
Fixes #3078.

Location:
sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-makehome
Files:
3 edited

Legend:

Unmodified
Added
Removed

  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-makehome/archive-meeting.php

    r7794 r8923  
    22
    33<div class="wrapper">
    4     <h2 class="title"><?php _e( 'Upcoming WordPress Meetings', 'make-wporg' ); ?></h2>
     4    <div class="header-section">
     5        <h2 class="title all"><?php _e( 'Upcoming WordPress Meetings', 'make-wporg' ); ?></h2>
     6        <h2 class="title team"><?php _e( 'Upcoming Team Meetings', 'make-wporg' ); ?></h2>
     7        <a class="team" href="/meetings"><?php _e( 'Show meetings for other teams', 'make-wporg' ); ?></a>
     8    </div>
    59<table class="schedule">
    610    <thead>
    … …  
    112116            }
    113117        }
     118
     119        // Allow client side filtering using # in url
     120        var hash = window.location.hash.replace('#','');
     121        if (hash) {
     122            var rowsToRemove = $('.schedule').find('tr td:nth-child(1)').filter(function() {
     123                var reg = new RegExp(hash, "i");
     124                return !reg.test($(this).text());
     125            });
     126
     127            for (var i = 0; i < rowsToRemove.length; i++) {
     128                $(rowsToRemove[i]).parent().remove();
     129            }
     130
     131            $('.header-section').find('.team').show();
     132        }
     133        else {
     134            $('.header-section').find('.all').show();
     135        }
     136
     137        // avoid page flickers on load
     138        $('.schedule').show();
    114139    });
    115140    </script>

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

    r2225 r8923  
    99        <h2 class="section-title"><?php _e( 'There are many different ways for you to get involved with WordPress:', 'make-wporg' ); ?></h2>
    1010        <div class="js-masonry" data-masonry-options='{ "itemSelector": ".make_site" }'>
    11         <?php 
     11        <?php
    1212            $sites_query = new WP_Query( 'post_type=make_site&posts_per_page=-1&order=ASC' );
    1313            $makesites = make_site_get_network_sites();
    1414        ?>
    15         <?php while( $sites_query->have_posts() ) : $sites_query->the_post(); ?>
    16         <?php
    17             $make_site_id = get_post_meta( $post->ID, 'make_site_id', true );
    18             $url = $makesites[$make_site_id];
    19         ?> 
     15        <?php while ( $sites_query->have_posts() ) : $sites_query->the_post(); ?>
     16            <?php
     17                $make_site_id = get_post_meta( $post->ID, 'make_site_id', true );
     18                $url          = $makesites[ $make_site_id ];
     19        ?>
    2020            <article id="site-<?php the_ID(); ?>" <?php post_class(); ?>>
    2121                <h2>
    2222                    <?php if ( $url ) : ?>
    23                         <a href="<?php echo esc_url( $url ); ?>"><?php the_title(); ?></a>
     23                        <a
     24                            title="<?php printf( esc_attr( 'Learn more about %s.', 'make-wporg' ), esc_html( get_the_title() ) ); ?>"
     25                            href="<?php echo esc_url( $url ); ?>"
     26                        ><?php the_title(); ?></a>
    2427                    <?php else : ?>
    2528                        <?php the_title(); ?>
    2629                    <?php endif; ?>
    2730                </h2>
    28                
     31
    2932                <div class="team-description">
    3033                    <?php the_content(); ?>
    31                     <?php if ( $url ) : ?>
    32                         <p><a href="<?php echo esc_url( $url ); ?>"><?php printf( __( 'Learn more about %s &raquo;', 'make-wporg' ), get_the_title() ); ?></a></p>
    33                     <?php endif; ?>
    3434                </div>
    35                
    36                 <?php  if ( '1' == get_post_meta( get_the_ID(), 'weekly_meeting', true ) ) : ?>
    37                     <small>
    38                         <p><?php printf( __( 'Weekly chats: %s', 'make-wporg' ), get_post_meta( get_the_ID(), 'weekly_meeting_when', true ) ); ?></p>
    39                         <p><?php echo get_post_meta( get_the_ID(), 'weekly_meeting_where', true ); ?></p>
    40                     </small>
    41                 <?php endif; /**/ ?>
     35
     36                <div class="team-meeting">
     37                    <?php
     38                        echo do_shortcode( sprintf( '[meeting_time team="%s"][/meeting_time]', $post->post_title ) );
     39                    ?>
     40                </div>
    4241            </article>
    4342        <?php endwhile; ?>
    … …  
    4645</section>
    4746
     47<script type="text/javascript">
     48
     49    var parse_date = function (text) {
     50        var m = /^([0-9]{4})-([0-9]{2})-([0-9]{2})T([0-9]{2}):([0-9]{2}):([0-9]{2})\+00:00$/.exec(text);
     51        var d = new Date();
     52        d.setUTCFullYear(+m[1]);
     53        d.setUTCDate(+m[3]);
     54        d.setUTCMonth(+m[2]-1);
     55        d.setUTCHours(+m[4]);
     56        d.setUTCMinutes(+m[5]);
     57        d.setUTCSeconds(+m[6]);
     58        return d;
     59    }
     60    var format_time = function (d) {
     61        return d.toLocaleTimeString(navigator.language, {weekday: 'long', hour: '2-digit', minute: '2-digit'});
     62    }
     63
     64    var nodes = document.getElementsByTagName('time');
     65    for (var i=0; i<nodes.length; ++i) {
     66        var node = nodes[i];
     67        if (node.className === 'date') {
     68            var d = parse_date(node.getAttribute('date-time'));
     69            if (d) {
     70                node.textContent = format_time(d);
     71            }
     72        }
     73    }
     74</script>
    4875<?php get_footer(); ?>

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

    r8478 r8923  
    204204}
    205205
    206 section.get-involved article h2:before {
     206section.get-involved article h2 a:before {
    207207    font-family: 'dashicons';
    208208    content: '\f109';
    … …  
    215215}
    216216
    217 section.get-involved article.make-core          h2:before { content: "\f475"; }
    218 section.get-involved article.make-design        h2:before { content: "\f309"; }
    219 section.get-involved article.make-mobile        h2:before { content: "\f470"; }
    220 section.get-involved article.make-accessibility h2:before { content: "\f483"; }
    221 section.get-involved article.make-polyglots     h2:before { content: '\f326'; }
    222 section.get-involved article.make-support       h2:before { content: "\f125"; }
    223 section.get-involved article.make-themes        h2:before { content: '\f100'; }
    224 section.get-involved article.make-plugins       h2:before { content: '\f106'; }
    225 section.get-involved article.make-docs          h2:before { content: '\f105'; }
    226 section.get-involved article.make-community     h2:before { content: '\f307'; }
    227 section.get-involved article.make-meta          h2:before { content: '\f325'; }
    228 section.get-involved article.make-training      h2:before { content: '\f118'; }
    229 section.get-involved article.make-flow          h2:before { content: '\f115'; }
    230 section.get-involved article.make-tv            h2:before { content: '\f235'; }
    231 section.get-involved article.make-marketing     h2:before { content: '\f130'; }
    232 section.get-involved article.make-cli           h2:before { content: '\f345'; }
    233 section.get-involved article.make-hosting       h2:before { content: '\f176'; }
    234 section.get-involved article.make-tide          h2:before { content: '\f10d'; }
     217section.get-involved article.make-core          h2 a:before { content: "\f475"; }
     218section.get-involved article.make-mobile        h2 a:before { content: "\f470"; }
     219section.get-involved article.make-design        h2 a:before { content: "\f309"; }
     220section.get-involved article.make-accessibility h2 a:before { content: "\f483"; }
     221section.get-involved article.make-polyglots     h2 a:before { content: '\f326'; }
     222section.get-involved article.make-support       h2 a:before { content: "\f125"; }
     223section.get-involved article.make-themes        h2 a:before { content: '\f100'; }
     224section.get-involved article.make-plugins       h2 a:before { content: '\f106'; }
     225section.get-involved article.make-docs          h2 a:before { content: '\f105'; }
     226section.get-involved article.make-community     h2 a:before { content: '\f307'; }
     227section.get-involved article.make-meta          h2 a:before { content: '\f325'; }
     228section.get-involved article.make-training      h2 a:before { content: '\f118'; }
     229section.get-involved article.make-flow          h2 a:before { content: '\f115'; }
     230section.get-involved article.make-tv            h2 a:before { content: '\f235'; }
     231section.get-involved article.make-marketing     h2 a:before { content: '\f130'; }
     232section.get-involved article.make-cli           h2 a:before { content: '\f345'; }
     233section.get-involved article.make-hosting       h2 a:before { content: '\f176'; }
     234section.get-involved article.make-tide          h2 a:before { content: '\f10d'; }
    235235
    236236section.get-involved article.featured-group h2:after {
    … …  
    244244section.get-involved article h2 a {
    245245    font-weight: 600;
    246     color: #444444;
     246}
     247
     248section.get-involved article h2 a {
     249    font-weight: 600;
    247250}
    248251
    … …  
    253256}
    254257
    255 section.get-involved article small {
     258div.team-meeting {
    256259    display: block;
    257260    font-size: 0.8em;
    258261    font-style: italic;
    259     opacity: 0.5;
     262    opacity: 0.75;
    260263    padding-top: 0.5em;
    261264}
    262265
    263 section.get-involved article small p {
     266section.get-involved article .team-meeting {
    264267    line-height: 1.5;
    265268}
    … …  
    305308    background-color: white;
    306309}
    307 h2.title {
     310
     311.header-section{
    308312    margin: 30px 10px;
     313    font-size: 14px;
     314}
     315.header-section h2.title {
    309316    font-size: 36px;
    310317    font-weight: 300;
    311318    line-height: 1.3;
    312319}
     320
     321.header-section * {
     322    display: none;
     323}
     324
    313325table.schedule {
     326  /* table is set to show after JS is completed to avoid fickering */
     327  display: none;
    314328  width: 100%;
    315329  margin: 30px 10px;
Note: See TracChangeset for help on using the changeset viewer.