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.
83 lines
3.6 KiB
83 lines
3.6 KiB
<% @tabs = { definition: 'Definition', examples: 'Examples', usage: 'Usage', settings: 'Settings' } if @tabs == 'module' %>
|
|
<% @tabs = { overview: 'Overview', usage: 'Usage', examples: 'Examples', settings: 'Settings' } if @tabs == 'behavior' %>
|
|
<div class="<% if @tabs?: %>tab <% end %> header segment">
|
|
<div class="container">
|
|
<div class="introduction">
|
|
|
|
<h1 class="ui header">
|
|
<%=@document.title %>
|
|
<% if @document.status?: %><span class="ui label"><%= @document.status %></span><% end %>
|
|
</h1>
|
|
|
|
<p><%=@document.description %></p>
|
|
<% if @document.type is 'UI Element' or @document.type is 'UI View' or @document.type is 'UI Collection': %>
|
|
<div class="ui divider"></div>
|
|
<% end %>
|
|
<% if @document.type is 'UI Module': %>
|
|
<a href="/module.html" class="ui right floated basic labeled icon button">
|
|
Learn about Modules
|
|
<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>
|
|
</a>
|
|
<% end %>
|
|
<div class="ui right floated basic button floating mode dropdown">
|
|
Change View
|
|
<div class="menu">
|
|
<a class="overview item">
|
|
Definition
|
|
</a>
|
|
<a class="designer item">
|
|
Designer
|
|
</a>
|
|
<a class="developer item">
|
|
Developer
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<% if @document.themes?: %>
|
|
<div class="ui floating dropdown theme basic button" data-element="<%= @document.element %>" data-type="<%= @document.elementType %>">
|
|
<span class="text">Theme</span>
|
|
<div class="menu ui transition hidden">
|
|
<% for id, name of @document.themes: %>
|
|
<div class="item" data-value="<%= name %>"><%= (name.charAt(0).toUpperCase() + name.slice(1)) %></div>
|
|
<% end %><!--
|
|
<div class='divider'></div>
|
|
<div class="header">Create Your Own</div>
|
|
<a class="item" href="#">Submit Theme</a> -->
|
|
</div>
|
|
</div>
|
|
<% end %>
|
|
<% if @document.type is 'UI Element' or @document.type is 'UI View' or @document.type is 'UI Collection' or @document.type is 'UI Module': %>
|
|
<div class="ui disabled secondary button">
|
|
Download
|
|
</div>
|
|
<% end %>
|
|
</div>
|
|
<div class="advertisement">
|
|
<% unless 'development' in @getEnvironments(): %>
|
|
<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>
|
|
<% end %>
|
|
</div>
|
|
<% if @tabs?: %>
|
|
<% index = 0 %>
|
|
<% tabCount = 0 %>
|
|
<% numbers = ['zero', 'one', 'two', 'three', 'four', 'five', 'six'] %>
|
|
<% colors = ['red', 'teal', 'blue', 'purple', 'black', 'orange'] %>
|
|
<% for id, name of @tabs: %>
|
|
<% tabCount++ %>
|
|
<% end %>
|
|
<div class="<%= numbers[tabCount] %> item tabular ui menu">
|
|
<% for id, name of @tabs: %>
|
|
<a class="<%= if index == 0 then 'active ' %>item" data-tab="<%= id %>"><%= name %></a>
|
|
<% index++ %>
|
|
<% end %>
|
|
</div>
|
|
<% index = 0 %>
|
|
<div class="fluid vertical ui menu">
|
|
<% for id, name of @tabs: %>
|
|
<a class="<%= if index == 0 then 'active ' %>item" data-tab="<%= id %>"><%= name %></a>
|
|
<% index++ %>
|
|
<% end %>
|
|
</div>
|
|
<% end %>
|
|
</div>
|
|
</div>
|