Responsive background

Hi @micah ,

I have no experience hwo to manage it by the css , style defintion. May be here someone could help.

But I think there is another way to do this :

- you can define for the different orientation differet classes e.g.  horizontalRow2 and verticalRow24

-and use an javaScript event to set the class property of a widget depending on the orientiaotn

You can check the post: "Getting Orientation of Mobile Device via Javascript"

some code like this:

angular.element(document).ready(function() {
 angular.element(window).on('resize', function(evt) {
 console.log("resized window evnt : at Time ::"+$scope.getTime());
 console.warn(evt);
 var message = ''
 var win = evt.path[0];
 if(win.innerWidth > win.innerHeight){
 // LANDSCAPE -> do something here call your landscapeFunc()
 message = "current orientation is Landscape!"
 $scope.app.params['myClass']='row2'
 $scope.$applyAsync();
 }
 else {
 // LANDSCAPE -> do something here your PortraitFunc()
 message = "current orientation is Portrait!" 
 $scope.app.params['myClass']='row3'
 $scope.$applyAsync();
 }
 twx.app.fn.addSnackbarMessage(message,"twLogo");
 
 });
})

using some css style defintion like this:

.row2 {
height: 80%;
background-color:#2e2d2c;
background-image: url(#{$resources}/Default/vu_flag.svg) !important;
background-repeat: no-repeat;
background-size: cover;

}
.row3 {
height: 50%;
background-color:#2e2222;
background-image: url(#{$resources}/Default/vu_flame.svg) !important;
background-repeat: no-repeat;
background-size: cover;

}

The code will set dynamically an application parameter e.g. "myClass" which has a binding to the class property of a button.(this css definition has here no real sense but should only demonstrate the functionality)