WordPress.org
Get WordPress

Make WordPress Core

Changeset 26519


Ignore:
Timestamp:
12/02/2013 07:11:43 AM (13 years ago)
Author:
dd32
Message:

Themes: Make the Theme Detail view div use more of the available viewport, Fix the Header and Footer in the viewport and only scroll the theme details, Prefix some more theme CSS classes. Props shaunandrews for the initial viewport patch. Fixes #25961, #26192

Location:
trunk/src/wp-admin
Files:
3 edited

Legend:

Unmodified
Added
Removed

  • trunk/src/wp-admin/css/wp-admin.css

    r26516 r26519  
    66796679}
    66806680
    6681 .theme-overlay .theme-utility {
     6681.theme-overlay .theme-header {
    66826682        position: absolute;
    66836683        top: 0;
    66846684        left: 0;
    66856685        right: 0;
     6686        height: 48px;
    66866687        border-bottom: 1px solid #eee;
    66876688}
    66886689
    6689 .theme-overlay .back {
     6690.theme-overlay .theme-header .close {
    66906691        cursor: pointer;
    66916692        height: 48px;
    … …  
    66966697}
    66976698
    6698 .theme-overlay .back:hover {
     6699.theme-overlay .theme-header .close:hover {
    66996700        background: #333;
    67006701}
    67016702
    6702 .theme-overlay .back:hover:before {
     6703.theme-overlay .theme-header .close:hover:before {
    67036704        color: #fff;
    67046705}
    67056706
    6706 .theme-overlay .back:before {
     6707.theme-overlay .theme-header .close:before {
    67076708        font: normal 30px/48px 'dashicons' !important;
    67086709        color: #bbb;
    … …  
    67136714
    67146715/* Left and right navigation */
    6715 .theme-overlay .right,
    6716 .theme-overlay .left {
     6716.theme-overlay .theme-header .right,
     6717.theme-overlay .theme-header .left {
    67176718        cursor: pointer;
    67186719        height: 48px;
    … …  
    67276728}
    67286729
    6729 .theme-overlay .right:hover,
    6730 .theme-overlay .left:hover {
     6730.theme-overlay .theme-header .right:hover,
     6731.theme-overlay .theme-header .left:hover {
    67316732        background: #333;
    67326733        color: #fff;
    67336734}
    67346735
    6735 .theme-overlay .left.disabled,
    6736 .theme-overlay .right.disabled,
    6737 .theme-overlay .left.disabled:hover,
    6738 .theme-overlay .right.disabled:hover {
     6736.theme-overlay .theme-header .left.disabled,
     6737.theme-overlay .theme-header .right.disabled,
     6738.theme-overlay .theme-header .left.disabled:hover,
     6739.theme-overlay .theme-header .right.disabled:hover {
    67396740        color: #ccc;
    67406741        background: inherit;
    … …  
    67426743}
    67436744
    6744 .theme-overlay .right:before,
    6745 .theme-overlay .left:before {
     6745.theme-overlay .theme-header .right:before,
     6746.theme-overlay .theme-header .left:before {
    67466747        font: normal 16px/54px 'dashicons' !important;
    67476748        display: inline;
    … …  
    67496750}
    67506751
    6751 .theme-overlay .left:before {
     6752.theme-overlay .theme-header .left:before {
    67526753        content: '\f341';
    67536754}
    67546755
    6755 .theme-overlay .right:before {
     6756.theme-overlay .theme-header .right:before {
    67566757        content: '\f345';
    67576758}
    67586759
    6759 .rtl .theme-overlay .left:before {
     6760.rtl .theme-overlay .theme-header .left:before {
    67606761        content: '\f345';
    67616762}
    67626763
    6763 .rtl .theme-overlay .right:before {
     6764.rtl .theme-overlay .theme-header .right:before {
    67646765        content: '\f341';
    67656766}
    … …  
    67686769        clear: both;
    67696770        position: fixed;
    6770         top: 120px;
    6771         left: 190px;
    6772         right: 40px;
    6773         bottom: 80px;
    6774         overflow: auto;
     6771        top: 9%;
     6772        left: 180px;
     6773        right: 30px;
     6774        bottom: 3%;
    67756775        background: #fff;
    6776         padding: 88px 40px 110px 40px;
    6777         -webkit-box-shadow: 0 1px 20px 5px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0,0,0,0.1);
    6778         box-shadow:         0 1px 20px 5px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0,0,0,0.1);
     6776        -webkit-box-shadow: 0 1px 20px 5px rgba(0, 0, 0, 0.1);
     6777        box-shadow:         0 1px 20px 5px rgba(0, 0, 0, 0.1);
    67796778        z-index: 20;
     6779        box-sizing: border-box;
    67806780}
    67816781
    … …  
    67886788}
    67896789
     6790body.folded .theme-overlay .theme-wrap {
     6791        left: 70px;
     6792}
     6793
     6794.theme-overlay .theme-about {
     6795        position: absolute;
     6796        top: 49px;
     6797        bottom: 69px;
     6798        left: 0;
     6799        right: 0;
     6800        overflow: auto;
     6801        padding: 2% 4%;
     6802}
     6803.theme-overlay .theme-about:after {
     6804        content: ".";
     6805        display: block;
     6806        height: 0;
     6807        clear: both;
     6808        visibility: hidden;
     6809}
     6810
    67906811.theme-overlay .theme-actions {
    6791         position: fixed;
     6812        position: absolute;
    67926813        text-align: center;
    6793         bottom: 80px;
    6794         left: 190px;
    6795         right: 40px;
     6814        bottom: 0;
     6815        left: 0;
     6816        right: 0;
    67966817        padding: 20px 25px;
    6797         background: rgba(243, 243, 243 ,0.9);
    6798         border-top: 1px solid rgba(0,0,0,0.1);
     6818        background: #f3f3f3;
    67996819        z-index: 30;
     6820        box-sizing: border-box;
     6821        border-top: 1px solid #eee;
    68006822}
    68016823
    … …  
    68036825        margin-right: 5px;
    68046826        margin-bottom: 0;
    6805         font-size: 16px;
    6806         line-height: 37px;
    6807         height: 37px;
    6808         padding: 0 20px 1px 20px;
    68096827}
    68106828
    68116829.theme-overlay .theme-actions .delete-theme {
    6812         border-radius: 2px;
    68136830        color: #a00;
    6814         font-size: 14px;
    6815         padding: 0 10px;
    68166831        position: absolute;
    68176832        right: 10px;
    68186833        bottom: 20px;
    68196834        text-decoration: none;
     6835        border-color: transparent;
     6836        box-shadow: none;
     6837        background: transparent;
    68206838}
    68216839
    … …  
    68236841        background: #d54e21;
    68246842        color: #fff;
     6843        border-color: #d54e21;
    68256844}
    68266845
    … …  
    68646883
    68656884.theme-overlay .screenshot img {
    6866         cursor: pointer;
    68676885        height: auto;
    68686886        position: absolute;
    … …  
    68816899        width: 140px;
    68826900        height: 80px;
     6901        cursor: pointer;
    68836902}
    68846903
    … …  
    70447063        }
    70457064
    7046         .theme-overlay .theme-wrap,
    7047         .theme-overlay .theme-actions {
     7065        body.folded .theme-overlay .theme-wrap {
    70487066                right: 15%;
    70497067                left: 22%;
    … …  
    70687086/* Admin menu is folded */
    70697087@media only screen and (max-width: 900px) {
    7070         .theme-overlay .theme-wrap,
    7071         .theme-overlay .theme-actions {
    7072                 left: 76px;
     7088        .theme-overlay .theme-wrap {
     7089                left: 65px;
    70737090        }
    70747091}
    … …  
    70807097        }
    70817098
     7099        body.folded .theme-overlay .theme-wrap,
    70827100        .theme-overlay .theme-wrap {
    70837101                top: 45px;
    … …  
    70857103                bottom: 0;
    70867104                left: 0;
    7087                 padding: 70px 20px 100px;
    7088         }
    7089 
    7090         .theme-overlay .theme-actions {
    7091                 right: 0;
    7092                 bottom: 0;
    7093                 left: 0;
    7094                 padding: 10px;
     7105                padding: 70px 20px 20px;
     7106                border: none;
    70957107        }
    70967108
    … …  
    71017113        .theme-overlay .theme-info {
    71027114                width: 50%;
    7103         }
    7104 
    7105         .theme-overlay .theme-actions .delete-theme {
    7106                 bottom: 10px;
    71077115        }
    71087116}
    … …  
    71407148        .theme-overlay .theme-author {
    71417149                margin: 5px 0 15px 0;
    7142         }
    7143 
    7144         .theme-overlay .theme-version {
    7145                 margin-left: 0;
    7146                 position: absolute;
    7147                 top: 18px;
    7148                 left: 130px;
    71497150        }
    71507151

  • trunk/src/wp-admin/js/theme.js

    r26515 r26519  
    261261                // and don't close it unless the target was
    262262                // the div.back button
    263                 if ( $( event.target ).is( '.theme-backdrop' ) || $( event.target ).is( 'div.back' ) || event.keyCode === 27 ) {
     263                if ( $( event.target ).is( '.theme-backdrop' ) || $( event.target ).is( 'div.close' ) || event.keyCode === 27 ) {
    264264
    265265                        // Add a temporary closing class while overlay fades out

  • trunk/src/wp-admin/themes.php

    r26517 r26519  
    246246        <div class="theme-backdrop"></div>
    247247        <div class="theme-wrap">
    248                 <div class="theme-utility">
    249                         <div alt="<?php _e( 'Close overlay' ); ?>" class="back dashicons dashicons-no"></div>
     248                <div class="theme-header">
     249                        <div alt="<?php _e( 'Close overlay' ); ?>" class="close dashicons dashicons-no"></div>
    250250                        <div alt="<?php _e( 'Show previous theme' ); ?>" class="left dashicons dashicons-no"></div>
    251251                        <div alt="<?php _e( 'Show next theme' ); ?>" class="right dashicons dashicons-no"></div>
    252252                </div>
    253 
     253        <div class="theme-about">
    254254                <div class="theme-screenshots">
    255255                <# if ( data.screenshot[0] ) { #>
    … …  
    311311
    312312                <# if ( ! data.active && data.actions.delete ) { #>
    313                         <a href="{{{ data.actions.delete }}}" class="delete-theme"><?php _e( 'Delete' ); ?></a>
     313                        <a href="{{{ data.actions.delete }}}" class="button button-secondary delete-theme"><?php _e( 'Delete' ); ?></a>
    314314                <# } #>
    315315        </div>
     316        </div>
    316317</script>
    317318
Note: See TracChangeset for help on using the changeset viewer.