Fixed member list to display verticle on small screens (AEROGEAR-160)…

… which in turn fixed the JSON links not working by removing the special overflow touch scrolling that was added (AEROGEAR-225)
jbosstools · Mar 29, 2012 · aee8e13 · aee8e13
1 parent 5fcf524
commit aee8e13
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 62 deletions.
diff --git a/kitchensink-html5-mobile/src/main/webapp/css/m.screen.css b/kitchensink-html5-mobile/src/main/webapp/css/m.screen.css
@@ -166,22 +166,21 @@ span.success {
 
 /* Member table styles */
 #mem_tbl {
-   background-color: #E6E7E8;
    clear: both;
    width: 100%;
+   margin-bottom: 20px;
 }
 
 #mem_tbl td,
 #mem_tbl th {
    height: 2em;
-   padding: 4px 0 0 6px;
+   padding: 6px;
    font-size: 11px;
    border-bottom: #777 dotted 1px;
    vertical-align: middle;
 }
 
 #mem_tbl thead {
-
    font-weight: bold;
    color: #FFFFFF;
    background-color: black;
@@ -191,10 +190,13 @@ span.success {
 #mem_tbl tfoot {
    height: 20px;
    font-weight: bold;
-   background-color: #EAECEE;
    text-align: center;
 }
 
+#mem_tbl tfoot td {
+    border: none;
+}
+
 /* Using new CSS3 selectors for styling*/
 #members tr:nth-child(odd) {
    background: #f4f3f3;
@@ -204,18 +206,27 @@ span.success {
    background: #ffffff;
 }
 
+/* Hide column header rows if present */
+.columnNames {
+    display: none;
+}
+
 /*responsive design for tables*/
 @media only screen and (max-width: 40em) { /*640*/
 
+    #members tr {
+        background: #ffffff;
+        border-top: #777 dotted 1px;
+    }
+
     #mem_tbl {
         display: block;
         position: relative;
         width: 100%;
     }
 
     #mem_tbl thead {
-        display: block;
-        float: left;
+        display: none;
     }
 
     #mem_tbl tbody {
@@ -226,51 +237,41 @@ span.success {
         white-space: nowrap;
     }
 
-    #mem_tbl thead tr {
+    #mem_tbl tbody tr {
         display: block;
+        clear: none;
+        margin-bottom: 10px;
+        width: 100%;
     }
 
-    #mem_tbl th {
-        display: block;
+    #mem_tbl tbody tr.columnNames {
+        width: auto;
+        float: left;
+        font-weight: bold;
+        color: #fff;
+        text-align: left;
+        clear: both;
+        margin-right: 10px;
     }
 
-    #mem_tbl tbody tr {
-        display: inline-block;
-        vertical-align: top;
+    #mem_tbl tbody tr.columnNames td {
+        display: block;
+        height: 2em;
+        padding: 6px;
+        font-size: 11px;
+        border-bottom: #777 dotted 1px;
+        background-color: #000;
     }
 
     #mem_tbl td {
         display: block;
         min-height: 1.25em;
     }
 
-    /* sort out borders */
-
-    .rt th {
-        border-bottom: 0;
-    }
-
-    .rt td {
-        border-left: 0;
-        border-right: 0;
-        border-bottom: 0;
-    }
-
-    .rt tbody tr {
-        border-right:
-            1px solid #babcbf;
-    }
-
-    .rt th:last-child,
-    .rt td:last-child {
-        border-bottom:
-            1px solid #babcbf;
-    }
-
     #mem_tbl tfoot {
-        float:left;
-        clear:both;
-        margin: 15px 0 0 0;
+        position: absolute;
+        bottom: -15px;
+        left: 60px;
     }
 }
 

diff --git a/kitchensink-html5-mobile/src/main/webapp/index.html b/kitchensink-html5-mobile/src/main/webapp/index.html
@@ -134,9 +134,6 @@
                         $('span.invalid').remove();
                         $('span.success').remove();
                     });
-
-                    //scrolling support for devices that don't support overflow:auto
-                    touchScrollX('#members');
                 });
 
                 $.fn.serializeObject = function() {
@@ -267,7 +264,7 @@ <h2>Member Registration</h2>
             <!-- New HTML5 article tag -->
             <article id="member-art" data-role="page" data-theme="a">
                 <!-- Header -->
-                <div data-role="header" class="header">
+                <div data-role="header" class="header" data-position="fixed">
                     <img class="header_logo" src="img/icon_medium.png"/>
                     <h3>AeroGear Quickstart</h3>
                     <a href="#info-aside" data-role="button" data-icon="info" class="ui-btn-right" data-iconpos="notext" data-rel="dialog"></a>

diff --git a/kitchensink-html5-mobile/src/main/webapp/js/app.js b/kitchensink-html5-mobile/src/main/webapp/js/app.js
@@ -93,22 +93,3 @@ function registerMember(memberData) {
         }
     });
 }
-
-//small workaround for browsers which do not support overflow scrolling *cough* Android *cough*
-//this is for x axis and would need modification with scrollTop and pageY to support up/down scrolling
-function touchScrollX(id) {
-    if (Modernizr.touch) {
-        var el=document.querySelector(id);
-        var scrollStartPos=0;
-
-        el.addEventListener("touchstart", function(event) {
-            scrollStartPos=this.scrollLeft+event.touches[0].pageX;
-            event.preventDefault();
-        },false);
-
-        el.addEventListener("touchmove", function(event) {
-            this.scrollLeft=scrollStartPos-event.touches[0].pageX;
-            event.preventDefault();
-        },false);
-    }
-}
diff --git a/kitchensink-html5-mobile/src/main/webapp/tmpl/member.tmpl b/kitchensink-html5-mobile/src/main/webapp/tmpl/member.tmpl
@@ -1,5 +1,17 @@
 <script type="text/template" id="member-tmpl">
-<% _.each(members, function(member) { %>
+<% _.each(members, function(member) { 
+    if ( Modernizr.mq( "only all and (max-width: 640px)" ) ) {
+    %>
+    <tr class="columnNames">
+        <td>Id</td>
+        <td>Name</td>
+        <td>Email</td>
+        <td>Phone #</td>
+        <td>REST URL</td>
+    </tr>
+    <%
+    }
+    %>
 	<tr class="member">
 		<td><%=member.id%></td>
 		<td><%=member.name%></td>