diff options
Diffstat (limited to 'themes/default')
| -rw-r--r-- | themes/default/css/screen.css | 791 | ||||
| -rw-r--r-- | themes/default/views/album.html.php | 48 | ||||
| -rw-r--r-- | themes/default/views/photo.html.php | 92 | 
3 files changed, 441 insertions, 490 deletions
| diff --git a/themes/default/css/screen.css b/themes/default/css/screen.css index 0f12b789..cafe21de 100644 --- a/themes/default/css/screen.css +++ b/themes/default/css/screen.css @@ -4,23 +4,22 @@   * @requires YUI reset, font, grids, and base CSS   *   * Sheet organization: - * 1) Global element styles - * 2) Text (fonts, headings, links) - * 3) Layout containers - * 4) Generic blocks - * 5) Primary content blocks - * 6) Navigation and menus - * 7) Tables - * 8) Forms, additional form CSS stored in css/forms.css (temporarily) - * 9) General browser hacks + * 1) HTML elements (headings, links, lists, tables, forms) + * 2) Layout containers (view, header, content, sidebar, footer) + * 3) Generic content containers (item, block) + * 4) Specific content containers and blocks (albums, metadata, comments) + * 5) Navigation and menus (menus, breadcrumbs, pagination, tab cloud) + * 6) Specific text styles (different headings, font sizes, etc.) + * 7) Generic styles () + * 8) Browser hacks (clear fix)   */ - @import url('css/forms.css'); + @import url('forms.css');  /** - ** ************************************************** - * 1) Global unique styles - ** ************************************************** + ** ******************************************************************* + * 1) HTML elements (body, headings, links, lists, tables, forms) + ** *******************************************************************   */  /* ~~~~~~~~~ general elements ~~~~~~~~~~ */ @@ -28,33 +27,33 @@ body, html {    background-color: #ccc;  } -/* ~~~~~~~~~ text elements ~~~~~~~~~~ */ +/* ~~~~~~~~~ text ~~~~~~~~~~ */  h1 { -	margin-top: 0px; +  margin-top: 0;  }  a { -	color: #6B8CB7; -	text-decoration: none; +  color: #6B8CB7; +  text-decoration: none;  }  a:hover { -	color: #FF3300; -	text-decoration: underline; +  color: #FF3300; +  text-decoration: underline;  } -/* ~~~~~~~~~ list elements ~~~~~~~~~~ */ +/* ~~~~~~~~~ list ~~~~~~~~~~ */  li { -	list-style-type: none; +  list-style-type: none;  } -/* ~~~~~~~~~ table elements ~~~~~~~~~~ */ +/* ~~~~~~~~~ table ~~~~~~~~~~ */  caption { -	text-align: left; +  text-align: left;  }  th { -	text-align: left; +  text-align: left;  } -/* ~~~~~~~~~ form elements ~~~~~~~~~~ */ +/* ~~~~~~~~~ form ~~~~~~~~~~ */  form {  } @@ -72,34 +71,32 @@ textarea {  }  /** - ** ************************************************** - * 2) High level content containers (header, content, sidebar, footer) - ** ************************************************** + ** ******************************************************************* + * 2) Layout containers (view, header, content, sidebar, footer) + ** *******************************************************************   */ -/* ~~~~~ View Container ??? ~~~~~~ */ -.gView, -.gAlbumView, -.gItemView { +/* ~~~~~ View Container ~~~~~~ */ +.gView {    background-color: #fff;    border: 1px solid #ccc;    border-width: 0 1px 1px 1px;  } -/* ~~~~~~~~ high level content containers ~~~~~~~~ */ +/* ~~~ Layout Containers ~~~~~ */  #gHeader { -	position: relative; - +  position: relative;  }  #gContent {    border-right: 1px solid #ccc;    padding: 20px; -	clear: both; +  clear: both;  }  #gSidebar { +  background-color: #fff;    width: 18.4615em;    padding: 1.5em 0 0 0;  } @@ -110,231 +107,117 @@ textarea {  }  /** - ** ************************************************** - * 3) Header styles (logo, login, site menu, breadcrumbs, search) - ** ************************************************** + ** **************************************************************** + * 3) Generic content containers (item, block) + ** ****************************************************************   */ - -/* ~~~~~~~~ logo/title  ~~~~~~~~ */ - -#gLogo { -  float: left; -  margin: 10px; -} -#gHeader h1 { -	float: left; -	margin: 20px 0 0 20px; -} - -/* ~~~~~~~~ login menu ~~~~~~~~ */ - -#gLoginMenu { -  position: absolute; -	top: 0px; -	right: 13px; -	border: 1px solid silver; -	border-width: 0 1px 1px 1px; -	padding: 5px; -  text-align: right; -} -#gLoginMenu form { -  margin-top: 5px; -} -#gLoginMenu label { -  font-size: 0.8em; -} -#gLoginMenu input.text, -#gLoginMenu input.password { -  width: 80px; -	padding: 0 0 .1em 0; -} -#gLoginMenu input.submit { -	font-size: 0.9em; -	font-weight: bold; -} - -/* ~~~~~~~~ site menu  ~~~~~~~~ */ - -#gSiteMenu { -	height: 31px; -  margin: 0; +  +.gBlock { +  margin: 0 1em 2.5em 0;    padding: 0; -  list-style-type: none; -  clear: both; -} -#gSiteMenu li { -  list-style-type: none; -  float: left; -  display: block; -  width: 20%; -	background: #E6EBF0; -} -#gSiteMenu li a { -	color: #003366; -	font-weight: bold; -  height: 20px; -  display: block; -  text-align: center; -	padding: 7px 7px 3px 7px; -	background: url('images/bg_sitemenu.png') repeat-x; -	margin-left: 1px; -	border: 1px solid #336699; -	border-width: 0 1px 1px 0; -	text-decoration: none; -	letter-spacing: .1em; -} -#gSiteMenu li a:hover { -	color: #FF3300; -	background: url('images/bg_sitemenu_hover.png');  } -#gSiteMenu li a.active { -	background: #DCE6EF; -	border-color: #DCE6EF; -	color: #FF3300; +.gBlockHeader { +  background-color: #E8E8E8; +  padding: .3em .4em .3em .4em; +  height: 1.5em; +  margin: 0 !important; +  position: relative; +  cursor: move;  } - -/* ~~~~~~~~~ breadcrumbs ~~~~~~~~~~ */ - -#gBreadcrumbs { -	border-bottom: 1px solid silver; +.gBlockHeader h2 {    margin: 0; -  padding: 0 0 0 14px; -  height: 28px; -  list-style-type: none; -} -#gBreadcrumbs li { -  list-style-type: none; -  background: transparent url(images/icon_breadcrumb_separator.gif) no-repeat scroll left center; -  padding: 0 0 0 10px;    float: left; +  font-size: 1.1em; +  background-image: url('images/ico_dragable.png'); +  background-repeat: no-repeat; +  padding-left: 12px;  } -#gBreadcrumbs li.root { -  background: transparent; -  padding: 0; +.gBlockHeader .minimize { +  position: absolute; +  top: .45em; +  right: .3em; +  width: 16px; +  height: 16px; +  background-image: url('images/minimize.png');  } -#gBreadcrumbs li a, -#gBreadcrumbs li span { -  padding: 6px 6px 6px 6px; -  display: block; +.gBlockHeader .minimize:hover { +  background-image: url('images/minimize_active.png');  } -#gBreadcrumbs li.active span { -  font-weight: bold; +.gBlockContent { +  margin: .5em .5em 0 .5em;  } - -/* ~~~~~~~~~ search form ~~~~~~~~~~ */ - -#gSearchForm { -	position: absolute; -	right: 13px; -	top: 103px; +table.gBlockContent { +  width: 214px; +  table-layout: fixed;  } -#gSearchForm input.text { -	padding: 1px; +table.gBlockContent th { +  padding: .3em .3em .3em 0;  } -#gSearchForm input.submit { -	height: 20px; +table.gBlockContent td { +  padding: .3em 0 .3em .3em;  }  /** - ** ************************************************** - * 4) Generic styles - ** ************************************************** + ** **************************************************************** + * 4) Specific content containers and blocks (albums, metadata, comments) + ** ****************************************************************   */ -.buttonlink { -	border: 1px solid lightgray; -	padding: 5px; -} -.buttonlink:hover { -	background-color: #F3F3F3; -} -.understate { -	color: silver; + /* ~~~~~~~~ logo  ~~~~~~~~ */ + +#gLogo { +  float: left; +  margin: 10px;  } +  + .gThumbnail { +  + } +/* ~~~~~~~~~ album ~~~~~~~~~~ */ -/* -.gBlock { -	margin: 0 1em 1.5em 0; -	border: 1px solid #336699; -	padding: 0; -} -.gBlockHeader { -	background-color: #E8E8E8; -	padding: .3em; -	height: 1.5em; -	border-bottom: 1px solid #6B8CB7; -	margin: 0 !important; -} -.gBlockHeader h2 { -	color: #003366; -	margin: 0; -	float: left; -	font-size: 1.1em; +#gAlbumGridHeader { +  height: 40px; +  position: relative;  } -.gBlockHeader .minimize { -	float: right; +#gAlbumGridHeader h1 { +  display: inline;  } -.gBlockContent { -	margin: .3em; +#gAlbumGridHeader span { +  padding-left: 10px;  } -*/ -.gBlock { -	margin: 0 1em 2.5em 0; -	padding: 0; -} -.gBlockHeader { -	background-color: #E8E8E8; -	padding: .3em .4em .3em .4em; -	height: 1.5em; -	margin: 0 !important; -	position: relative; -	cursor: move; -} -.gBlockHeader h2 { -	margin: 0; -	float: left; -	font-size: 1.1em; -	background-image: url('images/ico_dragable.png'); -	background-repeat: no-repeat; -	padding-left: 12px; -} -.gBlockHeader .minimize { -	position: absolute; -	top: .45em; -	right: .3em; -	width: 16px; -	height: 16px; -	background-image: url('images/minimize.png'); +#gAlbumGrid { +  margin: 0;  } -.gBlockHeader .minimize:hover { -	background-image: url('images/minimize_active.png'); +#gAlbumGrid .gItem { +  float: left; +  text-align: center; +  border: 1px lightgray solid; +  list-style: none; +  margin: 0 14px 10px 0; +  padding: 5px 0 5px 0;  } -.gBlockContent { -	margin: .5em .5em 0 .5em; + +#gAlbumGrid .first { +  clear: left;  } -table.gBlockContent { -	width: 214px; -	table-layout: fixed; + +.gAlbum { +  background-color: #D4DAFF;  } -table.gBlockContent th { -	padding: .3em .3em .3em 0; +.gAlbum h2 { +  color: #006;  } -table.gBlockContent td { -	padding: .3em 0 .3em .3em; + +.gItem h2 { +  margin: 5px 0 5px 0;  } -/** - ** ************************************************** - * 5) Content blocks - inherits from Generic blocks - ** ************************************************** - */ + /* ~~~~ individual photo ~~~~~~~ */  #gItem { -  width: 500px; -	margin-left: auto; -  margin-right: auto; +  margin: 0;  }  #gItem a.buttonlink {    float: right; @@ -348,7 +231,7 @@ table.gBlockContent td {  #gItem h1 {    margin: 10px 0 10px 0;  } - +   /* ~~~~~~~~~ metadata ~~~~~~~~~~ */  table.gMetadata { @@ -356,28 +239,12 @@ table.gMetadata {  }  table.gMetadata td,  table.gMetadata th { -	border: 0; +  border: 0;  }  table.gMetadata td.toggle { -	text-align: right; -} - -/* ~~~~~~~~~ upload ~~~~~~~~~~ */ - -#gUploadForm .gBreadcrumbs li input, #gUploadForm .gBreadcrumbs li select { -  width: 140px; -  margin-left: 5px; +  text-align: right;  } -/* ~~~~ individual photo ~~~~~~~ */ - -.gPhotoView img { -  width: 400px; -  height: 300px; -  margin-right: auto; -  margin-left: auto; -  margin-bottom: 20px; -}  /* ~~~~~~~~~ comments ~~~~~~~~~~ */ @@ -404,259 +271,351 @@ table.gMetadata td.toggle {    padding: 8px;  } -/* ~~~~~~~~~ album ~~~~~~~~~~ */ +/* ~~~~~~~~~ Status messages ~~~~~~~~~~ */ + +#gStatusMessages { -#gAlbumGridHeader { -	height: 40px; -	position: relative;  } -#gAlbumGridHeader h1 { -	display: inline; +.gError { +  } -#gAlbumGridHeader span { -	padding-left: 10px; +.gWarning { +  } -#gSlideshowLink { -	position: absolute; -	top: 0px; -	right: 0px; +.gSuccess { +  } +.gInfo { -#gAlbumGrid .gItemContainer, -#gAlbumGrid .gAlbumContainer { -	float: left; -	text-align: center; -	border: 1px lightgray solid; -	margin: 0px 0px 10px 1.49%; -	padding: 5px 0px 5px 0px;  } -#gAlbumGrid .first { -	margin: 0px 0px 10px 0px; +  +/* ~~~~~~~~~ search form ~~~~~~~~~~ */ + +#gSearchForm { +  position: absolute; +  right: 13px; +  top: 103px; +} +#gSearchForm input.text { +  padding: 1px; +} +#gSearchForm input.submit { +  height: 20px; +} +  +/* ~~~~~~~~~ comment form ~~~~~~~~~~ */ +  + #gCommentAdd { +  width: 500px;  } -.gAlbum { -	background-color: #D4DAFF; +/* ----------- upload ----------------- */ + +#gUploadForm .gBreadcrumbs li input, #gUploadForm .gBreadcrumbs li select { +  width: 140px; +  margin-left: 5px;  } -.gAlbum h2 { -	color: #000066; +#gUploadForm-queue { +  width: 500px; +} +#gUploadForm-queue td, #gUploadForm-queue th { +  text-align: left; +  border-color: #e7e7e7; +} +#gUploadForm-queue caption { +  display: none; +} +#gUploadForm-queue thead th { +  text-align: center; +  border-bottom: 2px solid #000; +} +#gUploadForm-queue thead th, #gUploadForm-queue thead td { +  background-color: #e7e7e7; +} +#gUploadForm-queue tfoot td { +  border-top: 2px solid #000; +} +#gUploadForm-queue .filesize { +  width: 60px; +} +#gUploadForm-queue td.filesize { +  text-align: right; +} +#gUploadForm-queue tfoot td.filesize { +  color: #ccc; +} +#gUploadForm-queue .action { +  width: 40px; +} +#gUploadForm-button { +  width: 130px; +  margin-left: 370px; +} + +/** + ** ******************************************************************* + * 5) Navigation and menus (menus, breadcrumbs, pagination, tab cloud) + ** ******************************************************************* + */ + +/* ~~~~~~~~ login menu ~~~~~~~~ */ + +#gLoginMenu { +  position: absolute; +  top: 0; +  right: 13px; +  border: 1px solid silver; +  border-width: 0 1px 1px 1px; +  padding: 5px; +  text-align: right; +} +#gLoginMenu form { +  margin-top: 5px; +} +#gLoginMenu label { +  font-size: 0.8em; +} +#gLoginMenu input.text, +#gLoginMenu input.password { +  width: 80px; +  padding: 0 0 .1em 0; +} +#gLoginMenu input.submit { +  font-size: 0.9em; +  font-weight: bold; +} + +/* ~~~~~~~~ site menu  ~~~~~~~~ */ + +#gSiteMenu { +  height: 31px; +  margin: 0; +  padding: 0; +  list-style-type: none; +  clear: both; +} +#gSiteMenu li { +  list-style-type: none; +  float: left; +  display: block; +  width: 20%; +  background: #E6EBF0; +} +#gSiteMenu li a { +  color: #003366; +  font-weight: bold; +  height: 20px; +  display: block; +  text-align: center; +  padding: 7px 7px 3px 7px; +  background: url('images/bg_sitemenu.png') repeat-x; +  margin-left: 1px; +  border: 1px solid #336699; +  border-width: 0 1px 1px 0; +  text-decoration: none; +  letter-spacing: .1em; +} +#gSiteMenu li a:hover { +  color: #FF3300; +  background: url('images/bg_sitemenu_hover.png'); +} +#gSiteMenu li a.active { +  background: #DCE6EF; +  border-color: #DCE6EF; +  color: #FF3300;  } -.gItemContainer h2, -.gAlbumContainer h2 { -	margin: 5px 0px 5px 0px; + #gSlideshowLink { +  position: absolute; +  top: 0; +  right: 0;  } +/* ~~~~~~~~~ breadcrumbs ~~~~~~~~~~ */ + +#gBreadcrumbs { +  border-bottom: 1px solid silver; +  margin: 0; +  padding: 0 0 0 14px; +  height: 28px; +  list-style-type: none; +} +#gBreadcrumbs li { +  list-style-type: none; +  background: transparent url(images/icon_breadcrumb_separator.gif) no-repeat scroll left center; +  padding: 0 0 0 10px; +  float: left; +} +#gBreadcrumbs li.root { +  background: transparent; +  padding: 0; +} +#gBreadcrumbs li a, +#gBreadcrumbs li span { +  padding: 6px 6px 6px 6px; +  display: block; +} +#gBreadcrumbs li.active span { +  font-weight: bold; +}  /* ~~~~~~~~~ tag cloud ~~~~~~~~~~ */  #gTags ul { -	text-align: justify; -	padding: 0; +  text-align: justify; +  padding: 0;  }  #gTags ul li { -	text-align: justify; -	display: inline; +  text-align: justify; +  display: inline;  }  #gTags ul li a { -	text-decoration: none; +  text-decoration: none;  }  #gTags ul li a.size0 { -	font-size: 100%; -	font-weight: 100; -	color: #99CCFF; +  font-size: 100%; +  font-weight: 100; +  color: #99CCFF;  }  #gTags ul li a.size1 { -	font-size: 110%; -	font-weight: 300; -	color: #6699FF; +  font-size: 110%; +  font-weight: 300; +  color: #6699FF;  }  #gTags ul li a.size2 { -	font-size: 120%; -	font-weight: 500; -	color: #6699CC; +  font-size: 120%; +  font-weight: 500; +  color: #6699CC;  }  #gTags ul li a.size3 { -	font-size: 130%; -	font-weight: 700; -	color: #336699; +  font-size: 130%; +  font-weight: 700; +  color: #336699;  }  #gTags ul li a.size4 { -	font-size: 140%; -	font-weight: 900; -	color: #0E2B52; +  font-size: 140%; +  font-weight: 900; +  color: #0E2B52;  }  #gTags ul li a:hover { -	color: #FF3300; -	text-decoration: underline; +  color: #FF3300; +  text-decoration: underline;  }  #gTags form { -	margin-top: 10px; +  margin-top: 10px;  }  /* ~~~~~~~~~ tags ~~~~~~~~~~ */  #gTags ul { -	margin-left: .5em; +  margin-left: .5em;  }  #gTags li { -	list-style-image: url('images/bullet_tag.png'); -	margin-bottom: .3em; +  list-style-image: url('images/bullet_tag.png'); +  margin-bottom: .3em;  } -/* ~~~~~~~~~ album tree ~~~~~~~~~~ */ - -#gAlbumTree { -	border: 1px solid lightgray; -	margin: 20px 0 20px 0; -	padding: 5px; -} -#gAlbumTree #gTreeContainer { -	border: 1px solid lightgray; -	padding: 0 0 0 5px; -} - - -/** - ** ************************************************** - * 6) Navigation and menus - ** ************************************************** - */ - - -  /* ~~~~~~~~~ pagination ~~~~~~~~~~ */  #gPagination { -	clear: both; -	padding: 10px 0px 0px 0px; -	text-align: center; +  clear: both; +  padding: 10px 0 0 0; +  text-align: center;  }  #gPagination a,  #gPagination span { -	border: 1px solid lightgray; -	padding: 5px; -	background-repeat: no-repeat; +  border: 1px solid lightgray; +  padding: 5px; +  background-repeat: no-repeat;  }  #gPagination a:hover { -	background-color: #F3F3F3; +  background-color: #F3F3F3;  }  #gPagination .first { -	background-image: url('images/first.png'); -	background-position: left; -	padding-left: 20px; +  background-image: url('images/first.png'); +  background-position: left; +  padding-left: 20px;  }  #gPagination .first_inactive { -	background-image: url('images/first_inactive.png'); -	background-position: left; -	padding-left: 20px; +  background-image: url('images/first_inactive.png'); +  background-position: left; +  padding-left: 20px;  }  #gPagination .previous { -	background-image: url('images/previous.png'); -	background-position: left; -	padding-left: 17px; +  background-image: url('images/previous.png'); +  background-position: left; +  padding-left: 17px;  }  #gPagination .previous_inactive { -	background-image: url('images/previous_inactive.png'); -	background-position: left; -	padding-left: 17px; +  background-image: url('images/previous_inactive.png'); +  background-position: left; +  padding-left: 17px;  }  #gPagination .next { -	background-image: url('images/next.png'); -	background-position: right; -	padding-right: 17px; +  background-image: url('images/next.png'); +  background-position: right; +  padding-right: 17px;  }  #gPagination .next_inactive { -	background-image: url('images/next_inactive.png'); -	background-position: right; -	padding-right: 17px; +  background-image: url('images/next_inactive.png'); +  background-position: right; +  padding-right: 17px;  }  #gPagination .last { -	background-image: url('images/last.png'); -	background-position: right; -	padding-right: 20px; +  background-image: url('images/last.png'); +  background-position: right; +  padding-right: 20px;  }  #gPagination .last_inactive { -	background-image: url('images/last_inactive.png'); -	background-position: right; -	padding-right: 20px; -} - - -/** - ** ************************************************** - * 7) Tables - ** ************************************************** - */ - - -/** - ** ************************************************** - * 8) Forms - ** ************************************************** - */ - -#gCommentAdd { -  width: 500px; -} - -/* ----------- upload ----------------- */ - -#gUploadForm .gBreadcrumbs li input, #gUploadForm .gBreadcrumbs li select { -  width: 140px; -  margin-left: 5px; -} - -#gUploadForm-queue { -  width: 500px; -} - -#gUploadForm-queue td, #gUploadForm-queue th { -  text-align: left; -  border-color: #e7e7e7; +  background-image: url('images/last_inactive.png'); +  background-position: right; +  padding-right: 20px;  } -#gUploadForm-queue caption { -  display: none; -} +/* ~~~~~~~~~ album tree ~~~~~~~~~~ */ -#gUploadForm-queue thead th { -  text-align: center; -  border-bottom: 2px solid #000; +#gAlbumTree { +  border: 1px solid lightgray; +  margin: 20px 0 20px 0; +  padding: 5px;  } - -#gUploadForm-queue thead th, #gUploadForm-queue thead td { -  background-color: #e7e7e7; +#gAlbumTree #gTreeContainer { +  border: 1px solid lightgray; +  padding: 0 0 0 5px;  } -#gUploadForm-queue tfoot td { -  border-top: 2px solid #000; -} +/** + ** ******************************************************************* + * 6) Specific text styles (different headings, font sizes, etc.) + ** ******************************************************************* + */ -#gUploadForm-queue .filesize { -  width: 60px; +#gHeader h1 { +  float: left; +  margin: 20px 0 0 20px;  } -#gUploadForm-queue td.filesize { -  text-align: right; -} +/** + ** ******************************************************************* + * 7) Generic styles + ** ******************************************************************* + */ -#gUploadForm-queue tfoot td.filesize { -  color: #ccc; +.buttonlink { +  border: 1px solid lightgray; +  padding: 5px;  } - -#gUploadForm-queue .action { -  width: 40px; +.buttonlink:hover { +  background-color: #F3F3F3;  } - -#gUploadForm-button { -  width: 130px; -  margin-left: 370px; +.understate { +  color: silver;  }  /** - ** ************************************************** - * 9) Browser hacks - ** ************************************************** + ** ******************************************************************* + * 8) Browser hacks + ** *******************************************************************   */  /* Keep containers holding only floated elements from collapsing in Safari */ diff --git a/themes/default/views/album.html.php b/themes/default/views/album.html.php index ba995276..0d181536 100644 --- a/themes/default/views/album.html.php +++ b/themes/default/views/album.html.php @@ -1,39 +1,32 @@  <? defined("SYSPATH") or die("No direct script access."); ?> -<div id="gAlbumGrid" class="gAlbumView">    <div id="gAlbumGridHeader">      <h1><?= $item->title ?></h1>      <span class="understate"><?= $item->description ?></span>      <a href="#" id="gSlideshowLink" class="buttonlink">Slideshow</a>    </div> +  <ul id="gAlbumGrid">    <? foreach ($children as $i => $child): ?> -  <? if ($child->is_album()): ?> -  <div class="gAlbumContainer gAlbum <?= text::alternate("first", "", "") ?>"> -    <a href="<?= url::site("album/{$child->id}") ?>"> -      <img id="photo-id-<?= $child->id ?>" class="photo" -           alt="photo" src="<?= $child->thumbnail_url() ?>" -           width="<?= $child->thumbnail_width ?>" -           height="<?= $child->thumbnail_height ?>" /> -    </a> -    <h2>Album title</h2> -    <ul class="gMetadata"> -      <li>Views: 321</li> -      <li>By: <a href="#">username</a></li> -    </ul> -  </div> -  <? else: ?> -  <div class="gItemContainer <?= text::alternate("first", "", "") ?>"> -    <a href="<?= url::site("photo/{$child->id}") ?>"> -      <img id="photo-id-<?= $child->id ?>" class="photo" -           alt="photo" src="<?= $child->thumbnail_url() ?>" -           width="<?= $child->thumbnail_width ?>" -           height="<?= $child->thumbnail_height ?>" /> -    </a> -    <h2><?= $child->title ?></h2> -  </div> -  <? endif ?> +    <? $album_class = ""; ?> +    <? if ($child->is_album()): ?> +      <? $album_class = "gAlbum "; ?> +    <? endif ?> +    <li class="gItem <?= $album_class . text::alternate("first", "", "") ?>"> +      <a href="<?= url::site("photo/{$child->id}") ?>"> +        <img id="gPhotoID-<?= $child->id ?>" class="gThumbnail" +             alt="photo" src="<?= $child->thumbnail_url() ?>" +             width="<?= $child->thumbnail_width ?>" +             height="<?= $child->thumbnail_height ?>" /> +      </a> +      <h2><?= $child->title ?></h2> +      <ul class="gMetadata"> +        <li>Views: 321</li> +        <li>By: <a href="#">username</a></li> +      </ul> +    </li>      <? endforeach ?> - +  </ul> +      <div id="gPagination">      Items 1-10 of 34      <span class="first_inactive">first</span> @@ -41,4 +34,3 @@      <a href="#" class="next">next</a>      <a href="#" class="last">last</a>    </div> -</div> diff --git a/themes/default/views/photo.html.php b/themes/default/views/photo.html.php index 74e01050..9448b51e 100644 --- a/themes/default/views/photo.html.php +++ b/themes/default/views/photo.html.php @@ -3,53 +3,53 @@    <a href="" class="buttonlink">Full size (1024x768)</a>    <a href="" class="buttonlink">Slideshow</a> -  <img id="photo-id-<?= $item->id ?>" alt="photo" src="<?= $item->resize_url() ?>" +  <img id="gPhotoID-<?= $item->id ?>" alt="photo" src="<?= $item->resize_url() ?>"         width="<?= $item->resize_width ?>"         height="<?= $item->resize_height ?>" />    <h1><?= $item->title ?></h1> -  <p><?= $item->description ?></p> +  <div><?= $item->description ?></div> +   +  <div id="gComments"> +    <h2>Comments</h2> +   +    <ul id="gCommentThread"> +      <li id="gComment-1" class="gComment odd"> +        <p><a href="#" class="gAuthor">Andy</a> said 2 hours ago <span class="understate">(October 23, 2008 11:30am)</span></p> +        <div> +          Lorem ipsum dolor sit amet. +        </div> +      </li> +      <li id="gComment-2" class="gComment even"> +        <p> +          <a href="#" class="gAuthor">Other user</a> said 30 minutes ago <span class="understate">(October 23, 2008 1:00pm)</span> +        </p> +        <div> +          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard +          dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. +          It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It +          was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with +          desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. +        </div> +      </li> +    </ul> +   +    <form id="gCommentAdd" class="gExpandedForm"> +      <fieldset> +        <legend>Add comment</legend> +        <div class="row"> +          <label for="gCommentAuthor">Your Name</label> +          <input type="text" id="gCommentAuthor" class="text" /> +        </div> +        <div> +          <label for="gCommentEmail">Your Email (not displayed)</label> +          <input type="text" id="gCommentEmail" class="text" /> +        </div> +        <div class="row"> +          <label for="gCommentText">Comment</label> +          <textarea id="gCommentText"></textarea> +        </div> +        <input type="submit" class="button" value="Add" /> +      </fieldset> +    </form> +  </div><!-- END #gComments -->  </div> - -<div id="gComments"> -  <h2>Comments</h2> - -  <ul id="gCommentThread"> -    <li id="gComment-1" class="gComment odd"> -      <p><a href="#" class="gAuthor">Andy</a> said 2 hours ago <span class="understate">(October 23, 2008 11:30am)</span></p> -      <div> -        Lorem ipsum dolor sit amet. -      </div> -    </li> -    <li id="gComment-2" class="gComment even"> -      <p> -        <a href="#" class="gAuthor">Other user</a> said 30 minutes ago <span class="understate">(October 23, 2008 1:00pm)</span> -      </p> -      <div> -        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard -        dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. -        It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It -        was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with -        desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. -      </div> -    </li> -  </ul> - -  <form id="gCommentAdd" class="gExpandedForm"> -    <fieldset> -      <legend>Add comment</legend> -      <div class="row"> -        <label for="gCommentAuthor">Your Name</label> -        <input type="text" id="gCommentAuthor" class="text" /> -      </div> -      <div> -        <label for="gCommentEmail">Your Email (not displayed)</label> -        <input type="text" id="gCommentEmail" class="text" /> -      </div> -      <div class="row"> -        <label for="gCommentText">Comment</label> -        <textarea id="gCommentText"></textarea> -      </div> -      <input type="submit" class="button" value="Add" /> -    </fieldset> -  </form> -</div><!-- END #gComments --> | 
