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.

68 lines
3.2 KiB

10 years ago
10 years ago
10 years ago
10 years ago
  1. <% @tabs = { definition: 'Definition', examples: 'Examples', usage: 'Usage', settings: 'Settings' } if @tabs == 'module' %>
  2. <% @tabs = { overview: 'Overview', usage: 'Usage', examples: 'Examples', settings: 'Settings' } if @tabs == 'behavior' %>
  3. <div class="<% if @tabs?: %>tab <% end %> header segment">
  4. <div class="container">
  5. <div class="introduction">
  6. <h1 class="ui header">
  7. <%=@document.title %>
  8. <% if @document.status?: %><span class="ui label"><%= @document.status %></span><% end %>
  9. </h1>
  10. <p><%=@document.description %></p>
  11. <% if @document.type is 'UI Element' or @document.type is 'UI View' or @document.type is 'UI Collection': %>
  12. <div class="ui divider"></div>
  13. <div class="ui basic toggle overview button">
  14. Definition
  15. </div>
  16. <% end %>
  17. <% if @document.type is 'UI Module': %>
  18. <a href="/module.html" class="ui right floated basic labeled icon button">
  19. Learn about Modules
  20. <i class="help icon" data-title="What are Modules?" data-content="Modules are UI elements that include behaviors as part of their definition. Modules require some knowledge of Javascript to trigger."></i>
  21. </a>
  22. <% end %>
  23. <% if @document.themes?: %>
  24. <div class="ui floating dropdown theme basic button" data-element="<%= @document.element %>" data-type="<%= @document.elementType %>">
  25. <span class="text">Theme</span>
  26. <div class="menu ui transition hidden">
  27. <% for id, name of @document.themes: %>
  28. <div class="item" data-value="<%= name %>"><%= (name.charAt(0).toUpperCase() + name.slice(1)) %></div>
  29. <% end %>
  30. </div>
  31. </div>
  32. <% end %>
  33. <% if @document.type is 'UI Element' or @document.type is 'UI View' or @document.type is 'UI Collection' or @document.type is 'UI Module': %>
  34. <div class="ui disabled secondary button">
  35. Download
  36. </div>
  37. <% end %>
  38. </div>
  39. <div class="advertisement">
  40. <% unless 'development' in @getEnvironments(): %>
  41. <div id="carbonads-container"><div class="carbonad"><div id="azcarbon"></div><script type="text/javascript">var z = document.createElement("script"); z.type = "text/javascript"; z.async = true; z.src = "http://engine.carbonads.com/z/51619/azcarbon_2_1_0_HORIZ"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(z, s);</script></div></div>
  42. <% end %>
  43. </div>
  44. <% if @tabs?: %>
  45. <% index = 0 %>
  46. <% tabCount = 0 %>
  47. <% numbers = ['zero', 'one', 'two', 'three', 'four', 'five', 'six'] %>
  48. <% colors = ['red', 'teal', 'blue', 'purple', 'black', 'orange'] %>
  49. <% for id, name of @tabs: %>
  50. <% tabCount++ %>
  51. <% end %>
  52. <div class="<%= numbers[tabCount] %> item tabular ui menu">
  53. <% for id, name of @tabs: %>
  54. <a class="<%= if index == 0 then 'active ' %>item" data-tab="<%= id %>"><%= name %></a>
  55. <% index++ %>
  56. <% end %>
  57. </div>
  58. <% index = 0 %>
  59. <div class="fluid vertical ui menu">
  60. <% for id, name of @tabs: %>
  61. <a class="<%= if index == 0 then 'active ' %>item" data-tab="<%= id %>"><%= name %></a>
  62. <% index++ %>
  63. <% end %>
  64. </div>
  65. <% end %>
  66. </div>
  67. </div>