Changeset 169

Timestamp:

12/24/2013 08:39:56 AM (11 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;
+    }
+}
+