Changeset 2229

Timestamp:

12/28/2015 01:20:10 PM (9 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 );
         }