|
51
|
1 |
<!doctype html> |
|
|
2 |
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" > |
|
|
3 |
<title>Renkan</title> |
|
|
4 |
|
|
|
5 |
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> |
|
|
6 |
<meta charset="utf-8"/> |
|
|
7 |
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/> |
|
|
8 |
|
|
|
9 |
<link rel="shortcut icon" href="favicon.ico"/> |
|
|
10 |
<script src="lib/jquery.min.js" th:src="@{/static/lib/jquery.min.js}" ></script> |
|
|
11 |
<script src="lib/underscore-min.js" th:src="@{/static/lib/underscore-min.js}" ></script> |
|
|
12 |
<script src="js/main.js" th:src="@{/static/js/main.js}" ></script> |
|
|
13 |
|
|
|
14 |
<style> |
|
|
15 |
/*<![CDATA[*/ |
|
|
16 |
body { |
|
|
17 |
margin: 0; |
|
|
18 |
height: 100%; |
|
|
19 |
color: #333; |
|
|
20 |
font: 14px helvetica, sans-serif; |
|
|
21 |
background: #ddd; |
|
|
22 |
background: -webkit-radial-gradient(circle,#aaa,#eee 60%) center fixed; |
|
|
23 |
background: -moz-radial-gradient(circle,#aaa,#eee 60%) center fixed; |
|
|
24 |
background: -ms-radial-gradient(circle,#aaa,#eee 60%) center fixed; |
|
|
25 |
background: -o-radial-gradient(circle,#aaa,#eee 60%) center fixed; |
|
|
26 |
border-top: 8px solid rgba(51,51,51,.8); |
|
|
27 |
} |
|
|
28 |
#wrapper { |
|
|
29 |
border-top: 1px solid #999; |
|
|
30 |
margin-top: 160px; |
|
|
31 |
padding: 15px; |
|
|
32 |
background: #eee; |
|
|
33 |
background: -webkit-linear-gradient(#fff,#ccc); |
|
|
34 |
background: -moz-linear-gradient(#fff,#ccc); |
|
|
35 |
background: -ms-linear-gradient(#fff,#ccc); |
|
|
36 |
background: -o-linear-gradient(#fff,#ccc); |
|
|
37 |
opacity: .9; |
|
|
38 |
box-shadow: 0px 1px 8px rgba(0,0,0,0.3); |
|
|
39 |
} |
|
|
40 |
#inner { |
|
|
41 |
width: 350px; |
|
|
42 |
margin: 0 auto; |
|
|
43 |
} |
|
|
44 |
#button { |
|
|
45 |
margin: 0 auto; |
|
|
46 |
border-radius: 3px; |
|
|
47 |
text-align: center; |
|
|
48 |
font: 36px verdana,arial,sans-serif; |
|
|
49 |
color: white; |
|
|
50 |
text-shadow: 0 -1px 0 rgba(0,0,0,.8); |
|
|
51 |
height: 70px; |
|
|
52 |
line-height: 70px; |
|
|
53 |
background: #555; |
|
|
54 |
background: -webkit-linear-gradient(#5F5F5F,#565656 50%,#4C4C4C 51%,#373737); |
|
|
55 |
background: -moz-linear-gradient(#5F5F5F,#565656 50%,#4C4C4C 51%,#373737); |
|
|
56 |
background: -ms-linear-gradient(#5F5F5F,#565656 50%,#4C4C4C 51%,#373737); |
|
|
57 |
background: -o-linear-gradient(#5F5F5F,#565656 50%,#4C4C4C 51%,#373737); |
|
|
58 |
box-shadow: inset 0 1px 3px rgba(0,0,0,0.9); |
|
|
59 |
} |
|
|
60 |
#button:hover { |
|
|
61 |
cursor: pointer; |
|
|
62 |
background: #666; |
|
|
63 |
background: -webkit-linear-gradient(#707070,#666666 50%,#5B5B5B 51%,#474747); |
|
|
64 |
background: -moz-linear-gradient(#707070,#666666 50%,#5B5B5B 51%,#474747); |
|
|
65 |
background: -ms-linear-gradient(#707070,#666666 50%,#5B5B5B 51%,#474747); |
|
|
66 |
background: -o-linear-gradient(#707070,#666666 50%,#5B5B5B 51%,#474747); |
|
|
67 |
} |
|
|
68 |
#button:active { |
|
|
69 |
box-shadow: inset 0 1px 12px rgba(0,0,0,0.9); |
|
|
70 |
background: #444; |
|
|
71 |
} |
|
|
72 |
#label { |
|
|
73 |
text-align: left; |
|
|
74 |
text-shadow: 0 1px 1px #fff; |
|
|
75 |
margin: 16px auto 0; |
|
|
76 |
} |
|
|
77 |
form { |
|
|
78 |
height: 38px; |
|
|
79 |
background: #fff; |
|
|
80 |
border: 1px solid #bbb; |
|
|
81 |
border-radius: 3px; |
|
|
82 |
position: relative; |
|
|
83 |
} |
|
|
84 |
button, input { |
|
|
85 |
font-weight: bold; |
|
|
86 |
font-size: 15px; |
|
|
87 |
} |
|
|
88 |
input[type="text"] { |
|
|
89 |
border-radius: 3px; |
|
|
90 |
box-sizing: border-box; |
|
|
91 |
-moz-box-sizing: border-box; |
|
|
92 |
padding: 0 45px 0 10px; |
|
|
93 |
*padding: 0; /* IE7 hack */ |
|
|
94 |
width: 100%; |
|
|
95 |
height: 100%; |
|
|
96 |
outline: none; |
|
|
97 |
border: none; |
|
|
98 |
position: absolute; |
|
|
99 |
} |
|
|
100 |
button[type="submit"] { |
|
|
101 |
position: absolute; |
|
|
102 |
right: 0; |
|
|
103 |
width: 45px; |
|
|
104 |
height: 38px; |
|
|
105 |
} |
|
|
106 |
@media only screen and (min-device-width: 320px) and (max-device-width: 720px) { |
|
|
107 |
body { |
|
|
108 |
background: #bbb; |
|
|
109 |
background: -webkit-linear-gradient(#aaa,#eee 60%) center fixed; |
|
|
110 |
background: -moz-linear-gradient(#aaa,#eee 60%) center fixed; |
|
|
111 |
background: -ms-linear-gradient(#aaa,#eee 60%) center fixed; |
|
|
112 |
} |
|
|
113 |
#wrapper { |
|
|
114 |
margin-top: 0; |
|
|
115 |
} |
|
|
116 |
#inner { |
|
|
117 |
width: 95%; |
|
|
118 |
} |
|
|
119 |
#label { |
|
|
120 |
text-align: center; |
|
|
121 |
} |
|
|
122 |
} |
|
|
123 |
/*]]>*/ |
|
|
124 |
</style> |
|
|
125 |
<link href="static/css/index.css" rel="stylesheet" th:href="@{/static/css/index.css}"/> |
|
|
126 |
|
|
|
127 |
<div id="wrapper"> |
|
|
128 |
<div id="inner"> |
|
|
129 |
<div id="button" onclick="go2Random()" class="translate" th:utext="#{renkanIndex.new_renkan}">New Renkan</div> |
|
|
130 |
<div id="label" class="translate" th:text="#{renkanIndex.renkan_title}">Create a Renkan with the title</div> |
|
|
131 |
<form action="#" onsubmit="go2Title();return false;"> |
|
|
132 |
<input type="text" id="renkantitle" autofocus="autofocus" x-webkit-speech="x-webkit-speech"/> |
|
|
133 |
<button type="submit">OK</button> |
|
|
134 |
</form> |
|
|
135 |
</div> |
|
|
136 |
<h2 th:text="#{renkanIndex.project_list}">Project list</h2> |
|
|
137 |
<table> |
|
|
138 |
<thead> |
|
|
139 |
<tr> |
|
|
140 |
<th th:text="#{renkanIndex.project_name}">Name</th><th th:text="#{renkanIndex.project_creation}">Creation</th><th th:text="#{renkanIndex.project_edit}">Edit</th> |
|
|
141 |
</tr> |
|
|
142 |
</thead> |
|
|
143 |
<tbody> |
|
|
144 |
<tr th:each="project: ${projects}"> |
|
|
145 |
<th th:text="${project.title}">title</th> |
|
|
146 |
<td th:text="${#dates.format(project.created, #messages.msg('date.format'))}">date</td> |
|
|
147 |
<td><a href="#" th:href="@{'/p/'+${project.id}(cowebkey=${project.key})}" th:text="#{renkanIndex.project_edit_link}">Edit projet</a></td> |
|
|
148 |
</tr> |
|
|
149 |
</tbody> |
|
|
150 |
</table> |
|
|
151 |
</div> |
|
|
152 |
<script th:inline="javascript" > |
|
|
153 |
/*<![CDATA[*/ |
|
|
154 |
|
|
|
155 |
function go2Title() |
|
|
156 |
{ |
|
|
157 |
var renkantitle = $("#renkantitle").val(); |
|
|
158 |
if(renkantitle.length == 0) { |
|
|
159 |
var alert_message = /*[[#{renkanIndex.js.empty_name_error}]]*/"Please enter a title"; |
|
|
160 |
alert(alert_message); |
|
|
161 |
return false; |
|
|
162 |
} |
|
|
163 |
|
|
|
164 |
new_renkan = { |
|
|
165 |
title: renkantitle, |
|
|
166 |
description: "(empty description)", |
|
|
167 |
uri: null |
|
|
168 |
}; |
|
|
169 |
|
|
|
170 |
var post_url = /*[[@{/rest/projects/}]]*/"/rest/projects/"; |
|
|
171 |
$.ajax(post_url, { |
|
|
172 |
data:JSON.stringify(new_renkan), |
|
|
173 |
type: "POST", |
|
|
174 |
dataType: "json", |
|
|
175 |
contentType: "application/json; charset=UTF-8" |
|
|
176 |
}).done(function(project){ |
|
|
177 |
var template_url = /*[[@{'/p/<%=project_id%>'(cowebkey='')}]]*/"p/<%=project_id%>?cowebkey=<%=project_key%>"; |
|
|
178 |
window.location = _.template(template_url+'<%=project_key%>', {project_id: project.id, project_key: project.key}); |
|
|
179 |
}); |
|
|
180 |
|
|
|
181 |
//? window.location = "p/" + renkantitle : alert(/*[[#{renkanIndex.js.empty_name_error}]]*/"Please enter a name"); |
|
|
182 |
} |
|
|
183 |
|
|
|
184 |
/*]]>*/ |
|
|
185 |
</script> |
|
|
186 |
|
|
|
187 |
</html> |