-
Notifications
You must be signed in to change notification settings - Fork 32
/
Copy pathindex.html
86 lines (68 loc) · 3 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0"/>
<title>Shopping List</title>
<!-- Material Design icons and fonts -->
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">
<link rel="stylesheet" href="//fonts.googleapis.com/icon?family=Material+Icons">
<!-- Material Design styles for Vue.js -->
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/vue-material.css">
<!-- our styles -->
<link href="shoppinglist.css" type="text/css" rel="stylesheet" media="screen,projection"/>
</head>
<body>
<!-- vue.js app -->
<div id="app" class="app-viewport">
<!-- top bar -->
<md-whiteframe md-elevation="3" class="main-toolbar">
<md-toolbar>
<!-- back button -->
<md-button class="md-icon-button" v-if="mode != 'showlist'" v-on:click="onBack">
<md-icon>arrow_back</md-icon>
</md-button>
<!-- page title -->
<h2 class="md-title" style="flex: 1">{{ pagetitle }}</h2>
</md-toolbar>
</md-whiteframe> <!-- top bar -->
<!-- add new shopping list form-->
<md-card v-if="mode == 'addlist'">
<md-card-header>Add Shopping List</md-card-header>
<md-card-content>
<md-input-container>
<label>List name</label>
<md-input placeholder="e.g. Food" v-model="singleList.title"></md-input>
</md-input-container>
<md-input-container>
<label>Place name</label>
<md-input placeholder="e.g. Whole Foods, Reno" v-model="singleList.place.title"></md-input>
</md-input-container>
</md-card-content>
</md-card> <!-- add new shopping list form -->
<!-- list of shopping lists -->
<md-list v-if="mode == 'showlist'">
<md-card v-for="list in shoppingLists" :key="list._id" :data-id="list._id">
<md-card-header>
<div class="md-title">{{ list.title }}</div>
<div class="md-subhead">{{ list.place.title }}</div>
</md-card-header>
</md-card>
</md-list> <!-- list of shopping lists -->
<!-- floating 'add shopping list' button -->
<div class="floatingbutton" v-if="mode == 'showlist'">
<md-button class="md-fab md-primary md-raised" v-on:click="onClickAddShoppingList">
<md-icon>add</md-icon>
</md-button>
</div> <!-- floating 'add shopping list' button -->
</div>
<!-- cuid - unique id generator -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/cuid/1.3.8/browser-cuid.min.js"></script>
<!-- Vue.js - framework that handles DOM/Model interaction -->
<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<!-- vue-material - Material Design for Vue.js -->
<script src="https://unpkg.com/[email protected]/dist/vue-material.js"></script>
<!-- our code -->
<script src="shoppinglist.js"></script>
</body>
</html>