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;
     }