From f51e4ea2caeccbe3a6d9ccbf442249cc3804d3d5 Mon Sep 17 00:00:00 2001
From: David Findlay <davidjwfindlay@gmail.com>
Date: Fri, 16 Sep 2016 17:05:08 +1000
Subject: [PATCH] Menu improvements
---
.../mastersswimmingqld/ppmg/models/Meet.java | 1 +
app/views/Index.scala.html | 41 +++++++---
public/css/app.css | 80 ++++++++++++-------
public/js/controllers.js | 13 +--
public/js/main.js | 5 +-
5 files changed, 92 insertions(+), 48 deletions(-)
diff --git a/app/au/org/mastersswimmingqld/ppmg/models/Meet.java b/app/au/org/mastersswimmingqld/ppmg/models/Meet.java
index db3c20c..2be5eb6 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 b338ef0..931a7e0 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 b8bceaf..2560468 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 f1ecd5e..6f1f97d 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 98782ce..c38b4f0 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});
--
GitLab