Skip to content
GitLab
Commit f51e4ea2 authored by David Findlay's avatar David Findlay
Browse files

Menu improvements

parent 1bb87d28
Hide whitespace changes
Inline Side-by-side
app/au/org/mastersswimmingqld/ppmg/models/Meet.java
View file @ f51e4ea2
......@@ -7,6 +7,7 @@ import java.util.List;
* Handles details of meets
*
*/
public class Meet {
private long id;
......
app/views/Index.scala.html
View file @ f51e4ea2
......@@ -10,29 +10,50 @@
<link rel="stylesheet" href="@routes.Assets.versioned("css/app.css")">
<script data-main="@routes.Assets.versioned("js/main.js")" src="@routes.Assets.versioned("lib/requirejs/require.js")"></script>
</head>
<body>
<body ng-controller="menuCtrl">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle pull-left" ng-click="isShowMenu">
<span class="sr-only">Toggle navigation</span>
<a class="btn btn-navbar navbar-toggle pull-left" ng-click="menuClosed = !menuClosed">
<span class="sr-only">Menu</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</a>
<a class="navbar-brand" href="#">eProgram2</a>
</div>
</div>
</nav>
<div id="wrapper" class="row row-offcanvas row-offcanvas-left" ng-controller="menuCtrl" uib-collapse="showMenu" horizontal>
<div id="wrapper">
<div id="sidebar-wrapper" class="col-xs-6 col-sm-3 sidebar-offcanvas" ng-show="menuOpen" role="navigation">
<div id="sidebar-wrapper" class="col-xs-10 col-sm-3 col-md-3 col-lg-3" ng-hide="menuClosed"
role="navigation">
<ul class="nav nav-pills nav-stacked">
<li><a href="#/view1">view1</a></li>
<li><a href="#/view2">view2</a></li>
</ul>
<form>
<select class="form-control" id="meet">
<option value="">Select a meet</option>
</select>
<ul class="nav nav-pills nav-stacked">
<li><a href="#/view1">Newsflashes</a></li>
<li><a href="#/view2">Marshalling</a></li>
</ul>
<select class="form-control" id="event">
<option value="">Select an event</option>
</select>
<select class="form-control" id="heat">
<option value="">Select a heat</option>
</select>
<select class="form-control" id="agegroup">
<option value="">Select an age group</option>
</select>
</form>
</div>
......
public/css/app.css
View file @ f51e4ea2
......@@ -28,36 +28,56 @@ body { padding-top: 50px; }
margin-bottom: 0;
}
/* Mobile narrow view */
@media screen and (max-width: 767px) {
.row-offcanvas {
position: relative;
-webkit-transition: all 0.25s ease-out;
-moz-transition: all 0.25s ease-out;
transition: all 0.25s ease-out;
}
.row-offcanvas-right
.sidebar-offcanvas {
right: -41.6%;
}
.form-control {
margin-top: 1em;
margin-bottom: 1em;
}
.row-offcanvas-left
.sidebar-offcanvas {
left: -41.6%;
}
.row-offcanvas-right.active {
right: 41.6%;
}
.row-offcanvas-left.active {
left: 41.6%;
}
.sidebar-offcanvas {
position: absolute;
top: 0;
width: 41.6%;
}
#sidebar-wrapper {
padding-top:0;
/* Force side menu open on screens other than mobile */
@media screen and (min-width: 768px) {
#sidebar-wrapper.collapse{
display: block !important;
}
}
/* Animation for menu */
.ng-hide-add {
transition: 0.5s linear all;
}
.ng-hide-remove {
transition: 0.5s linear all;
}
/*!* Mobile narrow view *!*/
/*@media screen and (max-width: 767px) {*/
/*.row-offcanvas {*/
/*position: relative;*/
/*-webkit-transition: all 0.25s ease-out;*/
/*-moz-transition: all 0.25s ease-out;*/
/*transition: all 0.25s ease-out;*/
/*}*/
/*.row-offcanvas-right*/
/*.sidebar-offcanvas {*/
/*right: -41.6%;*/
/*}*/
/*.row-offcanvas-left*/
/*.sidebar-offcanvas {*/
/*left: -41.6%;*/
/*}*/
/*.row-offcanvas-right.active {*/
/*right: 41.6%;*/
/*}*/
/*.row-offcanvas-left.active {*/
/*left: 41.6%;*/
/*}*/
/*.sidebar-offcanvas {*/
/*position: absolute;*/
/*top: 0;*/
/*width: 41.6%;*/
/*}*/
/*#sidebar-wrapper {*/
/*padding-top:0;*/
/*}*/
}
\ No newline at end of file
/*}*/
\ No newline at end of file
public/js/controllers.js
View file @ f51e4ea2
......@@ -9,21 +9,22 @@ define(function() {
var controllers = {};
controllers.menuCtrl = function($scope, $window) {
$scope.menuOpen = false;
console.log("MenuCtrl");
// Detect if mobile portrait screen size
$scope.is_mobile = ($window.innerWidth <= 480);
if ($scope.isMobile) {
$scope.menuOpen = false;
console.log ($window.innerWidth + " therefore " + $scope.is_mobile);
if ($scope.is_mobile) {
$scope.menuClosed = true;
console.log("mobile detected - close menu")
} else {
$scope.menuOpen = true;
$scope.menuClosed = false;
console.log("not mobile - open menu")
}
//console.log("menu = " + showMenu);
}
controllers.menuCtrl.$inject = ['$scope', '$window'];
......
public/js/main.js
View file @ f51e4ea2
......@@ -6,6 +6,7 @@ requirejs.config({
paths: {
'angular': ['../lib/angularjs/angular'],
'angular-route': ['../lib/angularjs/angular-route'],
'angular-animate': ['../lib/angular-animate/angular-animate'],
'ui-bootstrap':['../lib/angular-ui-bootstrap/ui-bootstrap']
},
shim: {
......@@ -23,12 +24,12 @@ requirejs.config({
}
});
require(['angular', './controllers', './directives', './filters', './services', 'angular-route', "ui-bootstrap"],
require(['angular', './controllers', './directives', './filters', './services', 'angular-route', "ui-bootstrap", 'angular-animate'],
function(angular, controllers) {
// Declare app level module which depends on filters, and services
//
var eprogram2 = angular.module('eprogram2', ['ui.bootstrap', 'eprogram2.filters', 'eprogram2.services', 'eprogram2.directives', 'ngRoute']).
var eprogram2 = angular.module('eprogram2', ['ui.bootstrap', 'eprogram2.filters', 'eprogram2.services', 'eprogram2.directives', 'ngRoute', 'ngAnimate']).
config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/view1', {templateUrl: 'partials/partial1.html', controller: controllers.MyCtrl1});
$routeProvider.when('/view2', {templateUrl: 'partials/partial2.html', controller: controllers.MyCtrl2});
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment