diff options
Diffstat (limited to 'themes/default')
-rw-r--r-- | themes/default/css/fix-ie.css | 4 | ||||
-rw-r--r-- | themes/default/css/screen.css | 66 | ||||
-rw-r--r-- | themes/default/js/ui.init.js | 75 | ||||
-rw-r--r-- | themes/default/views/album.html.php | 2 | ||||
-rw-r--r-- | themes/default/views/movie.html.php | 1 | ||||
-rw-r--r-- | themes/default/views/photo.html.php | 1 |
6 files changed, 106 insertions, 43 deletions
diff --git a/themes/default/css/fix-ie.css b/themes/default/css/fix-ie.css index c7c1ebad..eee88c15 100644 --- a/themes/default/css/fix-ie.css +++ b/themes/default/css/fix-ie.css @@ -35,7 +35,3 @@ input.submit { .gPager .ui-icon-right { width: 60px; } - -.gQuickPane { - height: 32px !important; -}
\ No newline at end of file diff --git a/themes/default/css/screen.css b/themes/default/css/screen.css index c5a9956d..05d2977a 100644 --- a/themes/default/css/screen.css +++ b/themes/default/css/screen.css @@ -453,26 +453,32 @@ form .gError, #gContent #gAlbumGrid { margin: 1em 0; + position: relative; + z-index: 1; } #gContent #gAlbumGrid .gItem { - border: 1px solid #e8e8e8; - border-right-color: #ccc; - border-bottom-color: #ccc; + background-color: #fff; + border: 1px solid #fff; float: left; font-size: .7em; - height: 240px; + height: 220px; overflow: hidden; - padding: 15px 8px 30px 8px; + padding: .6em 8px; position: relative; text-align: center; width: 213px; + z-index: 1; } #gContent #gAlbumGrid .gItem h2 { margin: 5px 0; } +.gPhoto h2, .gItem .gMetadata { + display: none; +} + #gContent #gAlbumGrid .gAlbum { background-color: #e8e8e8; } @@ -485,6 +491,35 @@ form .gError, width: 16px; } +#gContent #gAlbumGrid #gHoverItem { + background-color: #fff; + border: 1px solid #000; + display: none; + height: auto; + margin-top: -1em; + margin-left: -.4em; + padding: 0; + position: absolute; + width: auto; + z-index: 100; +} + +#gContent #gAlbumGrid #gHoverItem .gItem { + float: none; + height: 210px; + margin: 0; + padding: 0 1em 3em; +} + +#gContent #gAlbumGrid #gHoverItem .gItem div { + margin-top: 1em !important; +} + +#gHoverItem .gItem h2, +#gHoverItem .gItem .gMetadata { + display: block; +} + /* Individual photo content ~~~~~~~~~~~~~~ */ #gContent #gItem { @@ -586,26 +621,35 @@ form .gError, margin-bottom: 0 !important; } -/* Thumb Menu ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ +/* Context Menu ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ -#gContent .gThumbMenu { +.gContextMenu { bottom: 0; + display: none; left: 0; position: absolute; width: 100%; } -#gContent .gThumbMenu li { +.gContextMenu li { border-left: none; border-right: none; border-bottom: none; } -#gContent .gThumbMenu li li { - padding: .3em; +.gContextMenu li a { + line-height: 1.6em; +} + +#gHoverItem .gContextMenu { + display: block; +} + +#gHoverItem .gContextMenu li { + text-align: left; } -#gContent .gThumbMenu a:hover { +#gHoverItem .gContextMenu a:hover { text-decoration: none; } diff --git a/themes/default/js/ui.init.js b/themes/default/js/ui.init.js index b8ad68db..91d90b45 100644 --- a/themes/default/js/ui.init.js +++ b/themes/default/js/ui.init.js @@ -32,7 +32,6 @@ $(document).ready(function() { $("#gMessage li").gallery_show_message(); // Initialize dialogs - $(".gMenuLink").addClass("gDialogLink"); $("#gLoginLink").addClass("gDialogLink"); $(".gDialogLink").gallery_dialog(); @@ -54,8 +53,13 @@ $(document).ready(function() { if ($("#gAlbumGrid").length) { // Vertical align thumbnails/metadata in album grid $(".gItem").gallery_valign(); - $(".gQuick").ajaxStop(function(){ - $(".gItem").gallery_valign(); + // Apply styles to gContextMenu + $(".gContextMenu li").addClass("ui-state-default"); + $(".gContextMenu a").addClass("gButtonLink ui-icon-left"); + $(".gContextMenu a").prepend("<span class=\"ui-icon\"></span>"); + $(".gContextMenu a span").each(function() { + var iconClass = $(this).parent().attr("class").match(/ui-icon-.[^\s]*/).toString(); + $(this).addClass(iconClass); }); } @@ -67,7 +71,9 @@ $(document).ready(function() { // Collapse comments form, insert button to expand if ($("#gAddCommentForm").length) { - var showCommentForm = '<a href="#add_comment_form" class="showCommentForm gButtonLink ui-corner-all ui-icon-left ui-state-default right"><span class="ui-icon ui-icon-comment"></span>' + ADD_A_COMMENT + '</a>'; + var showCommentForm = '<a href="#add_comment_form"' + + ' class="showCommentForm gButtonLink ui-corner-all ui-icon-left ui-state-default right">' + + '<span class="ui-icon ui-icon-comment"></span>' + ADD_A_COMMENT + '</a>'; $("#gAddCommentForm").hide(); $("#gComments").prepend(showCommentForm); $(".showCommentForm").click(function(){ @@ -94,29 +100,44 @@ $(document).ready(function() { } ); - // Initialize thumbnail menus - // @todo Toggle between north and south caret's on hover - if ($("#gContent .gThumbMenu").length) { - $("#gContent .gThumbMenu li").addClass("ui-state-default"); - $("#gContent .gThumbMenu li a") - .not('[class]') - .addClass("gButtonLink ui-icon ui-icon-caret-l-n") - .css({ - height: "10px", - margin: "0", - padding: "0 0 3px 0" - }); - - $(".gThumbMenu ul").hide(); - $(".gThumbMenu").hover( - function() { - $(this).find("ul").slideDown("fast"); - }, - function() { - $(this).find("ul").slideUp("slow"); - } - ); - } + // Initialize context menus + // @todo apply hover affect to links + $(".gItem").hover( + function(){ + var pos = $(this).position(); + var itemClasses = $(this).attr("class"); + var bgColor = $(this).css("background-color"); + var cont = $(this).parent(); + $("#gHoverItem").remove(); + cont.append("<div id=\"gHoverItem\"><div class=\"" + itemClasses + "\">" + + $(this).html() + "</div></div>"); + $("#gHoverItem").css("top", pos.top); + $("#gHoverItem").css("left", pos.left); + $("#gHoverItem").css("background-color", bgColor); + $("#gHoverItem").fadeIn("fast"); + $("#gHoverItem").hover( + function(){ + // Initialize context menus + $(".gContextMenu ul").hide(); + $(".gContextMenu").hover( + function() { + $(this).find("ul").slideDown("fast"); + var dialogLinks = $(this).find(".gDialogLink"); + $(dialgoLinks).gallery_dialog(); + }, + function() { + $(this).find("ul").slideUp("slow"); + } + ); + }, + function() { + $(this).hide(); + } + ); + }, + function(){ + } + ); }); diff --git a/themes/default/views/album.html.php b/themes/default/views/album.html.php index 65ea3381..ce57458e 100644 --- a/themes/default/views/album.html.php +++ b/themes/default/views/album.html.php @@ -19,7 +19,7 @@ <?= $child->thumb_img(array("class" => "gThumbnail")) ?> </a> <?= $theme->thumb_bottom($child) ?> - <?= $theme->thumb_menu($child) ?> + <?= $theme->context_menu($child) ?> <h2><span></span><a href="<?= $child->url() ?>"><?= p::clean($child->title) ?></a></h2> <ul class="gMetadata"> <?= $theme->thumb_info($child) ?> diff --git a/themes/default/views/movie.html.php b/themes/default/views/movie.html.php index c90a370c..d255922b 100644 --- a/themes/default/views/movie.html.php +++ b/themes/default/views/movie.html.php @@ -36,4 +36,5 @@ var ADD_A_COMMENT = "<?= t("Add a comment") ?>"; </script> <?= $theme->photo_bottom() ?> + <?= $theme->context_menu($item) ?> </div> diff --git a/themes/default/views/photo.html.php b/themes/default/views/photo.html.php index 48472170..453417dc 100644 --- a/themes/default/views/photo.html.php +++ b/themes/default/views/photo.html.php @@ -47,6 +47,7 @@ </a> <? endif ?> <?= $theme->resize_bottom($item) ?> + <?= $theme->context_menu($item) ?> </div> <div id="gInfo"> |