Added mobile example app

example/app_server/www_static/css/boot.css

@@ -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;
+}

example/app_server/www_static/css/style.css

@@ -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;
+    		}
+		}
+}
+