Changeset 169

Timestamp:

12/24/2013 08:39:56 AM (13 years ago)

Author:

coffee2code

Message:

jobs.wordpress.net: improve responsiveness for the job listings. see #84

Location:

sites/trunk/jobs.wordpress.net/public_html/wp-content

Files:

• plugins/jobswp/jobswp-template.php (modified) (3 diffs)
• themes/jobswp/style.css (modified) (7 diffs)

sites/trunk/jobs.wordpress.net/public_html/wp-content/plugins/jobswp/jobswp-template.php

@@ -81 +81 @@
                         $link .= apply_filters( 'list_cats', $category->name, $category ).'</a>';
         }
-        $link .= ' '.$after;        
-        $output .= $link;
-    $output .= '<div class="grid_2 omega jobs-count">';
-
+
+        $orig_jobscnt = $jobscnt;
         if ( is_search() ) {
                 $feed_link = get_search_feed_link();
@@ -93 +91 @@
         }
 
-        $output .= '<a href="' . $feed_link . '"><div class="dashicons dashicons-rss"></div></a>' . $jobscnt . '</div>
+        $link .= " <span>($orig_jobscnt)</span> $after";
+        $output .= $link;
+    $output .= '<div class="grid_2 omega jobs-count">';
+
+        $output .= '<a href="' . $feed_link . '"><div class="dashicons dashicons-rss"></div></a><span>' . $jobscnt . '</span></div>
                 </div>
                 <div class="clear"></div>
@@ -120 +122 @@
         $field_label = esc_html( $field_label );
 
-        echo '<div class="post-job-input post-job-input-$field_name">' . "\n";
+        echo '<div class="post-job-input post-job-input-' . $field_name . '">' . "\n";
         echo "<label for='$field_name'>$field_label" . ( $required ? '*' : '' ) . "</label>\n";
 

sites/trunk/jobs.wordpress.net/public_html/wp-content/themes/jobswp/style.css

@@ -849 +849 @@
         margin: 0;
 }
+.job-list-head h2 span {
+        display: none;
+}
 .job-list-head h2 a {
         text-decoration: none;
@@ -1146 +1149 @@
         clear: both;
         overflow: auto;
-        min-width: 932px;
         margin: 0 auto;
         padding: 22px 14px 65px 14px;
@@ -1212 +1214 @@
 }
 .jobswp #wporg-footer .wrapper {
-        width: inherit;
+        width: 100%;
         text-align: left;
 }
@@ -1247 +1249 @@
         #subhead .wporg-link a {
                 font-size: 0.78em;
+        }
+        #wporg-footer ul {
+                width: 110px;
         }
 }
@@ -1296 +1301 @@
         }
         #content {
-                padding-top: 30px;
+                padding-top: 20px;
         }
         #logo {
@@ -1345 +1350 @@
                 height: 50px;
         }
+        .search-form .search-field {
+                font-size: 0.8em;
+        }
+        .search-form input[type="submit"] {
+                padding-top: 11px;
+                padding-bottom: 11px;
+        }
         #wporg-footer {
                 min-width: inherit;
         }
-}
+        .container .jobs-group .job-list-head.grid_7 {
+                width: 260px;
+        }
+        .container .jobs-group .job-list-head h2 {
+                display: inline;
+        }
+        .container .jobs-group .jobs-count.grid_2 {
+                display: inline-block;
+                padding-right: 0;
+                width: 116px;
+        }
+        .container .job-list-col-labels {
+                display: none;
+        }
+        .container .jobs-group .job-date {
+                width: 75px;
+                text-align: center;
+                padding-right: 0;
+                float: left;
+                line-height: 1.1em;
+                padding-top: 3px;
+                padding-left: 20px;
+                margin-left: -75px;
+        }
+        .container .jobs-group .job-title.grid_4 {
+                width: 250px;
+                padding-right: 10px;
+                width: 311px;
+                padding-left: 10px;
+        }
+        .container .jobs-group .job-type {
+                display: inline-block;
+                text-align: inherit;
+                width: 120px;
+                padding-right: 10px;
+                padding-left: 10px;
+                font-size: 12px;
+                color: #999;
+        }
+        .container .jobs-group .job-location {
+                display: inline-block;
+                width: 181px;
+                text-align: right;
+                padding-left: 0;
+                padding-right: 0;
+        }
+        .row.row-0, .row.row-1 {
+                padding-left: 65px;
+        }
+}
+
 @media only screen and (max-width: 600px) {
         .menu {
@@ -1369 +1431 @@
                 vertical-align: middle;
         }
-}
+
+}
+
+@media only screen and (max-width: 479px) {
+        #subhead .container, #content {
+                padding-left: 10px;
+                padding-right: 10px;
+                margin-left: 0;
+                margin-right: 0;
+                width: 100%;
+        }
+        #subhead .container .grid_9 {
+                width: 100%;
+        }
+        .container .content-area.grid_9, .container .widget-area.grid_3 {
+                width: 100%;
+        }
+        .container .jobs-group .job-list-head.grid_7 {
+                width: 235px;
+        }
+        .container .jobs-group .job-title.grid_4 {
+                width: 100%;
+                padding-left: 0;
+        }
+        .container .jobs-group .job-date {
+                margin-left: -75px;
+                font-size: 0.9em;
+        }
+        .container .jobs-group .job-type {
+                display: inherit;
+                width: inherit;
+                padding-left: 0;
+        }
+        .container .jobs-group .job-location {
+                display: block;
+                width: inherit;
+                text-align: left;
+                padding-left: 0;
+        }
+        .row.row-0, .row.row-1 {
+                padding-left: 65px;
+        }
+        .container .jobs-group .row-head {
+                position: relative;
+        }
+        .job-list-head h2:before {
+                font-size: 28px;
+                margin-top: 2px;
+        }
+        .job-list-head h2 {
+                font-size: 1.35em;
+                margin: 0;
+        }
+        .container .jobs-group .jobs-count.grid_2 {
+                position: absolute;
+                right: 0;
+                top: 4px;
+                font-size: 1em;
+        }
+        .job-list-head h2 span {
+                display: inline;
+                font-size: 0.7em;
+        }
+        .container .jobs-group .jobs-count.grid_2 span {
+                display: none;
+        }
+}
+