Skip to content
GitLab
Projects
Groups
Snippets
/
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
Menu
Open sidebar
David Findlay
cosc360-ppmg
Commits
f51e4ea2
Commit
f51e4ea2
authored
Sep 16, 2016
by
David Findlay
Browse files
Menu improvements
parent
1bb87d28
Changes
5
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
.
menu
Open
=
tru
e
;
$scope
.
menu
Closed
=
fals
e
;
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
});
...
...
Write
Preview
Supports
Markdown
0%
Try again
or
attach a new file
.
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment