diff options
Diffstat (limited to 'themes/default')
-rw-r--r-- | themes/default/css/fix-ie.css | 23 | ||||
-rw-r--r-- | themes/default/css/screen.css | 167 | ||||
-rw-r--r-- | themes/default/js/ui.init.js | 109 | ||||
-rw-r--r-- | themes/default/theme.info | 6 | ||||
-rw-r--r-- | themes/default/views/album.html.php | 2 | ||||
-rw-r--r-- | themes/default/views/header.html.php | 26 | ||||
-rw-r--r-- | themes/default/views/movie.html.php | 30 | ||||
-rw-r--r-- | themes/default/views/page.html.php | 37 | ||||
-rw-r--r-- | themes/default/views/photo.html.php | 3 |
9 files changed, 252 insertions, 151 deletions
diff --git a/themes/default/css/fix-ie.css b/themes/default/css/fix-ie.css index 3d9604e6..eee88c15 100644 --- a/themes/default/css/fix-ie.css +++ b/themes/default/css/fix-ie.css @@ -1,26 +1,17 @@ /** * Fix display in IE 6, 7 */ -#gHeader, -#gSiteMenu, + +#gBanner, .gBreadcrumbs, #gAlbumGrid, #gPager, -#gViewMenu { +#gViewMenu { zoom: 1; } -#gHeader #gLogo img { - margin-top: 5px; - margin-bottom: 0; -} - -#gHeader #gSiteMenu { - margin-top: 28px; -} - -#gHeader #gQuickSearchForm { - margin-bottom: 0; +#gBanner { + z-index: 2; } input.submit { @@ -44,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 41e51623..55839c57 100644 --- a/themes/default/css/screen.css +++ b/themes/default/css/screen.css @@ -131,7 +131,7 @@ fieldset { padding-bottom: .8em; } -#gHeader fieldset, +#gBanner fieldset, #gSidebar fieldset, .gShortForm fieldset { border: none; @@ -142,7 +142,7 @@ legend { margin-left: 1em; } -#gHeader legend, +#gBanner legend, #gSidebar legend, #gContent #gSearchForm legend, input[type="hidden"], @@ -387,16 +387,21 @@ form .gError, /* Layout containers ~~~~~~~~~~~~~~~~~~~~~ */ #gHeader { + margin-bottom: 1em; +} + +#gBanner { background-color: #e8e8e8; - border-bottom: 1px solid #fff; + border-bottom: 1px solid #ccc; font-size: .8em; - margin-bottom: 1em; - padding: 1em 20px 0 20px; + padding: 1em 20px; + position: relative; } #gContent { font-size: 1.2em; padding-left: 20px; + position: relative; width: 696px; } @@ -421,18 +426,17 @@ form .gError, /* Header ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ -#gHeader #gLogo img { - float: left; - margin: -4px 10px 0 0; +#gBanner #gLogo img { + margin: 0; } -#gHeader #gQuickSearchForm { +#gBanner #gQuickSearchForm { clear: right; float: right; - margin: 1em 0; + margin-top: 1em; } -#gHeader #gQuickSearchForm input[type='text'] { +#gBanner #gQuickSearchForm input[type='text'] { width: 17em; } @@ -449,45 +453,74 @@ 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: 14px 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; + display: none; + height: auto; + padding: 0; + position: absolute; + width: auto; + z-index: 100; +} + +#gContent #gAlbumGrid #gHoverItem .gItem { + border: none; +} + +#gContent #gHoverItem .gItem h2, +#gContent #gHoverItem .gItem .gMetadata { + display: block; +} + /* Individual photo content ~~~~~~~~~~~~~~ */ #gContent #gItem { + position: relative; width: 99%; } #gContent #gPhoto { - + position: relative; } #gContent #gItem .gFullSizeLink img { @@ -534,12 +567,12 @@ form .gError, /* Footer content ~~~~~~~~~~~~~~~~~~~~~~~~ */ -#gHeader #gLoginMenu li, +#gBanner #gLoginMenu li, #gFooter #gCredits li { display: inline; } -#gHeader #gLoginMenu li { +#gBanner #gLoginMenu li { padding-left: 1.2em; } @@ -557,14 +590,13 @@ form .gError, *********************************************************************/ #gSiteMenu, -.gBreadcrumbs, #gTagCloud ul { font-size: 1.2em; } /* Login menu ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ -#gHeader #gLoginMenu { +#gBanner #gLoginMenu { color: #999; float: right; } @@ -572,15 +604,63 @@ form .gError, /* Site Menu ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ #gSiteMenu { - float: left; - margin-top: 20px; - padding: 0 20px 0 0; + bottom: 0; + display: none; + left: 140px; + position: absolute; } #gSiteMenu ul { - margin-bottom: 0; + margin-bottom: 0 !important; } +/* Context Menu ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ + +.gContextMenu { + position: absolute; + bottom: 0; + left: 0; +} + +.gItem .gContextMenu { + display: none; + margin-top: 2em; + width: 100%; +} + +#gItem .gContextMenu { + font-size: .7em; +} + +#gItem .gContextMenu ul { + display: none; +} + +.gContextMenu li { + border-left: none; + border-right: none; + border-bottom: none; +} + +.gContextMenu li a { + display: block; + line-height: 1.6em; +} + +#gHoverItem .gContextMenu { + display: block; +} + +#gHoverItem .gContextMenu li { + text-align: left; +} + +#gHoverItem .gContextMenu a:hover { + text-decoration: none; +} + +/* View Menu ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ + #gViewMenu { margin-bottom: 1em; } @@ -615,11 +695,7 @@ form .gError, /* Breadcrumbs ~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ .gBreadcrumbs { - background-color: #fff; - border-top: 1px solid #ccc; - clear: both; - margin: 0 -20px; - padding-left: 20px; + padding: 0 20px; } .gBreadcrumbs li { @@ -737,9 +813,7 @@ form .gError, * 6) Browser hacks *********************************************************************/ -#gSiteMenu:after, #gHeader:after, -.gBreadcrumbs:after, #gAlbumGrid:after, .gPager:after, #gViewMenu:after { @@ -797,7 +871,6 @@ form .gError, .ui-widget-overlay { background: #000; opacity: .7; - filter: Alpha(Opacity=70); } #gDialog { @@ -879,24 +952,26 @@ form .gError, /* Server Add */ -.gCheckboxTree input { - display: inline; +#gServerAdd button { + float: left; + margin-bottom: .5em; } -.gCheckboxTree li { - padding: 0; - float: none; +#gServerAddTree { + cursor: pointer; + padding-left: 4px; } -.gCheckboxTree .ui-icon { - cursor: pointer; +#gServerAddTree li { + padding: 0; + float: none; } -.gFile { - padding-left: 2.5em; +#gServerAddTree span.selected { + background: #ddd; } -#gServerAdd #gServerAddTree { +#gServerAddTree { border: 1px solid #ccc; height: 25em; overflow: auto; @@ -909,10 +984,6 @@ form .gError, padding-left: 1.2em; } -#gServerAdd ul li .gFile { - padding-left: 2.5em; -} - #gServerAdd .gBreadcrumbs { font-size: 1em; padding: 0; diff --git a/themes/default/js/ui.init.js b/themes/default/js/ui.init.js index 9d9d3079..2391f638 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( @@ -26,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) { @@ -50,21 +43,78 @@ $(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(); + $(".gItem").gallery_valign(); + + // Initialize context menus + $(".gItem").hover( + function(){ + var position = $(this).position(); + var item_classes = $(this).attr("class"); + var bg_color = $(this).css("background-color"); + var container = $(this).parent(); + $("#gHoverItem").remove(); + container.append("<div id=\"gHoverItem\"><div class=\"" + item_classes + "\">" + + $(this).html() + "</div></div>"); + $("#gHoverItem").css("top", position.top); + $("#gHoverItem").css("left", position.left); + $("#gHoverItem").css("background-color", bg_color); + $.fn.gallery_hover_init(); + var v_align = $(this).find(".gValign"); + var title = $(this).find("h2"); + var meta = $(this).find(".gMetadata"); + var context = $(this).find(".gContextMenu"); + var context_label = $(this).find(".gContextMenu li:first"); + $("#gHoverItem .gItem").height( + $(v_align).gallery_height() + + $(title).gallery_height() + + $(meta).gallery_height() + + parseInt($(context).css("margin-top").replace("px","")) + + $(context_label).gallery_height() + ); + + $("#gHoverItem").fadeIn("fast"); + $("#gHoverItem").hover( + function(){ + $(this).gallery_context_menu(); + }, + function() { + $(this).hide(); + } + ); + } + ); } - // Photo/Item item view only + // Photo/Item item view if ($("#gItem").length) { - // Ensure that sized image versions - // fit inside their container - sizedImage(); + // 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(); + }); // 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(){ @@ -78,32 +128,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 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/theme.info b/themes/default/theme.info index 71e8a740..5f19d0d7 100644 --- a/themes/default/theme.info +++ b/themes/default/theme.info @@ -1,6 +1,6 @@ -name = Gallery Default -description = A crisp and distinctive theme that uses large fonts and icons for easy navigation and an enjoyable browsing experience. +name = "Gallery Default" +description = "A crisp and distinctive theme that uses large fonts and icons for easy navigation and an enjoyable browsing experience." version = 1 -author = Gallery Team +author = "Gallery Team" site = 1 admin = 0 diff --git a/themes/default/views/album.html.php b/themes/default/views/album.html.php index 65ea3381..e2890482 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() ?>"><?= p::clean($child->title) ?></a></h2> <ul class="gMetadata"> <?= $theme->thumb_info($child) ?> diff --git a/themes/default/views/header.html.php b/themes/default/views/header.html.php index 5428d9fd..2ba1e923 100644 --- a/themes/default/views/header.html.php +++ b/themes/default/views/header.html.php @@ -1,19 +1,19 @@ <?php defined("SYSPATH") or die("No direct script access.") ?> -<?= $theme->header_top() ?> -<? if ($header_text = module::get_var("gallery", "header_text")): ?> -<?= $header_text ?> -<? else: ?> -<a id="gLogo" href="<?= url::site("albums/1") ?>" title="<?= t("go back to the Gallery home") ?>"> - <img width="107" height="48" alt="<?= t("Gallery logo: Your photos on your web site") ?>" src="<?= $theme->theme_url("images/logo.png") ?>" /> -</a> -<? endif ?> - -<div id="gSiteMenu" style="display: none"> -<?= $theme->site_menu() ?> +<div id="gBanner"> + <?= $theme->header_top() ?> + <? if ($header_text = module::get_var("gallery", "header_text")): ?> + <?= $header_text ?> + <? else: ?> + <a id="gLogo" href="<?= url::site("albums/1") ?>" title="<?= t("go back to the Gallery home") ?>"> + <img width="107" height="48" alt="<?= t("Gallery logo: Your photos on your web site") ?>" src="<?= $theme->url("images/logo.png") ?>" /> + </a> + <? endif ?> + <div id="gSiteMenu"> + <?= $theme->site_menu() ?> + </div> + <?= $theme->header_bottom() ?> </div> -<?= $theme->header_bottom() ?> - <? if (!empty($parents)): ?> <ul class="gBreadcrumbs"> <? foreach ($parents as $parent): ?> diff --git a/themes/default/views/movie.html.php b/themes/default/views/movie.html.php index 66c80ded..c8ecd769 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"> @@ -23,4 +36,5 @@ var ADD_A_COMMENT = "<?= t("Add a comment") ?>"; </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 181a2c46..2cb71b9e 100644 --- a/themes/default/views/page.html.php +++ b/themes/default/views/page.html.php @@ -23,13 +23,13 @@ <? endif ?> <? endif ?> </title> - <link rel="shortcut icon" href="<?= $theme->theme_url("images/favicon.ico") ?>" type="image/x-icon" /> - <?= $theme->css("lib/yui/reset-fonts-grids.css") ?> - <?= $theme->css("lib/superfish/css/superfish.css") ?> - <?= $theme->css("lib/themeroller/ui.base.css") ?> - <?= $theme->theme_css("css/screen.css") ?> + <link rel="shortcut icon" href="<?= $theme->url("images/favicon.ico") ?>" type="image/x-icon" /> + <?= $theme->css("yui/reset-fonts-grids.css") ?> + <?= $theme->css("superfish/css/superfish.css") ?> + <?= $theme->css("themeroller/ui.base.css") ?> + <?= $theme->css("screen.css") ?> <!--[if lt IE 8]> - <link rel="stylesheet" type="text/css" href="<?= $theme->theme_url("css/fix-ie.css") ?>" + <link rel="stylesheet" type="text/css" href="<?= $theme->url("css/fix-ie.css") ?>" media="screen,print,projection" /> <![endif]--> <? if ($theme->page_type == 'album'): ?> @@ -45,26 +45,27 @@ </style> <? endif ?> <? endif ?> - <?= $theme->script("lib/jquery.js") ?> - <?= $theme->script("lib/jquery.form.js") ?> - <?= $theme->script("lib/jquery-ui.js") ?> - <?= $theme->script("lib/gallery.common.js") ?> + <?= $theme->script("jquery.js") ?> + <?= $theme->script("jquery.form.js") ?> + <?= $theme->script("jquery-ui.js") ?> + <?= $theme->script("gallery.common.js") ?> <? /* MSG_CANCEL is required by gallery.dialog.js */ ?> <script type="text/javascript"> var MSG_CANCEL = "<?= t('Cancel') ?>"; </script> - <?= $theme->script("lib/gallery.dialog.js") ?> - <?= $theme->script("lib/gallery.form.js") ?> - <?= $theme->script("lib/superfish/js/superfish.js") ?> - <?= $theme->script("lib/jquery.localscroll.js") ?> - <?= $theme->theme_script("js/ui.init.js") ?> + <?= $theme->script("gallery.ajax.js") ?> + <?= $theme->script("gallery.dialog.js") ?> + <?= $theme->script("gallery.form.js") ?> + <?= $theme->script("superfish/js/superfish.js") ?> + <?= $theme->script("jquery.localscroll.js") ?> + <?= $theme->script("ui.init.js") ?> <? /* These are page specific, but if we put them before $theme->head() they get combined */ ?> <? if ($theme->page_type == "photo"): ?> - <?= $theme->script("lib/jquery.scrollTo.js") ?> - <?= $theme->script("lib/gallery.show_full_size.js") ?> + <?= $theme->script("jquery.scrollTo.js") ?> + <?= $theme->script("gallery.show_full_size.js") ?> <? elseif ($theme->page_type == "movie"): ?> - <?= $theme->script("lib/flowplayer.js") ?> + <?= $theme->script("flowplayer.js") ?> <? endif ?> <?= $theme->head() ?> diff --git a/themes/default/views/photo.html.php b/themes/default/views/photo.html.php index bf4d9da3..fa5def47 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() ?>", "<?= $theme->item()->width ?>", "<?= $theme->item()->height ?>"); + $.gallery_show_full_size("<?= $theme->item()->file_url() ?>", "<?= $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"> |