diff options
| -rw-r--r-- | phpfspot_cfg.php | 2 | ||||
| -rw-r--r-- | stylesheet.css | 109 | ||||
| -rw-r--r-- | templates/index.tpl | 32 | ||||
| -rw-r--r-- | templates/photo_index.tpl | 41 | ||||
| -rw-r--r-- | templates/tags.tpl | 18 |
5 files changed, 152 insertions, 50 deletions
diff --git a/phpfspot_cfg.php b/phpfspot_cfg.php index 955a6ff..1be6325 100644 --- a/phpfspot_cfg.php +++ b/phpfspot_cfg.php @@ -8,7 +8,7 @@ class PHPFSPOT_CFG { var $web_path = "/phpfspot"; - var $thumb_width = "200"; + var $thumb_width = "150"; var $photo_width = "800"; diff --git a/stylesheet.css b/stylesheet.css index 33d20da..02f69a4 100644 --- a/stylesheet.css +++ b/stylesheet.css @@ -1,31 +1,100 @@ body {
- background-color: rgb(255,255,255);
- color: rgb(26,151,15);
- font-family: Arial, Helvetica, sans-serif;
- font-style: normal;
- border-style: none;
- border-color: rgb(15,15,15);
+ background-color: #000000;
+ color: rgb(26,151,15);
+ font-family: Arial, Helvetica, sans-serif;
+ font-style: normal;
+ border: solid 1px #ffffff;
+ border-color: rgb(15,15,15);
+ padding: 10px;
}
-#content {
- padding-top: 20px;
- margin-left: 25%; width: auto;
+#frame {
+ padding: 10px;
+ background-color: #ffffff;
}
-#tags {
- font-size: 14px;
- padding-top: 20px;
- width: 150px;
- position: relative;
- top: 0;
- left: 0;
- float: left;
+table, tr, td {
+ border-collapse: collapse;
+ padding: 0px;
+ empty-cells: show;
+ vertical-align: top;
}
-#logo {
- font-weight: bolder;
+td.tags {
+ font-size: 14px;
+ width: 150px;
+ padding: 2px;
+ padding-top: 10px;
+ border-top: solid 1px #000000;
+ border-right: solid 1px #000000;
+}
+
+td.available_tags,td.selected_tags {
+ border-bottom: solid 1px #000000;
+ padding-top: 10px;
+ padding-bottom: 10px;
+ padding-right: 10px;
+}
+
+td.logo {
+ font-weight: bolder;
+ height: 40px;
+ border-bottom: solid 1px #000000;
+}
+
+td.content {
+ border-top: solid 1px #000000;
+}
+
+td.menu {
+ padding-top: 5px;
+ padding-bottom: 5px;
+}
+
+td.index_header {
+ background-color: #eeeeee;
+ padding: 10px;
+ vertical-align: middle;
}
img {
- border-style: none;
+ border: none;
+}
+
+img.thumb {
+}
+
+a {
+ font-size: 14px;
+ color: #008200;
+ text-decoration: none;
+}
+
+a:visited, a:active {
+ color: #00ff00;
+}
+a:hover {
+ color: #00aa44;
+}
+
+#matrix {
+ padding: 10px;
+}
+
+td.thumb {
+ padding: 1px;
+ text-align: center;
+}
+
+#outter {
+ padding: 10px;
+ background-color: #eeeeee;
+}
+
+#inner {
+ padding: 7px;
+ -moz-border-radius: 1em;
+ border-radius: 1em;
+ border: dashed 1px #888888;
+
}
diff --git a/templates/index.tpl b/templates/index.tpl index 38af584..bec381b 100644 --- a/templates/index.tpl +++ b/templates/index.tpl @@ -1,11 +1,31 @@ {include file="header.tpl"} <body onload="refreshAvailableTags(); refreshSelectedTags();"> - <div id="logo">{$page_title}</div> - <div id="tags"> - {include file="tags.tpl"} - </div> - <div id="content"> - {include file="welcome.tpl"} + <div id="frame"> + <table> + <tr> + <td class="logo" colspan="2"> + {$page_title} + </td> + </tr> + <tr> + <td colspan="2" class="menu"> + <a href="javascript:showPhotoIndex();">Photo Index</a> + <a href="javascript:Tags('reset', 0);">Reset Tags</a> + </td> + </tr> + <tr> + <td class="tags"> + <div id="tags"> + {include file="tags.tpl"} + </div> + </td> + <td class="content"> + <div id="content"> + {include file="welcome.tpl"} + </div> + </td> + </tr> + </table> </div> </body> {include file="footer.tpl"} diff --git a/templates/photo_index.tpl b/templates/photo_index.tpl index 97c9fb8..3172547 100644 --- a/templates/photo_index.tpl +++ b/templates/photo_index.tpl @@ -1,22 +1,41 @@ <!-- Image Matrix --> <table> <tr> - <td colspan="{$columns}"> - {$count} images have been found for the selected tags + <td class="index_header"> + <b>Photo Index</b><br /> + {if $count == 1} + {$count} image has been found for the selected tags + {else} + {$count} images have been found for the selected tags + {/if} </td> </tr> -{section name="row" loop=$rows step=1} <tr> - {section name="col" loop=$columns step=1} <td> - {if $images[row][col] } - <a href="javascript:showImage({$images[row][col]});"> - <img src="phpfspot_img.php?idx={$images[row][col]}&width={$width}" /> - </a> - {/if} + <div id="matrix"> + <table> + {section name="row" loop=$rows step=1} + <tr> + {section name="col" loop=$columns step=1} + <td class="thumb"> + {if $images[row][col] } + <div id="outter"> + <div id="inner"> + <a href="javascript:showImage({$images[row][col]});"> + <img class="thumb" src="phpfspot_img.php?idx={$images[row][col]}&width={$width}" /> + </a> + </div> + </div> + {else} + + {/if} + </td> + {/section} + </tr> + {/section} + </table> + </div> </td> - {/section} </tr> -{/section} </table> <!-- /Image Matrix --> diff --git a/templates/tags.tpl b/templates/tags.tpl index 2a6a7a8..084c1ea 100644 --- a/templates/tags.tpl +++ b/templates/tags.tpl @@ -1,31 +1,25 @@ <table> <tr> <td> - The following tags are available: + Available Tags: </td> </tr> <tr> - <td> - <div id='available_tags'></div> + <td class="available_tags"> + <div id="available_tags"></div> </td> </tr> <tr> <td> - The following tags have been selected: + Selected Tags: </td> </tr> <tr> - <td> - <div id='selected_tags'></div> + <td class="selected_tags"> + <div id="selected_tags"></div> </td> </tr> <tr> <td> </td> </tr> - <tr> - <td> - <a href="javascript:showPhotoIndex();">Photo Index</a> - <a href="javascript:Tags('reset', 0);">Reset Tags</a> - </td> - </tr> </table> |