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.
388 lines
20 KiB
388 lines
20 KiB
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
|
|
<% uiIntroduction = @getCollection("documents").findAll({type: $in: ['UI Introduction']},[{title: 1}]).toJSON() %>
|
|
<% uiProject = @getCollection("documents").findAll({type: $in: ['Semantic Project']},[{title: 1}]).toJSON() %>
|
|
<% uiGuide = @getCollection("documents").findAll({type: $in: ['UI Guide']},[{title: 1}]).toJSON() %>
|
|
<% uiGlobals = @getCollection("documents").findAll({type: $in: ['UI Global']},[{title: 1}]).toJSON() %>
|
|
<% uiElements = @getCollection("documents").findAll({type: $in: ['UI Element']},[{title: 1}]).toJSON() %>
|
|
<% uiCollections = @getCollection("documents").findAll({type: $in: ['UI Collection']},[{title: 1}]).toJSON() %>
|
|
<% uiViews = @getCollection("documents").findAll({type: $in: ['UI View']},[{title: 1}]).toJSON() %>
|
|
<% uiModules = @getCollection("documents").findAll({type: $in: ['UI Module']},[{title: 1}]).toJSON() %>
|
|
<% uiBehavior = @getCollection("documents").findAll({type: $in: ['UI Behavior']},[{title: 1}]).toJSON() %>
|
|
<% uiSpecification = @getCollection("documents").findAll({type: $in: ['UI Specification']},[{title: 1}]).toJSON() %>
|
|
<% currentCollection = @getCollection("documents").findAll({type: $in: [@document.type]},[{title: 1}]).toJSON() %>
|
|
<% pageCount = @pageCount(currentCollection) %>
|
|
<% pageNumber = @getPage(currentCollection, @document.id) %>
|
|
<% pageCollection = @getPageCollection(currentCollection, @document.id) %>
|
|
|
|
<!-- Standard Meta -->
|
|
<meta charset="utf-8" />
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
|
|
|
|
<link rel="image_src" type="image/jpeg" href="/images/logo.png" />
|
|
|
|
<!-- Site Properities -->
|
|
<%- @getBlock('meta').toHTML() %>
|
|
<title><%= @getPreparedTitle() %></title>
|
|
|
|
<meta name="description" content="<%= @getPreparedDescription() %>" />
|
|
<meta name="keywords" content="<%= @getPreparedKeywords() %>" />
|
|
|
|
<% if 'development' in @getEnvironments(): %>
|
|
<link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/definitions/globals/reset.css">
|
|
<link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/definitions/globals/site.css">
|
|
<link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/definitions/elements/icon.css">
|
|
|
|
<link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/definitions/elements/button.css">
|
|
|
|
<link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/definitions/elements/divider.css">
|
|
<link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/definitions/elements/flag.css">
|
|
<link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/definitions/elements/header.css">
|
|
<link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/definitions/elements/image.css">
|
|
<link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/definitions/elements/input.css">
|
|
<link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/definitions/elements/label.css">
|
|
<link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/definitions/elements/list.css">
|
|
<link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/definitions/elements/loader.css">
|
|
<link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/definitions/elements/rail.css">
|
|
<link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/definitions/elements/reveal.css">
|
|
<link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/definitions/elements/segment.css">
|
|
<link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/definitions/elements/step.css">
|
|
|
|
<link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/definitions/collections/breadcrumb.css">
|
|
<link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/definitions/collections/form.css">
|
|
<link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/definitions/collections/grid.css">
|
|
<link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/definitions/collections/menu.css">
|
|
<link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/definitions/collections/message.css">
|
|
<link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/definitions/collections/table.css">
|
|
|
|
<link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/definitions/views/card.css">
|
|
<link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/definitions/views/comment.css">
|
|
<link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/definitions/views/feed.css">
|
|
<link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/definitions/views/item.css">
|
|
<link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/definitions/views/statistic.css">
|
|
|
|
<link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/definitions/modules/modal.css">
|
|
<link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/definitions/modules/accordion.css">
|
|
<link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/definitions/modules/dropdown.css">
|
|
<link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/definitions/modules/nag.css">
|
|
<link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/definitions/modules/popup.css">
|
|
<link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/definitions/modules/progress.css">
|
|
<link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/definitions/modules/rating.css">
|
|
<link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/definitions/modules/sidebar.css">
|
|
<link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/definitions/modules/search.css">
|
|
<link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/definitions/modules/shape.css">
|
|
<link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/definitions/modules/sticky.css">
|
|
<link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/definitions/modules/tab.css">
|
|
<link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/definitions/modules/checkbox.css">
|
|
<link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/definitions/modules/dimmer.css">
|
|
<link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/definitions/modules/transition.css">
|
|
<link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/definitions/modules/video.css">
|
|
<% else: %>
|
|
<link rel="stylesheet" type="text/css" class="ui" href="/build/packaged/definitions/css/semantic.min.css">
|
|
<% end %>
|
|
|
|
<link href='http://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,700italic' rel='stylesheet' type='text/css'>
|
|
|
|
<link rel="stylesheet" type="text/css" href="/stylesheets/doc-icon.css">
|
|
<link rel="stylesheet" type="text/css" href="/stylesheets/semantic.css">
|
|
|
|
<% if 'development' in @getEnvironments(): %>
|
|
<script>
|
|
(function () {
|
|
var
|
|
eventSupport = ('querySelector' in document && 'addEventListener' in window)
|
|
jsonSupport = (typeof JSON !== 'undefined'),
|
|
jQuery = (eventSupport && jsonSupport)
|
|
? '/javascript/library/jquery.js'
|
|
: '/javascript/library/jquery.legacy.js'
|
|
;
|
|
document.write('<script src="' + jQuery + '"><\/script>');
|
|
}());
|
|
</script>
|
|
<% else: %>
|
|
<script>
|
|
(function () {
|
|
var
|
|
eventSupport = ('querySelector' in document && 'addEventListener' in window)
|
|
jsonSupport = (typeof JSON !== 'undefined'),
|
|
jQuery = (eventSupport && jsonSupport)
|
|
? '/javascript/library/jquery.min.js'
|
|
: '/javascript/library/jquery.legacy.min.js'
|
|
;
|
|
document.write('<script src="' + jQuery + '"><\/script>');
|
|
}());
|
|
</script>
|
|
<% end %>
|
|
|
|
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.2/highlight.min.js"></script>
|
|
<script src="/javascript/library/history.js"></script>
|
|
<script src="/javascript/library/easing.js"></script>
|
|
<script src="/javascript/library/tablesort.js"></script>
|
|
<script src="/javascript/library/typing.js"></script>
|
|
|
|
<% if 'development' in @getEnvironments(): %>
|
|
<script src="/build/uncompressed/definitions/globals/site.js"></script>
|
|
<script src="/build/uncompressed/definitions/behaviors/api.js"></script>
|
|
<script src="/build/uncompressed/definitions/behaviors/form.js"></script>
|
|
<script src="/build/uncompressed/definitions/behaviors/state.js"></script>
|
|
<script src="/build/uncompressed/definitions/behaviors/visibility.js"></script>
|
|
<script src="/build/uncompressed/definitions/modules/accordion.js"></script>
|
|
<script src="/build/uncompressed/definitions/modules/checkbox.js"></script>
|
|
<script src="/build/uncompressed/definitions/modules/dimmer.js"></script>
|
|
<script src="/build/uncompressed/definitions/modules/dropdown.js"></script>
|
|
<script src="/build/uncompressed/definitions/modules/modal.js"></script>
|
|
<script src="/build/uncompressed/definitions/modules/nag.js"></script>
|
|
<script src="/build/uncompressed/definitions/modules/popup.js"></script>
|
|
<script src="/build/uncompressed/definitions/modules/progress.js"></script>
|
|
<script src="/build/uncompressed/definitions/modules/rating.js"></script>
|
|
<script src="/build/uncompressed/definitions/modules/search.js"></script>
|
|
<script src="/build/uncompressed/definitions/modules/shape.js"></script>
|
|
<script src="/build/uncompressed/definitions/modules/sidebar.js"></script>
|
|
<script src="/build/uncompressed/definitions/modules/sticky.js"></script>
|
|
<script src="/build/uncompressed/definitions/modules/tab.js"></script>
|
|
<script src="/build/uncompressed/definitions/modules/transition.js"></script>
|
|
<script src="/build/uncompressed/definitions/modules/video.js"></script>
|
|
<% else: %>
|
|
<script src="/build/packaged/definitions/javascript/semantic.min.js"></script>
|
|
<% end %>
|
|
|
|
<script src="/javascript/semantic.js"></script>
|
|
<script>
|
|
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
|
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
|
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
|
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
|
|
|
ga('create', 'UA-44039803-2', 'auto');
|
|
ga('send', 'pageview');
|
|
|
|
</script>
|
|
<script type="text/javascript">
|
|
window.liveSettings = {
|
|
api_key : '9ede3015b9f84c1aabc81ab839c55d74',
|
|
parse_attr : [
|
|
'data-title',
|
|
'data-content'
|
|
],
|
|
detectlang : true,
|
|
autocollect : true,
|
|
ignore_tags : ['i'],
|
|
parse_attr : ['data-title', 'data-content', 'data-text'],
|
|
ignore_class : ["code", "anchor"]
|
|
};
|
|
</script>
|
|
<script type="text/javascript" src="http://cdn.transifex.com/live.js"></script>
|
|
</head>
|
|
<body id="example" class="pushable <%= @document.css %>" ontouchstart="">
|
|
|
|
<div class="ui vertical inverted sidebar menu" id="menu">
|
|
<div class="item">
|
|
<a class="ui logo icon image" href="/">
|
|
<img src="/images/logo.png">
|
|
</a>
|
|
<a href="/"><b>UI Docs</b></a>
|
|
</div>
|
|
<a class="item" href="/build/semantic.zip">
|
|
<i class="download icon"></i> <b>Download</b>
|
|
</a>
|
|
<a class="item" href="/kitchen-sink.html">
|
|
<i class="food icon"></i> <b>Kitchen Sink</b>
|
|
</a>
|
|
<div class="item">
|
|
<div class="ui small <%= if @document.elementType is 'global' then 'active ' %> inverted header">Globals</div>
|
|
<div class="menu">
|
|
<% for element in uiGlobals: %>
|
|
<a class="<%= if element.id is @document.id then 'active ' %>item" href="<%= element.url %>">
|
|
<%= element.title %>
|
|
<% if element.status?: %>
|
|
<span class="ui mini empty yellow circular ui label"></span>
|
|
<% end %>
|
|
</a>
|
|
<% end %>
|
|
</div>
|
|
</div>
|
|
<div class="item">
|
|
<div class="ui small <%= if @document.elementType is 'element' then 'active ' %> inverted header">Elements</div>
|
|
<div class="menu">
|
|
<% for element in uiElements: %>
|
|
<a class="<%= if element.id is @document.id then 'active ' %>item" href="<%= element.url %>">
|
|
<%= element.title %>
|
|
<% if element.status?: %>
|
|
<span class="ui mini empty yellow circular ui label"></span>
|
|
<% end %>
|
|
</a>
|
|
<% end %>
|
|
</div>
|
|
</div>
|
|
<div class="item">
|
|
<div class="ui small <%= if @document.elementType is 'collection' then 'active ' %> inverted header">Collections</div>
|
|
<div class="menu">
|
|
<% for element in uiCollections: %>
|
|
<a class="<%= if element.id is @document.id then 'active ' %>item" href="<%= element.url %>">
|
|
<%= element.title %>
|
|
<% if element.status?: %>
|
|
<span class="ui mini empty yellow circular ui label"></span>
|
|
<% end %>
|
|
</a>
|
|
<% end %>
|
|
</div>
|
|
</div>
|
|
<div class="item">
|
|
<div class="ui small <%= if @document.elementType is 'view' then 'active ' %> inverted header">Views</div>
|
|
<div class="menu">
|
|
<% for element in uiViews: %>
|
|
<a class="<%= if element.id is @document.id then 'active ' %>item" href="<%= element.url %>">
|
|
<%= element.title %>
|
|
<% if element.status?: %>
|
|
<span class="ui mini empty yellow circular ui label"></span>
|
|
<% end %>
|
|
</a>
|
|
<% end %>
|
|
</div>
|
|
</div>
|
|
<div class="item">
|
|
<a href="/module.html" class="ui small <%= if @document.elementType is 'module' then 'active ' %> inverted header">Modules</a>
|
|
<div class="menu">
|
|
<% for element in uiModules: %>
|
|
<a class="<%= if element.id is @document.id then 'active ' %>item" href="<%= element.url %>">
|
|
<%= element.title %>
|
|
<% if element.status?: %>
|
|
<span class="ui mini empty yellow circular ui label"></span>
|
|
<% end %>
|
|
</a>
|
|
<% end %>
|
|
</div>
|
|
</div>
|
|
<div class="item">
|
|
<div class="ui small <%= if @document.elementType is 'behavior' then 'active ' %> inverted header">Behaviors</div>
|
|
<div class="menu">
|
|
<% for element in uiBehavior: %>
|
|
<a class="<%= if element.id is @document.id then 'active ' %>item" href="<%= element.url %>">
|
|
<%= element.title %>
|
|
<% if element.status?: %>
|
|
<span class="ui mini empty yellow circular ui label"></span>
|
|
<% end %>
|
|
</a>
|
|
<% end %>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="ui fixed inverted main menu">
|
|
<div class="container">
|
|
<a class="launch item"><i class="content icon"></i></a>
|
|
<div class="title item">
|
|
<b><%= @document.type %>:</b> <%= @document.title %>
|
|
</div>
|
|
<% if pageNumber > 1 and currentCollection[pageNumber - 2]?: %>
|
|
<a class="icon item" href="<%= currentCollection[pageNumber - 2].url %>"><i class="left chevron icon"></i></a>
|
|
<% else: %>
|
|
<div class="disabled icon item"><i class="left chevron icon"></i></div>
|
|
<% end %>
|
|
<div class="section ui page dropdown link item">
|
|
<span class="count"><%= "#{pageNumber} of #{pageCount}" %></span>
|
|
<div class="menu">
|
|
<% for element, index in currentCollection: %>
|
|
<a class="<%= if element.id is @document.id then 'active ' %>item" href="<%= element.url %>">
|
|
<%= element.title %>
|
|
</a>
|
|
<% end %>
|
|
</div>
|
|
</div>
|
|
<% if pageNumber isnt pageCount and currentCollection[pageNumber]?: %>
|
|
<a class="icon item" href="<%= currentCollection[pageNumber].url %>"><i class="right chevron icon"></i></a>
|
|
<% else: %>
|
|
<div class="disabled icon item"><i class="right chevron icon"></i></div>
|
|
<% end %>
|
|
<div class="right menu">
|
|
<div class="vertically fitted borderless item">
|
|
<iframe src="http://ghbtns.com/github-btn.html?user=semantic-org&repo=semantic-ui&type=watch&count=true"
|
|
allowtransparency="true" frameborder="0" scrolling="0" width="95" height="20"></iframe>
|
|
</div>
|
|
<a class="popup icon github item" data-content="View project on GitHub" href="https://github.com/quirkyinc/semantic">
|
|
<i class="alternate github icon"></i>
|
|
</a>
|
|
<div class="ui language dropdown item" id="languages" data-content="Select Language">
|
|
<i class="world icon"></i>
|
|
<%- @partial('languages') %>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ui black big launch right attached fixed button">
|
|
<i class="content icon"></i>
|
|
<span class="text">Menu</span>
|
|
</div>
|
|
|
|
<div class="pusher">
|
|
<div class="page">
|
|
<div class="full height">
|
|
<%- @content %>
|
|
</div>
|
|
<div class="ui vertical inverted black footer segment">
|
|
<div class="container">
|
|
<div class="ui stackable inverted divided relaxed grid">
|
|
<div class="eight wide column">
|
|
<h3 class="ui inverted header">Help Keep Semantic UI Alive</h3>
|
|
<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>
|
|
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
|
|
<input type="hidden" name="cmd" value="_s-xclick">
|
|
<input type="hidden" name="hosted_button_id" value="7ZAF2Q8DBZAQL">
|
|
<button type="submit" class="ui teal button">Donate Today</button>
|
|
</form>
|
|
</div>
|
|
<div class="four wide column">
|
|
<h5 class="ui teal inverted header">Contribute</h5>
|
|
<div class="ui inverted link list">
|
|
<a class="item" href="mailto:jack@semantic-ui.com?subject=Help Translating">Translate</a>
|
|
<a class="item" href="https://github.com/Semantic-Org/Semantic-UI" target="_blank">Issue Tracker</a>
|
|
<a class="item" href="/cla.html" target="_blank">CLA</a>
|
|
<a class="disabled item">Create Themes</a>
|
|
</div>
|
|
</div>
|
|
<div class="four wide column">
|
|
<h5 class="ui teal inverted header">Semantic Network</h5>
|
|
<div class="ui inverted link list">
|
|
<a class="item" href="https://www.transifex.com/projects/p/semantic-ui-beta/" target="_blank">Translation Hub</a>
|
|
<a class="disabled item">Semantic UI</a>
|
|
<a class="disabled item">Learn Semantic</a>
|
|
<a class="disabled item">Semantic Themes</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="ui basic language modal">
|
|
<i class="close icon"></i>
|
|
<div class="header">The <span class="name"></span> Translation Needs Your Help</div>
|
|
<div class="content">
|
|
<div class="middle aligned image">
|
|
<i class="world icon"></i>
|
|
</div>
|
|
<div class="description">
|
|
<p>This translation is only <b><span class="complete"></span>%</b> complete!</p>
|
|
<div class="ui inverted indicating progress">
|
|
<div class="bar"></div>
|
|
</div>
|
|
<p>We need your help to make Semantic available to people who speak your language.</p>
|
|
<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.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="actions">
|
|
<div class="ui inverted cancel button">No Thanks</div>
|
|
<a href="mailto:jack@semantic-ui.com?subject=Localization%20Help" target="_blank" class="ui inverted approve teal button">
|
|
<i class="mail icon"></i>
|
|
Help Translate
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<script src="/javascript/library/less.js"></script>
|
|
</body>
|
|
|
|
</html>
|