Added tabs to some pages

lewisnyman · Mar 12, 2012 · 46bc5c3 · 46bc5c3
1 parent 1b78b5a
commit 46bc5c3
Show file tree

Hide file tree

Showing 25 changed files with 718 additions and 110 deletions.
diff --git a/_assets/css/style.css b/_assets/css/style.css
@@ -289,6 +289,81 @@ body, #wrapper {
         clear:both;
     }
 
+
+  .tabs {
+    list-style: none outside none;
+    padding: 0;
+    margin: 1.5em 0;
+    overflow: hidden;
+  }
+
+  .tabs li {
+    float: left;
+    height: 100%;
+    text-align: center;
+  }
+
+  .tabs li a,
+  .tabs li a:active ~ li.active a {
+    background-color: #fdfdfd;
+    background-image: -webkit-gradient(linear, left top, left bottom, from(#fdfdfd), to(#eeeeee)); /* Saf4+, Chrome */
+    background-image: -webkit-linear-gradient(top, #fdfdfd, #eeeeee); /* Chrome 10+, Saf5.1+, iOS 5+ */
+    background-image:    -moz-linear-gradient(top, #fdfdfd, #eeeeee); /* FF3.6 */
+    background-image:     -ms-linear-gradient(top, #fdfdfd, #eeeeee); /* IE10 */
+    background-image:      -o-linear-gradient(top, #fdfdfd, #eeeeee); /* Opera 11.10+ */
+    background-image:         linear-gradient(to bottom, #fdfdfd, #eeeeee);
+    color: #333;
+    display: block;
+    height: 100%;
+    border: 1px solid #A6A7A2;
+    padding: 0.8em 2px 0.9em;
+    text-decoration: none;
+    -webkit-tap-highlight-color:transparent; 
+  }
+
+ .tabs li.active a,
+ .tabs li a:active {
+   background-color: #ededed;
+   background-image: -webkit-gradient(linear, left top, left bottom, from(#ededed), to(#dadada)); /* Saf4+, Chrome */
+   background-image: -webkit-linear-gradient(top, #ededed, #dadada); /* Chrome 10+, Saf5.1+, iOS 5+ */
+   background-image:    -moz-linear-gradient(top, #ededed, #dadada); /* FF3.6 */
+   background-image:     -ms-linear-gradient(top, #ededed, #dadada); /* IE10 */
+   background-image:      -o-linear-gradient(top, #ededed, #dadada); /* Opera 11.10+ */
+   background-image:         linear-gradient(to bottom, #ededed, #dadada);  
+ }
+
+  .tabs li:first-child a{
+    -webkit-border-radius: 4px 0 0 4px;
+    -moz-border-radius: 4px 0 0 4px;
+    border-radius: 4px 0 0 4px; 
+  }
+
+  .tabs li:last-child a{
+    -webkit-border-radius: 0 4px 4px 0;
+    -moz-border-radius: 0 4px 4px 0;
+    border-radius: 0 4px 4px 0; 
+  }
+
+  .tabs li + li a {
+    border-left: 0 none transparent;
+  }
+
+  .tabs.items-two li {
+    width: 50%;
+  } 
+
+  .tabs.items-three li {
+    width: 33.333;
+  } 
+
+  .tabs.items-four li {
+    width: 25%;
+  } 
+
+  .tabs.items-five li {
+    width: 20%;
+  } 
+
 /* loading screen */
 .ui-loading .ui-loader { 
 display: block;      

diff --git a/_assets/js/script.js b/_assets/js/script.js
@@ -3,6 +3,7 @@ $(document).ready(function(){ ready(); }); // call function after DOM is ready t
 function ready() {
 var adminlinks = $('.admin-list .leaf a, .current .toolbar #add');
 var deletelink = $('.current .toolbar #delete');
+var tabs = $('.tabs li a');
 if ( Modernizr.csstransforms ) {
 
 window.slider = new Swipe(
@@ -62,8 +63,28 @@ else {
   alert("Hi. So I've been told your browser does not support CSS transforms. The fancy navigation with one to one gestures have been disabled. You can still browse the prototype but it will be missing some good features. I recommend downloading a more capable browser if possible or grabbing the iPhone/Opera emulator.");
 }
 
+tabs
+.live('click', function(event) {
+  if(!isTouch()) {
+    $(this).loadInPage();
+  }
+  event.preventDefault();
+})
+.live('tap', function(){ 
+    $(this).loadInPage();
+});
+}
 
-
+Zepto.fn.loadInPage = function() {
+  var o = $(this[0]) // It's your element
+  var href = o.attr('href');
+  var url = href + '/ #wrapper';
+  var currentPage = $('.slider > li.current'); 
+  $('body').addClass('ui-loading');
+  currentPage.load(url, function() {
+    $('body').removeClass('ui-loading'); 
+    removeFutureSteps();
+  });
 }
 
 Zepto.fn.loadNextPage = function() {
@@ -76,6 +97,9 @@ Zepto.fn.loadNextPage = function() {
     nextpage = $('.slider > li.current + li');  
   });
  } 
+ else {
+   nextpage.attr('data-url', href);
+ }
  $('body').addClass('ui-loading');
   nextpage.load(url, function() {
      $('body').removeClass('ui-loading');

diff --git a/_assets/js/search.js b/_assets/js/search.js
@@ -1,5 +1,5 @@
 $(document).ready(function(){ 
-  search.main(); 
+  searchMain(); 
 }); 
 
 //GLOBALS
@@ -9,7 +9,7 @@ templates = {
  searchResult : "<li class='leaf result {{category}}'><a href='{{url}}'>{{name}}</a></li>",
  }
 
-search.main= function() {
+searchMain = function() {
   constructNavTree();
   searchSetup();
 }

diff --git a/content/comments/comment/index.html b/content/comments/comment/index.html
@@ -0,0 +1,51 @@
+<!doctype html>
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+
+<meta name="HandheldFriendly" content="True" />
+<meta name="MobileOptimized" content="320" />
+<meta name="viewport" content="width=device-width, target-densitydpi=160dpi, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+<meta name="apple-mobile-web-app-capable" content="yes">
+<meta name="apple-mobile-web-app-status-bar-style" content="black">
+<meta http-equiv="cleartype" content="on" /> <!-- Cleartype for Mobile IE -->
+
+<link rel="stylesheet" href="/_assets/css/style.css" type="text/css" media="screen" />
+
+<script type="text/javascript" language="Javascript" src="/_assets/js/zepto.min.js"></script>
+
+<script type="text/javascript" language="Javascript" src="/_assets/js/script.js"></script>
+
+</head>
+
+<body>
+<div id="wrapper">
+<div id="toolbar" class="toolbar clearfix">
+  <div class="toolbar-menu clearfix">
+  <ul class="action-links"><li><a id="search"><img height="18" src="/_assets/img/zoom_icon_24.png" /></a></li>
+  <li><a href="/" id="close"><img height="18" src="/_assets/img/eject_icon&24.png" /></a></li>
+  </ul>
+  <ul class="action-links"><li><a href="/structure/content-types/delete" id="delete"><img height="18" src="/_assets/img/delete_icon&24.png" /></a></li>
+  </ul>
+    <h1>Comment</h1>
+  </div>
+  <div class="search-form">
+    <ul class="action-links"><li><a id="cancel">Cancel</a></li></ul>
+    <input type="search" autocapitalize="off" autocorrect="off" autocomplete="off" placeholder="Search" />
+  </div>
+</div>
+
+<div class="page">
+  <h2>Hello</h2>
+  <p>You're probably looking for a form here aren't you? Forms and any <em>task based</em> pages are excluded from this iteration of the mobile prototype.</p>
+  <p>See the <a href="http://groups.drupal.org/node/188744">Drupal 8 Mobile UX Roadmap for more information</a></p>
+  <p>Lewis</p>
+</div>
+
+    <div class="search-results">
+
+    </div>
+
+ </div>
+</body>
+
+</html>
diff --git a/content/comments/index.html b/content/comments/index.html
@@ -0,0 +1,75 @@
+<!doctype html>
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+
+<meta name="HandheldFriendly" content="True" />
+<meta name="MobileOptimized" content="320" />
+<meta name="viewport" content="width=device-width, target-densitydpi=160dpi, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+<meta name="apple-mobile-web-app-capable" content="yes">
+<meta name="apple-mobile-web-app-status-bar-style" content="black">
+<meta http-equiv="cleartype" content="on" /> <!-- Cleartype for Mobile IE -->
+
+<link rel="stylesheet" href="/_assets/css/style.css" type="text/css" media="screen" />
+
+<script type="text/javascript" language="Javascript" src="/_assets/js/zepto.min.js"></script>
+
+<script type="text/javascript" language="Javascript" src="/_assets/js/script.js"></script>
+
+</head>
+
+<body>
+<div id="wrapper">
+<div id="toolbar" class="toolbar clearfix">
+  <div class="toolbar-menu clearfix">
+
+<ul class="action-links"><li><a id="search"><img height="18" src="/_assets/img/zoom_icon_24.png" /></a></li>
+<li><a href="/" id="close"><img height="18" src="/_assets/img/eject_icon&24.png" /></a></li>
+</ul>
+
+
+<ul class="action-links"><li><a data-attributes="Status,Type" id="filter">
+<select>  <option>Filter by:</option>
+<option>Unapproved</option>
+</select>
+<img height="18" src="/_assets/img/filter_icon&24.png" /></a></li>
+</ul>
+
+      <h1>Comments</h1>
+  </div>
+  <div class="search-form">
+    <ul class="action-links"><li><a id="cancel">Cancel</a></li></ul>
+    <input type="search" autocapitalize="off" autocorrect="off" autocomplete="off" placeholder="Search" />
+  </div>
+</div>
+
+<div class="page">
+<div class="clearfix" id="content">
+      <div class="element-invisible"><a id="main-content"></a></div>
+                          <div class="region region-content">
+    <div class="block block-system" id="block-system-main">
+
+
+  <div class="content">
+    <ul class="admin-list">
+    <li class="leaf"><a href="/content/comments/comment">Erat El Nimis Zelus <span class="description">Posted in 'Node' by vothos <em> - Updated at 00:14, 08/20/2011</em></span></a></li>
+
+    <li class="leaf"><a href="/content/comments/comment">Augue Letalis<span class="description">Posted in 'Node' by stuslic <em> - Updated at 00:14, 08/20/2011</em></span></a></li>
+
+    <li class="leaf"><a href="/content/comments/comment">Luctus Vicis<span class="description">Posted in 'Node' closhiwroho <em> - Updated at 00:14, 08/20/2011</em></span></a></li>
+
+    <li class="leaf"><a href="/content/comments/comment">Jus Praemetto Venio<span class="description">Posted in 'Node' by stanececrup <em> - Updated at 00:14, 08/20/2011</em></span></a></li>
+
+  </ul>
+</div>
+</div>
+  </div>
+    </div></div>
+
+        <div class="search-results">
+
+        </div>
+
+</div>
+</body>
+
+</html>
diff --git a/content/index.html b/content/index.html
@@ -21,21 +21,10 @@
 <div id="wrapper">
 <div id="toolbar" class="toolbar clearfix">
   <div class="toolbar-menu clearfix">
-
-<ul class="action-links"><li><a id="search"><img height="18" src="/_assets/img/zoom_icon_24.png" /></a></li>
-<li><a href="/" id="close"><img height="18" src="/_assets/img/eject_icon&24.png" /></a></li>
-</ul>
-
-
-<ul class="action-links"><li><a href="/content/add" id="add">+</a></li><li><a data-attributes="Status,Type" id="filter">
-<select>  <option>Filter by:</option>
-<option>Status</option>
-<option>Type</option>
-</select>
-<img height="18" src="/_assets/img/filter_icon&24.png" /></a></li>
-</ul>
-
-      <h1>Content</h1>
+  <ul class="action-links"><li><a id="search"><img height="18" src="/_assets/img/zoom_icon_24.png" /></a></li>
+  <li><a href="/" id="close"><img height="18" src="/_assets/img/eject_icon&24.png" /></a></li>
+  </ul>
+    <h1>Content</h1>
   </div>
   <div class="search-form">
     <ul class="action-links"><li><a id="cancel">Cancel</a></li></ul>
@@ -51,17 +40,7 @@ <h1>Content</h1>
 
 
   <div class="content">
-    <ul class="admin-list">
-    <li class="leaf"><a href="/content/node">Erat El Nimis Zelus <span class="description">A published 'Article' by vothos <em> - Updated at 00:14, 08/20/2011</em></span></a></li>
-
-    <li class="leaf"><a href="/content/node">Augue Letalis<span class="description">An <em>unpublished</em> 'Basic page' by stuslic <em> - Updated at 00:14, 08/20/2011</em></span></a></li>
-
-    <li class="leaf"><a href="/content/node">Luctus Vicis<span class="description">A published 'Basic page' by closhiwroho <em> - Updated at 00:14, 08/20/2011</em></span></a></li>
-
-    <li class="leaf"><a href="/content/node">Jus Praemetto Venio<span class="description">An <em>unpublished</em> 'Article' by stanececrup <em> - Updated at 00:14, 08/20/2011</em></span></a></li>
-
-  </ul>
-</div>
+    <ul class="admin-list"><li class="leaf"><a href="/content/list">Nodes<div class="description">Display a list of created nodes.</div></a></li><li class="leaf"><a href="/content/comments">Comments<div class="description">A list of comments posted on nodes.</div></a></li><li class="leaf"><a href="/content/book">Book<div class="description">The book module offers a means to organize a collection of related content pages, collectively known as a book. </div></a></li></ul>  </div>
 </div>
   </div>
     </div></div>

diff --git a/content/list/index.html b/content/list/index.html
@@ -0,0 +1,76 @@
+<!doctype html>
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+
+<meta name="HandheldFriendly" content="True" />
+<meta name="MobileOptimized" content="320" />
+<meta name="viewport" content="width=device-width, target-densitydpi=160dpi, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+<meta name="apple-mobile-web-app-capable" content="yes">
+<meta name="apple-mobile-web-app-status-bar-style" content="black">
+<meta http-equiv="cleartype" content="on" /> <!-- Cleartype for Mobile IE -->
+
+<link rel="stylesheet" href="/_assets/css/style.css" type="text/css" media="screen" />
+
+<script type="text/javascript" language="Javascript" src="/_assets/js/zepto.min.js"></script>
+
+<script type="text/javascript" language="Javascript" src="/_assets/js/script.js"></script>
+
+</head>
+
+<body>
+<div id="wrapper">
+<div id="toolbar" class="toolbar clearfix">
+  <div class="toolbar-menu clearfix">
+
+<ul class="action-links"><li><a id="search"><img height="18" src="/_assets/img/zoom_icon_24.png" /></a></li>
+<li><a href="/" id="close"><img height="18" src="/_assets/img/eject_icon&24.png" /></a></li>
+</ul>
+
+
+<ul class="action-links"><li><a href="/content/add" id="add">+</a></li><li><a data-attributes="Status,Type" id="filter">
+<select>  <option>Filter by:</option>
+<option>Status</option>
+<option>Type</option>
+</select>
+<img height="18" src="/_assets/img/filter_icon&24.png" /></a></li>
+</ul>
+
+      <h1>Content</h1>
+  </div>
+  <div class="search-form">
+    <ul class="action-links"><li><a id="cancel">Cancel</a></li></ul>
+    <input type="search" autocapitalize="off" autocorrect="off" autocomplete="off" placeholder="Search" />
+  </div>
+</div>
+
+<div class="page">
+<div class="clearfix" id="content">
+      <div class="element-invisible"><a id="main-content"></a></div>
+                          <div class="region region-content">
+    <div class="block block-system" id="block-system-main">
+
+
+  <div class="content">
+    <ul class="admin-list">
+    <li class="leaf"><a href="/content/node">Erat El Nimis Zelus <span class="description">A published 'Article' by vothos <em> - Updated at 00:14, 08/20/2011</em></span></a></li>
+
+    <li class="leaf"><a href="/content/node">Augue Letalis<span class="description">An <em>unpublished</em> 'Basic page' by stuslic <em> - Updated at 00:14, 08/20/2011</em></span></a></li>
+
+    <li class="leaf"><a href="/content/node">Luctus Vicis<span class="description">A published 'Basic page' by closhiwroho <em> - Updated at 00:14, 08/20/2011</em></span></a></li>
+
+    <li class="leaf"><a href="/content/node">Jus Praemetto Venio<span class="description">An <em>unpublished</em> 'Article' by stanececrup <em> - Updated at 00:14, 08/20/2011</em></span></a></li>
+
+  </ul>
+</div>
+</div>
+  </div>
+    </div></div>
+
+        <div class="search-results">
+
+        </div>
+
+</div>
+</body>
+
+</html>