Changeset 1859

Timestamp:

09/02/2015 10:38:03 PM (8 years ago)

Author:

dd32

Message:

Translate: Stats overview: Update the styles.
Props sam.
See #1202

Location:

sites/trunk/translate.wordpress.org/public_html/gp-templates

Files:

• stats-overview.php (modified) (1 diff)
• style.css (modified) (1 diff)

sites/trunk/translate.wordpress.org/public_html/gp-templates/stats-overview.php

@@ -8 +8 @@
 gp_tmpl_header();
 
-function get_rgb_for_percent( $percent ) {
-    // This function does 100% = Green, < 100% = Red~Yellow
-    if ( $percent == 100 ) {
-        return 'rgb(0,153,0)';
-    }
-    $min = 0;
-    $max = 153;
-    $num = floor( $min + ( ($max - $min) * ( $percent/100 ) ) );
-    return "rgb(153,$num,0)";
-}
 
 ?>
-<div class="table">
-    <style>
-        <?php /* Temporary styling */ ?>
-        table.table {
-            text-align: center;
-        }
-        table.table thead th {
-            text-align: center;
-            font-weight: bold;
-        }
-        table.table .none {
-            color: #ccc;
-        }
-        table.table tbody th {
-            text-align: left;
-        }
-    </style>
+<div class="stats-table">
     <table class="table">
         <thead>
             <tr>
-                <th><?php _e( 'Language' ); ?></th>
+                <th class="title"><?php _e( 'Locale' ); ?></th>
                 <?php foreach ( $projects as $slug => $project ) : ?>
-                    <th><?php echo esc_html( str_replace( 'WordPress.org ', '', $project->name ) ); ?></th>
+                    <th><?php
+                        $namereplace = array( 'WordPress.org ', 'WordPress for ', 'WordPress ', 'ectory' );
+                        echo esc_html( str_replace( $namereplace, '', $project->name ) );
+                    ?></th>
                 <?php endforeach; ?>
             </tr>
         </thead>
         <tbody>
-            <?php foreach ( $translation_locale_complete as $locale_slug => $total_complete ) :
+            <?php
+            foreach ( $translation_locale_complete as $locale_slug => $total_complete ) :
                 $gp_locale = GP_Locales::by_slug( $locale_slug );
+                $set_slug = 'default';
                 // Variants (de/formal for example) don't have GP_Locales in this context
+                if ( ! $gp_locale && ( list( $base_locale_slug, $set_slug ) = explode( '/', $locale_slug ) ) ) {
+                    $gp_locale = clone GP_Locales::by_slug( $base_locale_slug );
+                    // Just append it for now..
+                    $gp_locale->wp_locale .= '/' . $set_slug;
+                }
+                if ( ! $gp_locale || ! $gp_locale->wp_locale ) {
+                    continue;
+                }
             ?>
                 <tr>
-                    <th title="<?php echo esc_attr( $gp_locale->english_name ?: $locale_slug ); ?>"><?php echo esc_html( $gp_locale->wp_locale ?: $locale_slug ); ?></th>
-                    <?php foreach ( $projects as $slug => $project ) :
+                    <th title="<?php echo esc_attr( $gp_locale->english_name ); ?>">
+                        <a href="<?php echo gp_url_join( 'locale', $gp_locale->slug, $set_slug ); ?>">
+                            <?php echo esc_html( $gp_locale->wp_locale ); ?> 
+                        </a>
+                    </th>
+                    <?php
+                    foreach ( $projects as $slug => $project ) {
+                        $projecturl = gp_url_join( 'locale', $gp_locale->slug, $set_slug, $project->path );
+
                         if ( isset( $translation_locale_statuses[ $locale_slug ][ $project->path ] ) ) {
                             $percent = $translation_locale_statuses[ $locale_slug ][ $project->path ];
-                            $percent = '<span style="color:' . get_rgb_for_percent( $percent ) . '">' . $percent . '%</span>';
+
+                            $percent_class = 'percent' . (int) ( $percent / 10 ) * 10;
+                            echo '<td class="' . $percent_class .'"><a href="' . $projecturl . '">' . $percent . '%</a></td>';
 
                         } else {
-                            $percent = '<span class="none">&mdash;</span>';
+                            echo '<td class="none">&mdash;</td>';
                         }
+                        
+                        
+                    }
                     ?>
-                        <td><?php echo $percent; ?></td>
-                    <?php endforeach; ?>
                 </tr>
             <?php endforeach; ?>

sites/trunk/translate.wordpress.org/public_html/gp-templates/style.css

@@ -869 +869 @@
     }
 }
+
+.stats-table table.table {
+    width: 620px;
+    text-align: center;
+    border-collapse: collapse;
+}
+
+.stats-table table thead {
+    border-bottom: 1px solid #191E23;
+    color: #191E23;
+    background: white;
+}
+.stats-table table thead th {
+    margin: 0;
+    font-weight: bold;
+    text-align: center;
+    vertical-align: bottom;
+    width: 60px;
+    padding-top: 10px;
+}
+
+.stats-table table th.title {
+    width: 120px;
+}
+
+.stats-table .none {
+    color: #ccc;
+}
+
+.stats-table tbody th {
+    text-align: left;
+    padding: 3px 10px;
+    background: #eee;
+}
+
+.stats-table tbody tr:hover {
+    opacity: 0.8;
+    outline: 1px solid #191E23;
+    outline-offset: 0;
+}
+
+.stats-table tbody tr th a:link,
+.stats-table tbody tr th a:hover,
+.stats-table tbody tr th a:visited {
+    color: #191E23;
+}
+
+.stats-table tbody td {
+    padding: 3px 0;
+}
+
+.stats-table tbody td.percent100 {background: #46B450; color: white;}
+.stats-table tbody td.percent90 {background: #6BC373;}
+.stats-table tbody td.percent80 {background: #90D296;}
+.stats-table tbody td.percent70 {background: #B5E1B9;}
+.stats-table tbody td.percent60 {background: #C7E8CA;}
+.stats-table tbody td.percent50 {background: #FFE399;}
+.stats-table tbody td.percent40 {background: #FBC5A9;}
+.stats-table tbody td.percent30 {background: #F1ADAD;}
+.stats-table tbody td.percent20 {background: #EA8484;}
+.stats-table tbody td.percent10 {background: #E35B5B;}
+.stats-table tbody td.percent0 {background: #DC3232; color: white;}
+
+.stats-table tbody td a:link,
+.stats-table tbody td a:hover,
+.stats-table tbody td a:visited {
+    color: #191E23;
+    display: inline-block;
+    width: 100%;
+    height: 100%;
+}
+
+.stats-table tbody td.percent100 a:link,
+.stats-table tbody td.percent0 a:link,
+.stats-table tbody td.percent100 a:hover,
+.stats-table tbody td.percent0 a:hover,
+.stats-table tbody td.percent100 a:visited,
+.stats-table tbody td.percent0 a:visited {
+    color: white;
+}
+
+.stats-table tbody tr td {
+    vertical-align: middle;
+}