Changeset 1530

Timestamp:

05/01/2015 01:00:33 PM (9 years ago)

Author:

ocean90

Message:

Translate: Refresh design of "Locales & Languages" page.

props samuelsidler, ocean90.
see #994.

Location:

sites/trunk/translate.wordpress.org

Files:

• includes/gp-plugins/wporg-routes (added)
• includes/gp-plugins/wporg-routes/cli (added)
• includes/gp-plugins/wporg-routes/cli/wporg-update-cached-data.php (added)
• includes/gp-plugins/wporg-routes/wporg-routes.php (added)
• public_html/gp-templates/helper-functions.php (modified) (1 diff)
• public_html/gp-templates/locales.php (added)
• public_html/gp-templates/style.css (modified) (4 diffs)

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

@@ -1 +1 @@
 <?php
 
-wp_enqueue_style( 'wporg', ( is_ssl() ? gp_url_ssl( gp_url_public_root() ) : gp_url_public_root() ) . 'gp-templates/style.css', array( 'base' ), '20150418' );
+wp_enqueue_style( 'wporg', ( is_ssl() ? gp_url_ssl( gp_url_public_root() ) : gp_url_public_root() ) . 'gp-templates/style.css', array( 'base' ), '20150501' );
 
 add_action( 'tmpl_load_locations', function( $locations, $template, $args, $template_path ) {

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

@@ -2 +2 @@
     margin: 0;
 }
+
 .gp-content {
-    margin: 10px auto;
-    width: 940px;
-}
+    font-family: 'Open Sans' !important;
+    margin: 20px auto;
+    max-width: 940px;
+    padding: 0 10px;
+}
+
 .gp-content span.breadcrumb {
     margin: .5em 0;
@@ -11 +15 @@
     float: none;
 }
+
 .gp-content h2 {
+    font-family: 'Open Sans' !important;
     margin: 2px 0 .6em;
 }
+
+.actionlist a,
+.actionlist a:link,
+.actionlist a:visited,
+.gp-content a {
+    color: #0074a2;
+}
+
+.gp-content a:hover {
+    color: #2ea2cc;
+    text-decoration: none;
+}
+
+ul a.edit,
+dt a.edit,
+ul a.edit:hover,
+dt a.edit:hover {
+    color: #fff;
+}
+
 #hello {
     margin-top: 22px;
     font-size: 1em;
 }
+
 p.description {
     margin: 1em;
 }
+
 p.actionlist {
     margin-top: 1em;
     margin-bottom: 1em;
 }
+
 #gp-footer {
+    clear: both;
+    font-family: 'Open Sans' !important;
     background: none;
-}
+    color: #a0a5aa;
+}
+
+#gp-footer a {
+    color: #0073aa;
+}
+
 /* custom markup */
 #headline .menu-link {
     padding-right: 20px;
 }
+
 /* overrides the global stylesheet: */
 .gp-content blockquote {
@@ -39 +77 @@
     margin: 0;
 }
+
 .gp-content ul {
     padding-left: 20px;
 }
+
 .gp-content #submit {
     font-size: 1em;
     margin: 0.4em 0.1em 0 0;
 }
+
 .notice {
     background: #99d9ed;
@@ -52 +93 @@
 }
 
+.notice a {
+    color: #006799;
+}
+
+.intro {
+    width: 75%;
+    margin-bottom: 20px;
+    font-size: 1.1em;
+    line-height: 1.5em;
+}
+
+.filter-header {
+    font-family: 'Open Sans' !important;
+    display: inline-block;
+    position: relative;
+    box-sizing: border-box;
+    margin: 0 0 25px 0;
+    padding: 0 40px 0 10px;
+    width: 100%;
+    box-shadow: 0 1px 1px rgba(0,0,0,0.04);
+    border: 1px solid #dfdfdf;
+    background: #efefef;
+    color: #555;
+    font-size: 13px;
+}
+
+.filter-header-links {
+    display: inline-block;
+    margin: 0;
+}
+
+.filter-header-links li {
+    display: inline-block;
+    margin: 0 10px;
+    padding: 15px 0;
+    color: #666;
+    cursor: pointer;
+}
+
+.filter-header-links .current {
+    -webkit-box-shadow: none;
+    box-shadow: none;
+    border-bottom: 4px solid #666;
+    color: #222;
+}
+
+.filter-header .search-form {
+    float: right;
+    margin: 15px 0;
+    display: inline-block;
+}
+
+.filter-header .filter-search {
+    margin: 0;
+    padding: 3px 5px;
+    width: 280px;
+    font-size: 16px;
+    font-weight: 300;
+    line-height: 1.5;
+}
+
+.filter-search {
+    border: 1px solid #ddd;
+    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;
+    border-radius: 0;
+}
+
+.locale {
+    float: left;
+    margin: 0 0 2.083% 2.083%;
+    width: 31.25%;
+    border: 1px solid #ccc;
+    box-shadow: 0 1px 1px -1px rgba(0,0,0,0.1);
+    background: #fff;
+    box-sizing: border-box;
+}
+
+.locales {
+    margin-left: -2.083%;
+}
+
+.locales:before,
+.locales:after {
+    content: "";
+    display: table;
+}
+
+.locales:after {
+    clear: both;
+}
+
+.locale.percent-100 {
+    border-color: #509040;
+}
+
+.locale-button .button {
+    height: 26px;
+}
+
+.locale-button .button a {
+    vertical-align: baseline;
+    color: #555;
+    line-height: 26px;
+    padding: 0 10px 5px;
+    -webkit-appearance: none;
+    border-radius: 3px;
+    white-space: nowrap;
+}
+
+.locale-button .button a:hover {
+    color: #333;
+}
+
+.locale-button {
+    background: #f9f9f9;
+    text-align: center;
+    padding: 13px 0;
+}
+
+.locale-button a {
+    color: #555;
+    padding: 8px;
+}
+
+.locale .name {
+    display: inline-block;
+    margin: 0;
+    padding: 20px;
+}
+
+.locale .name li {
+    display: block;
+}
+
+.locale .name li.english a {
+    font-weight: bold;
+}
+
+.locale .name li.code a {
+    color: #999;
+}
+
+.locale .contributors {
+    float: right;
+    margin-top: 20px;
+    padding: 10px 20px;
+    color: #006799;
+    border-left: 1px solid #eee;
+    text-align: center;
+}
+
+.locale .contributors .dashicons {
+    margin-left: -7px;
+    font-size: 2em;
+    padding-bottom: 10px;
+}
+
+.locale .percent {
+    width: 100%;
+    height: 4px;
+    background-color: #d6d6d6;
+}
+
+.locale .percent-complete {
+    height: 4px;
+    background-color: #509040;
+}
+
+.screen-reader-text {
+    clip: rect(1px, 1px, 1px, 1px);
+    height: 1px;
+    overflow: hidden;
+    position: absolute !important;
+    width: 1px;
+}
+
+/* Responsive styles */
+@media (max-width: 700px) {
+    .intro {
+        width: 100%;
+    }
+}
+
+@media only screen and (max-width: 1120px) {
+    .locales .locale {
+        width: 47.917%;
+    }
+}
+
+@media only screen and (max-width: 480px) {
+    .locales {
+        margin-left: 0;
+    }
+
+    .locales .locale {
+        width: 100%;
+        margin-left: 0;
+    }
+}