Switch the pager to use themeroller's icon sprites. I applied jquery ui css classes to newly added span classes in the pager templates directly, will likely move these out and apply through ui.init.js later.

12 files changed, 33 insertions, 80 deletions

diff --git a/themes/admin_default/views/pager.html.php b/themes/admin_default/views/pager.html.php
index 5c7c5396..e14cf857 100644
--- a/themes/admin_default/views/pager.html.php
+++ b/themes/admin_default/views/pager.html.php
@@ -1,30 +1,30 @@
 <?php defined("SYSPATH") or die("No direct script access.") ?>
 <? // See http://docs.kohanaphp.com/libraries/pagination ?>
 <ul id="gPager">
-   <? /* XXX: This message isn't easily localizable */
-      $from_to_msg = t("{{from_number}} - {{to_number}} of {{total}}",
-                       array("from_number" => $current_first_item,
-                             "to_number" => $current_last_item,
-                             "total" => $total_items)) ?>
-  <li><?= $from_to_msg?></li>
+  <? /* XXX: This message isn't easily localizable */
+     $from_to_msg = t("Items {{from_number}} - {{to_number}} of {{total}}",
+                      array("from_number" => $current_first_item,
+                            "to_number" => $current_last_item,
+                            "total" => $total_items)) ?>
+  <li><?= $from_to_msg ?></li>
   <? if ($first_page): ?>
-  <li class="first"><a href="<?= str_replace('{page}', 1, $url) ?>"><?= t("first") ?></a></li>
+  <li><span class="ui-icon ui-icon-seek-first"></span><a href="<?= str_replace('{page}', 1, $url) ?>"><?= t("first") ?></a></li>
   <? else: ?>
-  <li class="first_inactive"><?= t("first") ?></li>
+  <li class="inactive"><span class="ui-icon ui-icon-seek-first"></span><?= t("first") ?></li>
   <? endif ?>
   <? if ($previous_page): ?>
-  <li class="previous"><a href="<?= str_replace('{page}', $previous_page, $url) ?>"><?= t("previous") ?></a></li>
+  <li><span class="ui-icon ui-icon-seek-prev"></span><a href="<?= str_replace('{page}', $previous_page, $url) ?>"><?= t("previous") ?></a></li>
   <? else: ?>
-  <li class="previous_inactive"><?= t("previous") ?></li>
+  <li class="inactive"><span class="ui-icon ui-icon-seek-prev"></span><?= t("previous") ?></li>
   <? endif ?>
   <? if ($next_page): ?>
-  <li class="next"><a href="<?= str_replace('{page}', $next_page, $url) ?>"><?= t("next") ?></a></li>
+  <li><a href="<?= str_replace('{page}', $next_page, $url) ?>"><?= t("next") ?></a><span class="ui-icon ui-icon-seek-next"></span></li>
   <? else: ?>
-  <li class="next_inactive"><?= t("next") ?></li>
+  <li class="inactive"><?= t("next") ?><span class="ui-icon ui-icon-seek-next"></span></li>
   <? endif ?>
   <? if ($last_page): ?>
-  <li class="last"><a href="<?= str_replace('{page}', $last_page, $url) ?>"><?= t("last") ?></a></li>
+  <li><a href="<?= str_replace('{page}', $last_page, $url) ?>"><?= t("last") ?></a><span class="ui-icon ui-icon-seek-end"></span></li>
   <? else: ?>
-  <li class="last_inactive"><?= t("last") ?></li>
+  <li class="inactive"><?= t("last") ?><span class="ui-icon ui-icon-seek-end"></span></li>
   <? endif ?>
 </ul>
diff --git a/themes/default/css/screen.css b/themes/default/css/screen.css
index fabc35ac..8007a318 100644
--- a/themes/default/css/screen.css
+++ b/themes/default/css/screen.css
@@ -241,7 +241,9 @@ li.gError select {
  * 2) Reusable generic classes
  *********************************************************************/
 
-/* Not used, yet */
+.inactive {
+	color: #ccc;
+}
 
 /** *******************************************************************
  * 3) Reusable content blocks
@@ -445,9 +447,6 @@ li.gError select {
 #gContent #gItem {
 }
 
-#gContent #gItem #gPager {
-}
-
 #gContent #gComments {
   margin-top: 2em;
 }
@@ -648,64 +647,18 @@ li.gError select {
 
 #gPager {
   clear: both;
+  padding: 5px;
 }
 
 #gPager li {
-  background-repeat: no-repeat;
   float: left;
-  padding: 5px;
-}
-
-#gPager .first {
-  background-image: url('../images/ico-pg-first.png');
-  background-position: left;
-  padding-left: 20px;
-}
-
-#gPager .first_inactive {
-  background-image: url('../images/ico-pg-first_inactive.png');
-  background-position: left;
-  color: #ccc;
-  padding-left: 20px;
-}
-
-#gPager .previous {
-  background-image: url('../images/ico-pg-previous.png');
-  background-position: left;
-  padding-left: 17px;
-}
-
-#gPager .previous_inactive {
-  background-image: url('../images/ico-pg-previous_inactive.png');
-  background-position: left;
-  color: #ccc;
-  padding-left: 17px;
-}
-
-#gPager .next {
-  background-image: url('../images/ico-pg-next.png');
-  background-position: right;
-  padding-right: 17px;
-}
-
-#gPager .next_inactive {
-  background-image: url('../images/ico-pg-next_inactive.png');
-  background-position: right;
-  color: #ccc;
-  padding-right: 17px;
-}
-
-#gPager .last {
-  background-image: url('../images/ico-pg-last.png');
-  background-position: right;
-  padding-right: 20px;
+  margin-right: 1em;
 }
 
-#gPager .last_inactive {
-  background-image: url('../images/ico-pg-last_inactive.png');
-  background-position: right;
-  color: #ccc;
-  padding-right: 20px;
+#gPager li span {
+  display: inline-block;
+  height: 1em;
+  width: 16px;
 }
 
 /** *******************************************************************
diff --git a/themes/default/images/ico-pg-first.png b/themes/default/images/ico-pg-first.png
deleted file mode 100644
index 2091a2ed..00000000
--- a/themes/default/images/ico-pg-first.png
+++ /dev/null
diff --git a/themes/default/images/ico-pg-first_inactive.png b/themes/default/images/ico-pg-first_inactive.png
deleted file mode 100644
index 23cab473..00000000
--- a/themes/default/images/ico-pg-first_inactive.png
+++ /dev/null
diff --git a/themes/default/images/ico-pg-last.png b/themes/default/images/ico-pg-last.png
deleted file mode 100644
index 3f147da4..00000000
--- a/themes/default/images/ico-pg-last.png
+++ /dev/null
diff --git a/themes/default/images/ico-pg-last_inactive.png b/themes/default/images/ico-pg-last_inactive.png
deleted file mode 100644
index 3e6ca59a..00000000
--- a/themes/default/images/ico-pg-last_inactive.png
+++ /dev/null
diff --git a/themes/default/images/ico-pg-next.png b/themes/default/images/ico-pg-next.png
deleted file mode 100644
index 4d82e93c..00000000
--- a/themes/default/images/ico-pg-next.png
+++ /dev/null
diff --git a/themes/default/images/ico-pg-next_inactive.png b/themes/default/images/ico-pg-next_inactive.png
deleted file mode 100644
index decbb845..00000000
--- a/themes/default/images/ico-pg-next_inactive.png
+++ /dev/null
diff --git a/themes/default/images/ico-pg-previous.png b/themes/default/images/ico-pg-previous.png
deleted file mode 100644
index d4e02ae3..00000000
--- a/themes/default/images/ico-pg-previous.png
+++ /dev/null
diff --git a/themes/default/images/ico-pg-previous_inactive.png b/themes/default/images/ico-pg-previous_inactive.png
deleted file mode 100644
index 15257800..00000000
--- a/themes/default/images/ico-pg-previous_inactive.png
+++ /dev/null
diff --git a/themes/default/views/pager.html.php b/themes/default/views/pager.html.php
index 00185711..892fe21b 100644
--- a/themes/default/views/pager.html.php
+++ b/themes/default/views/pager.html.php
@@ -8,23 +8,23 @@
                             "total" => $total_items)) ?>
   <li><?= $from_to_msg ?></li>
   <? if ($first_page): ?>
-  <li class="first"><a href="<?= str_replace('{page}', 1, $url) ?>"><?= t("first") ?></a></li>
+  <li><span class="ui-icon ui-icon-seek-first"></span><a href="<?= str_replace('{page}', 1, $url) ?>"><?= t("first") ?></a></li>
   <? else: ?>
-  <li class="first_inactive"><?= t("first") ?></li>
+  <li class="inactive"><span class="ui-icon ui-icon-seek-first"></span><?= t("first") ?></li>
   <? endif ?>
   <? if ($previous_page): ?>
-  <li class="previous"><a href="<?= str_replace('{page}', $previous_page, $url) ?>"><?= t("previous") ?></a></li>
+  <li><span class="ui-icon ui-icon-seek-prev"></span><a href="<?= str_replace('{page}', $previous_page, $url) ?>"><?= t("previous") ?></a></li>
   <? else: ?>
-  <li class="previous_inactive"><?= t("previous") ?></li>
+  <li class="inactive"><span class="ui-icon ui-icon-seek-prev"></span><?= t("previous") ?></li>
   <? endif ?>
   <? if ($next_page): ?>
-  <li class="next"><a href="<?= str_replace('{page}', $next_page, $url) ?>"><?= t("next") ?></a></li>
+  <li><a href="<?= str_replace('{page}', $next_page, $url) ?>"><?= t("next") ?></a><span class="ui-icon ui-icon-seek-next"></span></li>
   <? else: ?>
-  <li class="next_inactive"><?= t("next") ?></li>
+  <li class="inactive"><?= t("next") ?><span class="ui-icon ui-icon-seek-next"></span></li>
   <? endif ?>
   <? if ($last_page): ?>
-  <li class="last"><a href="<?= str_replace('{page}', $last_page, $url) ?>"><?= t("last") ?></a></li>
+  <li><a href="<?= str_replace('{page}', $last_page, $url) ?>"><?= t("last") ?></a><span class="ui-icon ui-icon-seek-end"></span></li>
   <? else: ?>
-  <li class="last_inactive"><?= t("last") ?></li>
+  <li class="inactive"><?= t("last") ?><span class="ui-icon ui-icon-seek-end"></span></li>
   <? endif ?>
 </ul>
diff --git a/themes/default/views/photo.html.php b/themes/default/views/photo.html.php
index d374d4f8..a2ae5a8b 100644
--- a/themes/default/views/photo.html.php
+++ b/themes/default/views/photo.html.php
@@ -5,10 +5,10 @@
   <ul id="gPager">
     <li><?= t("{{position}} of {{total}}", array("position" => $position, "total" => $sibling_count)) ?></li>
     <? if ($previous_item): ?>
-    <li class="previous"><a href="<?= $previous_item->url() ?>"><?= t("previous") ?></a></li>
+    <li><span class="ui-icon ui-icon-seek-prev"></span><a href="<?= $previous_item->url() ?>"><?= t("previous") ?></a></li>
     <? endif ?>
     <? if ($next_item): ?>
-    <li class="next"><a href="<?= $next_item->url() ?>"><?= t("next") ?></a></li>
+    <li><a href="<?= $next_item->url() ?>"><?= t("next") ?></a><span class="ui-icon ui-icon-seek-next"></span></li>
     <? endif ?>
   </ul>