-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
143 lines (130 loc) · 7.54 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
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
<!DOCTYPE html>
<!--
Copyright (c) 2014, 2018, Oracle and/or its affiliates.
The Universal Permissive License (UPL), Version 1.0
-->
<!-- ************************ IMPORTANT INFORMATION ************************************
This web navigation drawer template is provided as an example of how to configure
a JET web application with a navigation drawer as a single page application
using ojRouter and oj-module. 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 Drawer</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/v5.0.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 shared between nav bar and nav list -->
<script type="text/html" id="navTemplate">
<li><a href="#">
<span :class="[[$data['iconClass']]]"></span>
<oj-bind-text value="[[$data['name']]]"></oj-bind-text>
</a></li>
</script>
<div id="globalBody" class="oj-offcanvas-outer-wrapper oj-offcanvas-page">
<!--
** Oracle JET V5.0.0 web application navigation drawer pattern.
** 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.
** The off-canvas section is used when the browser is resized to a smaller media
** query size for a phone format and hidden until a user clicks on
** the header hamburger icon.
-->
<div id="navDrawer" role="navigation" class="oj-contrast-marker oj-web-applayout-offcanvas oj-offcanvas-start">
<oj-navigation-list data="[[navDataSource]]"
edge="start"
item.renderer="[[oj.KnockoutTemplateUtils.getRenderer('navTemplate', true)]]"
on-click="[[toggleDrawer]]"
selection="{{router.stateId}}">
</oj-navigation-list>
</div>
<div id="pageContent" class="oj-web-applayout-page">
<!--
** Oracle JET V5.0.0 web application header pattern.
** 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">
<!-- Offcanvas toggle button -->
<div class="oj-flex-bar-start oj-md-hide">
<oj-button id="drawerToggleButton" class="oj-button-lg" on-oj-action="[[toggleDrawer]]" chroming="half" display="icons">
<span slot="startIcon" class="oj-web-applayout-offcanvas-icon"></span>
<span>Application Navigation</span>
</oj-button>
</div>
<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"><oj-bind-text value="[[appName]]"></oj-bind-text></h1>
</div>
<div class="oj-flex-bar-end">
<!-- Responsive Toolbar -->
<oj-toolbar>
<oj-menu-button id="userMenu" display="[[smScreen() ? 'icons' : 'all']]" chroming="half">
<span><oj-bind-text value="[[userLogin]]"></oj-bind-text></span>
<span slot="endIcon" :class="[[{'oj-icon demo-appheader-avatar': smScreen(), 'oj-component-icon oj-button-menu-dropdown-icon': !smScreen()}]]"></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 class="oj-sm-only-hide oj-md-condense oj-md-justify-content-flex-end"
data="[[navDataSource]]"
edge="top"
item.renderer="[[oj.KnockoutTemplateUtils.getRenderer('navTemplate', true)]]"
selection="{{router.stateId}}">
</oj-navigation-list>
</div>
</header>
<oj-module role="main" class="oj-web-applayout-max-width oj-web-applayout-content" config="[[moduleConfig]]">
</oj-module>
<footer class="oj-web-applayout-footer" role="contentinfo">
<div class="oj-web-applayout-footer-item oj-web-applayout-max-width">
<ul>
<oj-bind-for-each data="[[footerLinks]]">
<template>
<li><a :id="[[$current.data.linkId]]" :href="[[$current.data.linkTarget]]"><oj-bind-text value="[[$current.data.name]]"></oj-bind-text></a></li>
</template>
</oj-bind-for-each>
</ul>
</div>
<div class="oj-web-applayout-footer-item oj-web-applayout-max-width oj-text-secondary-color oj-text-sm">
Copyright © 2014, 2018 Oracle and/or its affiliates All rights reserved. No Way.
</div>
</footer>
</div>
</div>
<script type="text/javascript" src="js/libs/require/require.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>