Templates cleanup, remove non-XHTML code

Much better flexibility in scaling, although some elements are fixed to pixels (image sizes, borders)

1 files changed, 47 insertions, 41 deletions

diff --git a/templates/template-view_photo.tmpl b/templates/template-view_photo.tmpl
index 8de829d..7679a26 100644
--- a/templates/template-view_photo.tmpl
+++ b/templates/template-view_photo.tmpl
@@ -13,56 +13,62 @@
 
 <!--  ##  Navigation bar  -->
 <div class="navigation">
-<table cellpadding="0" cellspacing="0" border="0" width="100%"><tr><td>
-  <!-- $(NAV_BAR) -->
-</td>
-<td align="center" style="color: #AAAAAA;">ISO <!-- $(EXIF_ISO) --> :: <!-- $(EXIF_TIME) --> :: <!-- $(EXIF_APERTURE) --> :: <!-- $(EXIF_FOCAL_LENGTH) --></td>
-<td align="right"><b><!-- $(FILE_NO) --></b> of <b><!-- $(TOTAL_ITEMS) --></b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
-  <a href="<!-- $(LINK_PREV) -->">&lt; Previous</a> :: <a href="<!-- $(LINK_NEXT) -->">Next &gt;</a> 
-</td></tr></table>
+  <div class="navlinks"><!-- $(NAV_BAR) --></div>
+  <div class="navposition">
+    <span class="navposnumber"><!-- $(FILE_NO) --></span> of <span class="navposnumber"><!-- $(TOTAL_ITEMS) --></span>
+    <span class="navposspacer"></span>
+    <a href="<!-- $(LINK_PREV) -->">&lt; Previous</a> :: <a href="<!-- $(LINK_NEXT) -->">Next &gt;</a>
+  </div>
+  <div class="navexif">ISO <!-- $(EXIF_ISO) --> :: <!-- $(EXIF_TIME) --> :: <!-- $(EXIF_APERTURE) --> :: <!-- $(EXIF_FOCAL_LENGTH) --></div>
 </div>
 
+
 <div class="master_content">
+  <!--  ##  Description  -->
+  <div class="description">
+    <div class="desc_title"><!-- $(TITLE) --></div>
+    <div class="desc_text"><!-- $(DESCRIPTION) --></div>
+  </div>
 
-<div class="content">
-<!--  ##  Description  -->
-<div class="desc"><!-- $(TITLE) -->
-<div class="desc_text"><!-- $(DESCRIPTION) --></div>
-</div>
+  <!--  ##  Image  -->
+  <div class="img_preview">
+    <a href="<!-- $(LINK_NEXT) -->"><img src="<!-- $(IMG_SRC_BIG) -->" width="<!-- $(IMG_SIZE_BIG_W) -->" height="<!-- $(IMG_SIZE_BIG_H) -->" alt="" id="<!-- $(IMG_BORDER_STYLE) -->" /></a>
+    <!-- $(BEGIN_IMG_FULLSIZE_LINK) -->
+    <div class="img_preview_full">
+      <a href="<!-- $(IMG_SRC_FULL) -->">See original size (<!-- $(IMG_SIZE_ORIG_W) -->x<!-- $(IMG_SIZE_ORIG_H) -->)</a>
+    </div>  
+    <!-- $(END_IMG_FULLSIZE_LINK) -->
+  </div>
 
+  <!--  ##  EXIF  -->
+  <div class="exif">
+    <div id="exif_table" style="display: none;">
+      :: <a href="javascript: set_exif_table_visibility('no'); write_exif_table_cookie('no');">Hide EXIF</a>
+      <table><tbody>
+        <tr><td>Date: </td>            <td><!-- $(EXIF_DATE) --></td></tr>
+        <tr><td>Camera: </td>          <td><!-- $(EXIF_CAMERA_MODEL) --></td></tr>
+        <tr><td>ISO: </td>             <td><!-- $(EXIF_ISO) --></td></tr>
+        <tr><td>Focal length: </td>    <td><!-- $(EXIF_FOCAL_LENGTH) --></td></tr>
+        <tr><td>Aperture value: </td>  <td><!-- $(EXIF_APERTURE) --></td></tr>
+        <tr><td>Exposure time: </td>   <td><!-- $(EXIF_TIME) --></td></tr>
+        <tr><td>Flash: </td>           <td><!-- $(EXIF_FLASH) --></td></tr>
+      </tbody></table>
+    </div>
+    <div id="exif_line" style="display: block;">
+      :: <a href="javascript: set_exif_table_visibility('yes'); write_exif_table_cookie('yes');">Show EXIF</a>
+    </div>
+  </div>  
 
-<!--  ##  Image  -->
-<div id="img_preview">
-  <a href="<!-- $(LINK_NEXT) -->" id="img_preview_a"><img src="<!-- $(IMG_SRC_BIG) -->" width="<!-- $(IMG_SIZE_BIG_W) -->" height="<!-- $(IMG_SIZE_BIG_H) -->" alt="" id="<!-- $(IMG_BORDER_STYLE) -->" /></a>
-  <br /><br />
-  <!-- $(BEGIN_IMG_FULLSIZE_LINK) -->
-    <a href="<!-- $(IMG_SRC_FULL) -->">See original size (<!-- $(IMG_SIZE_ORIG_W) -->x<!-- $(IMG_SIZE_ORIG_H) -->)</a>
-  <!-- $(END_IMG_FULLSIZE_LINK) -->
-</div>
+  <!--  ##  Footnote, also acts as a bottom border  -->
+  <div class="footnote">
+    <div class="desc_text"><!-- $(FOOTNOTE) --></div>
+  </div>
+</div> <!-- end of master_content -->
 
 
-<!--  ##  EXIF  -->
-<div id="exif_table" style="display: none;" class="exif">
-:: <a href="javascript: set_exif_table_visibility('no'); write_exif_table_cookie('no');" class="exif_line_a">Hide EXIF</a>
-<table class="exif">
-<tbody><tr><td align="right">Date: </td><td><b><!-- $(EXIF_DATE) --></b></td></tr>
-<tr><td align="right">Camera: </td><td><b><!-- $(EXIF_CAMERA_MODEL) --></b></td></tr>
-<tr><td align="right">ISO: </td><td><b><!-- $(EXIF_ISO) --></b></td></tr>
-<tr><td align="right">Focal length: </td><td><b><!-- $(EXIF_FOCAL_LENGTH) --></b></td></tr>
-<tr><td align="right">Aperture value: </td><td><b><!-- $(EXIF_APERTURE) --></b></td></tr>
-<tr><td align="right">Exposure time: </td><td><b><!-- $(EXIF_TIME) --></b></td></tr>
-<tr><td align="right">Flash: </td><td><b><!-- $(EXIF_FLASH) --></b></td></tr>
-</tbody></table>
-</div>
-<div style="display: block;" id="exif_line" class="exif">
-:: <a href="javascript: set_exif_table_visibility('yes'); write_exif_table_cookie('yes');" class="exif_line_a">Show EXIF</a>
-</div>
-</div>
-
-</div> <!-- end of master_content -->
 <!--  ##  Footer  -->
-<!-- $(FOOTER) -->
-
+<div class="footer"><!-- $(FOOTER) --></div>
 
 </body>
 </html>
+