Get WordPress

Making WordPress.org

Changeset 6375

Timestamp:
01/12/2018 07:31:03 PM (7 years ago)
Author:
obenland
Message:

WP.tv: Better formatting in upload template.

Eventually this theme should also undergo a PHPCS update.

Props lalitpendhare for initial patch.
Fixes #3137.

File:
1 edited

Legend:

Unmodified
Added
Removed

  • sites/trunk/wordpress.tv/public_html/wp-content/themes/wptv2/anon-upload-template.php

    r1726 r6375  
    66 */
    77
    8 
    98function anon_upload_css() {
    109    ?>
    1110    <style type="text/css">
    12     <?php // theme structural css ?>
    13     html,
    14     body {
    15         width: 100%;
    16         height: 100%;
    17         margin: 0;
    18     }
    19 
    20     .page-template-anon-upload-template-php #page {
    21         height: auto;
    22         min-height: 100%;
    23         position: relative;
    24         width: 100%;
    25     }
    26 
    27     .page-template-anon-upload-template-php #header {
    28         margin: 0;
    29         padding-top: 10px;
    30     }
    31 
    32     .page-template-anon-upload-template-php #footer {
    33         position: absolute;
    34         bottom: 0;
    35         right: 0;
    36         left: 0;
    37     }
    38 
    39     .video-upload {
    40         padding-bottom: 70px;
    41     }
    42 
    43     .noscript-show p {
    44         margin: 0 !important;
    45     }
    46     <?php // theme structural end ?>
    47 
    48     .container {
    49         overflow: hidden;
    50     }
    51 
    52     .video-upload-left {
    53         max-width: 550px;
    54     }
    55 
    56     .video-upload-right {
    57         float: right;
    58         width: 390px;
    59         margin: -25px 0 25px;
    60     }
    61 
    62     .video-upload p {
    63         margin: 16px 0;
    64         overflow: auto;
    65     }
    66 
    67     .video-upload h3 {
    68         font-size: 22px;
    69     }
    70 
    71     .video-upload-left p > label,
    72     .video-upload-left div > label {
    73         padding: 4px 0 0;
    74         display: block;
    75         width: 130px;
    76         float: left;
    77         font-weight: bold;
    78     }
    79 
    80     .video-upload-left p > label.wptv-video-wordcamp-cb {
    81         display: inline;
    82         float: none;
    83     }
    84 
    85     .video-upload-left p label .required {
    86         line-height: 15px;
    87         vertical-align: bottom;
    88         margin: 0 3px;
    89     }
    90 
    91     .video-upload-left input[type="text"],
    92     .video-upload-left textarea,
    93     .video-upload-left ul.cats-checkboxes {
    94         border-radius: 3px;
    95         border: 1px solid #dfdfdf;
    96         color: #333;
    97         background-color: #fff;
    98         padding: 4px;
    99         width: 329px;
    100         max-width: 329px;
    101     }
    102 
    103     .video-upload-left ul.cats-checkboxes {
    104         margin-left: 130px;
    105         height: 150px;
    106         overflow: auto;
    107     }
    108 
    109     .video-upload-left ul.cats-checkboxes ul.children {
    110         margin-left: 15px;
    111     }
    112 
    113     .video-upload-left input[type="text"]:focus,
    114     .video-upload-left textarea:focus {
    115         border-color: #bbb;
    116     }
     11        html,
     12        body {
     13            width: 100%;
     14            height: 100%;
     15            margin: 0;
     16        }
     17
     18        .page-template-anon-upload-template-php #page {
     19            height: auto;
     20            min-height: 100%;
     21            position: relative;
     22            width: 100%;
     23        }
     24
     25        .page-template-anon-upload-template-php #header {
     26            margin: 0;
     27            padding-top: 10px;
     28        }
     29
     30        .page-template-anon-upload-template-php #footer {
     31            position: absolute;
     32            bottom: 0;
     33            right: 0;
     34            left: 0;
     35        }
     36
     37        .video-upload {
     38            padding-bottom: 70px;
     39        }
     40
     41        .noscript-show p {
     42            margin: 0 !important;
     43        }
     44
     45        .container {
     46            overflow: hidden;
     47        }
     48
     49        .video-upload-left {
     50            max-width: 550px;
     51        }
     52
     53        .video-upload-right {
     54            float: right;
     55            width: 390px;
     56            margin: -25px 0 25px;
     57        }
     58
     59        .video-upload p {
     60            margin: 16px 0;
     61            overflow: auto;
     62        }
     63
     64        .video-upload h3 {
     65            font-size: 22px;
     66        }
     67
     68        .video-upload-left p > label,
     69        .video-upload-left div > label {
     70            padding: 4px 0 0;
     71            display: block;
     72            width: 130px;
     73            float: left;
     74            font-weight: bold;
     75        }
     76
     77        .video-upload-left p > label.wptv-video-wordcamp-cb {
     78            display: inline;
     79            float: none;
     80        }
     81
     82        .video-upload-left p label .required {
     83            line-height: 15px;
     84            vertical-align: bottom;
     85            margin: 0 3px;
     86        }
     87
     88        .video-upload-left input[type="text"],
     89        .video-upload-left textarea,
     90        .video-upload-left ul.cats-checkboxes {
     91            border-radius: 3px;
     92            border: 1px solid #dfdfdf;
     93            color: #333;
     94            background-color: #fff;
     95            padding: 4px;
     96            width: 329px;
     97            max-width: 329px;
     98        }
     99
     100        .video-upload-left ul.cats-checkboxes {
     101            margin-left: 130px;
     102            height: 150px;
     103            overflow: auto;
     104        }
     105
     106        .video-upload-left ul.cats-checkboxes ul.children {
     107            margin-left: 15px;
     108        }
     109
     110        .video-upload-left input[type="text"]:focus,
     111        .video-upload-left textarea:focus {
     112            border-color: #bbb;
     113        }
    117114
    118115        .video-upload-left #wptv_honey_container {
    … …  
    120117        }
    121118
    122     #video-upload-form p.last {
    123         margin: 5px 80px 25px;
    124         text-align: right;
    125     }
    126 
    127     #video-upload-form p .invalid {
    128         border: 1px solid red;
    129     }
    130 
    131     #video-upload-form input[type="submit"] {
    132         font-size: 15px;
    133         padding: 4px 12px;
    134     }
    135 
    136     .page-template-anon-upload-template-php .wptv-hero {
    137         padding: 20px;
    138     }
    139 
    140     .page-template-anon-upload-template-php .wptv-hero h2 {
    141         font-size: 24px;
    142     }
    143 
    144     .video-upload-right .accepted-formats {
    145         margin-left: 16px;
    146     }
    147 
    148     .video-upload-right .accepted-formats li {
    149         list-style: square;
    150     }
    151 
    152     .video-upload-right h3 {
    153         padding-bottom: 4px;
    154     }
    155 
    156     .video-upload .pass-form label {
    157         float: none;
    158         display: inline;
    159         width: auto;
    160     }
     119    #video-upload-form p.last {
     120        margin: 5px 80px 25px;
     121        text-align: right;
     122    }
     123
     124    #video-upload-form p .invalid {
     125        border: 1px solid red;
     126    }
     127
     128    #video-upload-form input[type="submit"] {
     129        font-size: 15px;
     130        padding: 4px 12px;
     131    }
     132
     133    .page-template-anon-upload-template-php .wptv-hero {
     134        padding: 20px;
     135    }
     136
     137    .page-template-anon-upload-template-php .wptv-hero h2 {
     138        font-size: 24px;
     139    }
     140
     141    .video-upload-right .accepted-formats {
     142        margin-left: 16px;
     143    }
     144
     145    .video-upload-right .accepted-formats li {
     146        list-style: square;
     147    }
     148
     149    .video-upload-right h3 {
     150        padding-bottom: 4px;
     151    }
     152
     153    .video-upload .pass-form label {
     154        float: none;
     155        display: inline;
     156        width: auto;
     157    }
    161158    </style>
    162159    <?php
    163160}
    164 
    165161add_action( 'wp_head', 'anon_upload_css' );
    166162
    … …  
    215211?>
    216212
    217 <div class="wptv-hero">
    218     <div class="single container">
    219         <h2><?php esc_html_e( 'Submit a video' ); ?></h2>
     213    <div class="wptv-hero">
     214        <div class="single container">
     215            <h2><?php esc_html_e( 'Submit a video' ); ?></h2>
     216        </div>
    220217    </div>
    221 </div>
    222 
    223 <div class="container">
    224 <div class="video-upload">
    225 <?php
    226 
    227     // temp pwd?
    228     if ( post_password_required() ) {
    229         echo '<div class="pass-form">';
    230         echo get_the_password_form();
    231         echo '</div></div></div>';
    232         get_footer();
    233         return;
    234     } else {
    235         echo $message;
    236     }
    237 
    238 ?>
    239 <noscript><div class="error"><p>This form requires JavaScript. Please enable it in your browser and reload the page.</p></div></noscript>
    240 <div class="video-upload-right">
    241     <h3>Guidelines</h3>
    242     <p>WordCamp videos: the audio is clear and easy to understand, the camera was on a tripod, the video shows the speaker and slides, divide the video by presentation if possible.</p>
    243     <p>Screencasts: keep it concise, keep it clear, keep on track (no chock-full of personal promotion please), keep it current.</p>
    244     <p>Vodcasts and other video-based content: if you have put together a video podcast or other WordPress focused, relevant video - let us <a href="http://wordpress.tv/contact/">know about it</a>.
    245     <p>If this is the first time you're submitting a video, please check all <a href="http://blog.wordpress.tv/submission-guidelines/">Submission Guidelines</a>.</p>
    246     <h3>Accepted formats</h3>
    247     <p>Maximum upload file size: 1GB. You can upload the following video formats:</p>
    248     <ul class="accepted-formats">
    249         <li>avi</li>
    250         <li>mov/qt</li>
    251         <li>mpeg/mpg</li>
    252         <li>mp4</li>
    253         <li>ogv</li>
    254         <li>wmv</li>
    255         <li>3gp/3g2</li>
    256     </ul>
    257 </div>
    258 
    259 <div class="video-upload-left">
    260 <?php if ( !$message ) { ?>
    261     <p>Please review the guidelines listed on the right, then submit your video below:</p>
    262 <?php } ?>
    263 
    264     <form method="post" action="<?php echo admin_url('admin-post.php'); ?>" id="video-upload-form" enctype="multipart/form-data">
    265     <?php wp_nonce_field('wptv-upload-video', 'wptvvideon'); ?>
    266     <input type="hidden" name="action" value="wptv_video_upload" />
    267 
    268     <?php // This field only exists to trap spam bots that will automatically fill it in. It will be hidden from normal users. ?>
    269     <p id="wptv_honey_container">
    270         <label for="wptv_honey"><?php esc_html_e( 'Leave this empty' ); ?></label>
    271         <input type="text" id="wptv_honey" name="wptv_honey" value="" />
    272     </p>
    273     <p>
    274         <input type="checkbox" id="wptv_video_wordcamp" name="wptv_video_wordcamp" />
    275         <label for="wptv_video_wordcamp" class="wptv-video-wordcamp-cb"><?php esc_html_e( 'This is a WordCamp video' ); ?></label>
    276     </p>
    277 
    278     <?php if ( ! is_user_logged_in() ) : ?>
    279     <p>
    280         <label for="wptv_uploaded_by"><?php esc_html_e( 'Uploaded by' ); ?><span class="required"> * </span></label>
    281         <input type="text" id="wptv_uploaded_by" name="wptv_uploaded_by" value="" />
    282     </p>
    283     <p>
    284         <label for="wptv_email"><?php esc_html_e( 'Email address' ); ?><span class="required"> * </span></label>
    285         <input type="text" id="wptv_email" name="wptv_email" value="" />
    286     </p>
    287     <?php endif; ?>
    288 
    289     <p>
    290         <label for="wptv_video_title"><?php esc_html_e( 'Video title' ); ?></label>
    291         <input type="text" id="wptv_video_title" name="wptv_video_title" value="" />
    292     </p>
    293     <p>
    294         <label for="wptv_language"><?php esc_html_e( 'Language' ); ?></label>
    295         <input type="text" id="wptv_language" name="wptv_language" value="" />
    296     </p>
    297 
    298     <div class="cats">
    299         <label for="wptv_categories"><?php esc_html_e( 'Category' ); ?></label>
    300         <ul class="cats-checkboxes">
     218
     219    <div class="container">
     220        <div class="video-upload">
    301221            <?php
    302                 include_once( ABSPATH . '/wp-admin/includes/template.php' );
    303                 wp_category_checklist();
     222
     223            // temp pwd?
     224            if ( post_password_required() ) {
     225                echo '<div class="pass-form">';
     226                echo get_the_password_form();
     227                echo '</div></div></div>';
     228                get_footer();
     229                return;
     230            } else {
     231                echo $message;
     232            }
     233
    304234            ?>
    305         </ul>
     235            <noscript><div class="error"><p>This form requires JavaScript. Please enable it in your browser and reload the page.</p></div></noscript>
     236            <div class="video-upload-right">
     237                <h3>Guidelines</h3>
     238                <p>WordCamp videos: the audio is clear and easy to understand, the camera was on a tripod, the video shows the speaker and slides, divide the video by presentation if possible.</p>
     239                <p>Screencasts: keep it concise, keep it clear, keep on track (no chock-full of personal promotion please), keep it current.</p>
     240                <p>Vodcasts and other video-based content: if you have put together a video podcast or other WordPress focused, relevant video - let us <a href="http://wordpress.tv/contact/">know about it</a>.
     241                <p>If this is the first time you're submitting a video, please check all <a href="http://blog.wordpress.tv/submission-guidelines/">Submission Guidelines</a>.</p>
     242                <h3>Accepted formats</h3>
     243                <p>Maximum upload file size: 1GB. You can upload the following video formats:</p>
     244                <ul class="accepted-formats">
     245                    <li>avi</li>
     246                    <li>mov/qt</li>
     247                    <li>mpeg/mpg</li>
     248                    <li>mp4</li>
     249                    <li>ogv</li>
     250                    <li>wmv</li>
     251                    <li>3gp/3g2</li>
     252                </ul>
     253            </div>
     254
     255            <div class="video-upload-left">
     256                <?php if ( !$message ) { ?>
     257                    <p>Please review the guidelines listed on the right, then submit your video below:</p>
     258                <?php } ?>
     259
     260                <form method="post" action="<?php echo admin_url('admin-post.php'); ?>" id="video-upload-form" enctype="multipart/form-data">
     261                    <?php wp_nonce_field('wptv-upload-video', 'wptvvideon'); ?>
     262                    <input type="hidden" name="action" value="wptv_video_upload" />
     263
     264                    <?php // This field only exists to trap spam bots that will automatically fill it in. It will be hidden from normal users. ?>
     265                    <p id="wptv_honey_container">
     266                        <label for="wptv_honey"><?php esc_html_e( 'Leave this empty' ); ?></label>
     267                        <input type="text" id="wptv_honey" name="wptv_honey" value="" />
     268                    </p>
     269                    <p>
     270                        <input type="checkbox" id="wptv_video_wordcamp" name="wptv_video_wordcamp" />
     271                        <label for="wptv_video_wordcamp" class="wptv-video-wordcamp-cb"><?php esc_html_e( 'This is a WordCamp video' ); ?></label>
     272                    </p>
     273
     274                    <?php if ( ! is_user_logged_in() ) : ?>
     275                        <p>
     276                            <label for="wptv_uploaded_by"><?php esc_html_e( 'Uploaded by' ); ?><span class="required"> * </span></label>
     277                            <input type="text" id="wptv_uploaded_by" name="wptv_uploaded_by" value="" />
     278                        </p>
     279                        <p>
     280                            <label for="wptv_email"><?php esc_html_e( 'Email address' ); ?><span class="required"> * </span></label>
     281                            <input type="text" id="wptv_email" name="wptv_email" value="" />
     282                        </p>
     283                    <?php endif; ?>
     284
     285                    <p>
     286                        <label for="wptv_video_title"><?php esc_html_e( 'Video title' ); ?></label>
     287                        <input type="text" id="wptv_video_title" name="wptv_video_title" value="" />
     288                    </p>
     289                    <p>
     290                        <label for="wptv_language"><?php esc_html_e( 'Language' ); ?></label>
     291                        <input type="text" id="wptv_language" name="wptv_language" value="" />
     292                    </p>
     293
     294                    <div class="cats">
     295                        <label for="wptv_categories"><?php esc_html_e( 'Category' ); ?></label>
     296                        <ul class="cats-checkboxes">
     297                            <?php
     298                            include_once( ABSPATH . '/wp-admin/includes/template.php' );
     299                            wp_category_checklist();
     300                            ?>
     301                        </ul>
     302                    </div>
     303
     304                    <p>
     305                        <label for="wptv_producer_username"><?php esc_html_e( 'Producer WordPress.org Username' ); ?></label>
     306                        <input type="text" id="wptv_producer_username" name="wptv_producer_username" value="" />
     307                    </p>
     308                    <p>
     309                        <label for="wptv_speakers"><?php esc_html_e( 'Speakers' ); ?></label>
     310                        <input type="text" id="wptv_speakers" name="wptv_speakers" value="" />
     311                    </p>
     312                    <p>
     313                        <label for="wptv_event"><?php esc_html_e( 'Event' ); ?></label>
     314                        <input type="text" id="wptv_event" name="wptv_event" value="" />
     315                    </p>
     316                    <p>
     317                        <label for="wptv_video_description"><?php esc_html_e( 'Description' ); ?></label>
     318                        <textarea name="wptv_video_description" id="wptv_video_description" rows="8" cols="40"></textarea>
     319                    </p>
     320                    <p>
     321                        <label for="wptv_slides_url"><?php esc_html_e( 'Slides URL' ); ?></label>
     322                        <input type="text" name="wptv_slides_url" id="wptv_slides_url" value="" />
     323                    </p>
     324                    <p>
     325                        <label for="wptv_file"><?php esc_html_e( 'Video file' ); ?><span class="required"> * </span></label>
     326                        <input type="file" name="wptv_file" id="wptv_file" />
     327                    </p>
     328                    <p class="last">
     329                        <input type="submit" id="wptv_video_upload" style="display:none;" value="<?php esc_attr_e( 'Submit' ); ?>" />
     330                    </p>
     331                </form>
     332            </div>
     333        </div>
    306334    </div>
    307335
    308     <p>
    309         <label for="wptv_producer_username"><?php esc_html_e( 'Producer WordPress.org Username' ); ?></label>
    310         <input type="text" id="wptv_producer_username" name="wptv_producer_username" value="" />
    311     </p>
    312     <p>
    313         <label for="wptv_speakers"><?php esc_html_e( 'Speakers' ); ?></label>
    314         <input type="text" id="wptv_speakers" name="wptv_speakers" value="" />
    315     </p>
    316     <p>
    317         <label for="wptv_event"><?php esc_html_e( 'Event' ); ?></label>
    318         <input type="text" id="wptv_event" name="wptv_event" value="" />
    319     </p>
    320     <p>
    321         <label for="wptv_video_description"><?php esc_html_e( 'Description' ); ?></label>
    322         <textarea name="wptv_video_description" id="wptv_video_description" rows="8" cols="40"></textarea>
    323     </p>
    324     <p>
    325         <label for="wptv_slides_url"><?php esc_html_e( 'Slides URL' ); ?></label>
    326         <input type="text" name="wptv_slides_url" id="wptv_slides_url" value="" />
    327     </p>
    328     <p>
    329         <label for="wptv_file"><?php esc_html_e( 'Video file' ); ?><span class="required"> * </span></label>
    330         <input type="file" name="wptv_file" id="wptv_file" />
    331     </p>
    332     <p class="last">
    333         <input type="submit" id="wptv_video_upload" style="display:none;" value="<?php esc_attr_e( 'Submit' ); ?>" />
    334     </p>
    335     </form>
    336 </div>
    337 </div>
    338 </div>
    339 
    340 <script type="text/javascript">
    341 jQuery( function($) {
    342     var invalid,
    343         val,
    344         uploaded_by = $( '#wptv_uploaded_by' ),
    345         email       = $( '#wptv_email' ),
    346         file        = $( '#wptv_file' ),
    347         honey       = $( '#wptv_honey' );
    348 
    349     invalid = function( el, e ) {
    350         el.addClass( 'invalid' );
    351         el.one( 'click', function() {
    352             $( this ).removeClass( 'invalid' );
     336    <script type="text/javascript">
     337        jQuery( function($) {
     338            var invalid,
     339                val,
     340                uploaded_by = $( '#wptv_uploaded_by' ),
     341                email       = $( '#wptv_email' ),
     342                file        = $( '#wptv_file' ),
     343                honey       = $( '#wptv_honey' );
     344
     345            invalid = function( el, e ) {
     346                el.addClass( 'invalid' );
     347                el.one( 'click', function() {
     348                    $( this ).removeClass( 'invalid' );
     349                } );
     350                e.preventDefault();
     351            };
     352
     353            $( '#wptv_video_upload' ).show();
     354            $( '#video-upload-form input[type="text"]' ).each( function() {
     355                $( this ).attr( 'maxlength', '100' );
     356            } );
     357            $( 'ul.cats-checkboxes input' ).prop( 'disabled', false );
     358
     359            $( '#video-upload-form' ).submit( function( e ) {
     360                var scroll = false;
     361
     362                if ( uploaded_by.length && ! uploaded_by.val() ) {
     363                    invalid( uploaded_by, e );
     364                    scroll = true;
     365                }
     366
     367                if ( email.length ) {
     368                    val = email.val();
     369
     370                    if ( !val || !/\S+@\S+\.\S+/.test( val ) ) {
     371                        invalid(email, e);
     372                        scroll = true;
     373                    }
     374                }
     375
     376                // Changes to this list must be synced with WPTV_Anon_Upload::save()
     377                if ( ! file.val() || !/\.(avi|mov|qt|mpeg|mpg|mpe|mp4|m4v|asf|asx|wax|wmv|wmx|ogv|3gp|3g2)$/.test( file.val() ) ) {
     378                    invalid(file, e);
     379                }
     380
     381                // If there's any input in the honeypot field, it was probably put there by a bot, so reject the submission
     382                if ( honey.val().length > 0 ) {
     383                    invalid( honey, e );
     384                    scroll = true;
     385                }
     386
     387                if ( scroll && uploaded_by.length ) {
     388                    uploaded_by.get( 0 ).scrollIntoView();
     389                }
     390            } );
    353391        } );
    354         e.preventDefault();
    355     }
    356 
    357     $( '#wptv_video_upload' ).show();
    358     $( '#video-upload-form input[type="text"]' ).each( function() {
    359         $( this ).attr( 'maxlength', '100' );
    360     } );
    361     $( 'ul.cats-checkboxes input' ).prop( 'disabled', false );
    362 
    363     $( '#video-upload-form' ).submit( function( e ) {
    364         var scroll = false;
    365 
    366         if ( uploaded_by.length && ! uploaded_by.val() ) {
    367             invalid( uploaded_by, e );
    368             scroll = true;
    369         }
    370 
    371         if ( email.length ) {
    372             val = email.val();
    373 
    374             if ( !val || !/\S+@\S+\.\S+/.test( val ) ) {
    375                 invalid(email, e);
    376                 scroll = true;
    377             }
    378         }
    379 
    380         // Changes to this list must be synced with WPTV_Anon_Upload::save()
    381         if ( ! file.val() || !/\.(avi|mov|qt|mpeg|mpg|mpe|mp4|m4v|asf|asx|wax|wmv|wmx|ogv|3gp|3g2)$/.test( file.val() ) ) {
    382             invalid(file, e);
    383         }
    384 
    385         // If there's any input in the honeypot field, it was probably put there by a bot, so reject the submission
    386         if ( honey.val().length > 0 ) {
    387             invalid( honey, e );
    388             scroll = true;
    389         }
    390 
    391         if ( scroll && uploaded_by.length ) {
    392             uploaded_by.get( 0 ).scrollIntoView();
    393         }
    394     } );
    395 } );
    396 </script>
     392    </script>
    397393
    398394<?php get_footer();
    399 
Note: See TracChangeset for help on using the changeset viewer.