This repository has been archived by the owner on Jul 15, 2023. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 8
/
Copy pathdefault.html
133 lines (123 loc) · 7.13 KB
/
default.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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>SampleApp</title>
<!-- WinJS references -->
<!-- To get the latest version of WinJS, go to: http://go.microsoft.com/fwlink/?LinkId=533245 -->
<link href="WinJS/css/ui-dark.css" rel="stylesheet" />
<script src="WinJS/js/base.js"></script>
<script src="WinJS/js/ui.js"></script>
<!-- App1 references -->
<link href="css/default.css" rel="stylesheet" />
<script src="js/default.js"></script>
</head>
<body>
<div id="app" class="show-home win-type-body">
<!-- SPLIT VIEW -->
<div class="splitView" data-win-control="WinJS.UI.SplitView">
<!-- Pane area -->
<div>
<div class="header">
<button
class="win-splitviewpanetoggle"
data-win-control="WinJS.UI.SplitViewPaneToggle"
data-win-options="{ splitView: select('.splitView') }"
></button>
<div class="title"><h2 class="win-h2">All Trails</h2></div>
</div>
<div class="nav-commands">
<div data-win-control="WinJS.UI.SplitViewCommand" data-win-options="{ label: 'Home', icon: 'home', onclick: mySplitView.homeClicked}"></div>
<div data-trail-id="0" data-win-control="WinJS.UI.SplitViewCommand" data-win-options="{ label: 'Snoqualmie Falls Trail', icon: 'mappin', onclick: mySplitView.trailClicked}"></div>
<div data-trail-id="1" data-win-control="WinJS.UI.SplitViewCommand" data-win-options="{ label: 'Foster Island Trail', icon: 'mappin', onclick: mySplitView.trailClicked}"></div>
<div data-trail-id="2" data-win-control="WinJS.UI.SplitViewCommand" data-win-options="{ label: 'Alki Trail', icon: 'mappin', onclick: mySplitView.trailClicked}"></div>
<div data-trail-id="3" data-win-control="WinJS.UI.SplitViewCommand" data-win-options="{ label: 'Chelan Lakeshore Trail', icon: 'mappin', onclick: mySplitView.trailClicked}"></div>
<div data-trail-id="4" data-win-control="WinJS.UI.SplitViewCommand" data-win-options="{ label: 'Cascade Pass', icon: 'mappin', onclick: mySplitView.trailClicked}"></div>
</div>
</div>
<!-- Content area -->
<button
class="win-splitviewpanetoggle second-button not-small"
data-win-control="WinJS.UI.SplitViewPaneToggle"
data-win-options="{ splitView: select('.splitView') }"
></button>
<div class="contenttext">
<div class="trail-ui">
<!-- FLIP VIEW -->
<div class="simple_ItemTemplate" data-win-control="WinJS.Binding.Template" style="display: none">
<div class="overlaidItemTemplate">
<img class="image" data-win-bind="src: picture; alt: title" />
</div>
</div>
<div id="simple_FlipView" class="flipView" data-win-control="WinJS.UI.FlipView"
data-win-options="{
itemDataSource: DefaultData.bindingList.dataSource,
itemTemplate: select('.simple_ItemTemplate')
}">
</div>
<!-- END FLIP VIEW -->
<!-- DESCRIPTION -->
<div class="description">
<!-- this is where the title, location and description are injected for each hiking page -->
<h2 class="trail-title"></h2>
<p class="trail-location"></p>
<p class="trail-description" id="description-content"></p>
<!--RATING-->
<table>
<tr class="detail">
<td>Rate this trail: </td>
<td class="control">
<div class="rating" data-win-control="WinJS.UI.Rating" data-win-options="{averageRating: 3.4}"></div>
</td>
</tr>
</table>
<!--END RATING-->
</div>
</div> <!-- closes trail-ui-->
<div class="home-ui">
<!--ListView and Repeater-->
<!-- Simple template for the ListView instantiation -->
<div class="mainList">
<h2 class="win-h2"> Trails</h2>
<div class="myListTemplate" data-win-control="WinJS.Binding.Template" >
<div class ="myListItem">
<img src="#" class="myListImage" data-win-bind="src: preview" />
<div class="myListDetail">
<h4 data-win-bind="textContent: title"></h4>
<h6 data-win-bind="textContent: description"></h6>
<div class="avgRating" data-win-control="WinJS.UI.Rating" data-win-bind="winControl.userRating: averageRating" ></div>
</div>
</div>
</div>
<!-- The declarative markup necesary for ListView instantiation -->
<!-- Call WinJS.UI.processAll() in your initialization code -->
<div id="listView"
class="win-selectionstylefilled"
data-win-control="WinJS.UI.ListView"
data-win-options="{
itemDataSource: myList.alphabeticalList.dataSource,
itemTemplate: select('.myListTemplate'),
selectionMode: 'none',
tapBehavior: 'none',
layout: { type: WinJS.UI.ListLayout }
}">
</div>
</div>
<!-- Repeater -->
<div class="recommendedList">
<h3 class="win-h3"> Hikes Sorted by Rating</h3>
<div data-win-control="WinJS.UI.Repeater" data-win-options="{data: myList.sortedList}">
<div>
<h2 style="display: inline-block" data-win-bind="textContent: title"></h2> <br>
<div class="win-small" data-win-control="WinJS.UI.Rating" data-win-bind="winControl.userRating: averageRating"></div>
<br>
</div>
</div>
</div>
<!--End ListView and Repeater-->
</div> <!-- closes home-ui-->
</div>
</div>
</div>
</body>
</html>