Breadcrumb updates. Apply g-first and g-active consistently, use ems instead of px for nicer proportions, make font-size the same whether on the page or in a dialog.

lib/gallery.common.css

@@ -467,10 +467,6 @@ ul.sf-menu li li li.sfHover ul {
 
 /* Status and validation messages ~~~~ */
 
-.g-message {
-  font-size: .8em;
-}
-
 .g-message-block {
   border: 1px solid #ccc;
   width: 100%;
@@ -500,17 +496,19 @@ div#g-action-status {
 /* Breadcrumbs ~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
 
 .g-breadcrumbs {
+  clear: both;
   padding: 0 20px;
 }
 
 .g-breadcrumbs li {
   background: transparent url('images/ico-separator.gif') no-repeat scroll left center;
   float: left;
-  padding: 10px 6px 10px 16px !important;
+  padding: 1em .6em 1em 1.4em;
 }
 
-.g-breadcrumbs li.root {
-  background: transparent;
+.g-breadcrumbs .g-first {
+  background: none;
+  padding-left: 0;
 }
 
 .g-breadcrumbs li a,
@@ -518,21 +516,11 @@ div#g-action-status {
   display: block;
 }
 
-.g-breadcrumbs li.active,
-.g-breadcrumbs li.active span {
-  font-weight: bold;
-}
-
 #g-dialog ul.g-breadcrumbs {
-  clear: both;
   margin-left: 0;
   padding-left: 0;
 }
 
-#g-dialog .g-breadcrumbs li {
-  font-size: .9em;
-}
-
 /* Pagination ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
 
 .g-pager {
@@ -570,7 +558,9 @@ div#g-action-status {
 
 .g-inline li {
   float: left;
-  margin-left: 1em;
+  margin-left: 1.6em;
+  padding-left: 0;
+  border: 1px solid yellow;
 }
 
 .g-inline li.g-first {

modules/gallery/views/permissions_browse.html.php

@@ -6,8 +6,8 @@
       url: form_url.replace("__ITEM__", id),
       success: function(data) {
           $("#g-edit-permissions-form").html(data);
-          $(".active").removeClass("active");
-          $("#item-" + id).addClass("active");
+          $(".g-active").removeClass("g-active");
+          $("#item-" + id).addClass("g-active");
       }
     });
   }
@@ -38,18 +38,18 @@
   <p><?= t("Edit permissions for album:") ?></p>
 
   <ul class="g-breadcrumbs">
+    <? $i = 0 ?>
     <? foreach ($parents as $parent): ?>
-    <li id="item-<?= $parent->id ?>">
+    <li id="item-<?= $parent->id ?>"<? if ($i == 0) print " class=\"g-first\"" ?>>
       <? if (access::can("edit", $parent)): ?>
-      <a href="javascript:show(<?= $parent->id ?>)">
-        <?= html::purify($parent->title) ?>
-      </a>
+      <a href="javascript:show(<?= $parent->id ?>)"> <?= html::purify($parent->title) ?> </a>
       <? else: ?>
       <?= html::purify($parent->title) ?>
       <? endif ?>
     </li>
+    <? $i++ ?>
     <? endforeach ?>
-    <li class="active" id="item-<?= $item->id ?>">
+    <li class="g-active" id="item-<?= $item->id ?>">
       <a href="javascript:show(<?= $item->id ?>)">
         <?= html::purify($item->title) ?>
       </a>

modules/gallery/views/simple_uploader.html.php

@@ -25,10 +25,12 @@
     <?= t("Photos will be uploaded to album: ") ?>
   </p>
   <ul class="g-breadcrumbs">
+    <? $i = 0 ?>
     <? foreach ($item->parents() as $parent): ?>
-    <li> <?= html::clean($parent->title) ?> </li>
+    <li<? if ($i == 0) print " class=\"g-first\"" ?>> <?= html::clean($parent->title) ?> </li>
+    <? $i++ ?>
     <? endforeach ?>
-    <li class="active"> <?= html::purify($item->title) ?> </li>
+    <li class="g-active"> <?= html::purify($item->title) ?> </li>
   </ul>
 
   <div id="g-uploadqueue-infobar">

modules/server_add/views/server_add_tree_dialog.html.php

@@ -9,14 +9,12 @@
 
   <p id="g-description"><?= t("Photos will be added to album:") ?></p>
   <ul class="g-breadcrumbs">
+    <? $i = 0 ?>
     <? foreach ($item->parents() as $parent): ?>
-    <li>
-      <?= html::purify($parent->title) ?>
-    </li>
+    <li<? if ($i == 0) print " class=\"g-first\"" ?>> <?= html::purify($parent->title) ?> </li>
+    <? $i++ ?>
     <? endforeach ?>
-    <li class="active">
-      <?= html::purify($item->title) ?>
-    </li>
+    <li class="g-active"> <?= html::purify($item->title) ?> </li>
   </ul>
 
   <ul id="g-server-add-tree" class="g-checkbox-tree">

themes/wind/views/page.html.php

@@ -93,8 +93,9 @@
 
         <? if (!empty($parents)): ?>
         <ul class="g-breadcrumbs">
+          <? $i = 0 ?>
           <? foreach ($parents as $parent): ?>
-          <li>
+          <li<? if ($i == 0) print " class=\"g-first\"" ?>>
             <!-- Adding ?show=<id> causes Gallery3 to display the page
                  containing that photo.  For now, we just do it for
                  the immediate parent so that when you go back up a
@@ -104,8 +105,9 @@
               <?= html::purify($parent->title) ?>
             </a>
           </li>
+          <? $i++ ?>
           <? endforeach ?>
-          <li class="active"><?= html::purify($theme->item()->title) ?></li>
+          <li class="g-active"><?= html::purify($theme->item()->title) ?></li>
         </ul>
         <? endif ?>
       </div>