Added mobile example app
This commit is contained in:
Willem
parent
4fbf705ae5
commit
cf364fc418
26 changed files with 187 additions and 61 deletions
119
example/app_server/www_static/css/boot.css
Normal file
119
example/app_server/www_static/css/boot.css
Normal file
|
|
@ -0,0 +1,119 @@
|
|||
|
||||
body {
|
||||
margin-top: 50px;
|
||||
background-color: #222;
|
||||
}
|
||||
|
||||
#wrapper {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
#page-wrapper {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.huge {
|
||||
font-size: 50px;
|
||||
}
|
||||
|
||||
.top-nav {
|
||||
padding: 0 15px;
|
||||
}
|
||||
|
||||
.top-nav>li {
|
||||
display: inline-block;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.top-nav>li>a {
|
||||
padding-top: 15px;
|
||||
padding-bottom: 15px;
|
||||
line-height: 20px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.top-nav>li>a:hover, .top-nav>li>a:focus, .top-nav>.open>a, .top-nav>.open>a:hover,
|
||||
.top-nav>.open>a:focus {
|
||||
color: #fff;
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
.top-nav>.open>.dropdown-menu {
|
||||
float: left;
|
||||
position: absolute;
|
||||
margin-top: 0;
|
||||
border: 1px solid rgba(0, 0, 0, .15);
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
background-color: #fff;
|
||||
-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
|
||||
box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
|
||||
}
|
||||
|
||||
.top-nav>.open>.dropdown-menu>li>a {
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
ul.message-dropdown {
|
||||
padding: 0;
|
||||
max-height: 250px;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
li.message-preview {
|
||||
width: 275px;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, .15);
|
||||
}
|
||||
|
||||
li.message-preview>a {
|
||||
padding-top: 15px;
|
||||
padding-bottom: 15px;
|
||||
}
|
||||
|
||||
li.message-footer {
|
||||
margin: 5px 0;
|
||||
}
|
||||
|
||||
ul.alert-dropdown {
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
/* Side Navigation */
|
||||
@media ( min-width :768px) {
|
||||
.side-nav {
|
||||
position: fixed;
|
||||
top: 51px;
|
||||
left: 225px;
|
||||
width: 225px;
|
||||
margin-left: -225px;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
overflow-y: auto;
|
||||
background-color: #222;
|
||||
}
|
||||
.side-nav>li>a {
|
||||
width: 225px;
|
||||
}
|
||||
.side-nav li a:hover, .side-nav li a:focus {
|
||||
outline: none;
|
||||
background-color: #000 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.side-nav>li>ul {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.side-nav>li>ul>li>a {
|
||||
display: block;
|
||||
padding: 10px 15px 10px 38px;
|
||||
text-decoration: none;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.side-nav>li>ul>li>a:hover {
|
||||
color: #fff;
|
||||
}
|
||||
59
example/app_server/www_static/css/style.css
Normal file
59
example/app_server/www_static/css/style.css
Normal file
|
|
@ -0,0 +1,59 @@
|
|||
|
||||
#wrapper {
|
||||
padding-right: 0px;
|
||||
padding-left: 0px;
|
||||
}
|
||||
|
||||
.side-nav {
|
||||
right: 0px;
|
||||
left: 0px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.navbar-footer {
|
||||
margin-left: 45%;
|
||||
}
|
||||
|
||||
.navbar-toggle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
background-color: #C110D8;
|
||||
}
|
||||
|
||||
.navbar-inverse .navbar-brand {
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.navbar-inverse .navbar-brand:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.navbar-inverse .navbar-brand:hover {
|
||||
background-color: #0F9A28;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.navbar-inverse {
|
||||
background-color: #C110D8;
|
||||
}
|
||||
|
||||
@media only screen and (-webkit-min-device-pixel-ratio: 1.3),
|
||||
only screen and (-o-min-device-pixel-ratio: 13/10),
|
||||
only screen and (min-resolution: 120dpi) {
|
||||
|
||||
body {
|
||||
font-size:1.8em !important;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1440px) {
|
||||
body {
|
||||
font-size:2em !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
10
example/app_server/www_static/js/controller/page-bar.js
Normal file
10
example/app_server/www_static/js/controller/page-bar.js
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
|
||||
pageRouteInit.push(function ($routeProvider, $locationProvider) {
|
||||
$routeProvider.when('/example-ui/bar', {
|
||||
templateUrl: window.serverUrl+'/example-ui/thtml/bar',
|
||||
controller: PageFoo
|
||||
});
|
||||
});
|
||||
|
||||
function PageFoo($scope, $http) {
|
||||
}
|
||||
42
example/app_server/www_static/js/controller/page-foo.js
Normal file
42
example/app_server/www_static/js/controller/page-foo.js
Normal file
|
|
@ -0,0 +1,42 @@
|
|||
|
||||
var tpl = '<div><h2>Foo</h2><p>Welcome to the foo.</p></div>';
|
||||
tpl += '<input type=\"button\" class=\"btn btn-default\" ng-click=\"doReload()\" value=\"Reload\"></input>';
|
||||
tpl += '<input type=\"button\" class=\"btn btn-default\" ng-click=\"doClearServerUrl()\" value=\"Clear Server Url\"></input>';
|
||||
tpl += '<input type=\"button\" class=\"btn btn-default\" ng-click=\"doClearCache()\" value=\"Clear Cache\"></input>';
|
||||
tpl += '<p>{{message}}</p>';
|
||||
|
||||
pageRouteInit.push(function ($routeProvider, $locationProvider) {
|
||||
$routeProvider.when('/example-ui/foo', {
|
||||
template: tpl,
|
||||
controller: PageFoo
|
||||
});
|
||||
});
|
||||
|
||||
function PageFoo($scope) {
|
||||
$scope.message = '';
|
||||
$scope.doReload = function () {
|
||||
window.location.reload(true);
|
||||
};
|
||||
|
||||
$scope.doClearServerUrl = function () {
|
||||
FFSpaLoader.clearServerUrl(function(err) {
|
||||
if (err) {
|
||||
$scope.message = 'Error: '+err;
|
||||
} else {
|
||||
$scope.message = 'Cleared server url';
|
||||
}
|
||||
$scope.$apply();
|
||||
});
|
||||
};
|
||||
|
||||
$scope.doClearCache = function () {
|
||||
FFSpaLoader.clearCache(function(err) {
|
||||
if (err) {
|
||||
$scope.message = 'Error: '+err;
|
||||
} else {
|
||||
$scope.message = 'Cleared cache';
|
||||
}
|
||||
$scope.$apply();
|
||||
});
|
||||
};
|
||||
}
|
||||
10
example/app_server/www_static/js/controller/page-index.js
Normal file
10
example/app_server/www_static/js/controller/page-index.js
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
|
||||
pageRouteInit.push(function ($routeProvider, $locationProvider) {
|
||||
$routeProvider.when('/example-ui', {
|
||||
template: '<div><h2>Example UI Index</h2><p>Welcome make yourself at home.</p></div>',
|
||||
controller: PageIndex
|
||||
});
|
||||
});
|
||||
|
||||
function PageIndex($scope, $http) {
|
||||
}
|
||||
27
example/app_server/www_static/js/example-app.js
Normal file
27
example/app_server/www_static/js/example-app.js
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
'use strict';
|
||||
document.title = 'FFSpaLoader Example';
|
||||
|
||||
var serverUrl = window.FFServerUrl;
|
||||
console.log('FFExample provided serverUrl \"'+serverUrl+'\"');
|
||||
|
||||
$(document.createElement('div')).attr('id', 'wrapper').appendTo($('body'));
|
||||
$(document.createElement('div')).attr('ng-controller', 'ApplicationController').attr('ng-include', '\''+serverUrl+'/example-ui/thtml/header\'').appendTo($('#wrapper'));
|
||||
$(document.createElement('div')).attr('id', 'page-wrapper').appendTo($('#wrapper'));
|
||||
$(document.createElement('div')).attr('id', 'container-fluid').attr('ng-view', '').appendTo($('#page-wrapper'));
|
||||
$(document.createElement('div')).attr('ng-include', '\''+serverUrl+'/example-ui/thtml/footer\'').appendTo($('body'));
|
||||
|
||||
var pageRouteInit = [];
|
||||
var exampleUI = angular.module('exampleUI', ['ngRoute']).config(
|
||||
['$routeProvider','$locationProvider','$sceDelegateProvider', function
|
||||
($routeProvider , $locationProvider , $sceDelegateProvider) {
|
||||
pageRouteInit.forEach(function(init) { init($routeProvider, $locationProvider); });
|
||||
$sceDelegateProvider.resourceUrlWhitelist(['self',serverUrl+'/**']);
|
||||
$routeProvider.otherwise({ redirectTo: '/example-ui' });
|
||||
$locationProvider.html5Mode({requireBase: false});
|
||||
}]);
|
||||
|
||||
exampleUI.controller('ApplicationController',function($scope,$http,$location) {
|
||||
$scope.goLink = function ( path ) {
|
||||
$location.path( path );
|
||||
};
|
||||
});
|
||||
Loading…
Add table
Add a link
Reference in a new issue