Changeset 1590

Timestamp:

05/16/2015 11:56:20 AM (9 years ago)

Author:

ocean90

Message:

Translate: Improve filter header for the "Locales & Languages" page.

see #994.

Location:

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

Files:

• locales.php (modified) (1 diff)
• style.css (modified) (8 diffs)

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

@@ -10 +10 @@
     <div class="filter-header">
         <ul class="filter-header-links">
-            <li><?php _e( 'Find your locale' ); ?></li>
+            <li><span class="current"><?php _e( 'Find your locale' ); ?></span></li>
         </ul>
         <div class="search-form">
             <label class="screen-reader-text" for="locales-filter"><?php esc_attr_e( 'Search locales...' ); ?></label>
-            <input placeholder="<?php esc_attr_e( 'Search locales...' ); ?>" type="search" id="locales-filter" class="wp-filter-search">
+            <input placeholder="<?php esc_attr_e( 'Search locales...' ); ?>" type="search" id="locales-filter" class="filter-search">
         </div>
     </div>

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

@@ -4 +4 @@
 
 .gp-content {
-    font-family: 'Open Sans' !important;
+    font-family: 'Open Sans', sans-serif !important;
     margin: 20px auto;
     max-width: 940px;
     padding: 0 10px;
+}
+
+.gp-content h2 {
+    font-family: 'Open Sans', sans-serif !important;
+    margin: 2px 0 .6em;
 }
 
@@ -14 +19 @@
     display: block;
     float: none;
-}
-
-.gp-content h2 {
-    font-family: 'Open Sans' !important;
-    margin: 2px 0 .6em;
 }
 
@@ -108 +108 @@
     display: inline-block;
     position: relative;
+    -webkit-box-sizing: border-box;
     box-sizing: border-box;
-    margin: 0 0 25px 0;
-    padding: 0 40px 0 10px;
+    margin: 12px 0 25px;
+    padding: 0 20px;
     width: 100%;
+    -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.04);
     box-shadow: 0 1px 1px rgba(0,0,0,0.04);
     border: 1px solid #dfdfdf;
@@ -119 +121 @@
 }
 
-.filter-header-links {
-    display: inline-block;
-    margin: 0;
+ul.filter-header-links {
+    display: inline-block;
+    margin: 0;
+    padding: 0;
 }
 
 .filter-header-links li {
+    display: inline-block;
+    margin: 0;
+}
+
+.filter-header-links li > a,
+.filter-header-links li > span {
     display: inline-block;
     margin: 0 10px;
     padding: 15px 0;
+    border-bottom: 4px solid #fff;
     color: #666;
     cursor: pointer;
@@ -141 +151 @@
 .filter-header .search-form {
     float: right;
-    margin: 15px 0;
-    display: inline-block;
+    margin: 12px 0 11px;
 }
 
@@ -152 +161 @@
     font-weight: 300;
     line-height: 1.5;
-}
-
-.filter-search {
     border: 1px solid #ddd;
+    -webkit-box-shadow: inset 0 1px 2px rgba( 0, 0, 0, 0.07 );
     box-shadow: inset 0 1px 2px rgba( 0, 0, 0, 0.07 );
     background-color: #fff;
     color: #333;
     outline: none;
-    transition: 0.05s border-color ease-in-out;
+    -webkit-border-radius: 0;
     border-radius: 0;
+    -webkit-appearance: textfield;
+}
+
+.locales {
+    margin-left: -2.083%;
+}
+
+.locales:before,
+.locales:after {
+    content: "";
+    display: table;
+}
+
+.locales:after {
+    clear: both;
 }
 
@@ -169 +191 @@
     width: 31.25%;
     border: 1px solid #ccc;
+    -webkit-box-shadow: 0 1px 1px -1px rgba(0,0,0,0.1);
     box-shadow: 0 1px 1px -1px rgba(0,0,0,0.1);
     background: #fff;
+    -webkit-box-sizing: border-box;
     box-sizing: border-box;
-}
-
-.locales {
-    margin-left: -2.083%;
-}
-
-.locales:before,
-.locales:after {
-    content: "";
-    display: table;
-}
-
-.locales:after {
-    clear: both;
 }
 
@@ -202 +212 @@
     padding: 0 10px 5px;
     -webkit-appearance: none;
+    -webkit-border-radius: 3px;
     border-radius: 3px;
     white-space: nowrap;