-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
116 lines (103 loc) · 5.78 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
<!DOCTYPE html>
<!--
Copyright (c) 2014, 2017, Oracle and/or its affiliates.
The Universal Permissive License (UPL), Version 1.0
-->
<!-- ************************ IMPORTANT INFORMATION ************************************
This web navigation bar template is provided as an example of how to configure
a JET web application with a navigation bar as a single page application
using ojRouter and ojModule. It contains the Oracle JET framework and a default
requireJS configuration file to show how JET can be setup in a common application.
This project template can be used in conjunction with demo code from the JET
website to test JET component behavior and interactions.
Any CSS styling with the prefix "demo-" is for demonstration only and is not
provided as part of the JET framework.
Please see the demos under Cookbook/Patterns/App Shell: Web and the CSS documentation
under Support/API Docs/Non-Component Styling on the JET website for more information on how to use
the best practice patterns shown in this template.
Aria Landmark role attributes are added to the different sections of the application
for accessibility compliance. If you change the type of content for a specific
section from what is defined, you should also change the role value for that
section to represent the appropriate content type.
***************************** IMPORTANT INFORMATION ************************************ -->
<html lang="en-us">
<head>
<title>Oracle JET Starter Template - Web Nav Bar</title>
<meta charset="UTF-8">
<meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1">
<link rel="icon" href="css/images/favicon.ico" type="image/x-icon" />
<!-- This is the main css file for the default Alta theme -->
<!-- injector:theme -->
<link rel="stylesheet" href="css/libs/oj/v4.1.0/alta/oj-alta-min.css" type="text/css"/>
<!-- endinjector -->
<!-- This contains icon fonts used by the starter template -->
<link rel="stylesheet" href="css/demo-alta-site-min.css" type="text/css"/>
<!-- This is where you would add any app specific styling -->
<link rel="stylesheet" href="css/app.css" type="text/css"/>
</head>
<body class="oj-web-applayout-body">
<!-- Template for rendering navigation items -->
<script type="text/html" id="navTemplate">
<li><a href="#">
<span data-bind="css: $data['iconClass']"></span>
<!-- ko text: $data['name'] --> <!--/ko-->
</a></li>
</script>
<div id="globalBody" class="oj-web-applayout-page">
<!--
** Oracle JET V4.1.0 web application navigation bar and header patterns.
** Please see the demos under Cookbook/Patterns/App Shell: Web
** and the CSS documentation under Support/API Docs/Non-Component Styling
** on the JET website for more information on how to use this pattern.
-->
<header role="banner" class="oj-web-applayout-header">
<div class="oj-web-applayout-max-width oj-flex-bar oj-sm-align-items-center">
<div class="oj-flex-bar-middle oj-sm-align-items-baseline">
<span role="img" class="oj-icon demo-oracle-icon" title="Oracle Logo" alt="Oracle Logo"></span>
<h1 class="oj-sm-only-hide oj-web-applayout-header-title" title="Application Name" data-bind="text: appName"></h1>
</div>
<div class="oj-flex-bar-end">
<!-- Responsive Toolbar -->
<oj-toolbar>
<oj-menu-button id="userMenu" display="[[smScreen() ? 'icons' : 'all']]" chroming="half">
<span data-bind="text: userLogin"></span>
<span slot="endIcon" data-bind="css: smScreen() ? 'oj-icon demo-appheader-avatar' : 'oj-component-icon oj-button-menu-dropdown-icon'"></span>
<oj-menu id="menu1" slot="menu" style="display:none">
<oj-option id="pref" value="pref">Preferences</oj-option>
<oj-option id="help" value="help">Help</oj-option>
<oj-option id="about" value="about">About</oj-option>
<oj-option id="out" value="out">Sign Out</oj-option>
</oj-menu>
</oj-menu-button>
</oj-toolbar>
</div>
</div>
<div role="navigation" class="oj-web-applayout-max-width oj-web-applayout-navbar">
<oj-navigation-list data="[[navDataSource]]"
data-bind="css: smScreen() ? '' : 'oj-md-condense oj-md-justify-content-flex-end'"
display="[[smScreen() ? 'icons' : 'all']]"
edge="top"
item.renderer="[[oj.KnockoutTemplateUtils.getRenderer('navTemplate', true)]]"
selection="{{router.stateId}}">
</oj-navigation-list>
</div>
</header>
<div role="main" class="oj-web-applayout-max-width oj-web-applayout-content" data-bind="ojModule: router.moduleConfig">
</div>
<footer class="oj-web-applayout-footer" role="contentinfo">
<div class="oj-web-applayout-footer-item oj-web-applayout-max-width">
<ul>
<!-- ko foreach: footerLinks -->
<li><a data-bind="text : name, attr : {id: linkId, href : linkTarget}"></a></li>
<!-- /ko -->
</ul>
</div>
<div class="oj-web-applayout-footer-item oj-web-applayout-max-width oj-text-secondary-color oj-text-sm">
Copyright © 2014, 2017 Oracle and/or its affiliates All rights reserved.
</div>
</footer>
</div>
<script type="text/javascript" src="js/libs/require/require.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>