Changeset 20414

Timestamp:

04/10/2012 12:15:13 AM (14 years ago)

Author:

koopersmith

Message:

Theme browsing UX improvements. see #20403.

• On manage/install themes pages, moved author under theme name.
• On manage themes page, moved version number to details.

Location:

trunk/wp-admin

Files:

• css/wp-admin.dev.css (modified) (1 diff)
• includes/class-wp-theme-install-list-table.php (modified) (1 diff)
• includes/class-wp-themes-list-table.php (modified) (2 diffs)

trunk/wp-admin/css/wp-admin.dev.css

@@ -4305 +4305 @@
 
 .available-theme h3 {
-        margin: 15px 0 5px;
+        margin: 15px 0 0;
+}
+
+.available-theme .theme-author {
+        line-height: 18px;
+}
+
+.available-theme .action-links {
+        margin-top: 10px;
 }
 

trunk/wp-admin/includes/class-wp-theme-install-list-table.php

@@ -198 +198 @@
                 </a>
 
-                <h3><?php
-                        /* translators: 1: theme name, 2: author name */
-                        printf( __( '%1$s <span>by %2$s</span>' ), $name, $author );
-                ?></h3>
+                <h3><?php echo $name; ?></h3>
+                <div class="theme-author"><?php printf( __( 'By %s' ), $author ); ?></div>
 
                 <?php

trunk/wp-admin/includes/class-wp-themes-list-table.php

@@ -117 +117 @@
                 $themes = $this->items;
 
-                foreach ( $themes as $theme ) {
-                        echo '<div class="available-theme">';
-
-                        $template = $theme->get_template();
+                foreach ( $themes as $theme ):
+                        ?><div class="available-theme"><?php
+
+                        $template   = $theme->get_template();
                         $stylesheet = $theme->get_stylesheet();
-
-                        $title = $theme->display('Name');
-                        $version = $theme->display('Version');
-                        $author = $theme->display('Author');
+                        $title      = $theme->display('Name');
+                        $version    = $theme->display('Version');
+                        $author     = $theme->display('Author');
 
                         $activate_link = wp_nonce_url( "themes.php?action=activate&amp;template=" . urlencode( $template ) . "&amp;stylesheet=" . urlencode( $stylesheet ), 'switch-theme_' . $template );
+
                         $preview_link = esc_url( add_query_arg(
                                 array( 'preview' => 1, 'template' => $template, 'stylesheet' => $stylesheet, 'preview_iframe' => true, 'TB_iframe' => 'true' ),
@@ -155 +155 @@
                         <?php endif; ?>
                         </a>
-                        <h3><?php
-                        /* translators: 1: theme title, 2: theme version, 3: theme author */
-                        printf( __( '%1$s %2$s by %3$s' ), $title, $version, $author ) ; ?></h3>
-
-                        <span class='action-links'><?php echo $actions ?></span>
-                        <span class="separator hide-if-no-js">| </span><a href="#" class="theme-detail hide-if-no-js" tabindex='4'><?php _e('Details') ?></a>
+                        <h3><?php echo $title; ?></h3>
+                        <div class="theme-author"><?php printf( __( 'By %s' ), $author ); ?></div>
+                        <div class="action-links">
+                                <?php echo $actions; ?>
+                                <span class="separator hide-if-no-js">| </span><a href="#" class="theme-detail hide-if-no-js" tabindex='4'><?php _e('Details') ?></a>
+                        </div>
+
                         <div class="themedetaildiv hide-if-js">
-                        <p><?php echo $theme->display('Description'); ?></p>
-                        <?php if ( current_user_can( 'edit_themes' ) && $theme->parent() ) :
-                                /* translators: 1: theme title, 2:  template dir, 3: stylesheet_dir, 4: theme title, 5: parent_theme */ ?>
-                                <p><?php printf( __( 'The template files are located in <code>%2$s</code>. The stylesheet files are located in <code>%3$s</code>. <strong>%4$s</strong> uses templates from <strong>%5$s</strong>. Changes made to the templates will affect both themes.' ),
-                                        $title, str_replace( WP_CONTENT_DIR, '', $theme->get_template_directory() ), str_replace( WP_CONTENT_DIR, '', $theme->get_stylesheet_directory() ), $title, $theme->parent()->display('Name') ); ?></p>
-                        <?php else :
-                                        /* translators: 1: theme title, 2:  template dir, 3: stylesheet_dir */ ?>
-                                <p><?php printf( __( 'All of this theme&#8217;s files are located in <code>%2$s</code>.' ),
-                                        $title, str_replace( WP_CONTENT_DIR, '', $theme->get_template_directory() ), str_replace( WP_CONTENT_DIR, '', $theme->get_stylesheet_directory() ) ); ?></p>
-                        <?php endif; ?>
+                                <p><strong><?php _e('Version: '); ?></strong><?php echo $version; ?></p>
+                                <p><?php echo $theme->display('Description'); ?></p>
+                                <?php if ( current_user_can( 'edit_themes' ) && $theme->parent() ) :
+                                        /* translators: 1: theme title, 2:  template dir, 3: stylesheet_dir, 4: theme title, 5: parent_theme */ ?>
+                                        <p><?php printf( __( 'The template files are located in <code>%2$s</code>. The stylesheet files are located in <code>%3$s</code>. <strong>%4$s</strong> uses templates from <strong>%5$s</strong>. Changes made to the templates will affect both themes.' ),
+                                                $title, str_replace( WP_CONTENT_DIR, '', $theme->get_template_directory() ), str_replace( WP_CONTENT_DIR, '', $theme->get_stylesheet_directory() ), $title, $theme->parent()->display('Name') ); ?></p>
+                                <?php else :
+                                                /* translators: 1: theme title, 2:  template dir, 3: stylesheet_dir */ ?>
+                                        <p><?php printf( __( 'All of this theme&#8217;s files are located in <code>%2$s</code>.' ),
+                                                $title, str_replace( WP_CONTENT_DIR, '', $theme->get_template_directory() ), str_replace( WP_CONTENT_DIR, '', $theme->get_stylesheet_directory() ) ); ?></p>
+                                <?php endif; ?>
                         </div>
+
                         <?php theme_update_available( $theme ); ?>
+
                         </div>
                 <?php
-                }
+                endforeach;
         }