TTMK/web2.0-backend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Infoscreen css fit and stretch and sample images

Browse Source
This commit is contained in:
Aarni
2016-08-29 20:24:42 +03:00
parent 61325b57c6
commit 5a7fcd5852
5 changed files with 41 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
infoscreen/static/css/infoscreen.css
+21
View File
@@ -0,0 +1,21 @@
#infocontent {
width: 100%;
height: 100%;
position: fixed;
left: 0px;
top: 0px;
z-index: -1; /* Ensure div tag stays behind content; -999 might work, too. */
}
.stretch {
width:100%;
height:100%;
}
.fit {
width: auto;
min-height: 100%;
display: block;
margin-left: auto;
margin-right: auto;
}
infoscreen/static/html/test1.html
+1 -1
View File
@@ -1 +1 @@
<h1>testi1 {{ testparam }}</h1>
<img ng-src="{{imagepath}}" class="fit"/>
infoscreen/static/img/teekkaribileet.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 96 KiB

infoscreen/static/js/infoscreen_controllers.js
+4 -2
View File
@@ -1,16 +1,18 @@
var app = angular.module('infoApp', []);
app.controller('infoscreen_main', function($scope, $http,$timeout){
var index = -1;
var templates = [
{
template: "/static/html/test1.html",
onload: function(){$scope.testparam = "foo";}
onload: function(){$scope.imagepath = "/static/img/siklogo.jpg";}
},{
template: "/static/html/test2.html"
},{
template: "/static/html/test1.html",
onload: function(){$scope.testparam = "bar";}
onload: function(){$scope.imagepath = "/static/img/teekkaribileet.jpg";}
},{
template: "/static/html/test3.html"
},
infoscreen/templates/infoscreen_index.html
+15 -2
View File
@@ -11,11 +11,24 @@
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"></link>
<script src="/static/js/infoscreen_controllers.js"></script>
<link rel="stylesheet" href="/static/css/infoscreen.css">
<script src="/static/js/infoscreen_controllers.js"></script>
</head>
<body>
<div class="jumbotron" ng-controller="infoscreen_main">
<div ng-controller="infoscreen_main" >
<div id="infocontent" ng-include="active.template" onload="active.onload()"></div>
</div>
<script type="text/javascript">
var elem = document.getElementById("infocontent");
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.webkitRequestFullscreen) {
elem.webkitRequestFullscreen();
} else if (elem.mozRequestFullScreen) {
elem.mozRequestFullScreen();
} else if (elem.msRequestFullscreen) {
elem.msRequestFullscreen();
}
</script>
</body>
</html>