diff --git a/app/au/org/mastersswimmingqld/ppmg/models/Meet.java b/app/au/org/mastersswimmingqld/ppmg/models/Meet.java index db3c20c5ed75b8bcfcd17819e6c586d5e7799dc5..2be5eb6e71599e8f28a4267d356c1699ad81c6bf 100644 --- a/app/au/org/mastersswimmingqld/ppmg/models/Meet.java +++ b/app/au/org/mastersswimmingqld/ppmg/models/Meet.java @@ -7,6 +7,7 @@ import java.util.List; * Handles details of meets * */ + public class Meet { private long id; diff --git a/app/views/Index.scala.html b/app/views/Index.scala.html index b338ef0c1cdf764f0f3eb3e1f770beb58f745847..931a7e07d31853cd2a06b9d5dc0ddb22fac9e096 100644 --- a/app/views/Index.scala.html +++ b/app/views/Index.scala.html @@ -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> diff --git a/public/css/app.css b/public/css/app.css index b8bceaf5f82e29d20b6ec62135531f3d085b06b0..256046835fbe8700f06cdb75f2674d55a199b3b3 100644 --- a/public/css/app.css +++ b/public/css/app.css @@ -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 diff --git a/public/js/controllers.js b/public/js/controllers.js index f1ecd5e5e464213b322bc3834c7bdf2f1beb2578..6f1f97d3cc02f2cb23bda1a2945b6e877b6e4508 100644 --- a/public/js/controllers.js +++ b/public/js/controllers.js @@ -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']; diff --git a/public/js/main.js b/public/js/main.js index 98782ce6ac1e823ade40e9c5c5a7ec6ad9672480..c38b4f06e27b15c55be1e62758b0379d23c42a4e 100644 --- a/public/js/main.js +++ b/public/js/main.js @@ -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});