adding in some styles from dojox.mobile to make the ui seem more native iphone.
authorJames Burke <jrburke@mozillamessaging.com>
Mon, 07 Jun 2010 17:42:00 -0700
changeset 1769 4028f561248249c017558924666e23628e2217ed
parent 1768 a169abe36f7913508fce711f83aeb5eb22e36177
child 1770 46eee64935945facb13c2bef045b549434f163c4
push id972
push userjrburke@gmail.com
push dateTue, 08 Jun 2010 00:42:07 +0000
adding in some styles from dojox.mobile to make the ui seem more native iphone.
client/api/contacts.css
client/api/contacts.html
--- a/client/api/contacts.css
+++ b/client/api/contacts.css
@@ -1,41 +1,112 @@
 body {
-    font-size:12px;
-    -webkit-user-select:none;
-    -webkit-text-size-adjust:none;
-    font-family:helvetica;
+    overflow-x: hidden;
+    -webkit-text-size-adjust: none;
+    background-color: rgb(197,204,211);
+    font-family: Helvetica;
+    font-size: 17px;
+    min-height: 416px;
 }
 
 body,ul,li {
     padding:0;
     margin:0;
 }
 
 .template {
     display: none;
 }
 
 #header {
-    width:100%;
-    height:45px;
-    line-height:45px;
-    background-image:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #fe96c9), color-stop(0.05, #d51875), color-stop(1, #7b0a2e));
-    padding:0;
-    color:#eee;
-    font-size:20px;
-    text-align:center;
+    position: relative;
+    height: 42px;
+    margin: 0px;
+    padding: 0px;
+    background-color: #889BB3;
+    background: -webkit-gradient(linear, left top, left bottom, from(#B0BCCD), to(#6D84A2), color-stop(0.5, #889BB3), color-stop(0.5, #8195AF));
+    border-top: 1px solid #CDD5DF;
+    border-bottom: 1px solid #2D3642;
+    font-family: Helvetica;
+    font-size: 20px;
+    font-weight: bold;
+    color: white;
+    text-align: center;
+    line-height: 44px;
+    text-shadow: rgba(0,0,0,0.6) 0px -1px 0px;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
 }
 
+
 #back {
     position: absolute;
     display: none;
     top: 0px;
-    left: 10px;
+    left: 0px;
+}
+
+/* Heading Arrow Button */
+.mblArrowButtonHead {
+    position: absolute;
+    top: 10px;
+    left: 8px;
+    width: 19px;
+    height: 19px;
+    border-width: 1px;
+    border-style: solid;
+    border-color: #3A4655;
+    -webkit-transform: scale(.8,1) rotate(45deg);
+    background: -webkit-gradient(linear, left top, right bottom, from(#8EA4C1), to(#4A6C9B), color-stop(0.5, #5877A2), color-stop(0.5, #476999));
 }
+.mblArrowButtonBody {
+    position: absolute;
+    top: 5px;
+    left: 19px;
+    padding: 0px 10px 0px 3px;
+    height: 29px;
+    border-width: 1px 1px 1px 0px;
+    border-style: inset;
+    border-color: #9CACC0;
+    font-family: Helvetica;
+    font-size: 13px;
+    color: white;
+    line-height: 29px;
+    cursor: pointer;
+    -webkit-border-radius: 5px;
+    -moz-border-radius: 5px;
+    background-color: #5877A2;
+    background: -webkit-gradient(linear, left top, left bottom, from(#8EA4C1), to(#4A6C9B), color-stop(0.5, #5877A2), color-stop(0.5, #476999));
+    -webkit-tap-highlight-color: transparent;
+}
+.dj_ie .mblArrowButtonBody, .dj_ff3 .mblArrowButtonBody {
+    padding: 0px 10px 0px 10px;
+}
+.mblArrowButtonNeck {
+    position: absolute;
+    top: 5px;
+    left: 19px;
+    width: 4px;
+    height: 29px;
+    border-width: 1px 0px 1px 0px;
+    border-style: inset;
+    border-color: #9CACC0;
+    background: -webkit-gradient(linear, left top, left bottom, from(#8EA4C1), to(#4A6C9B), color-stop(0.5, #5877A2), color-stop(0.5, #476999));
+}
+.mblArrowButtonSelected .mblArrowButtonHead {
+    background: -webkit-gradient(linear, left top, right bottom, from(#7C87A4), to(#263E6C), color-stop(0.5, #394D77), color-stop(0.5, #243B69));
+}
+.mblArrowButtonSelected .mblArrowButtonBody, .mblArrowButtonSelected .mblArrowButtonNeck {
+    background: -webkit-gradient(linear, left top, left bottom, from(#7C87A4), to(#263E6C), color-stop(0.5, #394D77), color-stop(0.5, #243B69));
+}
+
+
+
+
 
 #display {
     position: relative;
     width: 320px;
     height: 310px;
     overflow: hidden;
 }
 
@@ -62,24 +133,28 @@ body,ul,li {
     overflow: scroll;
 }
 
 #contactList {
     width: 100%;
     list-style: none;
     padding: 0;
     margin: 0;
+    background-color: white;
 }
 
 #contactList li {
+    list-style-type: none;
     width: 100%;
-    height: 40px;
-    line-height: 40px;
-    font-size: 20px;
-    border-bottom: 1px solid gray;
+    height: 43px;
+    border-bottom: 1px solid #ADAAAD;
+    line-height: 43px;
+    font-weight: bold;
+    position: relative;
+    color: black;
 }
 
 #contactList li a {
     width: 100%;
     text-decoration: none;
     color: black;
 }
 
--- a/client/api/contacts.html
+++ b/client/api/contacts.html
@@ -1,16 +1,17 @@
 <!DOCTYPE html>
 <html>
 <head>
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
     <meta name="apple-mobile-web-app-capable" content="yes" />
     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
     <title>Contact Listing</title>
     <link type="text/css" rel="stylesheet" href="contacts.css">
+
     <script src="scripts/requireplugins-jquery-1.4.2.js" charset="utf-8"></script>
     <script>
         "use strict";
         /*global require: false, console: false */
         require(["jquery", "rdapi", "blade/jig", "json2", "iscroll-min"], function ($, rdapi, jig) {
             var scroller;
             $(function () {
                 //setup for the iscroll thing
@@ -78,17 +79,24 @@
                     left: '0px'
                 });
                 $('#back').css('display', 'none');
             });
         });
     </script>
 </head>
 <body>
-    <div id="header"><a id="back" href="#contacts">Back</a><span id="headerText"></span></div>
+    <div id="header">
+        <div id="back">
+            <div class="mblArrowButtonHead"></div>
+            <div class="mblArrowButtonBody mblArrowButtonText">Back</div>
+            <div class="mblArrowButtonNeck"></div>
+        </div>
+        <span id="headerText"></span>
+    </div>
 
     <div id="display">
         <div id="cards">
             <div id="contactsCard" class="card" title="Contacts">
                 <ul id="contactList" class="contacts templateContainer">
                     <li class="template" data-api="inflow/contacts/by_name"><a class="person" href="#{id[1]}">{displayName}</a></li>
                 </ul>
             </div>