Make WordPress Core

Changeset 26519


Ignore:
Timestamp:
12/02/2013 07:11:43 AM (11 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.