[Mobile] Items List

Flushes items left and
vertically centers the
title/details. Also cleaned
up the items classes in sass
files.

platform/commonUI/general/res/css/forms.css

@@ -69,6 +69,7 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
+/************************** MOBILE REPRESENTATION ITEMS DIMENSIONS */
 /************************** MOBILE TREE MENU DIMENSIONS */
 /************************** WINDOW DIMENSIONS FOR RWD */
 /************************** MEDIA QUERIES: WINDOW CHECKS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */

platform/commonUI/general/res/css/items.css

@@ -69,6 +69,7 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
+/************************** MOBILE REPRESENTATION ITEMS DIMENSIONS */
 /************************** MOBILE TREE MENU DIMENSIONS */
 /************************** WINDOW DIMENSIONS FOR RWD */
 /************************** MEDIA QUERIES: WINDOW CHECKS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
@@ -351,46 +352,56 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
+@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
+  /* line 36, ../sass/mobile/_item.scss */
+  .items-holder .item.grid-item .bar.bottom-bar.abs {
+    top: 0px;
+    height: auto; }
+  /* line 43, ../sass/mobile/_item.scss */
+  .items-holder .item.grid-item .item-main .item-type {
+    font-size: 30px;
+    text-align: left; }
+  /* line 48, ../sass/mobile/_item.scss */
+  .items-holder .item.grid-item .item-main .item-open {
+    display: none; }
+  /* line 53, ../sass/mobile/_item.scss */
+  .items-holder .item.grid-item .title, .items-holder .item.grid-item .details {
+    margin-left: 30px; } }
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 28, ../sass/mobile/_item.scss */
+  /* line 29, ../sass/mobile/_item.scss */
   .items-holder .item.grid-item {
     width: 100%;
     height: 50px; }
-    /* line 38, ../sass/mobile/_item.scss */
+    /* line 63, ../sass/mobile/_item.scss */
     .items-holder .item.grid-item .item-main .item-type {
-      font-size: 30px;
+      line-height: 40px; }
-      line-height: 40px;
+    /* line 68, ../sass/mobile/_item.scss */
-      text-align: left; }
-    /* line 46, ../sass/mobile/_item.scss */
-    .items-holder .item.grid-item .item-main .item-open {
-      display: none; }
-    /* line 53, ../sass/mobile/_item.scss */
     .items-holder .item.grid-item .title {
-      text-align: center; }
+      margin-right: 10px;
-    /* line 57, ../sass/mobile/_item.scss */
+      line-height: 25px; }
+    /* line 74, ../sass/mobile/_item.scss */
     .items-holder .item.grid-item .details {
-      text-align: center; } }
+      margin-right: 10px;
+      line-height: 0px; } }
 @media screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 28, ../sass/mobile/_item.scss */
+  /* line 29, ../sass/mobile/_item.scss */
   .items-holder .item.grid-item {
     width: 100%;
     height: 66.66667px; }
-    /* line 69, ../sass/mobile/_item.scss */
+    /* line 86, ../sass/mobile/_item.scss */
     .items-holder .item.grid-item .item-main .item-type {
       font-size: 30px;
-      line-height: 50px;
+      line-height: 50px; }
-      text-align: left; }
+    /* line 93, ../sass/mobile/_item.scss */
-    /* line 77, ../sass/mobile/_item.scss */
-    .items-holder .item.grid-item .item-main .item-open {
-      display: none; }
-    /* line 84, ../sass/mobile/_item.scss */
     .items-holder .item.grid-item .title {
-      text-align: center; }
+      margin-right: 10px;
-    /* line 88, ../sass/mobile/_item.scss */
+      line-height: 38px; }
+    /* line 99, ../sass/mobile/_item.scss */
     .items-holder .item.grid-item .details {
-      text-align: center; } }
+      margin-right: 10px;
+      line-height: 0px; } }
 @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-  /* line 28, ../sass/mobile/_item.scss */
+  /* line 29, ../sass/mobile/_item.scss */
   .items-holder .item.grid-item {
     width: 200px;
     height: 200px; } }

platform/commonUI/general/res/css/theme-espresso.css

@@ -70,6 +70,7 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
+/************************** MOBILE REPRESENTATION ITEMS DIMENSIONS */
 /************************** MOBILE TREE MENU DIMENSIONS */
 /************************** WINDOW DIMENSIONS FOR RWD */
 /************************** MEDIA QUERIES: WINDOW CHECKS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */

platform/commonUI/general/res/css/tree.css

@@ -69,6 +69,7 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
+/************************** MOBILE REPRESENTATION ITEMS DIMENSIONS */
 /************************** MOBILE TREE MENU DIMENSIONS */
 /************************** WINDOW DIMENSIONS FOR RWD */
 /************************** MEDIA QUERIES: WINDOW CHECKS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */

platform/commonUI/general/res/sass/mobile/_constants.scss

@@ -20,6 +20,13 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
+/************************** MOBILE REPRESENTATION ITEMS DIMENSIONS */
+$mobile-listIcon: 30px;
+$mobile-listRight: 10px;
+
+$phone-itemHeight: $ueBrowseGridItemLg/4;
+$tablet-itemHeight: $ueBrowseGridItemLg/3;
+
 /************************** MOBILE TREE MENU DIMENSIONS */
 $mobile-treeHeight: 38px;
 $mobile-treeLeft: 3px;

platform/commonUI/general/res/sass/mobile/_item.scss

@@ -23,70 +23,82 @@
 // Sets the size of the items in the folder
 // representation. Instead of a grid,
 // a list is used.
+
 .items-holder {
     .item {
         &.grid-item {
             $dWid: $ueBrowseGridItemLg;
             $dHei: $ueBrowseGridItemLg;
-            @include phone {
+            @include phoneandtablet {
                 $dWid: 100%;
-                $dHei: $ueBrowseGridItemLg/4;
+                
-                width: $dWid;
+                .bar {
-                height: $dHei;
+                    &.bottom-bar.abs {
+                        top: 0px;
+                        height: auto;
+                    }
+                }                                
                 
                 .item-main {
                     .item-type {
-    //                     NOTE: [Mobile] Icon for the list/grid item inside folder
+                        font-size: $mobile-listIcon;
-    //                    display: none;
-                        font-size: 30px;
-                        line-height: $ueBrowseGridItemLg/5;
                         text-align: left;
 
                     }
                     .item-open {
-    //                     NOTE: [Mobile] Icon for the open item inside folder
                        display: none;
+                    }
+                }
 
+                .title, .details {
+                    margin-left: $mobile-listIcon;
+                }             
+            }
+
+            @include phone {
+                $dHei: $phone-itemHeight;
+                width: $dWid;
+                height: $dHei;
+                .item-main {
+                    .item-type {
+                        line-height: $phone-itemHeight * .8;
                     }
                 }
 
                 .title {
-                    text-align: center;
+                    margin-right: $mobile-listRight;
+                    line-height: $phone-itemHeight * .5;
+    
                 }
 
                 .details {
-                    text-align: center;
+                    margin-right: $mobile-listRight;
+                    line-height: 0px;
                 }                
             }
             
             @include tablet {
-                $dWid: 100%;
+                $dHei: $tablet-itemHeight;
-                $dHei: $ueBrowseGridItemLg/3;
                 width: $dWid;
                 height: $dHei;
                 
                 .item-main {
                     .item-type {
-    //                     NOTE: [Mobile] Icon for the list/grid item inside folder
+                        font-size: $mobile-listIcon;
-    //                    display: none;
+                        line-height: $tablet-itemHeight * .75;
-                        font-size: 30px;
-                        line-height: $ueBrowseGridItemLg/4;
-                        text-align: left;
-
-                    }
-                    .item-open {
-    //                     NOTE: [Mobile] Icon for the open item inside folder
-                        display: none;
 
                     }
                 }
 
                 .title {
-                    text-align: center;
+                    margin-right: $mobile-listRight;
+                    line-height: $tablet-itemHeight * .57;
+    
                 }
 
                 .details {
-                    text-align: center;
+                    margin-right: $mobile-listRight;
+                    line-height: 0px;
                 }
             }