Position gItem and gPhoto relative, then position quick and thumb menus as absolute within them. Moved css from quick.js to quick.css.

5 files changed, 40 insertions, 12 deletions

diff --git a/modules/gallery/css/quick.css b/modules/gallery/css/quick.css
index 02f9953e..0e45eac2 100644
--- a/modules/gallery/css/quick.css
+++ b/modules/gallery/css/quick.css
@@ -1,3 +1,12 @@
+#gQuickPane {
+  position: absolute;
+  top: 0;
+  left: 0;
+  text-align: center;
+  width: 100%;
+  height: auto;
+}
+
 .gItem:hover {
   background-color: #cfdeff;
 }
@@ -12,6 +21,9 @@
   background: #000;
   border-bottom: 1px solid #ccc;
   opacity: 0.9;
+  position: absolute;
+  top: 0;
+  left: 0;
 }
 
 #gQuickPane a {
diff --git a/modules/gallery/helpers/gallery_menu.php b/modules/gallery/helpers/gallery_menu.php
index bffb7696..b6f763b8 100644
--- a/modules/gallery/helpers/gallery_menu.php
+++ b/modules/gallery/helpers/gallery_menu.php
@@ -97,7 +97,8 @@ class gallery_menu_Core {
   static function thumb($menu, $theme, $item) {
     $menu->append(Menu::factory("submenu")
                   ->id("options_menu")
-                  ->label(t("Options")));
+                  ->label(t("Options"))
+                  ->css_class("gThumbMenu"));
   }
 
   static function photo($menu, $theme) {
diff --git a/modules/gallery/js/quick.js b/modules/gallery/js/quick.js
index 4ebdac47..32e34ef3 100644
--- a/modules/gallery/js/quick.js
+++ b/modules/gallery/js/quick.js
@@ -13,16 +13,7 @@ var show_quick = function() {
   var quick = $(this).find(".gQuick");
   $("#gQuickPane").remove();
   cont.append("<div id=\"gQuickPane\"></div>");
-  var img = cont.find(".gThumbnail,.gResize");
-  var pos = cont.position();
-  $("#gQuickPane").css({
-    "position": "absolute",
-    "top": pos.top,
-    "left": pos.left,
-    "text-align": "center",
-    "width": cont.innerWidth() + 1,
-    "height": "auto"
-  }).hide();
+  $("#gQuickPane").hide();
   cont.hover(function() {}, hide_quick);
   $.get(
     quick.attr("href"),
diff --git a/themes/default/css/screen.css b/themes/default/css/screen.css
index 41e51623..d08ada17 100644
--- a/themes/default/css/screen.css
+++ b/themes/default/css/screen.css
@@ -460,6 +460,7 @@ form .gError,
   height: 240px;
   overflow: hidden;
   padding: 14px 8px;
+  position: relative;
   text-align: center;
   width: 213px;
 }
@@ -487,7 +488,7 @@ form .gError,
 }
 
 #gContent #gPhoto {
-
+  position: relative;
 }
 
 #gContent #gItem .gFullSizeLink img {
@@ -581,6 +582,21 @@ form .gError,
   margin-bottom: 0;
 }
 
+/* Thumb Menu  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
+
+.gItem .gMenu {
+  bottom: 0;
+  margin-bottom: -2px;
+  position: absolute;
+  right: 0;
+}
+
+.gItem .gMenu li {
+  font-weight: normal !important;
+}
+
+/* View Menu  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
+
 #gViewMenu {
   margin-bottom: 1em;
 }
diff --git a/themes/default/js/ui.init.js b/themes/default/js/ui.init.js
index 9d9d3079..29e04d5e 100644
--- a/themes/default/js/ui.init.js
+++ b/themes/default/js/ui.init.js
@@ -36,6 +36,14 @@ $(document).ready(function() {
     $(dialogLinks[i]).bind("click", handleDialogEvent);
   }
 
+  // gThumbMenu
+  if ($(".gItem .gMenu").length) {
+    $(".gItem .gMenu").removeClass("sf-menu");
+    $(".gItem .gMenu span").removeClass("sf-sub-indicator");
+    $(".gItem .gMenu span").addClass("ui-icon ui-icon-triangle-1-n");
+    $(".gItem .gMenu li:first-child").addClass("ui-icon-right ui-corner-top ui-state-default");
+  }
+
   // Initialize view menu
   if ($("#gViewMenu").length) {
     $("#gViewMenu ul").removeClass("gMenu").removeClass("sf-menu");