diff --git a/platform/commonUI/general/res/css/items.css b/platform/commonUI/general/res/css/items.css index be1da9dd3d..8c25e81c41 100644 --- a/platform/commonUI/general/res/css/items.css +++ b/platform/commonUI/general/res/css/items.css @@ -355,18 +355,42 @@ /* line 28, ../sass/mobile/_item.scss */ .items-holder .item.grid-item { width: 100%; - height: 50px; } } + height: 50px; } + /* line 38, ../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 */ + .items-holder .item.grid-item .title { + text-align: center; } + /* line 57, ../sass/mobile/_item.scss */ + .items-holder .item.grid-item .details { + text-align: center; } } @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 */ .items-holder .item.grid-item { width: 100%; - height: 100px; } } + height: 66.66667px; } + /* line 69, ../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 */ + .items-holder .item.grid-item .title { + text-align: center; } + /* line 88, ../sass/mobile/_item.scss */ + .items-holder .item.grid-item .details { + text-align: center; } } @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 */ .items-holder .item.grid-item { width: 200px; height: 200px; } } -@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 52, ../sass/mobile/_item.scss */ - .items-holder .item.grid-item .icon { - display: none; } } diff --git a/platform/commonUI/general/res/sass/mobile/_item.scss b/platform/commonUI/general/res/sass/mobile/_item.scss index 9542645136..c7bbc68d41 100644 --- a/platform/commonUI/general/res/sass/mobile/_item.scss +++ b/platform/commonUI/general/res/sass/mobile/_item.scss @@ -33,13 +33,61 @@ $dHei: $ueBrowseGridItemLg/4; 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/5; + text-align: left; + + } + .item-open { + // NOTE: [Mobile] Icon for the open item inside folder + display: none; + + } + } + + .title { + text-align: center; + } + + .details { + text-align: center; + } } @include tablet { $dWid: 100%; - $dHei: $ueBrowseGridItemLg/2; + $dHei: $ueBrowseGridItemLg/3; 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; + + } + } + + .title { + text-align: center; + } + + .details { + text-align: center; + } } @include desktop { @@ -48,12 +96,6 @@ width: $dWid; height: $dHei; } - - .icon { - @include phoneandtablet { - display: none; - } - } } } } diff --git a/platform/representation/bundle.json b/platform/representation/bundle.json index c9872367aa..64fc1b0f27 100644 --- a/platform/representation/bundle.json +++ b/platform/representation/bundle.json @@ -26,7 +26,7 @@ { "key": "menu", "implementation": "gestures/ContextMenuGesture.js", - "depends": [ "$compile", "$document", "$window", "$rootScope" ] + "depends": [ "$compile", "$document", "$window", "$rootScope", "queryService" ] } ], "components": [ diff --git a/platform/representation/src/gestures/ContextMenuGesture.js b/platform/representation/src/gestures/ContextMenuGesture.js index 83ea1ddc23..298d34face 100644 --- a/platform/representation/src/gestures/ContextMenuGesture.js +++ b/platform/representation/src/gestures/ContextMenuGesture.js @@ -50,7 +50,7 @@ define( * @param {DomainObject} domainObject the object on which actions * in the context menu will be performed */ - function ContextMenuGesture($compile, $document, $window, $rootScope, element, domainObject) { + function ContextMenuGesture($compile, $document, $window, $rootScope, queryService, element, domainObject) { function showMenu(event) { var winDim = [$window.innerWidth, $window.innerHeight], eventCoors = [event.pageX, event.pageY], @@ -102,8 +102,11 @@ define( event.preventDefault(); } - // When context menu event occurs, show object actions instead - element.on('contextmenu', showMenu); + // Iff the user is not on a mobile device, then when + // the context menu event occurs, show object actions instead + if (!queryService.isMobile(navigator.userAgent)) { + element.on('contextmenu', showMenu); + } return { /**