diff options
Diffstat (limited to 'themes')
30 files changed, 1115 insertions, 696 deletions
diff --git a/themes/admin_default/css/fix-ie.css b/themes/admin_default/css/fix-ie.css index 97c619eb..6bc2334c 100644 --- a/themes/admin_default/css/fix-ie.css +++ b/themes/admin_default/css/fix-ie.css @@ -1,9 +1,8 @@ /** - * Fix display in IE + * Fix display in IE 6 and 7 */ #gHeader, -#gAdminMenu, #gGroupAdmin, #gDeveloperTools, .gAvailable .gBlock { diff --git a/themes/admin_default/css/screen.css b/themes/admin_default/css/screen.css index d408acf0..33cc6733 100644 --- a/themes/admin_default/css/screen.css +++ b/themes/admin_default/css/screen.css @@ -1,30 +1,276 @@ /** - * Gallery 3 Default Admin Theme Screen Styles + * Gallery 3 Default Theme Screen Styles * - * Extends themes/default/css/screen.css + * @requires YUI reset, font, grids CSS * - * 1) Basic HTML elements - * 2) Reusable content blocks - * 3) Page layout containers - * 4) Content blocks in specific layout containers - * 5) Browser hacks - * 6) jQuery and jQuery UI - * 7) Server Add - * 8) Digibug Print Administration + * Sheet organization: + * 1) Basic HTML elements + * 2) Reusable classes + * 3) Reusable content blocks + * 4) Page layout containers + * 5) Content blocks in specific layout containers + * 6) Navigation and menus + * 7) Browser hacks + * 8) jQuery and jQuery UI + * 9) Right-to-left language styles */ /** ******************************************************************* * 1) Basic HTML elements **********************************************************************/ +body, html { + background-color: #ccc; + font-family: 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; +} + +p { + margin-bottom: 1em; +} + +em { + font-style: oblique; +} + +h1, h2, h3, h4, h5, strong, th { + font-weight: bold; +} + +h1 { + font-size: 1.7em; +} + +#gSearchResults h1 { + margin-bottom: 1em; +} + +#gProgress h1 { + font-size: 1.1em; +} + +h2 { + font-size: 1.4em; +} + +#gSidebar .gBlock h2 { + font-size: 1.2em; +} + +#gSidebar .gBlock li { + margin-bottom: .6em; +} + +h3 { + font-size: 1.2em; +} + +/* Links ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ + +a, +.gMenu a, +#gDialog a, +.gButtonLink, +.gButtonLink:hover, +.gButtonLink:active, +a.ui-state-hover, +input.ui-state-hover, +button.ui-state-hover { + color: #5382BF !important; + text-decoration: none; + -moz-outline-style: none; +} + +a:hover, +#gDialog a:hover { + text-decoration: underline; +} + +.gMenu a:hover { + text-decoration: none; +} + +#gDialog .gCancel { + clear: none; + float: left; + margin: .3em 1em; +} + +#gForgotPasswordLink { + float: right; + font-size: .9em; +} + +#gDialog .gCancel { + float: left; +} + +/* Tables ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ + +table { + width: 100%; +} + +#gContent table { + margin: 1em 0 3em 0; +} + +caption, +th { + text-align: left; +} + +th, +td { + border: none; + border-bottom: 1px solid #ccc; + padding: .5em; + vertical-align: top; +} + +#gAdminMaintenance td { + vertical-align: middle; +} + +/* Forms ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ + +fieldset { + border: 1px solid #ccc; + padding-bottom: .8em; +} + +#gHeader fieldset, +#gSidebar fieldset, +.gShortForm fieldset { + border: none; +} + +legend { + font-weight: bold; + margin-left: 1em; +} + +#gHeader legend, +#gSidebar legend, +#gContent #gSearchForm legend, +input[type="hidden"], +.gShortForm label { + display: none; +} + +label { + cursor: help; +} + +input[type="text"], +input[type="password"] { + width: 50%; +} + +input[type="text"], +input[type="password"], +textarea { + border: 1px solid #e8e8e8; + border-top-color: #ccc; + border-left-color: #ccc; + color: #333; +} + +textarea { + width: 100%; + height: 12em; +} + +input:focus, +textarea:focus, +option:focus { + background-color: #ffc; + color: #000; +} + +/* Form layout ~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ + +form li { + margin: 0 !important; + padding: .3em 1.5em .3em 1em; +} + +form ul ul { + clear: both; +} + +form ul ul li { + float: left; +} + +input, +select, +textarea { + display: block; + clear: both; + padding: .2em; +} + +input[type="submit"], +input[type="reset"] { + display: inline; + clear: none; + float: left; +} + +/* Form validation ~~~~~~~~~~~~~~~~~~~~~~~ */ + +.gValidationRule { + font-size: 80%; + margin-top: .5em; +} + +form.gError input[type="text"], +li.gError input[type="text"], +form.gError input[type="password"], +li.gError input[type="password"], +form.gError input[type="checkbox"], +li.gError input[type="checkbox"], +form.gError input[type="radio"], +li.gError input[type="radio"], +form.gError textarea, +li.gError textarea, +form.gError select, +li.gError select { + border: 2px solid red; +} + /** ******************************************************************* - * 2) Reusable content blocks - **********************************************************************/ + * 2) Reusable generic classes + *********************************************************************/ + +.inactive, .understate { + color: #ccc; + font-weight: normal; +} + +.left { + float: left; + margin: 1em 1em 1em 0; +} + +.right { + float: right; + margin: 1em 0 1em 1em; +} + +.txtright { + text-align: right; +} + +/** ******************************************************************* + * 3) Reusable content blocks + *********************************************************************/ .gBlock { background-color: #fff; border: 1px solid #ccc; - margin-bottom: 1em; + clear: both; + margin-bottom: 2.5em; padding: 1em; } @@ -32,16 +278,24 @@ padding: 0; } +.gBlock h2 { + background-color: #e8e8e8; + padding: .3em .8em; +} + +.gBlockContent { + margin-top: 1em; +} + .gSelected img, .gAvailable .gBlock img { float: left; - margin-right: 1em; + margin: 0 1em 1em 0; } .rtl .gSelected img, .rtl .gAvailable .gBlock img { float: right; - margin-left: 1em; } .gSelected { @@ -74,68 +328,192 @@ background-color: #fff; } -/** ******************************************************************* - * 3) Page layout containers - **********************************************************************/ +/* Status messages ~~~~~~~~~~~~~~~~~~~~~~~ */ + +#gMessage { + width: 100%; +} + +#gSiteStatus li, +#gMessage li, +.gModuleStatus { + border: 1px solid #ccc; + margin-bottom: .4em; +} + +#gSiteStatus li { + margin-bottom: 0; + border: none; + border-bottom: 1px solid #ccc; +} + +.gModuleStatus { + clear: both; + margin-bottom: 1em; +} + +.gError, +.gInfo, +.gSuccess, +.gWarning { + padding: .4em .5em .4em 30px; +} + +.gError, tr.gError td.gError { + background: #f6cbca url('../images/ico-error.png') no-repeat .4em 50%; +} + +.gInfo { + background: #e8e8e8 url('../images/ico-info.png') no-repeat .4em 50%; +} + +.gSuccess { + background: #d9efc2 url('../images/ico-success.png') no-repeat .4em 50%; +} + +.gWarning, tr.gWarning td.gWarning { + background: #fcf9ce url('../images/ico-warning.png') no-repeat .4em 50%; +} + +.gPager .gInfo, +tr.gError, +tr.gInfo, +tr.gSuccess, +tr.gWarning { + background: none; +} + +.gInfo td.gInfo { + background-color: transparent; +} + +.gSuccess td.gSuccess { + background-color: transparent; +} + +.gError td { + background-color: #f6cbca; +} + +.gWarning td { + background-color: #fcf9ce; +} + +/* Inline layout (forms, lists) ~~~~~~~~~~ */ + +.gShortForm li { + float: left; + padding: .4em 0; +} + +.gShortForm input[type="text"] { + color: #666; + padding: .3em .6em; + width: 11em; +} + +/*** ****************************************************************** + * 4) Page layout containers + *********************************************************************/ + +/* View container ~~~~~~~~~~~~~~~~~~~~~~~~ */ .gView { + background-color: #fff; + border: 1px solid #ccc; + border-bottom: none; min-width: 974px !important; } +/* Layout containers ~~~~~~~~~~~~~~~~~~~~~ */ + #gHeader { background-color: #e8e8e8; border-bottom: 1px solid #ccc; + font-size: .8em; margin-bottom: 20px; padding: 0 20px; + position: relative; } #gContent { font-size: 1.1em; + padding-left: 20px; width: 96%; } +#gSidebar { + background-color: #fff; + font-size: .9em; + padding: 0 20px; + width: 220px; +} + +#gFooter { + background-color: #e8e8e8; + border-top: 1px solid #ccc; + font-size: .8em; + margin-top: 20px; + padding: 10px 20px; +} + /** ******************************************************************* - * 4) Content blocks in specific layout containers + * 5) Content blocks in specific layout containers *********************************************************************/ +/* Header ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ + #gHeader #gLogo { - float: left; - margin: -22px 10px 0 0; + background: transparent url('../../../lib/images/logo.png') no-repeat 0 .5em; + color: #A5A5A5 !important; display: block; - padding-left: 2px; - width: 105px; /* 107px - padding-left */ - height: 48px; - background-image: url('../../default/images/logo.png'); - color: #A5A5A5 ! important; + height: 55px; + padding-top: 5px; + width: 105px; } + #gHeader #gLogo:hover { - color: #FF6600 ! important; + color: #f60 !important; text-decoration: none; } -#gHeader #gLoginMenu { - float: none; - margin: 0; - padding: 5px 0 10px 0; - text-align: right; +#gHeader #gQuickSearchForm { + clear: right; + float: right; + margin: 1em 0; } +#gHeader #gQuickSearchForm input[type='text'] { + width: 17em; +} -.rtl #gHeader #gLoginMenu { - text-align: left; +#gContent .gBlock h2 { + background-color: transparent; + padding-left: 0; } -#gHeader #gSiteAdminMenu { - float: left; - font-size: 1.2em; +#gSidebar .gBlockContent { + padding-left: 1em; } -.rtl #gHeader #gSiteAdminMenu { - float: right; +/* Footer content ~~~~~~~~~~~~~~~~~~~~~~~~ */ + +#gHeader #gLoginMenu li, +#gFooter #gCredits li { + display: inline; } -#gHeader #gSiteAdminMenu ul { - margin-bottom: 0; +#gHeader #gLoginMenu li { + padding-left: 1.2em; +} + +#gFooter #gCredits li { + padding-right: 1.2em; +} + +#gContent #gSearchResults { + margin-top: 1em; + padding-top: 1em; } .gBlock .ui-dialog-titlebar { @@ -202,7 +580,7 @@ #gAdminGraphics .gAvailable .gBlock { clear: none; float: left; - height: 16em; + height: 17em; margin-right: 1em; width: 30%; } @@ -263,8 +641,8 @@ li.gGroup { } li.gGroup h4 { - background-color: #EEEEEE; - border-bottom: 1px dashed #CCCCCC; + background-color: #eee; + border-bottom: 1px dashed #ccc; padding: .5em 0 .5em .5em; } li.gGroup .gButtonLink { @@ -297,9 +675,66 @@ li.gDefaultGroup h4, li.gDefaultGroup .gUser { } /** ******************************************************************* - * 5) Browser hacks + * 5) Navigation and menus + *********************************************************************/ + +#gSiteAdminMenu, +#gTagCloud ul { + font-size: 1.2em; +} + +/* Login menu ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ + +#gHeader #gLoginMenu { + color: #999; + float: right; + margin: 0; + padding: 5px 0; +} + +.rtl #gHeader #gLoginMenu { + text-align: left; +} + +/* Site Menu ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ + +#gSiteAdminMenu { + bottom: 0; + display: none; + font-size: 1.2em; + left: 140px; + position: absolute; +} + +#gSiteAdminMenu ul { + margin-bottom: 0; +} + +/* Pagination ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ + +.gPager { + clear: both; + margin: 0; + padding: 5px 0 !important; + width: 100%; +} + +.gPager li { + float: left; + margin: 0; + width: 30%; +} + +.gPager .gInfo { + text-align: center; + width: 40%; +} + +/** ******************************************************************* + * 6) Browser hacks *********************************************************************/ +#gSiteAdminMenu:after, #gHeader:after, #gAdminCommentsMenu:after, #gGroupAdmin:after, @@ -307,7 +742,8 @@ li.gDefaultGroup h4, li.gDefaultGroup .gUser { .gAvailable .gBlock:after, #gModuleCreateForm ul li ul:after, #gDeveloperTools:after, -#gPhotoStream:after { +#gPhotoStream:after, +#gViewMenu:after { clear: both; content: "."; display: block; @@ -316,9 +752,49 @@ li.gDefaultGroup h4, li.gDefaultGroup .gUser { } /** ******************************************************************* - * 6) jQuery and jQuery UI + * 7) jQuery and jQuery UI *********************************************************************/ +/* Superfish menu overrides ~~~~~~~~~~~~~~ */ + +.sf-menu li li, .sf-menu li li ul li { + background-color: #bdd2ff; +} + +.sf-menu li:hover { + background-color: #dfe9ff; +} + +/* Ajax loading indicator ~~~~~~~~~~~~~~~~ */ + +.gLoadingLarge { + background: #e8e8e8 url('../../../lib/images/loading-large.gif') no-repeat center center; + font-size: 0; +} + +.gDialogLoadingLarge { + background: url('../../../lib/images/loading-large.gif') no-repeat center center !important; + font-size: 0; +} + +.gLoadingSmall { + background: #e8e8e8 url('../../../lib/images/loading-small.gif') no-repeat center center; + font-size: 0; +} + +.gDraggable { + cursor: move; +} + +.gDropTarget { + background-color: #cfdeff; + border: 1px dotted #999; + height: 100px; + margin: 1em 0; +} + +/* jQuery UI Dialog ~~~~~~~~~~~~~~~~~~~~~~ */ + #gPanel { display: none; padding: 1em; @@ -345,60 +821,232 @@ li.gDefaultGroup h4, li.gDefaultGroup .gUser { padding: .2em .4em; } -/**** Stuff that needs a home! ****/ +.ui-widget-overlay { + background: #000; + opacity: .7; +} + +#gDialog { + text-align: left; +} + +#gDialog li { + padding-left: 0; +} + +#gDialog form input[type="text"], +#gDialog form input[type="password"] { + width: 100%; +} + +#gDialog #gLoginForm, +#gDialog #gAddUserForm, +#gDialog #gAddGroupForm { + margin: 0 auto; + width: 270px; +} + +#gDialog fieldset { + border: none; +} + +#gDialog legend { + display: none; +} + +/* jQuery UI ThemeRoller buttons */ + +.gButtonLink { + display: inline-block; + margin: 0 4px 0 0; + padding: .2em .4em; + outline: 0; +} + +.gButtonSet { + padding-left: 1px; +} + +.gButtonSet li { + float: left; +} + +.gButtonSet .gButtonLink { + margin: 0; +} + +.ui-icon-left .ui-icon { + float: left; + margin-right: .2em; +} + +.ui-icon-right .ui-icon { + float: right; + margin-left: .2em; +} + +.ui-icon-rotate-ccw { + background-position: -192px -64px; +} + +.ui-icon-rotate-cw { + background-position: -208px -64px; +} + +/*************** STUFF THAT NEEDS A HOME ****************/ + +#gMove ul { + padding-left: 1em; +} + +#gMove .selected { + background: #999; +} + +.gProgressBar { + height: 1em; + width: 100%; + margin-top: .5em; + display: inline-block; +} + +#gAddPhotos p { + margin: 0; + padding: 0; +} + +#gAddPhotosCanvas { + height: 325px; + width: 450px; + overflow: auto; +} + +#gAddPhotosQueue .progressbar { + height: 4px; +} + +#gAddPhotosQueue .title { + font-size: 1.25em; +} + +#gAddPhotosQueue .status { + font-size: .75em; +} + +#gAddPhotosQueue .box { + margin-bottom: 8px; + padding: 4px; +} + +#gAddPhotosQueue .pending { + background-color: #e8e8e8; + border: 1px solid #d7d7d7; +} + +#gAddPhotosQueue .error { + background-color: #fcc; + border: 1px solid #ebb; +} + +#gAddPhotosQueue .uploading { + background-color: #ff9; + border: 1px solid #ee8; +} + +#gAddPhotosQueue .complete { + background-color: #cfc; + border: 1px solid #beb; +} + +#gAdminG2ImportNotes { + padding-bottom: 20px; +} + +#gAdminG2ImportDetails { + padding-top: 20px; +} + +#gAdminG2ImportDetails .gWarning { + margin-top: 4px; +} + +#gAdminG2ImportDetails .gInfo { + padding: 2px; + border: 1px solid #999; + margin-bottom: 10px; +} + +#gAdminG2ImportNotes p, +#gAdminG2ImportDetails .gInfo p { + padding: 0; + margin: 0; +} + +#gAdminG2ImportNotes ul li, +#gAdminG2Import .gInfo ul li { + padding-left: 0; + margin-left: 20px; + list-style-type: disc; +} + #gTagAdmin { table-layout: fixed; } + #gTagAdmin td { border: 0; } + #gTagAdmin ul { padding-bottom: .3em; } + #gTagAdmin li { padding: .1em 0 .2em .3em; } + #gTagAdmin .gColumn { float: left; width: 200px; } + .rtl #gTagAdmin .gColumn { float: right; } + .gEditable { padding: .1em .3em .2em .3em; } + .gEditable:hover { background-color: #ffc; cursor: text; } + #gRenameTagForm input { padding: 0 .2em 0 .2em; clear: none; float: left; margin: 0 .2em 0 0; } + .rtl #gRenameTagForm input { float: right; } + #gRenameTagForm input[type="submit"] { height: 25px; } + #gRenameTagForm a, #gRenameTagForm span { display: block; float: left; padding: .2em .2em 0 .1em; } + .rtl #gRenameTagForm a, #gRenameTagForm span { float: right; } -#gProgress button { - float: right; - margin-top: 1em; -} -.rtl #gProgress button { - float: left; -} #gTaskLogDialog h1 { font-size: 1.1em; @@ -413,10 +1061,6 @@ li.gDefaultGroup h4, li.gDefaultGroup .gUser { padding: .5em } - -/** ******************************************************************* - * 7) Server Add - *********************************************************************/ #gServerAddAdmin { margin:auto; text-align: left; @@ -451,8 +1095,71 @@ li.gDefaultGroup h4, li.gDefaultGroup .gUser { cursor: pointer; } -#gLanguageSettingsForm .checklist li { - width: 150px; - overflow: hidden; +#gLanguagesForm table { + width: 400px; + float: left; + margin: 0 3em 1em 0; +} + +#gLanguagesForm .installed { + background-color: #EEEEEE; } +#gLanguagesForm .default { + background-color: #C5DBEC; + font-weight: bold; +} + +#gLanguagesForm input { + clear: both; +} + +#gTranslations { + padding: 2em 0 0 0; + clear: both; +} + +#gTranslations .gButtonLink { + padding: .5em; +} + +.gDocLink { + float: right; +} + +/* Right to left styles ~~~~~~~~~~~~~~~~~~~~ */ + +.rtl { + direction: rtl; +} + +.rtl caption, +.rtl th, +.rtl #gDialog { + text-align: right; +} + +.rtl .txtright { + text-align: left; +} + +.rtl #gHeader #gQuickSearchForm, +.rtl #gForgotPasswordLink, +.rtl #gHeader #gLoginMenu, +.rtl .ui-icon-right .ui-icon { + clear: left; + float: left; +} + +.rtl #gDialog .gCancel, +.rtl form ul ul li, +.rtl input[type="submit"], +.rtl input[type="reset"], +.rtl .gShortForm li, +.rtl #gContent #gAlbumGrid .gItem, +.rtl #gSiteAdminMenu, +.rtl .gPager li, +.rtl .gButtonSet li, +.rtl .ui-icon-left .ui-icon { + float: right; +} diff --git a/themes/admin_default/images/ico-album.png b/themes/admin_default/images/ico-album.png Binary files differnew file mode 100644 index 00000000..affa1b84 --- /dev/null +++ b/themes/admin_default/images/ico-album.png diff --git a/themes/admin_default/images/ico-error.png b/themes/admin_default/images/ico-error.png Binary files differnew file mode 100644 index 00000000..c37bd062 --- /dev/null +++ b/themes/admin_default/images/ico-error.png diff --git a/themes/admin_default/images/ico-info.png b/themes/admin_default/images/ico-info.png Binary files differnew file mode 100644 index 00000000..12cd1aef --- /dev/null +++ b/themes/admin_default/images/ico-info.png diff --git a/themes/admin_default/images/ico-print.png b/themes/admin_default/images/ico-print.png Binary files differnew file mode 100644 index 00000000..b82a8e1e --- /dev/null +++ b/themes/admin_default/images/ico-print.png diff --git a/themes/admin_default/images/ico-separator.gif b/themes/admin_default/images/ico-separator.gif Binary files differnew file mode 100644 index 00000000..3de2d0d3 --- /dev/null +++ b/themes/admin_default/images/ico-separator.gif diff --git a/themes/admin_default/images/ico-success.png b/themes/admin_default/images/ico-success.png Binary files differnew file mode 100644 index 00000000..a9925a06 --- /dev/null +++ b/themes/admin_default/images/ico-success.png diff --git a/themes/admin_default/images/ico-view-comments.png b/themes/admin_default/images/ico-view-comments.png Binary files differnew file mode 100644 index 00000000..e5d3630f --- /dev/null +++ b/themes/admin_default/images/ico-view-comments.png diff --git a/themes/admin_default/images/ico-view-fullsize.png b/themes/admin_default/images/ico-view-fullsize.png Binary files differnew file mode 100644 index 00000000..0be23e9b --- /dev/null +++ b/themes/admin_default/images/ico-view-fullsize.png diff --git a/themes/admin_default/images/ico-view-hybrid.png b/themes/admin_default/images/ico-view-hybrid.png Binary files differnew file mode 100644 index 00000000..ee902e55 --- /dev/null +++ b/themes/admin_default/images/ico-view-hybrid.png diff --git a/themes/admin_default/images/ico-view-slideshow.png b/themes/admin_default/images/ico-view-slideshow.png Binary files differnew file mode 100644 index 00000000..82f61f63 --- /dev/null +++ b/themes/admin_default/images/ico-view-slideshow.png diff --git a/themes/admin_default/images/ico-warning.png b/themes/admin_default/images/ico-warning.png Binary files differnew file mode 100644 index 00000000..628cf2da --- /dev/null +++ b/themes/admin_default/images/ico-warning.png diff --git a/themes/admin_default/js/jquery.dropshadow.js b/themes/admin_default/js/jquery.dropshadow.js deleted file mode 100644 index af7c4b00..00000000 --- a/themes/admin_default/js/jquery.dropshadow.js +++ /dev/null @@ -1,304 +0,0 @@ -/* - VERSION: Drop Shadow jQuery Plugin 1.6 12-13-2007 - - REQUIRES: jquery.js (1.2.6 or later) - - SYNTAX: $(selector).dropShadow(options); // Creates new drop shadows - $(selector).redrawShadow(); // Redraws shadows on elements - $(selector).removeShadow(); // Removes shadows from elements - $(selector).shadowId(); // Returns an existing shadow's ID - - OPTIONS: - - left : integer (default = 4) - top : integer (default = 4) - blur : integer (default = 2) - opacity : decimal (default = 0.5) - color : string (default = "black") - swap : boolean (default = false) - - The left and top parameters specify the distance and direction, in pixels, to - offset the shadow. Zero values position the shadow directly behind the element. - Positive values shift the shadow to the right and down, while negative values - shift the shadow to the left and up. - - The blur parameter specifies the spread, or dispersion, of the shadow. Zero - produces a sharp shadow, one or two produces a normal shadow, and three or four - produces a softer shadow. Higher values increase the processing load. - - The opacity parameter should be a decimal value, usually less than one. You can - use a value higher than one in special situations, e.g. with extreme blurring. - - Color is specified in the usual manner, with a color name or hex value. The - color parameter does not apply with transparent images. - - The swap parameter reverses the stacking order of the original and the shadow. - This can be used for special effects, like an embossed or engraved look. - - EXPLANATION: - - This jQuery plug-in adds soft drop shadows behind page elements. It is only - intended for adding a few drop shadows to mostly stationary objects, like a - page heading, a photo, or content containers. - - The shadows it creates are not bound to the original elements, so they won't - move or change size automatically if the original elements change. A window - resize event listener is assigned, which should re-align the shadows in many - cases, but if the elements otherwise move or resize you will have to handle - those events manually. Shadows can be redrawn with the redrawShadow() method - or removed with the removeShadow() method. The redrawShadow() method uses the - same options used to create the original shadow. If you want to change the - options, you should remove the shadow first and then create a new shadow. - - The dropShadow method returns a jQuery collection of the new shadow(s). If - further manipulation is required, you can store it in a variable like this: - - var myShadow = $("#myElement").dropShadow(); - - You can also read the ID of the shadow from the original element at a later - time. To get a shadow's ID, either read the shadowId attribute of the - original element or call the shadowId() method. For example: - - var myShadowId = $("#myElement").attr("shadowId"); or - var myShadowId = $("#myElement").shadowId(); - - If the original element does not already have an ID assigned, a random ID will - be generated for the shadow. However, if the original does have an ID, the - shadow's ID will be the original ID and "_dropShadow". For example, if the - element's ID is "myElement", the shadow's ID would be "myElement_dropShadow". - - If you have a long piece of text and the user resizes the window so that the - text wraps or unwraps, the shape of the text changes and the words are no - longer in the same positions. In that case, you can either preset the height - and width, so that it becomes a fixed box, or you can shadow each word - separately, like this: - - <h1><span>Your</span> <span>Page</span> <span>Title</span></h1> - - $("h1 span").dropShadow(); - - The dropShadow method attempts to determine whether the selected elements have - transparent backgrounds. If you want to shadow the content inside an element, - like text or a transparent image, it must not have a background-color or - background-image style. If the element has a solid background it will create a - rectangular shadow around the outside box. - - The shadow elements are positioned absolutely one layer below the original - element, which is positioned relatively (unless it's already absolute). - - *** All shadows have the "dropShadow" class, for selecting with CSS or jQuery. - - ISSUES: - - 1) Limited styling of shadowed elements by ID. Because IDs must be unique, - and the shadows have their own ID, styles applied by ID won't transfer - to the shadows. Instead, style elements by class or use inline styles. - 2) Sometimes shadows don't align properly. Elements may need to be wrapped - in container elements, margins or floats changed, etc. or you may just - have to tweak the left and top offsets to get them to align. For example, - with draggable objects, you have to wrap them inside two divs. Make the - outer div draggable and set the inner div's position to relative. Then - you can create a shadow on the element inside the inner div. - 3) If the user changes font sizes it will throw the shadows off. Browsers - do not expose an event for font size changes. The only known way to - detect a user font size change is to embed an invisible text element and - then continuously poll for changes in size. - 4) Safari support is shaky, and may require even more tweaks/wrappers, etc. - - The bottom line is that this is a gimick effect, not PFM, and if you push it - too hard or expect it to work in every possible situation on every browser, - you will be disappointed. Use it sparingly, and don't use it for anything - critical. Otherwise, have fun with it! - - AUTHOR: Larry Stevens (McLars@eyebulb.com) This work is in the public domain, - and it is not supported in any way. Use it at your own risk. -*/ - - -(function($){ - - var dropShadowZindex = 1; //z-index counter - - $.fn.dropShadow = function(options) - { - // Default options - var opt = $.extend({ - left: 4, - top: 4, - blur: 2, - opacity: .5, - color: "black", - swap: false - }, options); - var jShadows = $([]); //empty jQuery collection - - // Loop through original elements - this.not(".dropShadow").each(function() - { - var jthis = $(this); - var shadows = []; - var blur = (opt.blur <= 0) ? 0 : opt.blur; - var opacity = (blur == 0) ? opt.opacity : opt.opacity / (blur * 8); - var zOriginal = (opt.swap) ? dropShadowZindex : dropShadowZindex + 1; - var zShadow = (opt.swap) ? dropShadowZindex + 1 : dropShadowZindex; - - // Create ID for shadow - var shadowId; - if (this.id) { - shadowId = this.id + "_dropShadow"; - } - else { - shadowId = "ds" + (1 + Math.floor(9999 * Math.random())); - } - - // Modify original element - $.data(this, "shadowId", shadowId); //store id in expando - $.data(this, "shadowOptions", options); //store options in expando - jthis - .attr("shadowId", shadowId) - .css("zIndex", zOriginal); - if (jthis.css("position") != "absolute") { - jthis.css({ - position: "relative", - zoom: 1 //for IE layout - }); - } - - // Create first shadow layer - bgColor = jthis.css("backgroundColor"); - if (bgColor == "rgba(0, 0, 0, 0)") bgColor = "transparent"; //Safari - if (bgColor != "transparent" || jthis.css("backgroundImage") != "none" - || this.nodeName == "SELECT" - || this.nodeName == "INPUT" - || this.nodeName == "TEXTAREA") { - shadows[0] = $("<div></div>") - .css("background", opt.color); - } - else { - shadows[0] = jthis - .clone() - .removeAttr("id") - .removeAttr("name") - .removeAttr("shadowId") - .css("color", opt.color); - } - shadows[0] - .addClass("dropShadow") - .css({ - height: jthis.outerHeight(), - left: blur, - opacity: opacity, - position: "absolute", - top: blur, - width: jthis.outerWidth(), - zIndex: zShadow - }); - - // Create other shadow layers - var layers = (8 * blur) + 1; - for (i = 1; i < layers; i++) { - shadows[i] = shadows[0].clone(); - } - - // Position layers - var i = 1; - var j = blur; - while (j > 0) { - shadows[i].css({left: j * 2, top: 0}); //top - shadows[i + 1].css({left: j * 4, top: j * 2}); //right - shadows[i + 2].css({left: j * 2, top: j * 4}); //bottom - shadows[i + 3].css({left: 0, top: j * 2}); //left - shadows[i + 4].css({left: j * 3, top: j}); //top-right - shadows[i + 5].css({left: j * 3, top: j * 3}); //bottom-right - shadows[i + 6].css({left: j, top: j * 3}); //bottom-left - shadows[i + 7].css({left: j, top: j}); //top-left - i += 8; - j--; - } - - // Create container - var divShadow = $("<div></div>") - .attr("id", shadowId) - .addClass("dropShadow") - .css({ - left: jthis.position().left + opt.left - blur, - marginTop: jthis.css("marginTop"), - marginRight: jthis.css("marginRight"), - marginBottom: jthis.css("marginBottom"), - marginLeft: jthis.css("marginLeft"), - position: "absolute", - top: jthis.position().top + opt.top - blur, - zIndex: zShadow - }); - - // Add layers to container - for (i = 0; i < layers; i++) { - divShadow.append(shadows[i]); - } - - // Add container to DOM - jthis.after(divShadow); - - // Add shadow to return set - jShadows = jShadows.add(divShadow); - - // Re-align shadow on window resize - $(window).resize(function() - { - try { - divShadow.css({ - left: jthis.position().left + opt.left - blur, - top: jthis.position().top + opt.top - blur - }); - } - catch(e){} - }); - - // Increment z-index counter - dropShadowZindex += 2; - - }); //end each - - return this.pushStack(jShadows); - }; - - - $.fn.redrawShadow = function() - { - // Remove existing shadows - this.removeShadow(); - - // Draw new shadows - return this.each(function() - { - var shadowOptions = $.data(this, "shadowOptions"); - $(this).dropShadow(shadowOptions); - }); - }; - - - $.fn.removeShadow = function() - { - return this.each(function() - { - var shadowId = $(this).shadowId(); - $("div#" + shadowId).remove(); - }); - }; - - - $.fn.shadowId = function() - { - return $.data(this[0], "shadowId"); - }; - - - $(function() - { - // Suppress printing of shadows - var noPrint = "<style type='text/css' media='print'>"; - noPrint += ".dropShadow{visibility:hidden;}</style>"; - $("head").append(noPrint); - }); - -})(jQuery); diff --git a/themes/admin_default/js/ui.init.js b/themes/admin_default/js/ui.init.js index 3f062a27..1e09fd9f 100644 --- a/themes/admin_default/js/ui.init.js +++ b/themes/admin_default/js/ui.init.js @@ -1,5 +1,4 @@ $(document).ready(function(){ - // Initialize Superfish menus $("#gSiteAdminMenu ul.gMenu").addClass("sf-menu"); $("ul.gMenu").addClass("sf-menu"); @@ -15,23 +14,20 @@ $(document).ready(function(){ $("#gSiteAdminMenu").css("display", "block"); // Initialize status message effects - $("#gMessage li").showMessage(); + $("#gMessage li").gallery_show_message(); // Initialize modal dialogs - var dialogLinks = $(".gDialogLink"); - for (var i=0; i < dialogLinks.length; i++) { - $(dialogLinks[i]).bind("click", handleDialogEvent); - } + $(".gDialogLink").gallery_dialog(); + + // Initialize ajax links + $(".gDialogLink").gallery_ajax(); // Initialize panels - var panelLinks = $(".gPanelLink"); - for (i=0; i<panelLinks.length; i++) { - $(panelLinks[i]).bind("click", handlePanelEvent); - } + $(".gPanelLink").gallery_panel(); if ($("#gPhotoStream").length) { // Vertically align thumbs in photostream - $(".gItem").vAlign(); + $(".gItem").gallery_valign(); } // Apply jQuery UI button css to submit inputs @@ -51,9 +47,6 @@ $(document).ready(function(){ $(".gAvailable .gBlock").addClass("ui-corner-all"); $(".gUnavailable").addClass("ui-corner-all"); - // Add drop shadows - $(".gSelected").dropShadow(); - // Add hover state for buttons $(".ui-state-default").hover( function() { diff --git a/themes/admin_default/views/admin.html.php b/themes/admin_default/views/admin.html.php index 575f8a96..f77881bb 100644 --- a/themes/admin_default/views/admin.html.php +++ b/themes/admin_default/views/admin.html.php @@ -5,30 +5,29 @@ <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <title><?= t("Admin Dashboard") ?></title> - <link rel="shortcut icon" href="<?= url::file("themes/default/images/favicon.ico") ?>" type="image/x-icon" /> + <link rel="shortcut icon" href="<?= url::file("lib/images/favicon.ico") ?>" type="image/x-icon" /> - <?= $theme->css("lib/yui/reset-fonts-grids.css") ?> - <?= $theme->css("lib/themeroller/ui.base.css") ?> - <?= $theme->css("lib/superfish/css/superfish.css") ?> - <?= $theme->css("themes/default/css/screen.css") ?> - <?= $theme->theme_css("css/screen.css") ?> + <?= $theme->css("yui/reset-fonts-grids.css") ?> + <?= $theme->css("themeroller/ui.base.css") ?> + <?= $theme->css("superfish/css/superfish.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("fix-ie.css") ?>" media="screen,print,projection" /> <![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') ?>"; + var MSG_CANCEL = <?= t('Cancel')->for_js() ?>; </script> - <?= $theme->script("lib/gallery.dialog.js") ?> - <?= $theme->script("lib/superfish/js/superfish.js") ?> - <?= $theme->theme_script("js/jquery.dropshadow.js") ?> - <?= $theme->theme_script("js/ui.init.js") ?> + <?= $theme->script("gallery.ajax.js") ?> + <?= $theme->script("gallery.dialog.js") ?> + <?= $theme->script("superfish/js/superfish.js") ?> + <?= $theme->script("ui.init.js") ?> <?= $theme->admin_head() ?> </head> @@ -44,10 +43,10 @@ <div id="gHeader"> <?= $theme->admin_header_top() ?> <ul id="gLoginMenu"> - <li class="first"><?= html::anchor("albums/1", "← ".t("Back to the Gallery")) ?></li> - <li id="gLogoutLink"><a href="<?= url::site("logout?continue=albums/1&csrf=$csrf") ?>"><?= t("Logout") ?></a></li> + <li class="first"><?= html::anchor(item::root()->url(), "← ".t("Back to the Gallery")) ?></li> + <li id="gLogoutLink"><a href="<?= url::site("logout?csrf=$csrf&continue=" . urlencode(item::root()->url())) ?>"><?= t("Logout") ?></a></li> </ul> - <a id="gLogo" href="<?= url::site("albums/1") ?>" title="<?= t("go back to the Gallery") ?>"> + <a id="gLogo" href="<?= item::root()->url() ?>" title="<?= t("go back to the Gallery")->for_html_attr() ?>"> ← <?= t("back to the ...") ?> </a> <div id="gSiteAdminMenu" style="display: none;"> 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 88631e81..64ecf775 100644 --- a/themes/default/css/screen.css +++ b/themes/default/css/screen.css @@ -71,8 +71,12 @@ a, #gDialog a, .gButtonLink, .gButtonLink:hover, -.gButtonLink:active { - color: #5382BF !important; +.gButtonLink:active, +a.ui-state-hover, +input.ui-state-hover, +button.ui-state-hover { + color: #5382bf !important; + cursor: pointer !important; text-decoration: none; -moz-outline-style: none; } @@ -101,6 +105,12 @@ a:hover, float: left; } +#gDialog #gMessage li { + width: 400px; + white-space: normal; + padding-left: 32px; +} + /* Tables ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ table { @@ -131,7 +141,7 @@ fieldset { padding-bottom: .8em; } -#gHeader fieldset, +#gBanner fieldset, #gSidebar fieldset, .gShortForm fieldset { border: none; @@ -142,7 +152,7 @@ legend { margin-left: 1em; } -#gHeader legend, +#gBanner legend, #gSidebar legend, #gContent #gSearchForm legend, input[type="hidden"], @@ -276,12 +286,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 +302,48 @@ 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; 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) ~~~~~~~~~~ */ @@ -387,21 +374,26 @@ 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; + min-height: 5em; + padding: 1em 20px; + position: relative; } #gContent { font-size: 1.2em; padding-left: 20px; + position: relative; width: 696px; } #gSidebar { - background-color: #fff; font-size: .9em; padding: 0 20px; width: 220px; @@ -421,18 +413,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,41 +440,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%; } @@ -498,6 +507,7 @@ form .gError, #gContent #gComments { margin-top: 2em; + position: relative; } #gContent #gComments ul li { @@ -529,18 +539,24 @@ form .gError, width: 32px; } +#gAddCommentButton { + position: absolute; + right: 0; + top: 2px; +} + #gContent #gAddCommentForm { margin-top: 2em; } /* Footer content ~~~~~~~~~~~~~~~~~~~~~~~~ */ -#gHeader #gLoginMenu li, +#gBanner #gLoginMenu li, #gFooter #gCredits li { display: inline; } -#gHeader #gLoginMenu li { +#gBanner #gLoginMenu li { padding-left: 1.2em; } @@ -558,14 +574,13 @@ form .gError, *********************************************************************/ #gSiteMenu, -.gBreadcrumbs, #gTagCloud ul { font-size: 1.2em; } /* Login menu ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ -#gHeader #gLoginMenu { +#gBanner #gLoginMenu { color: #999; float: right; } @@ -573,35 +588,58 @@ 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; } -/* 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; } -#gContent .gThumbMenu a:hover { +.gHoverItem .gContextMenu { + display: block; +} + +.gHoverItem .gContextMenu li { + text-align: left; +} + +.gHoverItem .gContextMenu a:hover { text-decoration: none; } @@ -641,11 +679,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 { @@ -668,7 +702,13 @@ form .gError, font-weight: bold; } -#gAddPhotos .gBreadcrumbs { +#gDialog ul.gBreadcrumbs { + clear: both; + margin-left: 0; + padding-left: 0; +} + +#gDialog .gBreadcrumbs li { font-size: .9em; } @@ -739,6 +779,10 @@ form .gError, text-decoration: underline; } +#gWelcomeMessage p { + padding-bottom: 1em; +} + /* Pagination ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ .gPager { @@ -763,9 +807,7 @@ form .gError, * 6) Browser hacks *********************************************************************/ -#gSiteMenu:after, #gHeader:after, -.gBreadcrumbs:after, #gAlbumGrid:after, .gPager:after, #gViewMenu:after { @@ -793,17 +835,17 @@ form .gError, /* Ajax loading indicator ~~~~~~~~~~~~~~~~ */ .gLoadingLarge { - background: #e8e8e8 url('../images/loading-lg.gif') no-repeat center center; + background: #e8e8e8 url('../../../lib/images/loading-large.gif') no-repeat center center; font-size: 0; } .gDialogLoadingLarge { - background: url('../images/loading-lg.gif') no-repeat center center !important; + background: url('../../../lib/images/loading-large.gif') no-repeat center center !important; font-size: 0; } .gLoadingSmall { - background: #e8e8e8 url('../images/loading-sm.gif') no-repeat center center; + background: #e8e8e8 url('../../../lib/images/loading-small.gif') no-repeat center center; font-size: 0; } @@ -823,7 +865,6 @@ form .gError, .ui-widget-overlay { background: #000; opacity: .7; - filter: Alpha(Opacity=70); } #gDialog { @@ -854,6 +895,10 @@ form .gError, display: none; } +#gDialog p { + margin: 0; +} + /* jQuery UI ThemeRoller buttons */ .gButtonLink { @@ -906,13 +951,13 @@ form .gError, /* Server Add */ #gServerAdd button { - float: left; margin-bottom: .5em; } #gServerAddTree { cursor: pointer; padding-left: 4px; + width: 95%; } #gServerAddTree li { @@ -926,34 +971,26 @@ form .gError, #gServerAddTree { border: 1px solid #ccc; - height: 25em; + height: 20em; overflow: auto; margin-bottom: .5em; - padding-top: .5em; - padding-bottom: .5em; + padding: .5em; } #gServerAdd ul ul li { padding-left: 1.2em; } -#gServerAdd .gBreadcrumbs { - font-size: 1em; - padding: 0; - margin: 0; - border-top-width: 0; -} +/* Permissions ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ -#gServerAdd p { - margin: 0; +#gEditPermissionForm { + clear: both; } - -#gServerAdd .gBreadcrumbs li { - padding: 10px 6px 10px 16px; +#gEditPermissionForm fieldset { + border: 1px solid #cccccc; + padding: 0; } -/* Permissions ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ - #gPermissions .gDenied, #gPermissions .gAllowed { text-align: center; @@ -975,9 +1012,9 @@ form .gError, display: inline-block; } -#gAddPhotos p { - margin: 0; - padding: 0; +#gAddPhotos span { + clear: both; + display: block; } #gAddPhotosCanvas { diff --git a/themes/default/images/favicon.ico b/themes/default/images/favicon.ico Binary files differdeleted file mode 100644 index 66531d8e..00000000 --- a/themes/default/images/favicon.ico +++ /dev/null diff --git a/themes/default/images/loading-lg.gif b/themes/default/images/loading-lg.gif Binary files differdeleted file mode 100644 index cc70a7a8..00000000 --- a/themes/default/images/loading-lg.gif +++ /dev/null diff --git a/themes/default/images/loading-sm.gif b/themes/default/images/loading-sm.gif Binary files differdeleted file mode 100644 index d0bce154..00000000 --- a/themes/default/images/loading-sm.gif +++ /dev/null diff --git a/themes/default/images/logo.png b/themes/default/images/logo.png Binary files differdeleted file mode 100644 index 7d7b9b9b..00000000 --- a/themes/default/images/logo.png +++ /dev/null diff --git a/themes/default/js/ui.init.js b/themes/default/js/ui.init.js index 92a42ded..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,27 +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(); + $(".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({ @@ -81,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 65ea3381..01f7be50 100644 --- a/themes/default/views/album.html.php +++ b/themes/default/views/album.html.php @@ -2,8 +2,8 @@ <? // @todo Set hover on AlbumGrid list items for guest users ?> <div id="gInfo"> <?= $theme->album_top() ?> - <h1><?= p::purify($item->title) ?></h1> - <div class="gDescription"><?= nl2br(p::purify($item->description)) ?></div> + <h1><?= html::purify($item->title) ?></h1> + <div class="gDescription"><?= nl2br(html::purify($item->description)) ?></div> </div> <ul id="gAlbumGrid"> @@ -19,8 +19,8 @@ <?= $child->thumb_img(array("class" => "gThumbnail")) ?> </a> <?= $theme->thumb_bottom($child) ?> - <?= $theme->thumb_menu($child) ?> - <h2><span></span><a href="<?= $child->url() ?>"><?= p::clean($child->title) ?></a></h2> + <?= $theme->context_menu($child, "#gItemId-{$child->id} .gThumbnail") ?> + <h2><span></span><a href="<?= $child->url() ?>"><?= html::purify($child->title) ?></a></h2> <ul class="gMetadata"> <?= $theme->thumb_info($child) ?> </ul> @@ -30,7 +30,7 @@ <? if ($user->admin || access::can("add", $item)): ?> <? $addurl = url::file("index.php/simple_uploader/app/$item->id") ?> <li><?= t("There aren't any photos here yet! <a %attrs>Add some</a>.", - array("attrs" => "href=\"$addurl\" class=\"gDialogLink\"")) ?></li> + array("attrs" => html::mark_clean("href=\"$addurl\" class=\"gDialogLink\""))) ?></li> <? else: ?> <li><?= t("There aren't any photos here yet!") ?></li> <? endif; ?> diff --git a/themes/default/views/dynamic.html.php b/themes/default/views/dynamic.html.php index 2d122e69..9ed9d69b 100644 --- a/themes/default/views/dynamic.html.php +++ b/themes/default/views/dynamic.html.php @@ -3,7 +3,7 @@ <div id="gAlbumHeaderButtons"> <?= $theme->dynamic_top() ?> </div> - <h1><?= p::clean($title) ?></h1> + <h1><?= html::clean($title) ?></h1> </div> <ul id="gAlbumGrid"> @@ -16,7 +16,7 @@ width="<?= $child->thumb_width ?>" height="<?= $child->thumb_height ?>" /> </a> - <h2><?= p::purify($child->title) ?></h2> + <h2><?= html::purify($child->title) ?></h2> <?= $theme->thumb_bottom($child) ?> <ul class="gMetadata"> <?= $theme->thumb_info($child) ?> diff --git a/themes/default/views/footer.html.php b/themes/default/views/footer.html.php deleted file mode 100644 index 040a4062..00000000 --- a/themes/default/views/footer.html.php +++ /dev/null @@ -1,11 +0,0 @@ -<?php defined("SYSPATH") or die("No direct script access.") ?> -<?= $theme->footer() ?> -<? if ($footer_text = module::get_var("gallery", "footer_text")): ?> -<?= $footer_text ?> -<? endif ?> - -<? if (module::get_var("gallery", "show_credits")): ?> -<ul id="gCredits"> - <?= $theme->credits() ?> -</ul> -<? endif ?> diff --git a/themes/default/views/header.html.php b/themes/default/views/header.html.php deleted file mode 100644 index 5428d9fd..00000000 --- a/themes/default/views/header.html.php +++ /dev/null @@ -1,28 +0,0 @@ -<?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> - -<?= $theme->header_bottom() ?> - -<? if (!empty($parents)): ?> -<ul class="gBreadcrumbs"> - <? foreach ($parents as $parent): ?> - <li> - <a href="<?= url::site("albums/{$parent->id}?show=$item->id") ?>"> - <?= p::purify($parent->title) ?> - </a> - </li> - <? endforeach ?> - <li class="active"><?= p::purify($item->title) ?></li> -</ul> -<? endif ?> diff --git a/themes/default/views/movie.html.php b/themes/default/views/movie.html.php index 66c80ded..910814dd 100644 --- a/themes/default/views/movie.html.php +++ b/themes/default/views/movie.html.php @@ -2,25 +2,36 @@ <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"> - <h1><?= p::purify($item->title) ?></h1> - <div><?= nl2br(p::purify($item->description)) ?></div> + <h1><?= html::purify($item->title) ?></h1> + <div><?= nl2br(html::purify($item->description)) ?></div> </div> - <script type="text/javascript"> - 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..19d8cc00 100644 --- a/themes/default/views/page.html.php +++ b/themes/default/views/page.html.php @@ -10,26 +10,26 @@ <? else: ?> <? if ($theme->item()): ?> <? if ($theme->item()->is_album()): ?> - <?= t("Browse Album :: %album_title", array("album_title" => p::clean($theme->item()->title))) ?> + <?= t("Browse Album :: %album_title", array("album_title" => $theme->item()->title)) ?> <? elseif ($theme->item()->is_photo()): ?> - <?= t("Photo :: %photo_title", array("photo_title" => p::clean($theme->item()->title))) ?> + <?= t("Photo :: %photo_title", array("photo_title" => $theme->item()->title)) ?> <? else: ?> - <?= t("Movie :: %movie_title", array("movie_title" => p::clean($theme->item()->title))) ?> + <?= t("Movie :: %movie_title", array("movie_title" => $theme->item()->title)) ?> <? endif ?> <? elseif ($theme->tag()): ?> - <?= t("Browse Tag :: %tag_title", array("tag_title" => p::clean($theme->tag()->name))) ?> + <?= t("Browse Tag :: %tag_title", array("tag_title" => $theme->tag()->name)) ?> <? else: /* Not an item, not a tag, no page_title specified. Help! */ ?> <?= t("Gallery") ?> <? 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="<?= url::file("lib/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') ?>"; + var MSG_CANCEL = <?= t('Cancel')->for_js() ?>; </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() ?> @@ -75,7 +76,38 @@ <div id="doc4" class="yui-t5 gView"> <?= $theme->site_status() ?> <div id="gHeader"> - <?= new View("header.html") ?> + <div id="gBanner"> + <?= $theme->header_top() ?> + <? if ($header_text = module::get_var("gallery", "header_text")): ?> + <?= $header_text ?> + <? else: ?> + <a id="gLogo" href="<?= item::root()->url() ?>" title="<?= t("go back to the Gallery home")->for_html_attr() ?>"> + <img width="107" height="48" alt="<?= t("Gallery logo: Your photos on your web site")->for_html_attr() ?>" src="<?= url::file("lib/images/logo.png") ?>" /> + </a> + <? endif ?> + <div id="gSiteMenu"> + <?= $theme->site_menu() ?> + </div> + <?= $theme->header_bottom() ?> + </div> + + <? if (!empty($parents)): ?> + <ul class="gBreadcrumbs"> + <? foreach ($parents as $parent): ?> + <li> + <!-- 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 + level you're on the right page. --> + <a href="<?= $parent->url($parent == $theme->item()->parent() ? + "show={$theme->item()->id}" : null) ?>"> + <?= html::purify($parent->title) ?> + </a> + </li> + <? endforeach ?> + <li class="active"><?= html::purify($theme->item()->title) ?></li> + </ul> + <? endif ?> </div> <div id="bd"> <div id="yui-main"> @@ -93,7 +125,16 @@ </div> </div> <div id="gFooter"> - <?= new View("footer.html") ?> + <?= $theme->footer() ?> + <? if ($footer_text = module::get_var("gallery", "footer_text")): ?> + <?= $footer_text ?> + <? endif ?> + + <? if (module::get_var("gallery", "show_credits")): ?> + <ul id="gCredits"> + <?= $theme->credits() ?> + </ul> + <? endif ?> </div> </div> <?= $theme->page_bottom() ?> diff --git a/themes/default/views/photo.html.php b/themes/default/views/photo.html.php index bf4d9da3..b0096043 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(<?= html::js_string($theme->item()->file_url()) ?>, "<?= $theme->item()->width ?>", "<?= $theme->item()->height ?>"); return false; }); }); @@ -40,22 +40,20 @@ <div id="gPhoto"> <?= $theme->resize_top($item) ?> <? if (access::can("view_full", $item)): ?> - <a href="<?= $item->file_url() ?>" class="gFullSizeLink" title="<?= t("View full size") ?>"> + <a href="<?= $item->file_url() ?>" class="gFullSizeLink" title="<?= t("View full size")->for_html_attr() ?>"> <? endif ?> <?= $item->resize_img(array("id" => "gPhotoId-{$item->id}", "class" => "gResize")) ?> <? if (access::can("view_full", $item)): ?> </a> <? endif ?> <?= $theme->resize_bottom($item) ?> + <?= $theme->context_menu($item, "#gPhotoId-{$item->id}") ?> </div> <div id="gInfo"> - <h1><?= p::purify($item->title) ?></h1> - <div><?= nl2br(p::purify($item->description)) ?></div> + <h1><?= html::purify($item->title) ?></h1> + <div><?= nl2br(html::purify($item->description)) ?></div> </div> - <script type="text/javascript"> - var ADD_A_COMMENT = "<?= t("Add a comment") ?>"; - </script> <?= $theme->photo_bottom() ?> </div> |
