diff --git a/platform/commonUI/general/res/css/forms.css b/platform/commonUI/general/res/css/forms.css index bed72af25f..a63582b84b 100644 --- a/platform/commonUI/general/res/css/forms.css +++ b/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 */ diff --git a/platform/commonUI/general/res/css/items.css b/platform/commonUI/general/res/css/items.css index 8c25e81c41..0786a7cef7 100644 --- a/platform/commonUI/general/res/css/items.css +++ b/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; - 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 */ + line-height: 40px; } + /* line 68, ../sass/mobile/_item.scss */ .items-holder .item.grid-item .title { - text-align: center; } - /* line 57, ../sass/mobile/_item.scss */ + margin-right: 10px; + 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; - text-align: left; } - /* line 77, ../sass/mobile/_item.scss */ - .items-holder .item.grid-item .item-main .item-open { - display: none; } - /* line 84, ../sass/mobile/_item.scss */ + line-height: 50px; } + /* line 93, ../sass/mobile/_item.scss */ .items-holder .item.grid-item .title { - text-align: center; } - /* line 88, ../sass/mobile/_item.scss */ + margin-right: 10px; + 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; } } diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css index 6e44bf8f39..78e042f07a 100644 --- a/platform/commonUI/general/res/css/theme-espresso.css +++ b/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 */ diff --git a/platform/commonUI/general/res/css/tree.css b/platform/commonUI/general/res/css/tree.css index 8b3b6125dd..fa97baaa9a 100644 --- a/platform/commonUI/general/res/css/tree.css +++ b/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 */ diff --git a/platform/commonUI/general/res/sass/mobile/_constants.scss b/platform/commonUI/general/res/sass/mobile/_constants.scss index ee90144c55..6ebfd519e1 100644 --- a/platform/commonUI/general/res/sass/mobile/_constants.scss +++ b/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; diff --git a/platform/commonUI/general/res/sass/mobile/_item.scss b/platform/commonUI/general/res/sass/mobile/_item.scss index c7bbc68d41..eb44048dc8 100644 --- a/platform/commonUI/general/res/sass/mobile/_item.scss +++ b/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; - height: $dHei; + + .bar { + &.bottom-bar.abs { + top: 0px; + height: auto; + } + } .item-main { .item-type { - // NOTE: [Mobile] Icon for the list/grid item inside folder - // display: none; - font-size: 30px; - line-height: $ueBrowseGridItemLg/5; + font-size: $mobile-listIcon; 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: $ueBrowseGridItemLg/3; + $dHei: $tablet-itemHeight; width: $dWid; height: $dHei; .item-main { .item-type { - // NOTE: [Mobile] Icon for the list/grid item inside folder - // display: none; - font-size: 30px; - line-height: $ueBrowseGridItemLg/4; - text-align: left; - - } - .item-open { - // NOTE: [Mobile] Icon for the open item inside folder - display: none; + font-size: $mobile-listIcon; + line-height: $tablet-itemHeight * .75; } } .title { - text-align: center; + margin-right: $mobile-listRight; + line-height: $tablet-itemHeight * .57; + } .details { - text-align: center; + margin-right: $mobile-listRight; + line-height: 0px; } }