Ticket #27055: 27055.11.diff

wp-admin/js/theme.js

@@ -1153 +1153 @@
         searchContainer: $( '.theme-navigation' ),
 
         uploader: function() {
-                $( 'a.upload.button' ).on( 'click', function() {
-                        $( '.upload-theme' )
-                                .toggleClass( 'opened' )
-                                .hasClass( 'opened' ) ? $( this ).text( l10n.back ) : $( this ).text( l10n.upload );
+                $( 'a.upload' ).on( 'click', function() {
+                        $( 'body' ).addClass( 'show-upload-theme' );
+                        themes.router.navigate( themes.router.baseUrl( '?upload' ), { replace: true } );
                 });
+                $( 'a.browse-themes' ).on( 'click', function() {
+                        $( 'body' ).removeClass( 'show-upload-theme' );
+                        themes.router.navigate( themes.router.baseUrl( '' ), { replace: true } );
+                });
         },
 
         moreFilters: function() {
@@ -1168 +1171 @@
 themes.InstallerRouter = Backbone.Router.extend({
         routes: {
                 'theme-install.php?theme=:slug': 'preview',
-                'theme-install.php(?sort=:sort)': 'sort',
+                'theme-install.php?sort=:sort': 'sort',
+                'theme-install.php?upload': 'upload',
                 '': 'sort'
         },
 
@@ -1225 +1229 @@
                         self.view.trigger( 'theme:close' );
                 });
 
+                themes.router.on( 'route:upload', function( slug ) {
+                        $( 'a.upload' ).trigger( 'click' );
+                });
+
                 this.extraRoutes();
         },
 

wp-admin/css/themes.css

@@ -1065 +1065 @@
   16.2 - Install Themes
 ------------------------------------------------------------------------------*/
 
-.theme-install-php h2 .upload {
-        margin-left: 10px;
-}
 .theme-navigation {
         background: #fff;
         box-shadow: 0 1px 1px 0 rgba(0,0,0,.1);
@@ -1081 +1078 @@
         position: relative;
         width: 100%;
 }
+.theme-install-php a.upload,
+.theme-install-php a.browse-themes {
+        cursor: pointer;
+}
+.theme-install-php a.browse-themes,
+.theme-install-php.show-upload-theme a.upload {
+        display: none;
+}
+.theme-install-php.show-upload-theme a.browse-themes {
+        display: inline;
+}
 .upload-theme {
         -moz-box-sizing: border-box;
         box-sizing: border-box;
@@ -1092 +1100 @@
         position: relative;
                 top: 10px;
 }
-.upload-theme.opened {
+body.show-upload-theme .upload-theme {
         display: block;
 }
 .upload-theme .wp-upload-form {
@@ -1110 +1118 @@
         padding: 40px 0 0;
         text-align: center;
 }
-.upload-theme.opened + .theme-navigation,
-.upload-theme.opened + .theme-navigation + .theme-browser {
+body.show-upload-theme .upload-theme + .theme-navigation,
+body.show-upload-theme .upload-theme + .theme-navigation + .theme-browser {
         display: none;
 }
 .theme-navigation .theme-count {
@@ -1148 +1156 @@
         transition: color .1s ease-in, background .1s ease-in;
 }
 body.more-filters-opened .more-filters,
-.theme-navigation .more-filters.current {
+body.more-filters-opened .more-filters:before {
         background: rgb(46, 162, 204);
         border-radius: 2px;
         border: none;
@@ -1201 +1209 @@
         display: none !important;
 }
 
+@media only screen and (max-width: 1120px) {
+        .theme-install-php .theme-search {
+                margin: 20px 0;
+                position: static;
+                width: 100%;
+        }
+        .more-filters-container {
+                border-bottom: 1px solid #eee;
+        }
+        .upload-theme .wp-upload-form {
+                margin: 20px 0;
+                max-width: 100%;
+        }
+        .upload-theme .install-help {
+                font-size: 15px;
+                padding: 20px 0 0;
+                text-align: left;
+        }
+}
+
 .rating {
         margin: 30px 0;
 }

wp-admin/theme-install.php

@@ -104 +104 @@
 <div class="wrap">
         <h2>
                 <?php echo esc_html( $title ); ?>
-                <a class="upload button button-secondary"><?php esc_html_e( 'Upload Theme' ); ?></a>
+                <a class="upload add-new-h2"><?php esc_html_e( 'Upload Theme' ); ?></a>
+                <a class="browse-themes add-new-h2"><?php esc_html_e( 'Browse' ); ?></a>
         </h2>
 
         <div class="upload-theme">
@@ -119 +120 @@
                 <div class="theme-top-filters">
                         <span class="theme-filter" data-filter="photoblogging">Photography</span>
                         <span class="theme-filter" data-filter="responsive-layout">Responsive</span>
-                        <span class="theme-filter more-filters">More</span>
+                        <span class="more-filters">More</span>
                 </div>
                 <div class="more-filters-container">
                         Display more filters.