From 919b03d9ceb3127158b242bd02706e4151df9044 Mon Sep 17 00:00:00 2001
From: Dion Hulse <dd32@git.wordpress.org>
Date: Mon, 2 Dec 2013 07:11:43 +0000
Subject: [PATCH] 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
---
 src/wp-admin/css/wp-admin.css | 131 +++++++++++++++++-----------------
 src/wp-admin/js/theme.js      |   2 +-
 src/wp-admin/themes.php       |   9 +--
 3 files changed, 72 insertions(+), 70 deletions(-)

diff --git a/src/wp-admin/css/wp-admin.css b/src/wp-admin/css/wp-admin.css
index 6fca9e3dcc..46c870af58 100644
--- a/src/wp-admin/css/wp-admin.css
+++ b/src/wp-admin/css/wp-admin.css
@@ -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;
diff --git a/src/wp-admin/js/theme.js b/src/wp-admin/js/theme.js
index 85825e3e86..e73715c1fc 100644
--- a/src/wp-admin/js/theme.js
+++ b/src/wp-admin/js/theme.js
@@ -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' );
diff --git a/src/wp-admin/themes.php b/src/wp-admin/themes.php
index 4d50535dac..745dac440b 100644
--- a/src/wp-admin/themes.php
+++ b/src/wp-admin/themes.php
@@ -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' ); ?>