WordPress.org
Get WordPress

Making WordPress.org

Ticket #3117: 3117.diff

File 3117.diff, 10.3 KB (added by iandunn, 7 years ago)

Render grid schedule based on feature flag, copy static markup/css from codepen

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

    diff --git wc-post-types/inc/schedule.php wc-post-types/inc/schedule.php
new file mode 100644
index 0000000..c11a073
    - +  
     1<?php
     2
     3namespace WordCamp\Post_Types\Schedule;
     4
     5defined( 'WPINC' ) || die();
     6
     7
     8/*
     9 * todo
     10 * make sure preserve all the functionality of the existing
     11 * implement all the functionality of the new
     12 * add length to session ui/save
     13 * test and make compatible w/ personalized schedule builder
     14 * 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
     15 * gonna need 2016.misc to not have the flag, i ugess just manually remove it
     16 */
     17
     18
     19/**
     20 * Render the `[schedule]` shortcode using markup and styles for a CSS Grid-based approach.
     21 *
     22 * @param array $attributes
     23 * // todo add extra params
     24 *
     25 *
     26 * @return string
     27 */
     28function render_grid_schedule( $attributes, $tracks, $sessions, $columns ) {
     29        var_dump( $attributes, $tracks, $sessions, $columns );
     30
     31        ob_start();
     32        require_once( dirname( __DIR__ ) . '/views/grid-schedule.php' );
     33        return ob_get_clean();
     34}

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

    diff --git wc-post-types/views/grid-schedule.php wc-post-types/views/grid-schedule.php
new file mode 100644
index 0000000..b2296d0
    - +  
     1<?php
     2
     3namespace WordCamp\Post_Types\Schedule;
     4
     5defined( 'WPINC' ) || die();
     6
     7/**
     8 * todo
     9 *
     10 * @var array $attributes
     11 * @var array $tracks
     12 * @var array $sessions
     13 * @var array $columns
     14 */
     15
     16/*
     17 * todo
     18 *
     19 * move most css to external file, only put what needs to be generated inside <style>?
     20 * rename classes to match v1 schedule, have wordcamp prefix
     21 * want sensible default styles that will make schedule look good out of the box, but that each camp can override as they see fit
     22 */
     23
     24?>
     25
     26<style>
     27        /*************************
     28         * LAYOUT
     29         *************************/
     30        body {
     31                padding: 50px;
     32                counter-reset: session;
     33                max-width: 1100px;
     34                margin: 0 auto;
     35                line-height: 1.5;
     36        }
     37
     38        .track-slot {
     39                display: none;
     40        }
     41        .session {
     42                margin-bottom:  1em;
     43        }
     44
     45        @supports( display:grid ) {
     46                @media screen and (min-width:700px) {
     47                        .schedule {
     48                                display: grid;
     49                        }
     50
     51                        /* a background for the sticky tracks */
     52                        .schedule::after {
     53                                display: block;
     54                                content: '';
     55                                position: sticky;
     56                                top: 0;
     57                                grid-column: track-1 / -1;
     58                                grid-row: tracks;
     59                                z-index: 999;
     60                                background-color: rgba(255,255,255,.9);
     61                        }
     62
     63                        .track-slot {
     64                                display: block;
     65                                padding: 10px 5px 5px;
     66                                position: sticky;
     67                                top: 0; /* otherwise seeing a gap above in at least Firefox. */
     68                                z-index: 1000;
     69                        }
     70                        .session {
     71                                margin: 0;
     72                        }
     73                }
     74        }
     75
     76        .schedule {
     77                grid-gap: 1em;
     78                grid-template-rows:
     79                        [tracks] auto
     80                        [time-0800] 1fr
     81                        [time-0830] 1fr
     82                        [time-0900] 1fr
     83                        [time-0930] 1fr
     84                        [time-1000] 1fr
     85                        [time-1030] 1fr
     86                        [time-1100] 1fr
     87                        [time-1130] 1fr
     88                        [time-1200] 1fr
     89                 /* Note 1:
     90                        In this format, gridlines will need to be "named" in 24hr time
     91
     92                        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!
     93                */
     94                ;
     95                grid-template-columns:
     96                        [times] 4em
     97                        [track-1-start] 1fr
     98                        [track-1-end track-2-start] 1fr
     99                        [track-2-end track-3-start] 1fr
     100                        [track-3-end track-4-start] 1fr
     101                        [track-4-end]
     102                ;
     103        }
     104
     105        /*************************
     106         * VISUAL STYLES
     107         *************************/
     108        .text {
     109                max-width: 750px;
     110                font-size: 18px;
     111                margin: 0 auto 50px;
     112        }
     113
     114        .meta {
     115                color: #555;
     116                font-style: italic;
     117        }
     118        .meta a {
     119                color: #555;
     120        }
     121
     122        hr {
     123                margin: 40px 0;
     124        }
     125
     126        .session {
     127                padding: .5em;
     128                border-radius: 2px;
     129                font-size: 14px;
     130        }
     131
     132        .title,
     133        .time-slot {
     134                margin: 0;
     135                font-size: 1em;
     136        }
     137
     138        body {
     139                counter-reset: session-count;
     140        }
     141        .title::before {
     142                counter-increment: session-count;
     143                content: 'Session #' counter(session-count) ': ';
     144        }
     145
     146        .track-slot,
     147        .time-slot {
     148                font-weight: bold;
     149                font-size:.75em;
     150        }
     151
     152        span {
     153                display: block;
     154        }
     155
     156        .track-many {
     157                display: flex;
     158                justify-content: center;
     159                align-items: center;
     160                background: #ccc;
     161                color: #000;
     162        }
     163
     164        ins {
     165                text-decoration: none;
     166                background-color: #ddffdd;
     167        }
     168
     169
     170
     171        /* these styles won't be in the patch, they'd be custom css for a site */
     172        .track-robertson-auditorium-upstairs {
     173                background-color: #1259B2;
     174                color: #fff;
     175        }
     176
     177        .track-fisher-banquet-room-downstairs {
     178                background-color: #687f00;
     179                color: #fff;
     180        }
     181
     182        .track-3 {
     183                background-color: #544D69;
     184                color: #fff;
     185        }
     186
     187        .track-4 {
     188                background-color: #c35500;
     189                color: #fff;
     190        }
     191</style>
     192
     193<div class="schedule">
     194        <?php foreach ( $tracks as $track ) : ?>
     195                <span class="track-slot" aria-hidden="true" style="grid-column: track-<?php echo esc_attr( $track->slug ); ?>; grid-row: tracks;">
     196                        <?php echo esc_html( $track->name ); ?>
     197                </span>
     198        <?php endforeach; ?>
     199        <?php /*
     200        <span class="track-slot" aria-hidden="true" style="grid-column: track-2; grid-row: tracks;">Room 2</span>
     201        <span class="track-slot" aria-hidden="true" style="grid-column: track-3; grid-row: tracks;">Room 3</span>
     202        <span class="track-slot" aria-hidden="true" style="grid-column: track-4; grid-row: tracks;">Room 4</span>
     203    */ ?>
     204
     205
     206
     207        <h2 class="time-slot" style="grid-column: times; grid-row: time-0800;">8:00am</h2>
     208
     209        <div class="session session-1 track-1" style="grid-column: track-1; grid-row: time-0800 / time-0900;">
     210                <h3 class="title">Talk Title</h3>
     211                <span class="time">8:00 - 9:00</span>
     212                <span class="track">Track: 1</span>
     213                <span class="author">Mike Rofone</span>
     214        </div>
     215
     216        <div class="session session-2 track-2" style="grid-column: track-2-start; grid-row: time-0800 / time-0900;">
     217                <h3 class="title">Talk Title</h3>
     218                <span class="time">8:00 - 9:00</span>
     219                <span class="track">Track: 2</span>
     220                <span class="author">Mike Rofone</span>
     221        </div>
     222
     223        <div class="session session-3 track-3" style="grid-column: track-3-start; grid-row: time-0800 / time-0830;">
     224                <h3 class="title">Talk Title</h3>
     225                <span class="time">8:00 - 8:30</span>
     226                <span class="track">Track: 3</span>
     227                <span class="author">Mike Rofone</span>
     228        </div>
     229
     230        <div class="session session-4 track-4" style="grid-column: track-4-start; grid-row: time-0800 / time-1000;">
     231                <h3 class="title">Talk Title</h3>
     232                <span class="time">8:00 - 10:00</span>
     233                <span class="track">Track: 2</span>
     234                <span class="author">Mike Rofone</span>
     235        </div>
     236
     237        <h2 class="time-slot" style="grid-column: times; grid-row: time-0830;">8:30am</h2>
     238
     239        <div class="session session-5 track-3" style="grid-column: track-3-start; grid-row: time-0830 / time-1000;">
     240                <h3 class="title">Talk Title</h3>
     241                <span class="time">8:30 - 10:00</span>
     242                <span class="track">Track: 1</span>
     243                <span class="author">Mike Rofone</span>
     244        </div>
     245
     246        <h2 class="time-slot" style="grid-column: times; grid-row: time-0900;">9:00am</h2>
     247
     248        <div class="session session-6 track-1" style="grid-column: track-1-start /track-2-end; grid-row: time-0900 / time-1000;">
     249                <h3 class="title">Talk Title</h3>
     250                <span class="time">9:00 - 10:00</span>
     251                <span class="track">Track: 1</span>
     252                <span class="author">Mike Rofone</span>
     253        </div>
     254
     255        <h2 class="time-slot" style="grid-column: times; grid-row: time-1000;">10:00am</h2>
     256
     257        <div class="session session-7 track-many" style="grid-column: track-1-start / track-4-end; grid-row: time-1000 / time-1030;">
     258                <h3 class="title">Take a break!</h3>
     259        </div>
     260
     261        <h2 class="time-slot" style="grid-column: times; grid-row: time-1030;">10:30am</h2>
     262
     263        <div class="session session-8 track-1" style="grid-column: track-1-start; grid-row: time-1030 / time-1130;">
     264                <h3 class="title">Talk Title</h3>
     265                <span class="time">10:30 - 11:30</span>
     266                <span class="track">Track: 1</span>
     267                <span class="author">Mike Rofone</span>
     268        </div>
     269
     270        <div class="session session-9 track-2" style="grid-column: track-2-start; grid-row: time-1030 / time-1230;">
     271                <h3 class="title">Talk Title</h3>
     272                <span class="time">10:30 - 12:30</span>
     273                <span class="track">Track: 2</span>
     274                <span class="author">Mike Rofone</span>
     275        </div>
     276
     277        <div class="session session-10 track-4" style="grid-column: track-4-start; grid-row: time-1030 / time-1100;">
     278                <h3 class="title">Talk Title</h3>
     279                <span class="time">10:30 - 11:0</span>
     280                <span class="track">Track: 4</span>
     281                <span class="author">Mike Rofone</span>
     282        </div>
     283
     284        <h2 class="time-slot" style="grid-column: times; grid-row: time-1100;">11:00am</h2>
     285
     286        <div class="session session-11 track-3" style="grid-column: track-3-start; grid-row: time-1100 / time-1130;">
     287                <h3 class="title">Talk Title</h3>
     288                <span class="time">11:00 - 11:30</span>
     289                <span class="track">Track: 3</span>
     290                <span class="author">Mike Rofone</span>
     291        </div>
     292
     293        <h2 class="time-slot" style="grid-column: times; grid-row: time-1130;">11:30am</h2>
     294
     295        <div class="session track-1 track-many" style="grid-column: track-1-start; grid-row: time-1130 / time-1230;">
     296                <h3 class="title">Lunch!</h3>
     297        </div>
     298
     299                <div class="session track-3 track-4 track-many" style="grid-column: track-3-start / track-4-end; grid-row: time-1130 / time-1230;">
     300                <h3 class="title">Lunch!</h3>
     301        </div>
     302
     303</div>

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

    diff --git wc-post-types/wc-post-types.php wc-post-types/wc-post-types.php
index cc9e84c..9e0d137 100644
     
    44 * Plugin Description: Sessions, Speakers, Sponsors and much more.
    55 */
    66
     7use WordCamp\Post_Types\Schedule;
     8
    79require( 'inc/back-compat.php' );
    810require_once( 'inc/favorite-schedule-shortcode.php' );
    911
    … … class WordCamp_Post_Types_Plugin { 
    534536                $sessions                    = get_schedule_sessions( $attr['date'], $tracks_explicitly_specified, $tracks );
    535537                $columns                     = get_schedule_columns( $tracks, $sessions, $tracks_explicitly_specified );
    536538
     539                if ( ! wcorg_skip_feature( 'css-grid-schedule' ) ) {
     540                        require_once( __DIR__ . '/inc/schedule.php' );
     541                        return Schedule\render_grid_schedule( $attr, $tracks, $sessions, $columns );
     542                }
     543
    537544                $html  = '<table class="wcpt-schedule" border="0">';
    538545                $html .= '<thead>';
    539546                $html .= '<tr>';