From 9e0b38895913af6513e975bca17ad828fedd1bf4 Mon Sep 17 00:00:00 2001
From: Tomas Bzatek <tbzatek@users.sourceforge.net>
Date: Thu, 3 Mar 2011 13:51:36 +0100
Subject: design: Position reference anchors in negative space

This will hopefully fix all known scrolling issues as we got rid of
the master content scrolling div. Needs to be tested thoroughly on
touchscreen browsers.

Also, paging by the Space key works now once page is rendered.
---
 templates/styles.css          | 15 ++++++++++-----
 templates/template-album.tmpl |  9 ++++++---
 templates/template-index.tmpl |  9 ++++++---
 3 files changed, 22 insertions(+), 11 deletions(-)

(limited to 'templates')

diff --git a/templates/styles.css b/templates/styles.css
index 8c3aaf2..b96f19f 100644
--- a/templates/styles.css
+++ b/templates/styles.css
@@ -24,11 +24,8 @@ a:hover {
 }
 
 div.master_content {
-   overflow: auto; 
-   position: absolute; 
-   top: 3.4em; 
-   bottom: 1.8em;
-   width: 100%;
+   padding-top: 3.4em;
+   padding-bottom: 1.8em;
 }
 
 /******   NAVIGATION   ******/
@@ -36,6 +33,7 @@ div.navigation {
    position: fixed;
    top: 0px;
    overflow: hidden;
+   z-index: 1;
    background-color: #606466;
    width: 100%;
    padding: 0.4em 0em 0.4em 0em;
@@ -76,6 +74,7 @@ div.footer {
    position: fixed;
    bottom: 0px;
    overflow: hidden;
+   z-index: 1;
    text-align: center;
    background-color: #4F5659;
    width: 100%;
@@ -177,6 +176,12 @@ div.exif td {
 }
 
 
+/******   GENERAL CLASSES   ******/
+div.position_marker {
+   position: relative;
+   top: -4.3em;
+}
+
 /******   ALBUM THUMBNAILS   ******/
 div.album_thumbs {
    text-align: left;
diff --git a/templates/template-album.tmpl b/templates/template-album.tmpl
index 0162f68..9f31fb3 100644
--- a/templates/template-album.tmpl
+++ b/templates/template-album.tmpl
@@ -35,7 +35,8 @@
   <div class="album_thumbs">
   <!-- $(BEGIN_IMG_LIST) -->
     <!-- $(BEGIN_IMG_LIST_LANDSCAPE) -->
-      <div class="album_item" id="$(IMG_LIST_ID)">
+      <div class="album_item">
+        <div class="position_marker" id="$(IMG_LIST_ID)"></div>
         <a href="$(IMG_SUBPAGE)">
           <img src="$(IMG_THUMBNAIL)" width="$(IMG_SIZE_THUMB_W)" height="$(IMG_SIZE_THUMB_H)" alt="$(IMG_TITLE)" />
           <span class="album_thumb_text"><!-- $(IMG_FILENAME) --></span>
@@ -43,7 +44,8 @@
       </div>
     <!-- $(END_IMG_LIST_LANDSCAPE) -->
     <!-- $(BEGIN_IMG_LIST_PORTRAIT) -->
-      <div class="album_item" id="$(IMG_LIST_ID)">
+      <div class="album_item">
+        <div class="position_marker" id="$(IMG_LIST_ID)"></div>
         <a href="$(IMG_SUBPAGE)">
           <img src="$(IMG_THUMBNAIL)" width="$(IMG_SIZE_THUMB_W)" height="$(IMG_SIZE_THUMB_H)" alt="$(IMG_TITLE)" class="portrait" />
           <span class="album_thumb_text"><!-- $(IMG_FILENAME) --></span>
@@ -51,7 +53,8 @@
       </div>
     <!-- $(END_IMG_LIST_PORTRAIT) -->
     <!-- $(BEGIN_IMG_LIST_SQUARED) -->
-      <div class="album_item" id="$(IMG_LIST_ID)">
+      <div class="album_item">
+        <div class="position_marker" id="$(IMG_LIST_ID)"></div>
         <a href="$(IMG_SUBPAGE)">
           <img src="$(IMG_THUMBNAIL)" width="$(IMG_SIZE_THUMB_W)" height="$(IMG_SIZE_THUMB_H)" alt="$(IMG_TITLE)" class="squared" />
           <span class="album_thumb_text"><!-- $(IMG_FILENAME) --></span>
diff --git a/templates/template-index.tmpl b/templates/template-index.tmpl
index 6c91b76..01de113 100644
--- a/templates/template-index.tmpl
+++ b/templates/template-index.tmpl
@@ -35,7 +35,8 @@
   <div class="index_thumbs">
   <!-- $(BEGIN_IMG_LIST) -->
     <!-- $(BEGIN_IMG_LIST_LANDSCAPE) -->
-      <div class="index_item" id="$(IMG_LIST_ID)">
+      <div class="index_item">
+        <div class="position_marker" id="$(IMG_LIST_ID)"></div>
         <a href="$(ALBUM_SUBPATH)">
            <img src="$(IMG_THUMBNAIL)" width="$(IMG_SIZE_THUMB_W)" height="$(IMG_SIZE_THUMB_H)" alt="" />
            <span class="album_text"><!-- $(IMG_TITLE) --></span><br />
@@ -45,7 +46,8 @@
       </div>
     <!-- $(END_IMG_LIST_LANDSCAPE) -->
     <!-- $(BEGIN_IMG_LIST_PORTRAIT) -->
-      <div class="index_item" id="$(IMG_LIST_ID)">
+      <div class="index_item">
+        <div class="position_marker" id="$(IMG_LIST_ID)"></div>
         <a href="$(ALBUM_SUBPATH)">
            <img src="$(IMG_THUMBNAIL)" width="$(IMG_SIZE_THUMB_W)" height="$(IMG_SIZE_THUMB_H)"  alt="" />
            <span class="album_text_portrait"><!-- $(IMG_TITLE) --></span><br />
@@ -55,7 +57,8 @@
       </div>
     <!-- $(END_IMG_LIST_PORTRAIT) -->
     <!-- $(BEGIN_IMG_LIST_SQUARED) -->
-      <div class="index_item" id="$(IMG_LIST_ID)">
+      <div class="index_item">
+        <div class="position_marker" id="$(IMG_LIST_ID)"></div>
         <a href="$(ALBUM_SUBPATH)">
            <img src="$(IMG_THUMBNAIL)" width="$(IMG_SIZE_THUMB_W)" height="$(IMG_SIZE_THUMB_H)"  alt="" />
            <span class="album_text_squared"><!-- $(IMG_TITLE) --></span><br />
-- 
cgit v1.2.3