You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

396 lines
21 KiB

11 years ago
10 years ago
10 years ago
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <% uiIntroduction = @getCollection("documents").findAll({type: $in: ['UI Introduction']},[{title: 1}]).toJSON() %>
  5. <% uiProject = @getCollection("documents").findAll({type: $in: ['Semantic Project']},[{title: 1}]).toJSON() %>
  6. <% uiGuide = @getCollection("documents").findAll({type: $in: ['UI Guide']},[{title: 1}]).toJSON() %>
  7. <% uiGlobals = @getCollection("documents").findAll({type: $in: ['UI Global']},[{title: 1}]).toJSON() %>
  8. <% uiElements = @getCollection("documents").findAll({type: $in: ['UI Element']},[{title: 1}]).toJSON() %>
  9. <% uiCollections = @getCollection("documents").findAll({type: $in: ['UI Collection']},[{title: 1}]).toJSON() %>
  10. <% uiViews = @getCollection("documents").findAll({type: $in: ['UI View']},[{title: 1}]).toJSON() %>
  11. <% uiModules = @getCollection("documents").findAll({type: $in: ['UI Module']},[{title: 1}]).toJSON() %>
  12. <% uiBehavior = @getCollection("documents").findAll({type: $in: ['UI Behavior']},[{title: 1}]).toJSON() %>
  13. <% uiSpecification = @getCollection("documents").findAll({type: $in: ['UI Specification']},[{title: 1}]).toJSON() %>
  14. <% currentCollection = @getCollection("documents").findAll({type: $in: [@document.type]},[{title: 1}]).toJSON() %>
  15. <% pageCount = @pageCount(currentCollection) %>
  16. <% pageNumber = @getPage(currentCollection, @document.id) %>
  17. <% pageCollection = @getPageCollection(currentCollection, @document.id) %>
  18. <!-- Standard Meta -->
  19. <meta charset="utf-8" />
  20. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  21. <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  22. <link rel="image_src" type="image/jpeg" href="images/share.png" />
  23. <!-- Site Properities -->
  24. <%- @getBlock('meta').toHTML() %>
  25. <title><%= @getPreparedTitle() %></title>
  26. <meta name="description" content="<%= @getPreparedDescription() %>" />
  27. <meta name="keywords" content="<%= @getPreparedKeywords() %>" />
  28. <% if 'development' in @getEnvironments(): %>
  29. <link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/definitions/globals/reset.css">
  30. <link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/definitions/globals/site.css">
  31. <link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/definitions/elements/icon.css">
  32. <link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/definitions/elements/button.css">
  33. <link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/definitions/elements/divider.css">
  34. <link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/definitions/elements/flag.css">
  35. <link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/definitions/elements/header.css">
  36. <link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/definitions/elements/image.css">
  37. <link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/definitions/elements/input.css">
  38. <link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/definitions/elements/label.css">
  39. <link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/definitions/elements/list.css">
  40. <link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/definitions/elements/loader.css">
  41. <link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/definitions/elements/rail.css">
  42. <link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/definitions/elements/reveal.css">
  43. <link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/definitions/elements/segment.css">
  44. <link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/definitions/elements/step.css">
  45. <link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/definitions/collections/breadcrumb.css">
  46. <link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/definitions/collections/form.css">
  47. <link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/definitions/collections/grid.css">
  48. <link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/definitions/collections/menu.css">
  49. <link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/definitions/collections/message.css">
  50. <link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/definitions/collections/table.css">
  51. <link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/definitions/views/card.css">
  52. <link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/definitions/views/comment.css">
  53. <link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/definitions/views/feed.css">
  54. <link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/definitions/views/item.css">
  55. <link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/definitions/views/statistic.css">
  56. <link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/definitions/modules/modal.css">
  57. <link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/definitions/modules/accordion.css">
  58. <link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/definitions/modules/dropdown.css">
  59. <link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/definitions/modules/nag.css">
  60. <link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/definitions/modules/popup.css">
  61. <link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/definitions/modules/progress.css">
  62. <link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/definitions/modules/rating.css">
  63. <link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/definitions/modules/sidebar.css">
  64. <link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/definitions/modules/search.css">
  65. <link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/definitions/modules/shape.css">
  66. <link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/definitions/modules/sticky.css">
  67. <link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/definitions/modules/tab.css">
  68. <link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/definitions/modules/checkbox.css">
  69. <link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/definitions/modules/dimmer.css">
  70. <link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/definitions/modules/transition.css">
  71. <link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/definitions/modules/video.css">
  72. <% else: %>
  73. <link rel="stylesheet" type="text/css" class="ui" href="/build/packaged/definitions/css/semantic.min.css">
  74. <% end %>
  75. <!-- <link rel="stylesheet/less" type="text/css" href="/build/less/definitions/site.less" /> -->
  76. <link href='http://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,700italic' rel='stylesheet' type='text/css'>
  77. <link rel="stylesheet" type="text/css" href="/stylesheets/doc-icon.css">
  78. <link rel="stylesheet" type="text/css" href="/stylesheets/semantic.css">
  79. <% if 'development' in @getEnvironments(): %>
  80. <script>
  81. (function () {
  82. var
  83. eventSupport = ('querySelector' in document && 'addEventListener' in window)
  84. jsonSupport = (typeof JSON !== 'undefined'),
  85. jQuery = (eventSupport && jsonSupport)
  86. ? '/javascript/library/jquery.js'
  87. : '/javascript/library/jquery.legacy.js'
  88. ;
  89. document.write('<script src="' + jQuery + '"><\/script>');
  90. }());
  91. </script>
  92. <% else: %>
  93. <script>
  94. (function () {
  95. var
  96. eventSupport = ('querySelector' in document && 'addEventListener' in window)
  97. jsonSupport = (typeof JSON !== 'undefined'),
  98. jQuery = (eventSupport && jsonSupport)
  99. ? '/javascript/library/jquery.min.js'
  100. : '/javascript/library/jquery.legacy.min.js'
  101. ;
  102. document.write('<script src="' + jQuery + '"><\/script>');
  103. }());
  104. </script>
  105. <% end %>
  106. <script src="/javascript/library/history.js"></script>
  107. <script src="/javascript/library/easing.js"></script>
  108. <script src="/javascript/library/ace/ace.js"></script>
  109. <script src="/javascript/library/tablesort.js"></script>
  110. <script src="/javascript/library/typing.js"></script>
  111. <% if 'development' in @getEnvironments(): %>
  112. <script src="/build/uncompressed/definitions/globals/site.js"></script>
  113. <script src="/build/uncompressed/definitions/behaviors/api.js"></script>
  114. <script src="/build/uncompressed/definitions/behaviors/visibility.js"></script>
  115. <script src="/build/uncompressed/definitions/behaviors/state.js"></script>
  116. <script src="/build/uncompressed/definitions/modules/accordion.js"></script>
  117. <script src="/build/uncompressed/definitions/modules/checkbox.js"></script>
  118. <script src="/build/uncompressed/definitions/modules/dimmer.js"></script>
  119. <script src="/build/uncompressed/definitions/modules/dropdown.js"></script>
  120. <script src="/build/uncompressed/definitions/modules/modal.js"></script>
  121. <script src="/build/uncompressed/definitions/modules/nag.js"></script>
  122. <script src="/build/uncompressed/definitions/modules/popup.js"></script>
  123. <script src="/build/uncompressed/definitions/modules/progress.js"></script>
  124. <script src="/build/uncompressed/definitions/modules/rating.js"></script>
  125. <script src="/build/uncompressed/definitions/modules/search.js"></script>
  126. <script src="/build/uncompressed/definitions/modules/shape.js"></script>
  127. <script src="/build/uncompressed/definitions/modules/sidebar.js"></script>
  128. <script src="/build/uncompressed/definitions/modules/sticky.js"></script>
  129. <script src="/build/uncompressed/definitions/modules/tab.js"></script>
  130. <script src="/build/uncompressed/definitions/modules/transition.js"></script>
  131. <script src="/build/uncompressed/definitions/modules/video.js"></script>
  132. <% else: %>
  133. <script src="/build/packaged/definitions/javascript/semantic.min.js"></script>
  134. <% end %>
  135. <script src="/javascript/semantic.js"></script>
  136. <script>
  137. (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  138. (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  139. m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  140. })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
  141. ga('create', 'UA-44039803-2', 'auto');
  142. ga('send', 'pageview');
  143. </script>
  144. <script type="text/javascript">
  145. window.liveSettings = {
  146. api_key : '9ede3015b9f84c1aabc81ab839c55d74',
  147. parse_attr : [
  148. 'data-title',
  149. 'data-content'
  150. ],
  151. detectlang : true,
  152. autocollect : true,
  153. ignore_tags : ['i'],
  154. parse_attr : ['data-title', 'data-content', 'data-text'],
  155. ignore_class : ["code", "ace_editor"]
  156. };
  157. </script>
  158. <script type="text/javascript" src="http://cdn.transifex.com/live.js"></script>
  159. </head>
  160. <body id="example" class="pushable <%= @document.css %>" ontouchstart="">
  161. <div class="ui vertical inverted labeled icon sidebar menu" id="menu">
  162. <a class="hide item">
  163. <i class="close icon"></i> Close Menu
  164. </a>
  165. <a class="item" href="/build/semantic.zip">
  166. <i class="download icon"></i> <b>Download</b>
  167. </a>
  168. <div class="item">
  169. <div class="ui small <%= if @document.elementType is 'global' then 'active ' %> inverted header">Globals</div>
  170. <div class="menu">
  171. <% for element in uiGlobals: %>
  172. <a class="<%= if element.id is @document.id then 'active ' %>item" href="<%= element.url %>">
  173. <%= element.title %>
  174. <% if element.status?: %>
  175. <span class="ui mini empty yellow circular ui label"></span>
  176. <% end %>
  177. </a>
  178. <% end %>
  179. </div>
  180. </div>
  181. <div class="item">
  182. <div class="ui small <%= if @document.elementType is 'element' then 'active ' %> inverted header">Elements</div>
  183. <div class="menu">
  184. <% for element in uiElements: %>
  185. <a class="<%= if element.id is @document.id then 'active ' %>item" href="<%= element.url %>">
  186. <%= element.title %>
  187. <% if element.status?: %>
  188. <span class="ui mini empty yellow circular ui label"></span>
  189. <% end %>
  190. </a>
  191. <% end %>
  192. </div>
  193. </div>
  194. <div class="item">
  195. <div class="ui small <%= if @document.elementType is 'collection' then 'active ' %> inverted header">Collections</div>
  196. <div class="menu">
  197. <% for element in uiCollections: %>
  198. <a class="<%= if element.id is @document.id then 'active ' %>item" href="<%= element.url %>">
  199. <%= element.title %>
  200. <% if element.status?: %>
  201. <span class="ui mini empty yellow circular ui label"></span>
  202. <% end %>
  203. </a>
  204. <% end %>
  205. </div>
  206. </div>
  207. <div class="item">
  208. <div class="ui small <%= if @document.elementType is 'view' then 'active ' %> inverted header">Views</div>
  209. <div class="menu">
  210. <% for element in uiViews: %>
  211. <a class="<%= if element.id is @document.id then 'active ' %>item" href="<%= element.url %>">
  212. <%= element.title %>
  213. <% if element.status?: %>
  214. <span class="ui mini empty yellow circular ui label"></span>
  215. <% end %>
  216. </a>
  217. <% end %>
  218. </div>
  219. </div>
  220. <div class="item">
  221. <a href="/module.html" class="ui small <%= if @document.elementType is 'module' then 'active ' %> inverted header">Modules</a>
  222. <div class="menu">
  223. <% for element in uiModules: %>
  224. <a class="<%= if element.id is @document.id then 'active ' %>item" href="<%= element.url %>">
  225. <%= element.title %>
  226. <% if element.status?: %>
  227. <span class="ui mini empty yellow circular ui label"></span>
  228. <% end %>
  229. </a>
  230. <% end %>
  231. </div>
  232. </div>
  233. <div class="item">
  234. <div class="ui small <%= if @document.elementType is 'behavior' then 'active ' %> inverted header">Behaviors</div>
  235. <div class="menu">
  236. <% for element in uiBehavior: %>
  237. <a class="<%= if element.id is @document.id then 'active ' %>item" href="<%= element.url %>">
  238. <%= element.title %>
  239. <% if element.status?: %>
  240. <span class="ui mini empty yellow circular ui label"></span>
  241. <% end %>
  242. </a>
  243. <% end %>
  244. </div>
  245. </div>
  246. </div>
  247. <div class="ui fixed inverted main menu">
  248. <div class="container">
  249. <a class="launch item"><i class="content icon"></i></a>
  250. <div class="title item">
  251. <b><%= @document.type %>:</b> <%= @document.title %>
  252. </div>
  253. <% if pageNumber > 1 and currentCollection[pageNumber - 2]?: %>
  254. <a class="icon item" href="<%= currentCollection[pageNumber - 2].url %>"><i class="left chevron icon"></i></a>
  255. <% else: %>
  256. <div class="disabled icon item"><i class="left chevron icon"></i></div>
  257. <% end %>
  258. <div class="section ui page dropdown link item">
  259. <span class="count"><%= "#{pageNumber} of #{pageCount}" %></span>
  260. <div class="menu">
  261. <% for element, index in currentCollection: %>
  262. <a class="<%= if element.id is @document.id then 'active ' %>item" href="<%= element.url %>">
  263. <%= element.title %>
  264. </a>
  265. <% end %>
  266. </div>
  267. </div>
  268. <% if pageNumber isnt pageCount and currentCollection[pageNumber]?: %>
  269. <a class="icon item" href="<%= currentCollection[pageNumber].url %>"><i class="right chevron icon"></i></a>
  270. <% else: %>
  271. <div class="disabled icon item"><i class="right chevron icon"></i></div>
  272. <% end %>
  273. <div class="right menu">
  274. <div class="vertically fitted borderless item">
  275. <iframe src="http://ghbtns.com/github-btn.html?user=semantic-org&repo=semantic-ui&type=watch&count=true"
  276. allowtransparency="true" frameborder="0" scrolling="0" width="95" height="20"></iframe>
  277. </div>
  278. <a class="popup icon github item" data-content="View project on GitHub" href="https://github.com/quirkyinc/semantic">
  279. <i class="alternate github icon"></i>
  280. </a>
  281. <div class="ui language dropdown item" id="languages" data-content="Select Language">
  282. <i class="world icon"></i>
  283. <div class="menu">
  284. <div class="item" data-percent="100" data-value="en">English</div>
  285. <div class="item" data-percent="17" data-value="nl">Nederlands</div>
  286. <div class="item" data-percent="18" data-value="hu">Magyar</div>
  287. <div class="item" data-percent="8" data-value="ar">العربية</div>
  288. <div class="item" data-percent="2" data-value="pt_BR">Português</div>
  289. <div class="item" data-percent="8" data-value="lt">Lietuvių</div>
  290. <div class="item" data-percent="2" data-value="zh">简体中文</div>
  291. <div class="item" data-percent="0" data-value="tr">Türkçe</div>
  292. <div class="item" data-percent="0" data-value="es">Español</div>
  293. <div class="item" data-percent="0" data-value="ru">Русский</div>
  294. <div class="item" data-percent="0" data-value="de">Deutsch</div>
  295. <div class="item" data-percent="0" data-value="fr">Français</div>
  296. <div class="item" data-percent="0" data-value="ja">日本語</div>
  297. <div class="item" data-percent="0" data-value="kr">한국어</div>
  298. <div class="item" data-percent="0" data-value="it">Italiano</div>
  299. </div>
  300. </div>
  301. </div>
  302. </div>
  303. </div>
  304. <div class="ui black huge launch right attached fixed button">
  305. <i class="content icon"></i>
  306. <span class="text">Menu</span>
  307. </div>
  308. <div class="pusher">
  309. <div class="page">
  310. <div class="full height">
  311. <%- @content %>
  312. </div>
  313. <div class="ui vertical inverted black footer segment">
  314. <div class="container">
  315. <div class="ui stackable inverted divided relaxed grid">
  316. <div class="eight wide column">
  317. <h3 class="ui inverted header">Help Keep Semantic UI Alive</h3>
  318. <p>Maintaining an open source UI library is no small task. Support for the continued development of Semantic UI comes directly from the community.</p>
  319. <form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
  320. <input type="hidden" name="cmd" value="_s-xclick">
  321. <input type="hidden" name="hosted_button_id" value="7ZAF2Q8DBZAQL">
  322. <button type="submit" class="ui teal button">Donate Today</button>
  323. </form>
  324. </div>
  325. <div class="four wide column">
  326. <h5 class="ui teal inverted header">Contribute</h5>
  327. <div class="ui inverted link list">
  328. <a class="item" href="mailto:jack@semantic-ui.com?subject=Help Translating">Translate</a>
  329. <a class="item" href="https://github.com/Semantic-Org/Semantic-UI" target="_blank">Issue Tracker</a>
  330. <a class="item" href="cla.html" target="_blank">CLA</a>
  331. <a class="disabled item">Create Themes</a>
  332. </div>
  333. </div>
  334. <div class="four wide column">
  335. <h5 class="ui teal inverted header">Semantic Network</h5>
  336. <div class="ui inverted link list">
  337. <a class="item" href="https://www.transifex.com/projects/p/semantic-ui-beta/" target="_blank">Translation Hub</a>
  338. <a class="disabled item">Semantic UI</a>
  339. <a class="disabled item">Learn Semantic</a>
  340. <a class="disabled item">Semantic Themes</a>
  341. </div>
  342. </div>
  343. </div>
  344. </div>
  345. </div>
  346. </div>
  347. </div>
  348. <div class="ui basic language modal">
  349. <i class="close icon"></i>
  350. <div class="header">The <span class="name"></span> Translation Needs Your Help</div>
  351. <div class="content">
  352. <div class="middle aligned image">
  353. <i class="world icon"></i>
  354. </div>
  355. <div class="description">
  356. <p>This translation is only <b><span class="complete"></span>%</b> complete!</p>
  357. <div class="ui inverted indicating progress">
  358. <div class="bar"></div>
  359. </div>
  360. <p>We need your help to make Semantic available to people who speak your language.</p>
  361. <p>Our translation tools are easy to use and allow you to translate text without having to leave the site. If you are interested in joining our translation team please <a href="mailto:jack@semantic-ui.com?subject=Localization%20Help">e-mail me</a> for access to our translation hub.
  362. </p>
  363. </div>
  364. </div>
  365. <div class="actions">
  366. <div class="ui inverted cancel button">No Thanks</div>
  367. <a href="mailto:jack@semantic-ui.com?subject=Localization%20Help" target="_blank" class="ui inverted approve teal button">
  368. <i class="mail icon"></i>
  369. Help Translate
  370. </a>
  371. </div>
  372. </div>
  373. <script src="/javascript/library/less.js"></script>
  374. </body>
  375. </html>