Changeset 2229

Timestamp:

12/28/2015 01:20:10 PM (11 years ago)

Author:

ocean90

Message:

WP i18n teams: Improve layout of the teams table on narrow screens.

Props ramiy, deconf.
Fixes #1481.

Location:

sites/trunk/wordpress.org/public_html/wp-content/plugins/wp-i18n-teams

Files:

• css/i18n-teams.css (modified) (2 diffs)
• views/all-locales.php (modified) (3 diffs)
• wp-i18n-teams.php (modified) (1 diff)

sites/trunk/wordpress.org/public_html/wp-content/plugins/wp-i18n-teams/css/i18n-teams.css

@@ -75 +75 @@
         border: 1px solid #E3E3E3;
         border-radius: 4px;
-        box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.05) inset;
+        box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05) inset;
 }
 #locale-header ul,
@@ -192 +192 @@
         padding: 6px 15px;
 }
+
+@media (max-width: 768px) {
+        .i18n-filter {
+                line-height: 2;
+                padding: 0 3px;
+        }
+
+        .show-all tbody tr,
+        .translators-info.show-latest tbody tr.latest,
+        .translators-info.show-minor-behind tbody tr.minor-behind,
+        .translators-info.show-major-behind-one tbody tr.major-behind-one,
+        .translators-info.show-major-behind-many tbody tr.major-behind-many,
+        .translators-info.show-no-releases tbody tr.no-releases,
+        .translators-info.show-no-site tbody tr.no-site,
+        .translators-info.show-translated-100 tbody tr.translated-100,
+        .translators-info.show-translated-95 tbody tr.translated-95,
+        .translators-info.show-translated-90 tbody tr.translated-90,
+        .translators-info.show-translated-50-less tbody tr.translated-50-less,
+        .translators-info.show-translated-50 tbody tr.translated-50 {
+                display: block;
+        }
+
+        .translators-info table thead th {
+                display: none;
+        }
+
+        .translators-info table {
+                border: none !important;
+        }
+
+        .translators-info table td {
+                border-width: 0 0 1px 0 !important;
+        }
+
+        .translators-info table tr {
+                border: 1px solid #ccc !important;
+        }
+
+        .translators-info table tbody th,
+        .translators-info table tbody td {
+                display: block;
+                text-align: left;
+        }
+
+        .translators-info table tbody tr {
+                margin-top: 20px;
+        }
+
+        .translators-info table tbody td {
+                padding: 6px 10px;
+                position: relative;
+                padding-left: 40%;
+        }
+
+        .translators-info table tbody td:before {
+                content: attr(data-column-title);
+                position: absolute;
+                left: 10px;
+                width: 50%;
+                font-weight: bold;
+        }
+
+        .translators-info table tbody td:nth-of-type(1) {
+                display: inline-block;
+                padding-left: 40%;
+                padding-right: 5px;
+                width: 30%;
+                border-bottom: none !important;
+        }
+
+        .translators-info table tbody td:nth-of-type(2) {
+                display: inline-block;
+                padding-left: 0;
+                width: 23%;
+                border-bottom: none !important;
+        }
+
+        .translators-info table tbody td:nth-of-type(3) {
+                border-top: 1px solid #ccc !important;
+        }
+
+        .translators-info table tbody td:nth-of-type(5) {
+                display: inline-block;
+                padding-left: 40%;
+                width: 30%;
+                border-bottom: none !important;
+        }
+
+        .translators-info table tbody td:nth-of-type(6) {
+                display: inline-block;
+                padding-left: 0;
+                width: 23%;
+                border-bottom: none !important;
+        }
+
+        .translators-info table tbody td:nth-of-type(7) {
+                border-top: 1px solid #ccc !important;
+                border-bottom: none !important;
+                padding-right: none;
+        }
+}

sites/trunk/wordpress.org/public_html/wp-content/plugins/wp-i18n-teams/views/all-locales.php

@@ -61 +61 @@
                                 ?>
                                 <tr class="<?php echo trim( $classes ); ?>">
-                                        <td class="no-right-border">
+                                        <td data-column-title="<?php esc_attr_e( 'Locale', 'wporg' ); ?>" class="no-right-border">
                                                 <?php if ( $locale_data[ $locale->wp_locale ]['rosetta_site_url'] ) : ?>
                                                         <a href="<?php echo esc_url( $locale_data[ $locale->wp_locale ]['rosetta_site_url'] ); ?>">
@@ -72 +72 @@
                                         <td class="no-left-border"><?php echo esc_html( $locale->native_name ); ?></td>
 
-                                        <td><?php echo esc_html( $locale->wp_locale ); ?></td>
+                                        <td data-column-title="<?php esc_attr_e( 'WP Locale', 'wporg' ); ?>"><?php echo esc_html( $locale->wp_locale ); ?></td>
 
-                                        <td>
+                                        <td data-column-title="<?php esc_attr_e( 'Version', 'wporg' ); ?>">
                                                 <?php
                                                         if ( $locale_data[ $locale->wp_locale ]['rosetta_site_url'] ) {
@@ -87 +87 @@
                                                 ?>
                                         </td>
-                                        <td class="right no-right-border">
+                                        <td data-column-title="<?php esc_attr_e( 'GlotPress', 'wporg' ); ?>" class="right no-right-border">
                                                 <a href="https://translate.wordpress.org/locale/<?php echo $locale->slug; ?>">
                                                         <?php echo ( isset( $percentages[ $locale->wp_locale ] ) ) ? $percentages[ $locale->wp_locale ] . '%' : '&mdash;'; ?>

sites/trunk/wordpress.org/public_html/wp-content/plugins/wp-i18n-teams/wp-i18n-teams.php

@@ -28 +28 @@
         public function enqueue_assets() {
                 if ( is_singular() && false !== strpos( get_post()->post_content, '[wp-locales' ) ) {
-                        wp_enqueue_style( 'wp-i18n-teams', plugins_url( 'css/i18n-teams.css', __FILE__ ), array(), 3 );
+                        wp_enqueue_style( 'wp-i18n-teams', plugins_url( 'css/i18n-teams.css', __FILE__ ), array(), 4 );
                         wp_enqueue_script( 'wp-i18n-teams', plugins_url( 'js/i18n-teams.js', __FILE__ ), array( 'jquery' ), 2 );
                 }