$1

sturnquest · May 16, 2011 · 1be188c · 1be188c
1 parent 09bb244
commit 1be188c
Show file tree

Hide file tree

Showing 3 changed files with 87 additions and 8 deletions.
diff --git a/www/issue_20110507.html b/www/issue_20110507.html
@@ -28,7 +28,7 @@
         <a class="home-button" href="index.html" data-transition="slide" data-direction="reverse" rel="external"><img
                 src="images/home_icon.png"></a>
 
-        <div class="contents-title">Contents</div>
+        <div class="header-title">Contents</div>
 
         <div class="edition">
             <span class="edition-title">The Week</span>
@@ -63,6 +63,12 @@
     <!-- /content -->
 
     <div class="footer footer-contents">
+        <div class="contents-bookmark">
+            <a href="#" id="contents-bookmark">
+                <img src="images/bookmark.png"/>
+            </a>
+        </div>
+
         <div class="copyright">
             &#169; Dennis Publishing Limited
         </div>
@@ -78,7 +84,13 @@
         <a class="home-button" href="#contents" data-transition="slide" data-direction="reverse"><img
                 src="images/home_icon.png"></a>
 
-        <h1>The Main Stories</h1>
+        <div class="header-title">The Main Stories</div>
+
+        <div class="page-bookmark">
+            <a href="#">
+                <img src="images/bookmark.png"/>
+            </a>
+        </div>
     </div>
     <!-- /header -->
 
@@ -143,7 +155,13 @@ <h2>What the editorials said</h2>
         <a class="home-button" href="#contents" data-transition="slide" data-direction="reverse"><img
                 src="images/home_icon.png"></a>
 
-        <h1>The Main Stories</h1>
+        <div class="header-title">The Main Stories</div>
+
+        <div class="page-bookmark">
+            <a href="#">
+                <img src="images/bookmark.png"/>
+            </a>
+        </div>
     </div>
     <!-- /header -->
 
@@ -202,7 +220,13 @@ <h2>What next?</h2>
         <a class="home-button" href="#contents" data-transition="slide" data-direction="reverse"><img
                 src="images/home_icon.png"></a>
 
-        <h1>Politics</h1>
+        <div class="header-title">Politics</div>
+
+        <div class="page-bookmark">
+            <a href="#">
+                <img src="images/bookmark.png"/>
+            </a>
+        </div>
     </div>
     <!-- /header -->
 
@@ -267,7 +291,13 @@ <h2>What the editorials said</h2>
         <a class="home-button" href="#contents" data-transition="slide" data-direction="reverse"><img
                 src="images/home_icon.png"></a>
 
-        <h1>Politics</h1>
+        <div class="header-title">Politics</div>
+
+        <div class="page-bookmark">
+            <a href="#">
+                <img src="images/bookmark.png"/>
+            </a>
+        </div>
     </div>
     <!-- /header -->
 
@@ -334,7 +364,13 @@ <h2>What the commentators said</h2>
         <a class="home-button" href="#contents" data-transition="slide" data-direction="reverse"><img
                 src="images/home_icon.png"></a>
 
-        <h1>Politics</h1>
+        <div class="header-title">Politics</div>
+
+        <div class="page-bookmark">
+            <a href="#">
+                <img src="images/bookmark.png"/>
+            </a>
+        </div>
     </div>
     <!-- /header -->
 
@@ -371,7 +407,13 @@ <h2>What next?</h2>
         <a class="home-button" href="#contents" data-transition="slide" data-direction="reverse"><img
                 src="images/home_icon.png"></a>
 
-        <h1>Sport</h1>
+        <div class="header-title">Sport</div>
+
+        <div class="page-bookmark">
+            <a href="#">
+                <img src="images/bookmark.png"/>
+            </a>
+        </div>
     </div>
     <!-- /header -->
 

diff --git a/www/javascripts/the_week.js b/www/javascripts/the_week.js
@@ -23,4 +23,22 @@ $(function() {
         e.preventDefault();
     });
 
+    $('.page-bookmark a').click(function() {
+        alert('Bookmark page: ' + $.mobile.activePage.attr('id'));
+
+        var bookmark = $.mobile.activePage.attr('id');
+        var bookmarks = localStorage["bookmarks"];
+        if (bookmarks == null) {
+            bookmarks = bookmark;
+        } else {
+            bookmarks += ',' + bookmark;
+        }
+
+        localStorage["bookmarks"] = bookmarks;
+    });
+
+    $('#contents-bookmark').click(function() {
+        alert('Bookmarks: ' + localStorage["bookmarks"])
+    });
+
 });
diff --git a/www/stylesheets/ipad.css b/www/stylesheets/ipad.css
@@ -69,7 +69,7 @@ div.multicolumn4 {
     margin-right: auto;
 }
 
-.contents-title {
+.header-title {
     float: left;
 
     margin-left: 500px;
@@ -148,6 +148,25 @@ div.multicolumn4 {
     background: #666;
 }
 
+.contents-bookmark, .page-bookmark {
+    padding-left: 5px;
+    padding-right: 5px;
+    padding-top: 3px;
+}
+
+.page-bookmark {
+    float: right;
+}
+
+.page-bookmark img, .contents-bookmark img {
+    width: 25px;
+    border: none;
+}
+
+.contents-bookmark img {
+    float: left;
+}
+
 .content-cover {
     float: left;
 }