Ticket #3117: 3117.diff

new file wc-post-types/inc/schedule.php

@@ +1 @@
+<?php
+
+namespace WordCamp\Post_Types\Schedule;
+
+defined( 'WPINC' ) || die();
+
+
+/*
+ * todo
+ * make sure preserve all the functionality of the existing
+ * implement all the functionality of the new
+ * add length to session ui/save
+ * test and make compatible w/ personalized schedule builder
+ * give people working on https://meta.trac.wordpress.org/ticket/3306 and https://trello.com/c/kLVDRj5s/56-wordcamp-design-templates a heads up about this, since it might be best if they design default styles for it rather than old schedule
+ * gonna need 2016.misc to not have the flag, i ugess just manually remove it
+ */
+
+
+/**
+ * Render the `[schedule]` shortcode using markup and styles for a CSS Grid-based approach.
+ *
+ * @param array $attributes
+ * // todo add extra params
+ *
+ *
+ * @return string
+ */
+function render_grid_schedule( $attributes, $tracks, $sessions, $columns ) {
+        var_dump( $attributes, $tracks, $sessions, $columns );
+
+        ob_start();
+        require_once( dirname( __DIR__ ) . '/views/grid-schedule.php' );
+        return ob_get_clean();
+}

new file wc-post-types/views/grid-schedule.php

@@ +1 @@
+<?php
+
+namespace WordCamp\Post_Types\Schedule;
+
+defined( 'WPINC' ) || die();
+
+/**
+ * todo
+ *
+ * @var array $attributes
+ * @var array $tracks
+ * @var array $sessions
+ * @var array $columns
+ */
+
+/*
+ * todo
+ *
+ * move most css to external file, only put what needs to be generated inside <style>?
+ * rename classes to match v1 schedule, have wordcamp prefix
+ * want sensible default styles that will make schedule look good out of the box, but that each camp can override as they see fit
+ */
+
+?>
+
+<style>
+        /*************************
+         * LAYOUT
+         *************************/
+        body {
+                padding: 50px;
+                counter-reset: session;
+                max-width: 1100px;
+                margin: 0 auto;
+                line-height: 1.5;
+        }
+
+        .track-slot {
+                display: none;
+        }
+        .session {
+                margin-bottom:  1em;
+        }
+
+        @supports( display:grid ) {
+                @media screen and (min-width:700px) {
+                        .schedule {
+                                display: grid;
+                        }
+
+                        /* a background for the sticky tracks */
+                        .schedule::after {
+                                display: block;
+                                content: '';
+                                position: sticky;
+                                top: 0;
+                                grid-column: track-1 / -1;
+                                grid-row: tracks;
+                                z-index: 999;
+                                background-color: rgba(255,255,255,.9);
+                        }
+
+                        .track-slot {
+                                display: block;
+                                padding: 10px 5px 5px;
+                                position: sticky;
+                                top: 0; /* otherwise seeing a gap above in at least Firefox. */
+                                z-index: 1000;
+                        }
+                        .session {
+                                margin: 0;
+                        }
+                }
+        }
+
+        .schedule {
+                grid-gap: 1em;
+                grid-template-rows:
+                        [tracks] auto
+                        [time-0800] 1fr
+                        [time-0830] 1fr
+                        [time-0900] 1fr
+                        [time-0930] 1fr
+                        [time-1000] 1fr
+                        [time-1030] 1fr
+                        [time-1100] 1fr
+                        [time-1130] 1fr
+                        [time-1200] 1fr
+                 /* Note 1:
+                        In this format, gridlines will need to be "named" in 24hr time
+
+                        Note 2: Use "auto" instead of "1fr" for a more compact schedule where height of a slot is not proportional to the session length. Implementing a "compact" shortcode attribute might make sense for this!
+                */
+                ;
+                grid-template-columns:
+                        [times] 4em
+                        [track-1-start] 1fr
+                        [track-1-end track-2-start] 1fr
+                        [track-2-end track-3-start] 1fr
+                        [track-3-end track-4-start] 1fr
+                        [track-4-end]
+                ;
+        }
+
+        /*************************
+         * VISUAL STYLES
+         *************************/
+        .text {
+                max-width: 750px;
+                font-size: 18px;
+                margin: 0 auto 50px;
+        }
+
+        .meta {
+                color: #555;
+                font-style: italic;
+        }
+        .meta a {
+                color: #555;
+        }
+
+        hr {
+                margin: 40px 0;
+        }
+
+        .session {
+                padding: .5em;
+                border-radius: 2px;
+                font-size: 14px;
+        }
+
+        .title,
+        .time-slot {
+                margin: 0;
+                font-size: 1em;
+        }
+
+        body {
+                counter-reset: session-count;
+        }
+        .title::before {
+                counter-increment: session-count;
+                content: 'Session #' counter(session-count) ': ';
+        }
+
+        .track-slot,
+        .time-slot {
+                font-weight: bold;
+                font-size:.75em;
+        }
+
+        span {
+                display: block;
+        }
+
+        .track-many {
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                background: #ccc;
+                color: #000;
+        }
+
+        ins {
+                text-decoration: none;
+                background-color: #ddffdd;
+        }
+
+
+
+        /* these styles won't be in the patch, they'd be custom css for a site */
+        .track-robertson-auditorium-upstairs {
+                background-color: #1259B2;
+                color: #fff;
+        }
+
+        .track-fisher-banquet-room-downstairs {
+                background-color: #687f00;
+                color: #fff;
+        }
+
+        .track-3 {
+                background-color: #544D69;
+                color: #fff;
+        }
+
+        .track-4 {
+                background-color: #c35500;
+                color: #fff;
+        }
+</style>
+
+<div class="schedule">
+        <?php foreach ( $tracks as $track ) : ?>
+                <span class="track-slot" aria-hidden="true" style="grid-column: track-<?php echo esc_attr( $track->slug ); ?>; grid-row: tracks;">
+                        <?php echo esc_html( $track->name ); ?>
+                </span>
+        <?php endforeach; ?>
+        <?php /*
+        <span class="track-slot" aria-hidden="true" style="grid-column: track-2; grid-row: tracks;">Room 2</span>
+        <span class="track-slot" aria-hidden="true" style="grid-column: track-3; grid-row: tracks;">Room 3</span>
+        <span class="track-slot" aria-hidden="true" style="grid-column: track-4; grid-row: tracks;">Room 4</span>
+    */ ?>
+
+
+
+        <h2 class="time-slot" style="grid-column: times; grid-row: time-0800;">8:00am</h2>
+
+        <div class="session session-1 track-1" style="grid-column: track-1; grid-row: time-0800 / time-0900;">
+                <h3 class="title">Talk Title</h3>
+                <span class="time">8:00 - 9:00</span>
+                <span class="track">Track: 1</span>
+                <span class="author">Mike Rofone</span>
+        </div>
+
+        <div class="session session-2 track-2" style="grid-column: track-2-start; grid-row: time-0800 / time-0900;">
+                <h3 class="title">Talk Title</h3>
+                <span class="time">8:00 - 9:00</span>
+                <span class="track">Track: 2</span>
+                <span class="author">Mike Rofone</span>
+        </div>
+
+        <div class="session session-3 track-3" style="grid-column: track-3-start; grid-row: time-0800 / time-0830;">
+                <h3 class="title">Talk Title</h3>
+                <span class="time">8:00 - 8:30</span>
+                <span class="track">Track: 3</span>
+                <span class="author">Mike Rofone</span>
+        </div>
+
+        <div class="session session-4 track-4" style="grid-column: track-4-start; grid-row: time-0800 / time-1000;">
+                <h3 class="title">Talk Title</h3>
+                <span class="time">8:00 - 10:00</span>
+                <span class="track">Track: 2</span>
+                <span class="author">Mike Rofone</span>
+        </div>
+
+        <h2 class="time-slot" style="grid-column: times; grid-row: time-0830;">8:30am</h2>
+
+        <div class="session session-5 track-3" style="grid-column: track-3-start; grid-row: time-0830 / time-1000;">
+                <h3 class="title">Talk Title</h3>
+                <span class="time">8:30 - 10:00</span>
+                <span class="track">Track: 1</span>
+                <span class="author">Mike Rofone</span>
+        </div>
+
+        <h2 class="time-slot" style="grid-column: times; grid-row: time-0900;">9:00am</h2>
+
+        <div class="session session-6 track-1" style="grid-column: track-1-start /track-2-end; grid-row: time-0900 / time-1000;">
+                <h3 class="title">Talk Title</h3>
+                <span class="time">9:00 - 10:00</span>
+                <span class="track">Track: 1</span>
+                <span class="author">Mike Rofone</span>
+        </div>
+
+        <h2 class="time-slot" style="grid-column: times; grid-row: time-1000;">10:00am</h2>
+
+        <div class="session session-7 track-many" style="grid-column: track-1-start / track-4-end; grid-row: time-1000 / time-1030;">
+                <h3 class="title">Take a break!</h3>
+        </div>
+
+        <h2 class="time-slot" style="grid-column: times; grid-row: time-1030;">10:30am</h2>
+
+        <div class="session session-8 track-1" style="grid-column: track-1-start; grid-row: time-1030 / time-1130;">
+                <h3 class="title">Talk Title</h3>
+                <span class="time">10:30 - 11:30</span>
+                <span class="track">Track: 1</span>
+                <span class="author">Mike Rofone</span>
+        </div>
+
+        <div class="session session-9 track-2" style="grid-column: track-2-start; grid-row: time-1030 / time-1230;">
+                <h3 class="title">Talk Title</h3>
+                <span class="time">10:30 - 12:30</span>
+                <span class="track">Track: 2</span>
+                <span class="author">Mike Rofone</span>
+        </div>
+
+        <div class="session session-10 track-4" style="grid-column: track-4-start; grid-row: time-1030 / time-1100;">
+                <h3 class="title">Talk Title</h3>
+                <span class="time">10:30 - 11:0</span>
+                <span class="track">Track: 4</span>
+                <span class="author">Mike Rofone</span>
+        </div>
+
+        <h2 class="time-slot" style="grid-column: times; grid-row: time-1100;">11:00am</h2>
+
+        <div class="session session-11 track-3" style="grid-column: track-3-start; grid-row: time-1100 / time-1130;">
+                <h3 class="title">Talk Title</h3>
+                <span class="time">11:00 - 11:30</span>
+                <span class="track">Track: 3</span>
+                <span class="author">Mike Rofone</span>
+        </div>
+
+        <h2 class="time-slot" style="grid-column: times; grid-row: time-1130;">11:30am</h2>
+
+        <div class="session track-1 track-many" style="grid-column: track-1-start; grid-row: time-1130 / time-1230;">
+                <h3 class="title">Lunch!</h3>
+        </div>
+
+                <div class="session track-3 track-4 track-many" style="grid-column: track-3-start / track-4-end; grid-row: time-1130 / time-1230;">
+                <h3 class="title">Lunch!</h3>
+        </div>
+
+</div>

wc-post-types/wc-post-types.php

@@ -4 +4 @@
  * Plugin Description: Sessions, Speakers, Sponsors and much more.
  */
 
+use WordCamp\Post_Types\Schedule;
+
 require( 'inc/back-compat.php' );
 require_once( 'inc/favorite-schedule-shortcode.php' );
 
@@ -534 +536 @@
                 $sessions                    = get_schedule_sessions( $attr['date'], $tracks_explicitly_specified, $tracks );
                 $columns                     = get_schedule_columns( $tracks, $sessions, $tracks_explicitly_specified );
 
+                if ( ! wcorg_skip_feature( 'css-grid-schedule' ) ) {
+                        require_once( __DIR__ . '/inc/schedule.php' );
+                        return Schedule\render_grid_schedule( $attr, $tracks, $sessions, $columns );
+                }
+
                 $html  = '<table class="wcpt-schedule" border="0">';
                 $html .= '<thead>';
                 $html .= '<tr>';