GNOME.org
 

[gthumb: 23/57] [webalbums] enahncements to the ClassicClips theme

commit dbb2597123101d18958d477dc2c2d68c1970193f
Author: Paolo Bacchilega <paobac src gnome org>
Date:   Sun Jun 13 15:49:14 2010 +0200

    [webalbums] enahncements to the ClassicClips theme
    
    Don't use tables for the page layout.

 .../data/albumthemes/ClassicClips/image.gthtml     |  160 ++++++++----------
 .../data/albumthemes/ClassicClips/index.gthtml     |  119 +++++---------
 .../data/albumthemes/ClassicClips/layout.css       |  176 ++++++++++++++------
 .../data/albumthemes/ClassicClips/style.css        |    1 +
 .../data/albumthemes/ClassicClips/thumbnail.gthtml |    2 +-
 5 files changed, 233 insertions(+), 225 deletions(-)
---
diff --git a/extensions/webalbums/data/albumthemes/ClassicClips/image.gthtml b/extensions/webalbums/data/albumthemes/ClassicClips/image.gthtml
index 35bebf0..b0ac74f 100644
--- a/extensions/webalbums/data/albumthemes/ClassicClips/image.gthtml
+++ b/extensions/webalbums/data/albumthemes/ClassicClips/image.gthtml
@@ -14,99 +14,75 @@
   <link href="<%= theme_link src="style.css" %>" rel="stylesheet" type="text/css" />
 </head>
 <body>
+  <div id="wrapper">
+    <div id="main">
 
-<table class="full_size" summary="page body">
-<tr>
-<td class="title">
-
-<!-- Title -->
-<table class="title" summary="title bar">
-<tr>
-  <td>
-  <span class="title"><%= header %></span>
-  </td>
-</tr>
-</table>
-
-</td>
-</tr>
-<tr>
-<td class="nav_bar">
-
-<!-- Navigation Bar -->
-<table class="full_size" summary="navigation bar">
-<tr>
-  <td class="button">
-    <a href="<%= page_link idx_relative="0" image_idx %>">
-        <img src="<%= theme_link src="back.png" %>" alt="Back" />
-    </a>
-  </td>
-  <td>
-    &nbsp;
-  </td>
-  <td class="button">
-<% if image_idx == 1  %>
-    <img src="<%= theme_link src="background.gif' %>" alt="void" />
-<% else %>
-    <a href="<%= image_link idx_relative="-1" %>">
-        <img src="<%= theme_link src="prev.png" %>" alt="Previous" />
-    </a>
-<% end %>
-  </td>
-  <td class="button">
-<% if images == 1 %>
-    <img src="<%= theme_link src="background.gif" %>" alt="void" />
-<% else %>
-    <span class="page_index"><%= image_idx %> / <%= images %></span>
-<% end %>
-  </td>
-  <td class="button">
-<% if image_idx == images  %>
-    <img src="<%= theme_link src="background.gif" %>" alt="void" />
-<% else %>
-    <a href="<%= image_link idx_relative="+1" %>">
-        <img src="<%= theme_link src="next.png" %>" alt="Next" />
-    </a>
-<% end %>
-  </td>
-</tr>
-</table>
-
-</td>
-</tr>
-<tr>
-<td>
-
-<!-- Preview -->
-<table class="row" summary="preview">
-<tr>
-  <td>
-    <% if copy_originals %>    
-    <a href="<%= file_name with_relative_path %>"><%= image preview class="preview" %></a>
-    <% else %>
-    <%= image preview class="preview" %>
-    <% end %>
-  </td>
-</tr>
-</table>
-
-</td>
-</tr>
-<tr>
-<td class="footer">
-
-<!-- Footer -->
-<table class="full_size" summary="copyright">
-<tr>
-  <td>
-  <span class="copyright"><%= footer %></span>
-  </td>
-</tr>
-</table>
-
-</td>
-</tr>
-</table>
+      <h1 class="image-title">
+        <%= header %>
+      </h1>
+      
+      <ul class="navigation-bar">
+        <li class="index">
+          <a href="<%= page_link idx_relative="0" image_idx %>" title="Go back to the index">
+            <span>Go back to the index</span>
+          </a>
+        </li>
+        <% if image_idx < images  %>
+        <li class="next-image">          
+          <a href="<%= image_link idx_relative="+1" %>" title="View the next image">
+            <span>View the next image</span>
+          </a>
+        </li>
+        <% else %>
+        <li class="void">
+        </li>
+        <% end %>
+        <li class="current-image">
+          <span><%= image_idx %> / <%= images %></span>
+        </li>
+        <% if image_idx > 1  %>
+        <li class="previous-image">          
+          <a href="<%= image_link idx_relative="-1" %>" title="View the previous image">
+            <span>View the previous image</span>
+          </a>     
+        </li>
+        <% else %>
+        <li class="void">
+        </li>
+        <% end %>
+        <li class="last">
+        </li>
+      </ul>  
+      
+      <div class="image-preview">
+        <% if copy_originals %>    
+        <a href="<%= file_name with_relative_path %>"><%= image preview class="preview" %></a>
+        <% else %>
+        <%= image preview class="preview" %>
+        <% end %>
+      </div>
+    
+      <% for_each_thumbnail_caption %>
+        <% if first_item %>
+          <dl class="caption-container">
+        <% end %>
+    
+            <dt class="property" title="<%= item_attribute id %>"> <%= item_attribute display_name %> </dt>
+            <dd class="property-value"> <%= item_attribute value %> </dd>
+    
+        <% if last_item %>
+            <dt class="last property"></dt>
+            <dd class="last property-value"></dd>
+          </dl>
+        <% end %>
+      <% end %>
 
+    </div>    
+  </div>
+  <div id="footer">
+    <div id="footer-2">
+      <%= footer %>
+    </div>
+  </div>
 </body>
 </html>
diff --git a/extensions/webalbums/data/albumthemes/ClassicClips/index.gthtml b/extensions/webalbums/data/albumthemes/ClassicClips/index.gthtml
index db0c989..a51d328 100644
--- a/extensions/webalbums/data/albumthemes/ClassicClips/index.gthtml
+++ b/extensions/webalbums/data/albumthemes/ClassicClips/index.gthtml
@@ -16,86 +16,51 @@
 <% set_var thumbnail_width="159" thumbnail_height="120" %>
 <% set_var preview_width="650" preview_height="600" %>
 <body>
-
-  <table class="full_size" summary="page body">
-  <tr>
-    <td class="title">
-
-      <!-- Title -->
-      <table class="title" summary="title bar">
-      <tr>
-        <td>
-          <span class="title"><%= header %></span>
-        </td>
-      </tr>
-      </table>
-
-    </td>
-  </tr>
-  <tr>
-    <td class="nav_bar">
-
-      <!-- Navigation Bar -->
-      <table class="full_size" summary="navigation bar">
-      <tr>
-        <td>
-          &nbsp;
-        </td>
-        <td class="button">
-          <% if page_idx == 1 %>
-          <img src="<%= theme_link src="background.gif" %>" alt="void" />
-          <% else %>
-          <a href="<%= page_link idx_relative="-1" %>">
-            <img src="<%= theme_link src="prev.png" %>" alt="Previous" />
-          </a>
-          <% end %>
-        </td>
-        <td class="button">
-          <% if pages == 1 %>
-          <img src="<%= theme_link src="background.gif" %>" alt="void" />
-          <% else %>
-          <span class="page_index"><%= page_idx %> / <%= pages %></span>
-          <% end %>
-        </td>
-        <td class="button">
-          <% if page_idx == pages %>
-          <img src="<%= theme_link src="background.gif" %>" alt="void" />
-          <% else %>
-          <a href="<%= page_link idx_relative="+1" %>">
-            <img src="<%= theme_link src="next.png" %>" alt="Next" />
-          </a>
-          <% end %>
-        </td>
-      </tr>
-      </table>
-
-    </td>
-  </tr>
-  <tr>
-    <td>
-
-      <!-- Photos -->
+  <div id="wrapper">
+    <div id="main">
+    
+      <h1 class="index-title">
+        <%= header %>
+      </h1>
+      
+      <ul class="navigation-bar">
+        <% if page_idx < pages %>
+        <li class="next-page">
+          <a href="<%= page_link idx_relative="+1" %>" title="View the next page">
+            <span>View the next page</span>
+          </a>   
+        </li> 
+        <% else %>
+        <li class="void">
+        </li>
+        <% end %>
+        <li class="current-page">
+          <span><%= page_idx %> / <%= pages %></span>
+        </li>
+        <% if page_idx > 1  %>
+        <li class="previous-page">          
+          <a href="<%= page_link idx_relative="-1" %>" title="View the previous page">
+            <span>View the previous page</span>
+          </a>       
+        </li>
+        <% else %>
+        <li class="void">
+        </li>        
+        <% end %>
+        <li class="last">
+        </li>
+      </ul>  
+    
       <div id="thumbnail-list">
         <%= thumbnails %>
       </div>
 
-    </td>
-  </tr>
-  <tr>
-    <td class="footer">
-
-      <!-- Footer -->
-      <table class="full_size" summary="copyright">
-      <tr>
-        <td>
-          <span class="copyright"><%= footer %></span>
-        </td>
-      </tr>
-      </table>
-
-    </td>
-  </tr>
-  </table>
-
+    </div>    
+  </div>
+  <div id="footer">
+    <div id="footer-2">
+      <%= footer %>
+    </div>
+  </div>
 </body>
 </html>
diff --git a/extensions/webalbums/data/albumthemes/ClassicClips/layout.css b/extensions/webalbums/data/albumthemes/ClassicClips/layout.css
index 856baec..23b7b51 100644
--- a/extensions/webalbums/data/albumthemes/ClassicClips/layout.css
+++ b/extensions/webalbums/data/albumthemes/ClassicClips/layout.css
@@ -1,93 +1,158 @@
 /* gthumb "ClassicClips" layout, v. 2010-06-11 */
 
+* {
+	margin: 0;
+}
+
 html, body {
 	height: 100%;
-	padding: 0;
-	margin: 0;
 }
 
-table {
-	border-collapse: collapse;
-	border-width: 0;
+#wrapper {
+	min-height: 100%;
+	height: auto !important;
+	height: 100%;
 }
 
-td {
-	border-width: 0;
-	padding: 0;
-	vertical-align: middle;
+#main {
+	overflow: auto;
+	padding-bottom: 4em;	
+}
+
+#footer {
+	position: relative;
+	margin-top: -4em;
+	height: 2em;
+	clear: both;
 	text-align: center;
 }
 
-/* Title, header, footer */
+#footer-2 {
+	padding-top: 2em;
+}
 
-table.full_size {
-	width: 100%;
-	height: 100%;
+/* image page */
+
+h1.image-title,
+h1.index-title {
+	font-size: 21px;
+	text-align: center;
+	margin: 20px 0 10px 0;
 }
 
-table.row {
-	width: 100%;
+ul.navigation-bar {
+	display: block;
+	list-style-type: none;
+	margin: 0;
+	padding: 10px 20px 10px 20px;
 }
 
-td.title {
-	height: 4em;
-	vertical-align: middle; 
+ul.navigation-bar li a {
+	display: block;
 }
 
-table.title {
-	height: 4em;
-	width: 100%;
+ul.navigation-bar li span {
+	display: none;
 }
 
-td.nav_bar {
+ul.navigation-bar li.index {
+	float: left;
+	background: url(back.png) no-repeat;
+}
+
+ul.navigation-bar li.index a {
+	width: 30px;
 	height: 30px;
 }
 
-td.button {
-	width: 60px;
-	min-height: 60px;
-	white-space: nowrap;
+ul.navigation-bar li.current-image,
+ul.navigation-bar li.current-page {
+	float: right;
 }
 
-td.button img,
-td.button a img {
-	border-style: none;
+ul.navigation-bar li.current-image span,
+ul.navigation-bar li.current-page span {
+	padding: 7px 20px 0 20px;
+	display: block;
+	font-weight: bold;
+	font-size: 12px;
 }
 
-td.footer {
-	height: 3em;
+ul.navigation-bar li.void {
+	float: right;
+	background-image: none;
+	width: 40px;
+	height: 30px;
 }
 
-/* image.gthtml */
+ul.navigation-bar li.previous-image,
+ul.navigation-bar li.previous-page {
+	float: right;
+	background: url(prev.png) no-repeat;
+}
 
-td.left_thumbnail {
-	width: 115px;
-	text-align: left;
-	padding-left: 10px;
+ul.navigation-bar li.previous-image a,
+ul.navigation-bar li.previous-page a {
+	width: 40px;
+	height: 30px;
 }
 
-td.right_thumbnail {
-	width: 115px;
-	text-align: right;
-	padding-right: 10px;
+ul.navigation-bar li.next-image,
+ul.navigation-bar li.next-page {
+	float: right;
+	background: url(next.png) no-repeat;
 }
 
-div.properties {
-	margin-top: 1em;
-	margin-left: 10%;
-	text-align: left;
+ul.navigation-bar li.next-image a,
+ul.navigation-bar li.next-page a {
+	width: 40px;
+	height: 30px;
 }
 
-div.preview_comment {
-	margin-bottom: 1em;
+ul.navigation-bar li.last {
+	clear: both;
 }
 
-div.properties table td {
-	text-align: left;
-	padding: 0.2em 1em 0.2em 0em;
+div.image-preview {
+	clear: both;
+	margin: 50px auto 0 auto;
+	text-align: center;
 }
 
-/* index */
+dl.caption-container {
+	display: block;
+	margin: 5px auto 0 auto;
+	text-align: center;
+	width: 500px;
+	font-size: 12px;
+}
+
+dl.caption-container dt {
+	font-weight: bold;
+	cursor: default;
+	float: left;
+	clear: left;
+	margin: 0 5px 0 0;
+	padding: 0;
+	color: #aaa;
+	width: 100px;
+	text-align: right;
+}
+
+dl.caption-container dd {	
+	float: left;
+	margin: 0;
+	padding: 0;
+	color: #fff;	
+}
+
+dl.caption-container dd.last {
+	clear: both;
+	display: block;
+	float: none;
+}
+
+/* index page */
 
 #thumbnail-grid {
 	margin: auto;
@@ -95,16 +160,17 @@ div.properties table td {
 
 #thumbnail-grid td.td_index,
 #thumbnail-grid td.td_empty_index {
-	xwidth: 215px;
-	xpadding: 8px 5px 8px 5px;
 	vertical-align: middle;
 }
 
-#thumbnail-grid td.td_empty_index {
-	height: 150px;
+#thumbnail-grid tr td.td_empty_index {
+	width: 225px;
+	height: auto;
 }
 
-/* thumbnails */
+#thumbnail-grid tr.tr_empty_index td.td_empty_index {
+	height: 0;
+}
 
 #thumbnail-list div.thumbnail-caption-container {
 	float: left;
diff --git a/extensions/webalbums/data/albumthemes/ClassicClips/style.css b/extensions/webalbums/data/albumthemes/ClassicClips/style.css
index 413caad..b50f6b6 100644
--- a/extensions/webalbums/data/albumthemes/ClassicClips/style.css
+++ b/extensions/webalbums/data/albumthemes/ClassicClips/style.css
@@ -5,6 +5,7 @@
 body {
 	background-color: #4B4B4B;
 	color: white;
+	font-size: 12px;
 }
 
 span.title {
diff --git a/extensions/webalbums/data/albumthemes/ClassicClips/thumbnail.gthtml b/extensions/webalbums/data/albumthemes/ClassicClips/thumbnail.gthtml
index dfbf77f..cce8d4b 100644
--- a/extensions/webalbums/data/albumthemes/ClassicClips/thumbnail.gthtml
+++ b/extensions/webalbums/data/albumthemes/ClassicClips/thumbnail.gthtml
@@ -7,7 +7,7 @@
           <div class="thumbnail-left">
             <div class="thumbnail-right">
               <div class="thumbnail-image-container">
-                <a class="thumbnail-image" href="<%= image_link %>"><%= image thumbnail %></a>
+                <a class="thumbnail-image" href="<%= image_link %>" title="Click to view the image"><%= image thumbnail %></a>
               </div>
             </div>
           </div>
[Date Prev][Date Next]   [Thread Prev][Thread Next]   [Thread Index] [Date Index] [Author Index]