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 | 155 | ||||
-rw-r--r-- | themes/default/js/ui.init.js | 147 | ||||
-rw-r--r-- | themes/default/views/album.html.php | 2 | ||||
-rw-r--r-- | themes/default/views/movie.html.php | 33 | ||||
-rw-r--r-- | themes/default/views/page.html.php | 1 | ||||
-rw-r--r-- | themes/default/views/photo.html.php | 6 |
7 files changed, 186 insertions, 162 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..82cdb331 100644 --- a/themes/default/css/screen.css +++ b/themes/default/css/screen.css @@ -276,12 +276,12 @@ li.gError select { /* Status messages ~~~~~~~~~~~~~~~~~~~~~~~ */ #gMessage { - width: 99%; + width: 100%; } -#gAdminAkismet .gSuccess, #gSiteStatus li, -#gMessage li { +#gMessage li, +.gModuleStatus { border: 1px solid #ccc; margin-bottom: .4em; } @@ -292,71 +292,49 @@ li.gError select { border-bottom: 1px solid #ccc; } -#gSiteStatus .gError, -#gMessage .gError, -form p.gError, -#gSiteStatus .gInfo, -#gMessage .gInfo, -#gSiteStatus .gSuccess, -#gMessage .gSuccess, -#gSiteStatus .gWarning, -#gMessage .gWarning { +.gModuleStatus { + clear: both; + margin-bottom: 1em; +} + +.gError, +.gInfo, +.gSuccess, +.gWarning { background-position: .4em 50%; background-repeat: no-repeat; padding: .4em .5em .4em 30px; } .gError { - background-color: #fcc; -} - -form .gError { - color: #f00; -} - -#gSiteStatus .gError, -#gMessage .gError, -form p.gError { + background-color: #f6cbca; + color: #fc0; background-image: url('../images/ico-error.png'); } .gInfo { background-color: #e8e8e8; -} - -#gSiteStatus .gInfo, -#gMessage .gInfo { background-image: url('../images/ico-info.png'); } .gSuccess { - background-color: #96EF95; -} - -#gSiteStatus .gSuccess, -#gMessage .gSuccess { + background-color: #d9efc2; background-image: url('../images/ico-success.png'); } .gWarning { - background-color: #ff9; -} - -#gSiteStatus .gWarning, -#gMessage .gWarning { + background-color: #fcf9ce; background-image: url('../images/ico-warning.png'); } form .gError, .gPager .gInfo { - background-color: #fff; + background-color: #fff !important; } -#gAdminMaintenance .gError, -#gAdminMaintenance .gInfo, -#gAdminMaintenance .gWarning, -#gAdminMaintenance .gSuccess { - background-image: none; +.gPager .gInfo { + background-image: none !important; + padding: 0 !important; } /* Inline layout (forms, lists) ~~~~~~~~~~ */ @@ -406,7 +384,6 @@ form .gError, } #gSidebar { - background-color: #fff; font-size: .9em; padding: 0 20px; width: 220px; @@ -453,41 +430,59 @@ 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; } +#gContent .gPhoto h2, +#gContent .gItem .gMetadata { + display: none; +} + #gContent #gAlbumGrid .gAlbum { background-color: #e8e8e8; } #gContent #gAlbumGrid .gAlbum h2 span { - background: transparent url('../images/ico-album.png') no-repeat top left !important; + background: transparent url('../images/ico-album.png') no-repeat top left; display: inline-block; height: 16px; margin-right: 5px; width: 16px; } +#gContent #gAlbumGrid .gHoverItem { + background-color: #fff; + border: 1px solid #000; +} + +#gContent .gHoverItem h2, +#gContent .gHoverItem .gMetadata { + display: block; +} + /* Individual photo content ~~~~~~~~~~~~~~ */ #gContent #gItem { + position: relative; width: 99%; } @@ -502,6 +497,7 @@ form .gError, #gContent #gComments { margin-top: 2em; + position: relative; } #gContent #gComments ul li { @@ -533,6 +529,12 @@ form .gError, width: 32px; } +#gAddCommentButton { + position: absolute; + right: 0; + top: 2px; +} + #gContent #gAddCommentForm { margin-top: 2em; } @@ -586,26 +588,48 @@ form .gError, margin-bottom: 0 !important; } -/* Thumb Menu ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ +/* Context Menu ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ -#gContent .gThumbMenu { +.gContextMenu { + position: absolute; bottom: 0; left: 0; - position: absolute; +} + +.gItem .gContextMenu { + display: none; + margin-top: 2em; width: 100%; } -#gContent .gThumbMenu li { +#gItem .gContextMenu { + font-size: .7em; +} + +#gItem .gContextMenu ul { + display: none; +} + +.gContextMenu li { border-left: none; border-right: none; border-bottom: none; } -#gContent .gThumbMenu li li { - padding: .3em; +.gContextMenu li a { + display: block; + line-height: 1.6em; +} + +.gHoverItem .gContextMenu { + display: block; } -#gContent .gThumbMenu a:hover { +.gHoverItem .gContextMenu li { + text-align: left; +} + +.gHoverItem .gContextMenu a:hover { text-decoration: none; } @@ -668,7 +692,7 @@ form .gError, font-weight: bold; } -#gAddPhotos .gBreadcrumbs { +#gDialog .gBreadcrumbs li { font-size: .9em; } @@ -851,6 +875,10 @@ form .gError, display: none; } +#gDialog p { + margin: 0; +} + /* jQuery UI ThemeRoller buttons */ .gButtonLink { @@ -951,6 +979,14 @@ form .gError, /* Permissions ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ +#gEditPermissionForm { + clear: both; +} +#gEditPermissionForm fieldset { + border: 1px solid #cccccc; + padding: 0; +} + #gPermissions .gDenied, #gPermissions .gAllowed { text-align: center; @@ -972,11 +1008,6 @@ form .gError, display: inline-block; } -#gAddPhotos p { - margin: 0; - padding: 0; -} - #gAddPhotosCanvas { height: 325px; width: 450px; diff --git a/themes/default/js/ui.init.js b/themes/default/js/ui.init.js index 11cd06ed..949933e9 100644 --- a/themes/default/js/ui.init.js +++ b/themes/default/js/ui.init.js @@ -1,8 +1,5 @@ /** - * Initialize jQuery UI and Plugin elements - * - * @todo Standardize how elements requiring listeners are handled - * http://docs.jquery.com/Events/live + * Initialize jQuery UI and Gallery Plugin elements */ var shortForms = new Array( @@ -13,9 +10,6 @@ var shortForms = new Array( $(document).ready(function() { - // Remove .gMenu from thumb menu's before initializing Superfish - // @todo gallery_menu should only apply gMenu to top-level menus, submenus should be gSubMenu-N - // Initialize Superfish menus $("ul.gMenu").addClass("sf-menu"); $('ul.sf-menu').superfish({ @@ -29,15 +23,11 @@ $(document).ready(function() { $("#gSiteMenu").css("display", "block"); // Initialize status message effects - $("#gMessage li").showMessage(); + $("#gMessage li").gallery_show_message(); // Initialize dialogs - $(".gMenuLink").addClass("gDialogLink"); $("#gLoginLink").addClass("gDialogLink"); - var dialogLinks = $(".gDialogLink"); - for (var i=0; i < dialogLinks.length; i++) { - $(dialogLinks[i]).bind("click", handleDialogEvent); - } + $(".gDialogLink").gallery_dialog(); // Initialize view menu if ($("#gViewMenu").length) { @@ -53,30 +43,74 @@ $(document).ready(function() { // Apply jQuery UI button css to submit inputs $("input[type=submit]:not(.gShortForm input)").addClass("ui-state-default ui-corner-all"); + // Apply styles and icon classes to gContextMenu + if ($(".gContextMenu").length) { + $(".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); + }); + } + // Album view only if ($("#gAlbumGrid").length) { // Vertical align thumbnails/metadata in album grid - $(".gItem").vAlign(); - $(".gQuick").ajaxStop(function(){ - $(".gItem").vAlign(); - }); + $(".gItem").gallery_valign(); + + // Initialize context menus + $(".gItem").hover( + function(){ + // Insert invisible placeholder to hold the item's position in the grid + var placeHolder = $(this).clone(); + $(placeHolder).attr("id", "gPlaceHolder"); + $(placeHolder).css("visibility", "hidden"); + $(this).after($(placeHolder)); + // Style and position the item + $(this).addClass("gHoverItem"); + var position = $(this).position(); + $(this).css("position", "absolute"); + $(this).css("top", position.top); + $(this).css("left", position.left); + $(this).css("z-index", "1000"); + // Initialize the contextual menu + $(this).gallery_context_menu(); + // Set height based on height of descendents + var title = $(this).find("h2"); + var meta = $(this).find(".gMetadata"); + var context_label = $(this).find(".gContextMenu li:first"); + var item_ht = $(this).height(); + var title_ht = $(title).gallery_height(); + var meta_ht = $(meta).gallery_height(); + var context_label_ht = $(context_label).gallery_height(); + $(this).height(item_ht + title_ht + meta_ht + context_label_ht); + }, + function() { + // Reset item height, position, and z-index + var sib_height = $(this).next().height(); + $(this).css("height", sib_height); + $(this).css("position", "relative"); + $(this).css("top", null); + $(this).css("left", null); + $(this).css("z-index", null); + // Remove the placeholder and hover class from the item + $("#gPlaceHolder").remove(); + $(this).removeClass("gHoverItem"); + } + ); } - // Photo/Item item view only + // Photo/Item item view if ($("#gItem").length) { - // Ensure that sized image versions - // fit inside their container - sizedImage(); - - // 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>'; - $("#gAddCommentForm").hide(); - $("#gComments").prepend(showCommentForm); - $(".showCommentForm").click(function(){ - $("#gAddCommentForm").show(1000); - }); - } + // Ensure the resized image fits within its container + $("#gItem").gallery_fit_photo(); + + // Initialize context menus + var resize = $("#gItem").gallery_get_photo(); + $(resize).hover(function(){ + $(this).gallery_context_menu(); + }); // Add scroll effect for links to named anchors $.localScroll({ @@ -84,56 +118,9 @@ $(document).ready(function() { duration: 1000, hash: true }); - } - // Add hover state for buttons - $(".ui-state-default").hover( - function(){ - $(this).addClass("ui-state-hover"); - }, - function(){ - $(this).removeClass("ui-state-hover"); - } - ); - - // 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 button hover effect + $.fn.gallery_hover_init(); }); - -/** - * Reduce width of sized photo if it's wider than its parent container - */ -function sizedImage() { - var containerWidth = $("#gItem").width(); - var oPhoto = $("#gItem img").filter(function() { - return this.id.match(/gPhotoId-/); - }); - if (containerWidth < oPhoto.width()) { - var proportion = containerWidth / oPhoto.width(); - oPhoto.width(containerWidth); - oPhoto.height(proportion * oPhoto.height()); - } -} diff --git a/themes/default/views/album.html.php b/themes/default/views/album.html.php index ffb4b913..8c690f5f 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, "#gItemId-{$child->id} .gThumbnail") ?> <h2><span></span><a href="<?= $child->url() ?>"><?= SafeString::of($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 75d51eff..237743b7 100644 --- a/themes/default/views/movie.html.php +++ b/themes/default/views/movie.html.php @@ -2,16 +2,29 @@ <div id="gItem"> <?= $theme->photo_top() ?> - <ul id="gPager"> - <li><?= t("%position of %total", array("position" => $position, "total" => $sibling_count)) ?></li> - <? if ($previous_item): ?> - <li><span class="ui-icon ui-icon-seek-prev"></span><a href="<?= $previous_item->url() ?>"><?= t("previous") ?></a></li> - <? endif ?> - <? if ($next_item): ?> - <li><a href="<?= $next_item->url() ?>"><?= t("next") ?></a><span class="ui-icon ui-icon-seek-next"></span></li> - <? endif ?> + <ul class="gPager"> + <li> + <? if ($previous_item): ?> + <a href="<?= $previous_item->url() ?>" class="gButtonLink ui-icon-left ui-state-default ui-corner-all"> + <span class="ui-icon ui-icon-triangle-1-w"></span><?= t("previous") ?></a> + <? else: ?> + <a class="gButtonLink ui-icon-left ui-state-disabled ui-corner-all"> + <span class="ui-icon ui-icon-triangle-1-w"></span><?= t("previous") ?></a> + <? endif; ?> + </li> + <li class="gInfo"><?= t("%position of %total", array("position" => $position, "total" => $sibling_count)) ?></li> + <li class="txtright"> + <? if ($next_item): ?> + <a href="<?= $next_item->url() ?>" class="gButtonLink ui-icon-right ui-state-default ui-corner-all"> + <span class="ui-icon ui-icon-triangle-1-e"></span><?= t("next") ?></a> + <? else: ?> + <a class="gButtonLink ui-icon-right ui-state-disabled ui-corner-all"> + <span class="ui-icon ui-icon-triangle-1-e"></span><?= t("next") ?></a> + <? endif ?> + </li> </ul> + <?= $item->movie_img(array("class" => "gMovie", "id" => "gMovieId-{$item->id}")) ?> <div id="gInfo"> @@ -19,8 +32,6 @@ <div><?= nl2br(SafeString::purify($item->description)) ?></div> </div> - <script type="text/javascript"> - var ADD_A_COMMENT = "<?= t("Add a comment")->for_js() ?>"; - </script> <?= $theme->photo_bottom() ?> + <?= $theme->context_menu($item, "#gMovieId-{$item->id}") ?> </div> diff --git a/themes/default/views/page.html.php b/themes/default/views/page.html.php index 8d9f0caa..844ef295 100644 --- a/themes/default/views/page.html.php +++ b/themes/default/views/page.html.php @@ -53,6 +53,7 @@ <script type="text/javascript"> var MSG_CANCEL = "<?= t('Cancel')->for_js() ?>"; </script> + <?= $theme->script("gallery.ajax.js") ?> <?= $theme->script("gallery.dialog.js") ?> <?= $theme->script("gallery.form.js") ?> <?= $theme->script("superfish/js/superfish.js") ?> diff --git a/themes/default/views/photo.html.php b/themes/default/views/photo.html.php index fcf597cf..5b5cb12b 100644 --- a/themes/default/views/photo.html.php +++ b/themes/default/views/photo.html.php @@ -5,7 +5,7 @@ <script> $(document).ready(function() { $(".gFullSizeLink").click(function() { - show_full_size("<?= $theme->item()->file_url()->for_js() ?>", "<?= $theme->item()->width ?>", "<?= $theme->item()->height ?>"); + $.gallery_show_full_size("<?= $theme->item()->file_url()->for_js() ?>", "<?= $theme->item()->width ?>", "<?= $theme->item()->height ?>"); return false; }); }); @@ -47,6 +47,7 @@ </a> <? endif ?> <?= $theme->resize_bottom($item) ?> + <?= $theme->context_menu($item, "#gPhotoId-{$item->id}") ?> </div> <div id="gInfo"> @@ -54,8 +55,5 @@ <div><?= nl2br(SafeString::purify($item->description)) ?></div> </div> - <script type="text/javascript"> - var ADD_A_COMMENT = "<?= t("Add a comment")->for_js() ?>"; - </script> <?= $theme->photo_bottom() ?> </div> |