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
git-svn-id: https://develop.svn.wordpress.org/trunk@26519 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Dion Hulse
parent
b33d0da84c
commit
919b03d9ce
|
|
@ -6678,15 +6678,16 @@ body.theme-overlay-open {
|
|||
overflow: hidden;
|
||||
}
|
||||
|
||||
.theme-overlay .theme-utility {
|
||||
.theme-overlay .theme-header {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 48px;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
.theme-overlay .back {
|
||||
.theme-overlay .theme-header .close {
|
||||
cursor: pointer;
|
||||
height: 48px;
|
||||
width: 50px;
|
||||
|
|
@ -6695,15 +6696,15 @@ body.theme-overlay-open {
|
|||
border-left: 1px solid #eee;
|
||||
}
|
||||
|
||||
.theme-overlay .back:hover {
|
||||
.theme-overlay .theme-header .close:hover {
|
||||
background: #333;
|
||||
}
|
||||
|
||||
.theme-overlay .back:hover:before {
|
||||
.theme-overlay .theme-header .close:hover:before {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.theme-overlay .back:before {
|
||||
.theme-overlay .theme-header .close:before {
|
||||
font: normal 30px/48px 'dashicons' !important;
|
||||
color: #bbb;
|
||||
display: inline-block;
|
||||
|
|
@ -6712,8 +6713,8 @@ body.theme-overlay-open {
|
|||
}
|
||||
|
||||
/* Left and right navigation */
|
||||
.theme-overlay .right,
|
||||
.theme-overlay .left {
|
||||
.theme-overlay .theme-header .right,
|
||||
.theme-overlay .theme-header .left {
|
||||
cursor: pointer;
|
||||
height: 48px;
|
||||
width: 54px;
|
||||
|
|
@ -6726,57 +6727,56 @@ body.theme-overlay-open {
|
|||
user-select: none;
|
||||
}
|
||||
|
||||
.theme-overlay .right:hover,
|
||||
.theme-overlay .left:hover {
|
||||
.theme-overlay .theme-header .right:hover,
|
||||
.theme-overlay .theme-header .left:hover {
|
||||
background: #333;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.theme-overlay .left.disabled,
|
||||
.theme-overlay .right.disabled,
|
||||
.theme-overlay .left.disabled:hover,
|
||||
.theme-overlay .right.disabled:hover {
|
||||
.theme-overlay .theme-header .left.disabled,
|
||||
.theme-overlay .theme-header .right.disabled,
|
||||
.theme-overlay .theme-header .left.disabled:hover,
|
||||
.theme-overlay .theme-header .right.disabled:hover {
|
||||
color: #ccc;
|
||||
background: inherit;
|
||||
cursor: inherit;
|
||||
}
|
||||
|
||||
.theme-overlay .right:before,
|
||||
.theme-overlay .left:before {
|
||||
.theme-overlay .theme-header .right:before,
|
||||
.theme-overlay .theme-header .left:before {
|
||||
font: normal 16px/54px 'dashicons' !important;
|
||||
display: inline;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.theme-overlay .left:before {
|
||||
.theme-overlay .theme-header .left:before {
|
||||
content: '\f341';
|
||||
}
|
||||
|
||||
.theme-overlay .right:before {
|
||||
.theme-overlay .theme-header .right:before {
|
||||
content: '\f345';
|
||||
}
|
||||
|
||||
.rtl .theme-overlay .left:before {
|
||||
.rtl .theme-overlay .theme-header .left:before {
|
||||
content: '\f345';
|
||||
}
|
||||
|
||||
.rtl .theme-overlay .right:before {
|
||||
.rtl .theme-overlay .theme-header .right:before {
|
||||
content: '\f341';
|
||||
}
|
||||
|
||||
.theme-overlay .theme-wrap {
|
||||
clear: both;
|
||||
position: fixed;
|
||||
top: 120px;
|
||||
left: 190px;
|
||||
right: 40px;
|
||||
bottom: 80px;
|
||||
overflow: auto;
|
||||
top: 9%;
|
||||
left: 180px;
|
||||
right: 30px;
|
||||
bottom: 3%;
|
||||
background: #fff;
|
||||
padding: 88px 40px 110px 40px;
|
||||
-webkit-box-shadow: 0 1px 20px 5px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0,0,0,0.1);
|
||||
box-shadow: 0 1px 20px 5px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0,0,0,0.1);
|
||||
-webkit-box-shadow: 0 1px 20px 5px rgba(0, 0, 0, 0.1);
|
||||
box-shadow: 0 1px 20px 5px rgba(0, 0, 0, 0.1);
|
||||
z-index: 20;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.theme-overlay .theme-wrap:after {
|
||||
|
|
@ -6787,41 +6787,60 @@ body.theme-overlay-open {
|
|||
visibility: hidden;
|
||||
}
|
||||
|
||||
body.folded .theme-overlay .theme-wrap {
|
||||
left: 70px;
|
||||
}
|
||||
|
||||
.theme-overlay .theme-about {
|
||||
position: absolute;
|
||||
top: 49px;
|
||||
bottom: 69px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
overflow: auto;
|
||||
padding: 2% 4%;
|
||||
}
|
||||
.theme-overlay .theme-about:after {
|
||||
content: ".";
|
||||
display: block;
|
||||
height: 0;
|
||||
clear: both;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.theme-overlay .theme-actions {
|
||||
position: fixed;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
bottom: 80px;
|
||||
left: 190px;
|
||||
right: 40px;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: 20px 25px;
|
||||
background: rgba(243, 243, 243 ,0.9);
|
||||
border-top: 1px solid rgba(0,0,0,0.1);
|
||||
background: #f3f3f3;
|
||||
z-index: 30;
|
||||
box-sizing: border-box;
|
||||
border-top: 1px solid #eee;
|
||||
}
|
||||
|
||||
.theme-overlay .theme-actions a {
|
||||
margin-right: 5px;
|
||||
margin-bottom: 0;
|
||||
font-size: 16px;
|
||||
line-height: 37px;
|
||||
height: 37px;
|
||||
padding: 0 20px 1px 20px;
|
||||
}
|
||||
|
||||
.theme-overlay .theme-actions .delete-theme {
|
||||
border-radius: 2px;
|
||||
color: #a00;
|
||||
font-size: 14px;
|
||||
padding: 0 10px;
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
bottom: 20px;
|
||||
text-decoration: none;
|
||||
border-color: transparent;
|
||||
box-shadow: none;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.theme-overlay .theme-actions .delete-theme:hover {
|
||||
background: #d54e21;
|
||||
color: #fff;
|
||||
border-color: #d54e21;
|
||||
}
|
||||
|
||||
.theme-overlay .theme-actions .active-theme,
|
||||
|
|
@ -6863,7 +6882,6 @@ body.theme-overlay-open {
|
|||
}
|
||||
|
||||
.theme-overlay .screenshot img {
|
||||
cursor: pointer;
|
||||
height: auto;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
|
|
@ -6880,6 +6898,7 @@ body.theme-overlay-open {
|
|||
margin: 10px 5px 0;
|
||||
width: 140px;
|
||||
height: 80px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.theme-overlay .screenshot.thumb:after {
|
||||
|
|
@ -7043,8 +7062,7 @@ body.theme-overlay-open {
|
|||
margin-right: 0;
|
||||
}
|
||||
|
||||
.theme-overlay .theme-wrap,
|
||||
.theme-overlay .theme-actions {
|
||||
body.folded .theme-overlay .theme-wrap {
|
||||
right: 15%;
|
||||
left: 22%;
|
||||
}
|
||||
|
|
@ -7067,9 +7085,8 @@ body.theme-overlay-open {
|
|||
|
||||
/* Admin menu is folded */
|
||||
@media only screen and (max-width: 900px) {
|
||||
.theme-overlay .theme-wrap,
|
||||
.theme-overlay .theme-actions {
|
||||
left: 76px;
|
||||
.theme-overlay .theme-wrap {
|
||||
left: 65px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -7079,19 +7096,14 @@ body.theme-overlay-open {
|
|||
margin-right: -3px
|
||||
}
|
||||
|
||||
body.folded .theme-overlay .theme-wrap,
|
||||
.theme-overlay .theme-wrap {
|
||||
top: 45px;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
padding: 70px 20px 100px;
|
||||
}
|
||||
|
||||
.theme-overlay .theme-actions {
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
padding: 10px;
|
||||
padding: 70px 20px 20px;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.theme-overlay .theme-screenshots {
|
||||
|
|
@ -7101,10 +7113,6 @@ body.theme-overlay-open {
|
|||
.theme-overlay .theme-info {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.theme-overlay .theme-actions .delete-theme {
|
||||
bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 650px) {
|
||||
|
|
@ -7141,13 +7149,6 @@ body.theme-overlay-open {
|
|||
margin: 5px 0 15px 0;
|
||||
}
|
||||
|
||||
.theme-overlay .theme-version {
|
||||
margin-left: 0;
|
||||
position: absolute;
|
||||
top: 18px;
|
||||
left: 130px;
|
||||
}
|
||||
|
||||
.theme-overlay .current-label {
|
||||
margin-top: 10px;
|
||||
font-size: 13px;
|
||||
|
|
|
|||
|
|
@ -260,7 +260,7 @@ themes.view.Details = wp.Backbone.View.extend({
|
|||
// Detect if the click is inside the overlay
|
||||
// and don't close it unless the target was
|
||||
// the div.back button
|
||||
if ( $( event.target ).is( '.theme-backdrop' ) || $( event.target ).is( 'div.back' ) || event.keyCode === 27 ) {
|
||||
if ( $( event.target ).is( '.theme-backdrop' ) || $( event.target ).is( 'div.close' ) || event.keyCode === 27 ) {
|
||||
|
||||
// Add a temporary closing class while overlay fades out
|
||||
$( 'body' ).addClass( 'closing-overlay' );
|
||||
|
|
|
|||
|
|
@ -245,12 +245,12 @@ if ( ! is_multisite() && current_user_can('edit_themes') && $broken_themes = wp_
|
|||
<script id="tmpl-theme-single" type="text/template">
|
||||
<div class="theme-backdrop"></div>
|
||||
<div class="theme-wrap">
|
||||
<div class="theme-utility">
|
||||
<div alt="<?php _e( 'Close overlay' ); ?>" class="back dashicons dashicons-no"></div>
|
||||
<div class="theme-header">
|
||||
<div alt="<?php _e( 'Close overlay' ); ?>" class="close dashicons dashicons-no"></div>
|
||||
<div alt="<?php _e( 'Show previous theme' ); ?>" class="left dashicons dashicons-no"></div>
|
||||
<div alt="<?php _e( 'Show next theme' ); ?>" class="right dashicons dashicons-no"></div>
|
||||
</div>
|
||||
|
||||
<div class="theme-about">
|
||||
<div class="theme-screenshots">
|
||||
<# if ( data.screenshot[0] ) { #>
|
||||
<div class="screenshot first"><img src="{{ data.screenshot[0] }}" alt="" /></div>
|
||||
|
|
@ -310,9 +310,10 @@ if ( ! is_multisite() && current_user_can('edit_themes') && $broken_themes = wp_
|
|||
</div>
|
||||
|
||||
<# if ( ! data.active && data.actions.delete ) { #>
|
||||
<a href="{{{ data.actions.delete }}}" class="delete-theme"><?php _e( 'Delete' ); ?></a>
|
||||
<a href="{{{ data.actions.delete }}}" class="button button-secondary delete-theme"><?php _e( 'Delete' ); ?></a>
|
||||
<# } #>
|
||||
</div>
|
||||
</div>
|
||||
</script>
|
||||
|
||||
<?php require( ABSPATH . 'wp-admin/admin-footer.php' ); ?>
|
||||
|
|
|
|||
Loading…
Reference in New Issue